async function add_asset() {
    let serial = document.getElementById("add-asset-serial");
    let tag = document.getElementById("add-asset-tag");
    let category = document.getElementById("add-asset-category");
    let model = document.getElementById("add-asset-model");

    if (serial.value == "") {
        alert("Add asset error:\nThe seiral field cannot be empty!");
        return;
    }

    let serial_data = (serial.value == "") ? null : serial.value;
    let tag_data = (tag.value == "") ? null : tag.value;
    let category_data = (category.value == "N/A") ? null : category.value;
    let model_data = (model.value == "N/A") ? null : model.value;

    let data = {
        "tag": tag_data,
        "serial": serial_data,
        "category": category_data,
        "model": model_data
    }

    await fetch("/add_asset", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
        })

    serial.value = "";
    tag.value = "";
    category.value = "N/A";
    model.value = "N/A";
}

async function add_user() {
    let id = document.getElementById("add-user-id");
    let username = document.getElementById("add-user-name");
    let asset = document.getElementById("add-assigned-asset");
    let card = document.getElementById("add-assigned-card");

    if (username.value == "") {
        alert("Add user error:\nUser name field cannot be null!");
        return;
    }

    let id_data = (id.value == "") ? null : id.value;
    let username_data = (username.value == "") ? null : username.value;
    let asset_data = (asset.value == "null") ? null : asset.value;
    let card_data = (card.value == "null") ? null : card.value;

    let data = {
        "id": id_data,
        "name": username_data,
        "asset": asset_data,
        "card": card_data
    }


    await fetch("/add_user", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
        })

    id.value = "";
    username.value = "";
    asset.value = "";
    card.value = "";

    await populate_data();
}

async function add_card() {
    let display = document.getElementById("add-display-number");
    let card = document.getElementById("add-card-number");

    if (card.value == "") {
        alert("Add card error:\nCard number field cannot be null");
        return;
    }
    let display_data = (display.value == "") ? null : parseInt(display.value);
    let card_data = (card.value == "") ? null : parseInt(card.value);

    if (existing_cards.includes(card_data)) {
        console.log("alert thrown");
        alert("Add card error\nCard number: " + card_data + " already exists!");
        return;
    }

    // For card validation
    await fetch('/card_list')
        .then(response => response.json())
        .then(data => {
            if (data.includes(card_data)) {
                console.log("alert thrown");
                alert("Add card error\nCard number: " + card_data + " already exists!");
                return;
            }
        });

    data = {
        "card_number": card_data,
        "display_number": display_data
    }

    await fetch("/add_card", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
        });

    display.value = "";
    await get_next_card();
}

async function modify_asset() {
    let serial = document.getElementById("modify-asset-serial");
    let tag = document.getElementById("modify-asset-tag");
    let category = document.getElementById("modify-asset-category");
    let model = document.getElementById("modify-asset-model");

    if (tag.value == "") {
        alert("Modify asset error:\nThe tag field cannot be empty!");
        return;
    }

    let serial_data = (serial.value == "") ? null : serial.value;
    let tag_data = (tag.value == "") ? null : tag.value;
    let category_data = (category.value == "N/A") ? null : category.value;
    let model_data = (model.value == "N/A") ? null : model.value;

    let data = {
        "tag": tag_data,
        "serial": serial_data,
        "category": category_data,
        "model": model_data
    }

    await fetch("/modify_asset", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
        })

    serial.value = "";
    tag.value = "";
    category.value = "N/A";
    model.value = "N/A";
}

async function modify_user() {
    let id = document.getElementById("modify-user-id");
    let username = document.getElementById("modify-user-name");
    let asset = document.getElementById("modify-assigned-asset");
    let card = document.getElementById("modify-assigned-card");

    if (id.value == "") {
        alert("modify user error:\nUser ID field cannot be null!");
        return;
    }

    let id_data = (id.value == "") ? null : id.value;
    let username_data = (username.value == "") ? null : username.value;
    let asset_data = (asset.value == "null") ? null : asset.value;
    let card_data = (card.value == "null") ? null : card.value;

    let data = {
        "id": id_data,
        "name": username_data,
        "asset": asset_data,
        "card": card_data
    }


    await fetch("/modify_user", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
        })

    id.value = "";
    username.value = "";
    asset.value = "";
    card.value = "";

    await populate_data();
}

async function populate_available_assets() {

    let elements = document.getElementsByClassName("available-asset-list-data");
    while (elements[0]) {
        elements[0].remove();
    }

    await fetch('/get_available_assets')
        .then(response => response.json())
        .then(data => {
            let add_asset_list = document.getElementById("add-assigned-asset");
            let mod_asset_list = document.getElementById("modify-assigned-asset");
            for (let entry of data) {
                let option = document.createElement("option");
                option.innerHTML = entry;
                option.value = entry;
                option.classList.add("available-asset-list-data");
                mod_asset_list.appendChild(option.cloneNode(true));
                add_asset_list.appendChild(option);
            }
        });

}

async function populate_available_cards() {
    let elements = document.getElementsByClassName("available-card-list-data");
    while (elements[0]) {
        elements[0].remove();
    }
    existing_cards = [];
    await fetch('/get_available_cards')
        .then(response => response.json())
        .then(data => {
            let add_card_list = document.getElementById("add-assigned-card");
            let mod_card_list = document.getElementById("modify-assigned-card");
            for (let entry of data) {
                let option = document.createElement("option");
                option.innerHTML = entry;
                option.value = entry;
                option.classList.add("available-card-list-data");
                mod_card_list.appendChild(option.cloneNode(true));
                add_card_list.appendChild(option);
                existing_cards.push(entry);
            }
        });
}

async function get_next_card() {
    await fetch('/card_list')
        .then(response => response.json())
        .then(data => {
            console.log(data);
            let next_card = parseInt(data.slice(-1)) + 1;
            document.getElementById('add-card-number')
                .value = next_card;
        });
}

async function populate_data() {
    await populate_available_assets();
    await populate_available_cards();
    await get_next_card();
}

let existing_cards = [];

populate_data();