document.getElementById("uploadForm").onsubmit = async (e) => {
    e.preventDefault();

    let form = new FormData(e.target);

    document.getElementById("loading").style.display = "block";

    let res = await fetch("/analyze_report", {
        method: "POST",
        body: form
    });

    let data = await res.json();

    console.log(data);

    document.getElementById("loading").style.display = "none";

    let status = data.analysis.status;

let color = "#28a745";

if(status === "Prediabetic")
    color = "#ff9800";

if(status === "Diabetic")
    color = "#dc3545";

document.getElementById("result").innerHTML = `
<div class="result-card">

    <h2>🩺 Diabetes Assessment</h2>

    <h3 style="color:${color}">
        ${data.analysis.status}
    </h3>

    <p><b>Risk Level:</b> ${data.analysis.risk_level}</p>

    <hr>

    <h4>Detected Values</h4>

    <p><b>FBS:</b>
    ${data.detected_values.fbs ?? "Not Found"} mg/dL</p>

    <p><b>PPBS:</b>
    ${data.detected_values.ppbs ?? "Not Found"} mg/dL</p>

    <p><b>HbA1c:</b>
    ${data.detected_values.hba1c ?? "Not Found"} %</p>

    <hr>

    <h4>Explanation</h4>

    <ul>
        ${data.explanation.map(item =>
            `<li>${item}</li>`
        ).join("")}
    </ul>

    <hr>

    <h4>Summary</h4>

    <ul>
        ${data.summary.map(item =>
            `<li>${item}</li>`
        ).join("")}
    </ul>

</div>
`;
};