let dateOptions={month:"short",year:"numeric"};function edit(e){document.querySelector("#timelineItem"+e).classList.toggle("editing"),document.querySelector("#grade"+e).removeAttribute("disabled"),document.querySelector("#course"+e).removeAttribute("disabled")}function updateItem(e,t){t.preventDefault();let n=new FormData;n.append("dateFrom",document.querySelector("#dateFrom"+e).value),n.append("dateTo",document.querySelector("#dateTo"+e).value),n.append("grade",document.querySelector("#grade"+e).value),n.append("course",document.querySelector("#course"+e).value),fetch("/api/timelineData/edu/"+e,{method:"PUT",body:n,headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector("#timelineItem"+e).classList.toggle("editing"),document.querySelector("#grade"+e).setAttribute("disabled",""),void document.querySelector("#course"+e).setAttribute("disabled","");t.json().then((e=>{alert(e.message)}))}))}document.addEventListener("DOMContentLoaded",(()=>{document.querySelector("#dateFrom").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let n=document.createElement("form");n.id="timelineItem"+e,n.classList.add("timelineItem"),n.onsubmit=t=>updateItem(e,t),n.innerHTML=`\n                    <div class="modifyBtnContainer">\n                        <button class="edit" type="button" id="edit${e}" onclick="edit(${e})"><i class="fa-solid fa-pen-to-square"></i></button>\n                        <button class="delete" type="button" id="delete${e}"><i class="fa-solid fa-trash"></i></button>\n                    </div>\n                    <div class="dateContainer formControl">\n                        <input type="date" name="dateFrom${e}" id="dateFrom${e}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t[e].startPeriod}">\n                        -\n                        <input type="date" name="dateTo${e}" id="dateTo${e}" value="${t[e].endPeriod}">\n                    </div>\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(t[e].startPeriod).toLocaleString("en-gb",dateOptions)} - ${new Date(t[e].endPeriod).toLocaleString("en-gb",dateOptions)}</h3>\n                    <div class="gradeContainer formControl">\n                        <label for="grade${e}">Grade:</label>\n                        <input type="text" name="grade${e}" id="grade${e}" value="${t[e].grade}" disabled>\n                    </div>\n\t\t\t\t\t<div class="formControl">\n\t\t\t\t\t    <textarea class="courseText" name="course${e}" id="course${e}" cols="10" rows="3" disabled>${t[e].course}</textarea>\n\t\t\t\t\t</div>\n\t\t\t\t\t\n                    <div class="error hidden" id="eduError">\n                        <button class="close" type="button">&times;</button>\n                        <div></div>\n                    </div>\n\t\t\t\t\t<input type="submit" value="Change">\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}else 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"}));