document.addEventListener("DOMContentLoaded", () => {

    // elements

    let supply_description = document.getElementById("supplyDescription");
    let supply_price = document.getElementById("supplyPrice");

    let supply_form = document.getElementById("supplyForm");
    let status_info = document.getElementById("statusInfo");
    let supply_submit_button = document.getElementById("supplySubmitBtn");

    // custom submit method

    supply_form.addEventListener("submit", (event) => {

        supply_submit_button.disabled = true;

        event.preventDefault(); // Don't do the default submit action!

        if (isNaN(parseFloat(supply_price.value)) || supply_description.value == "") {
            status_info.innerText = "Please enter a description and price."
            supply_submit_button.disabled = false;
        }

        let xhr = new XMLHttpRequest();
        let formData = new FormData(supply_form);

        xhr.addEventListener("load", (event) => {

            status_ = event.target.status;
            response_ = event.target.responseText;

            if (status_ == 200 && response_ == "success") {
                status_info.innerText = "Success.";
                window.location.replace("/");
            }
            else {
                status_info.classList.add("errorText");
                status_info.innerText = "An error occured.";
                window.setTimeout(() => { window.location.reload() }, 5000);
            }

        })

        xhr.addEventListener("error", (event) => {
            status_info.classList.add("errorText");
            status_info.innerText = "An error occured.";
            window.setTimeout(() => { window.location.reload() }, 5000);
        })

        xhr.open("POST", "/api/supply");
        xhr.send(formData);

    });

})