document.addEventListener("DOMContentLoaded", () =>
{
    fetch("getOwners.php").then(res => res.json().then(json =>
    {
        if(json.message === "ok")
        {
            let body = "";
            for (const owner of json.owners)
            {
                body += `<option value="${owner.People_ID}">${owner.People_name} - ${owner.People_licence}</option>`;
            }
            body += `<option value="new">New Owner</option>`;
            document.querySelector("#owner").innerHTML = body;
        }
    }));

    fetch("getVehicles.php").then(res => res.json().then(json =>
    {
        if (json.message === "ok")
        {
            let body = "";
            for (const owner of json.vehicles)
            {
                body += `<option value="${owner.Vehicle_ID}">${owner.Vehicle_type} - ${owner.Vehicle_licence}</option>`;
            }
            body += `<option value="new">New Vehicle</option>`;
            document.querySelector("#vehicle").innerHTML = body;
        }
    }));


    fetch("getOffences.php").then(res => res.json().then(json =>
    {
        if (json.message === "ok")
        {
            let body = "";
            for (const owner of json.offences)
            {
                body += `<option value="${owner.Offence_ID}">${owner.Offence_description} - ${owner.Offence_maxFine}</option>`;
            }
            body += `<option value="new">New Vehicle</option>`;
            document.querySelector("#offence").innerHTML = body;
        }
    }));

    fetch("getReports.php").then(res => res.json().then(json =>
    {
        if (json.message === "ok")
        {
            document.querySelector("#reportsResults thead tr").innerHTML = "";
            document.querySelector("#reportsResults tbody").innerHTML = "";

            for (const key of Object.keys(json.data[0]))
            {
                let header = key.substring(key.indexOf("_") + 1)
                header = header.charAt(0).toUpperCase() + header.slice(1);
                document.querySelector("#reportsResults thead tr").innerHTML += `<th>${header}</th>`;
            }

            let body = "";
            for (const row of json.data)
            {
                body += "<tr>";
                for (const key of Object.keys(row))
                {
                    body += `<td>${(row[key] === "null" || row[key] === null) ? "N/A" : row[key]}</td>`;
                }
                body += "</tr>";
            }

            document.querySelector("#reportsResults tbody").innerHTML = body;
        }
    }));

});

document.querySelector("#owner").addEventListener("change", e =>
{
    let inputs = document.querySelectorAll("#addOwner input");
    if (e.target.value === "new")
    {
        document.querySelector("#addOwner").classList.add("shown");
        for (const input of inputs)
        {
            input.setAttribute("required", "");
        }
    }
    else
    {
        document.querySelector("#addOwner").classList.remove("shown");
        for (const input of inputs)
        {
            input.removeAttribute("required");
        }
    }
});

document.querySelector("#vehicle").addEventListener("change", e =>
{
    let inputs = document.querySelectorAll("#addVehicle input");
    if (e.target.value === "new")
    {
        document.querySelector("#addVehicle").classList.add("shown");
        for (const input of inputs)
        {
            input.setAttribute("required", "");
        }
    }
    else
    {
        document.querySelector("#addVehicle").classList.remove("shown");
        for (const input of inputs)
        {
            input.removeAttribute("required");
        }
    }
});

document.querySelector("#reports").addEventListener("click", e =>
{
    e.preventDefault();
    let formData = new FormData();
    formData.append("incidentReport", document.querySelector("#incidentReport").value);
    formData.append("incidentDate", document.querySelector("#incidentDate").value);
    if (document.querySelector("#owner").value === "new")
    {
        formData.append("name", document.querySelector("#name").value);
        formData.append("address", document.querySelector("#address").value);
        formData.append("licence", document.querySelector("#licence").value);
    }
    else
    {
        formData.append("peopleID", document.querySelector("#owner").value);
    }

    if (document.querySelector("#vehicle").value === "new")
    {
        formData.append("type", document.querySelector("#type").value);
        formData.append("colour", document.querySelector("#colour").value);
        formData.append("plateNumber", document.querySelector("#plateNum").value);
    }
    else
    {
        formData.append("vehicleID", document.querySelector("#vehicle").value);
    }
    formData.append("offenceID", document.querySelector("#offence").value);

    fetch("newReport.php",{
        method: "POST",
        body: formData
    }).then(res => res.json().then(json =>
    {
        if (json.message === "ok")
        {
            window.location.reload();
        }
        else
        {
            alert("Error adding report");
        }
    }));


});