$(function () {

    const getAll = async (msg) => {
        try {
            $("#studentList").text("Finding Student Informtion...");
            let response = await fetch(`/api/employee/GetAll`);
            if (!response.ok)
                throw new Error(`Status -${response.status},Text-${response.statusText}`);
            let data = await response.json();
            buildStudentList(data);
            msg === "" ?
                $("#status").text("Students loaded") : $("#status").text(`${msg}=Students Loaded`);
        } catch (error) {
            $("#status").text(error.message);
        }
    }; // get all

    const clearModalFields = () => {
        $("#TextBoxTitle").val("");
        $("#TextBoxFirstname").val("");
        $("#TextBoxLastname").val("");
        $("#TextBoxPhone").val("");
        $("#TextBoxEmail").val("");
        sessionStorage.removeItem("Id");
        sessionStorage.removeItem("DivisionId");
        sessionStorage.removeItem("Timer");
    };

    $("#studentList").click((e) => {
        clearModalFields();
        if (!e) e = window.event;
        let Id = e.target.parentNode.id;
        if (Id !== "status" && Id !== "heading") {
            Id = e.target.id;
        }
        if (Id !== "status" && Id !== "heading") {
            let data = JSON.parse(sessionStorage.getItem("allstudents"));
            data.map(student => {
                if (student.id === parseInt(Id)) {
                    $("#TextBoxTitle").val(student.title);
                    $("#TextBoxFirstname").val(student.firstname);
                    $("#TextBoxLastname").val(student.lastname);
                    $("#TextBoxPhone").val(student.phoneno);
                    $("#TextBoxEmail").val(student.email);
                    sessionStorage.setItem("Id", student.id);
                    sessionStorage.setItem("DivisionId", student.divisionId);
                    sessionStorage.setItem("Timer", student.timer);
                    $("#modalstatus").text("update data");
                    $("#theModal").modal("toggle");
                }
            });
        } else {
            return false;
        }
    });

    $("#updatebutton").click(async (e) => {
        try {
            stu = new Object();
            stu.Email = $("#TextBoxEmail").val();
            stu.Title = $("#TextBoxTitle").val();
            stu.FirstName = $("#TextBoxFirstname").val();
            stu.LastName = $("#TextBoxLastname").val();
            stu.PhoneNo = $("#TextBoxPhone").val();

            stu.Id = sessionStorage.getItem("Id");
            stu.DepartmentId = sessionStorage.getItem("DepartmentId");
            stu.Timer = sessionStorage.getItem("Timer");
            let response = await fetch(`/api/employee`, {
                method: "PUT",
                headers: {
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify(stu)
            });

            if (response.ok) {
                let data = await response.json();
                $("#status").text(data.msg);
            } else {
                throw new Error(`Status - ${response.status}, problem server side, see server console`);
            }
            $("#theModal").modal("toggle");
        } catch (error) {
            $("#status").text(error.message);
        }
    });

    const buildStudentList = (data) => {
        $("#studentList").empty();
        div = $(`<div class="list-group-item text-white bg-secondary row d-flex" id="status">Student Info</div>
               <div class="list-group-item row d-flex text-center" id="heading">
               <div class="col-4 h4">Title</div>
               <div class="col-4 h4">First</div>
               <div class="col-4 h4">Last</div> </div>`);
        div.appendTo($("#studentList"));
        sessionStorage.setItem("allstudents", JSON.stringify(data));
        data.map(stu => {
            btn = $(`<button class="list-group-item row d-flex" id ="${stu.id}">`);
            btn.html(`<div class="col-4" id ="studenttitle${stu.id}">${stu.title}</div>
                     <div class="col-4" id ="studentfname${stu.id}">${stu.firstname}</div>
                     <div class="col-4" id ="studentlastnam${stu.id}">${stu.lastname}</div>`
            );
            btn.appendTo($("#studentList"));
        });
    };

    getAll("");

});