let dateOptions = {month: 'short', year: 'numeric'};
document.addEventListener('DOMContentLoaded', () =>
{
    // check if the user is logged in, if not redirect to log in
    /*    fetch('/api/user/isLoggedIn').then(res => 
        {
            if (!res.ok)
            {
                window.location.href = './';
            }
        });*/
    document.querySelector("#dateFrom").max = new Date().toISOString().split("T")[0];


    fetch("/api/timelineData/edu").then(res =>
    {
        res.json().then(json =>
        {
            if (res.ok)
            {
                for (let i = 0; i < json.length; i++)
                {
                    let timelineItem = document.createElement("form")
                    timelineItem.id = "timelineItem" + i;
                    timelineItem.classList.add("timelineItem");
                    timelineItem.onsubmit = e => updateItem(i, e);
                    timelineItem.innerHTML = `
                    <div class="modifyBtnContainer">
                        <button class="edit" type="button" id="edit${i}" onclick="edit(${i})"><i class="fa-solid fa-pen-to-square"></i></button>
                        <button class="delete" type="button" id="delete${i}"><i class="fa-solid fa-trash"></i></button>
                    </div>
                    <div class="dateContainer formControl">
                        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${json[i]['startPeriod']}">
                        -
                        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${json[i]['endPeriod']}">
                    </div>
					<h3 class="timelineHeader">${new Date(json[i]["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${new Date(json[i]["endPeriod"]).toLocaleString('en-gb', dateOptions)}</h3>
                    <div class="gradeContainer formControl">
                        <label for="grade${i}">Grade:</label>
                        <input type="text" name="grade${i}" id="grade${i}" value="${json[i]['grade']}" disabled>
                    </div>
					<div class="formControl">
					    <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
					</div>
					
                    <div class="error hidden" id="eduError">
                        <button class="close" type="button">&times;</button>
                        <div></div>
                    </div>
					<input type="submit" value="Change">
				`;
                    document.getElementById("edu").appendChild(timelineItem);
                }
                return;
            }
            document.querySelector("#edu").innerHTML = "No education data found";
        })
    });
})

document.querySelector("#navOpen").addEventListener("click", e =>
{
    document.querySelector("nav.sideNav").style.removeProperty("width");
    document.querySelector("main.editor").style.removeProperty("margin-left");
    e.target.style.removeProperty("visibility");
});

document.querySelector("#navClose").addEventListener("click", () =>
{
    document.querySelector("nav.sideNav").style.width = "0";
    document.querySelector("main.editor").style.marginLeft = "0";
    document.querySelector("#navOpen").style.visibility = "visible";
});

function edit(i)
{
    document.querySelector("#timelineItem" + i).classList.toggle("editing");
    document.querySelector("#grade" + i).removeAttribute("disabled");
    document.querySelector("#course" + i).removeAttribute("disabled");
}

function updateItem(i, e)
{
    e.preventDefault();
    let data = new FormData();
    data.append("dateFrom", document.querySelector("#dateFrom" + i).value);
    data.append("dateTo", document.querySelector("#dateTo" + i).value);
    data.append("grade", document.querySelector("#grade" + i).value);
    data.append("course", document.querySelector("#course" + i).value);
    
    fetch("/api/timelineData/edu/" + i, {
        method: "PUT",
        body: data,
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            document.querySelector("#timelineItem" + i).classList.toggle("editing");
            document.querySelector("#grade" + i).setAttribute("disabled", "");
            document.querySelector("#course" + i).setAttribute("disabled", "");
            return;
        }
        
        res.json().then(json =>
        {
            alert(json.message);
        })
        
    })
}