let dateOptions = {month: 'short', year: 'numeric'};
let textareaLoaded = false;
let editors = {};
let posts = null;
document.addEventListener('DOMContentLoaded', () =>
{
    // check if the userData is logged in, if not redirect to log in
    fetch('/api/user/isLoggedIn').then(res =>
    {
        if (!res.ok)
        {
            window.location.href = './';
        }
    });

    document.querySelector("#dateFromE").max = new Date().toISOString().split("T")[0];
    document.querySelector("#dateFromW").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++)
            {
                addEduData(json[i].ID, json[i].startPeriod, json[i].endPeriod, json[i].grade, json[i].course);
            }
            return;
        }
        document.querySelector("#edu").innerHTML = "No education data found";
    }));

    fetch("/api/timelineData/work").then(res => res.json().then(json =>
    {
        if (res.ok)
        {
            for (let i = 0; i < json.length; i++)
            {
                let endPeriod = json[i].endPeriod === "0000-00-00" ? "Present" : json[i].endPeriod;
                addWorkData(json[i].ID, json[i].startPeriod, endPeriod, json[i].companyName, json[i].area, json[i].title);
            }
            return;
        }
        document.querySelector("#edu").innerHTML = "No education data found";
    }));

    fetch("/api/projectData").then(res => res.json().then(json =>
    {
        if (res.ok)
        {
            json.forEach(item =>
            {
                addProject(item["ID"], (item["isMainProject"] === 1 ? "true" : "false"), (item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
            })
            return;
        }
        document.querySelector("#projList").innerHTML = "No project data found";
    }))

    fetch("/api/blog/post").then(res => res.json().then(json =>
    {
        if (res.ok)
        {
            posts = json;
            json.forEach(item =>
            {
                addPostInfo(item["ID"], item["title"], item["dateCreated"], item["dateModified"]);
            })
        }
    }));

    // CKEditor stuff
    createEditors("CKEditorAddPost", "CKEditorEditPost");
});

document.querySelector("body").addEventListener("click", () =>
{
    if (textareaLoaded)
    {
        return;
    }

    const tx = document.querySelectorAll("main.editor textarea");
    console.log(tx)
    for (let i = 0; i < tx.length; i++)
    {
        console.log("height: " + tx[i].scrollHeight + "px");
        tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
        tx[i].oninput = e =>
        {
            e.target.style.height = "0";
            e.target.style.height = (e.target.scrollHeight) + "px";
        };
    }
    textareaLoaded = true;
});

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";
});

document.querySelector("#addEdu").addEventListener("submit", e =>
{
    e.preventDefault();
    let data = new FormData();
    data.append("dateFrom", document.querySelector("#dateFromE").value);
    data.append("dateTo", document.querySelector("#dateToE").value);
    data.append("grade", document.querySelector("#grade").value);
    data.append("course", document.querySelector("#courseTitle").value);
    
    fetch("/api/timelineData/edu", {
        method: "POST",
        body: data,
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res => res.json().then(json => 
    {
        if (res.ok)
        {
            addEduData(json.ID, data.get("dateFrom"), data.get("dateTo"), data.get("grade"), data.get("course"), true);
            document.querySelector("#addEdu").reset();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        showErrorMessage(json.error, "edu");
    }));
});

document.querySelector("#addWork").addEventListener("submit", e =>
{
    e.preventDefault();
    let data = new FormData();
    data.append("dateFrom", document.querySelector("#dateFromW").value);
    data.append("dateTo", document.querySelector("#dateToW").value);
    data.append("companyName", document.querySelector("#company").value);
    data.append("area", document.querySelector("#area").value);
    data.append("title", document.querySelector("#jobTitle").value);

    fetch("/api/timelineData/work", {
        method: "POST",
        body: data,
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res => res.json().then(json =>
    {
        if (res.ok)
        {
            let endPeriod = data.get("dateTo") === "" ? "Present" : data.get("dateTo ");
            addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
            document.querySelector("#addWork").reset();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }
        showErrorMessage(json.error, "work");
    }));
});

document.querySelector("#addProj").addEventListener("submit", e =>
{
    e.preventDefault();
    let data = new FormData();
    data.append("title", document.querySelector("#projTitle").value);
    data.append("isMainProject", document.querySelector("#isMainProject").checked ? "true" : "false");
    data.append("information", document.querySelector("#projInfo").value);
    data.append("projectLink", (document.querySelector("#projLink").value) ? document.querySelector("#projLink").value : "N/A");
    data.append("gitLink", document.querySelector("#gitLink").value);

    let imgData = new FormData();
    imgData.append("img", document.querySelector("#projImg").files[0]);

    let newProjectID = 0;

    fetch("/api/projectData", {
        method: "POST",
        body: data,
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res => res.json().then(newProjectData =>
    {
        if (res.ok)
        {
            if (imgData.get("img") === "undefined")
            {
                addProject(newProjectData.ID, data.get("isMainProject"),"../imgs/placeholder.png", data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
                document.querySelector("#addProj").reset();
                return;
            }

            newProjectID = newProjectData.ID;

            return fetch("/api/projectImage/" + newProjectData.ID, {
                method: "POST",
                body: imgData,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem("token")
                }
            });
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        showErrorMessage(newProjectData.error, "proj");

    }).then(res => res.json().then(newProjectImage =>
    {
        if (res.ok)
        {
            addProject(newProjectID, data.get("isMainProject"), newProjectImage.imgLocation, data.get("title"), data.get("information"), data.get("projectLink"), data.get("gitLink"));
            document.querySelector("#addProj").reset();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        showErrorMessage(newProjectImage.error, "proj");

    })));
});

document.querySelector("#addPostForm").addEventListener("submit", e =>
{
    e.preventDefault();
    if (editors["CKEditorAddPost"].getData() === "")
    {
        showErrorMessage("Post body cannot be empty", "addPost");
        return;
    }

    let data = new FormData();
    data.append("title", document.querySelector("#postTitle").value);
    data.append("featured", document.querySelector("#isFeatured").checked ? "1" : "0");
    data.append("body", editors["CKEditorAddPost"].getData());
    data.append("dateCreated", new Date().toISOString().slice(0, 19).replace('T', ' '));
    data.append("categories", document.querySelector("#postCategories").value);
    data.append("headerImg", document.querySelector("#headerImg").files[0]);

    fetch("/api/blog/post", {
        method: "POST",
        body: data,
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res => res.json().then(json =>
    {
        if (res.ok)
        {
            document.querySelector("#addPostForm").reset();
            editors["CKEditorAddPost"].setData("");
            addPostInfo(json.ID, data.get("title"), data.get("dateCreated"), data.get("dateModified"));
            showSuccessMessage("Post added successfully", "addPost");
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        res.json().then(json => showErrorMessage(json.error, "addPost"));
    }));

});

document.querySelector("#editPostForm").addEventListener("submit", e =>
{
    e.preventDefault();
    let id = document.querySelector("#editPostForm input[type='submit']").id;
    if (id === "")
    {
        showErrorMessage("Currently not editing any post", "editPost");
        return;
    }

    if (editors["CKEditorEditPost"].getData() === "")
    {
        showErrorMessage("Post body cannot be empty", "editPost");
        return;
    }

    let data = {};
    data["title"] = document.querySelector("#editPostTitle").value;
    data["featured"] = document.querySelector("#editIsFeatured").checked ? "1" : "0";
    data["body"] = editors["CKEditorEditPost"].getData();
    data["dateModified"] = new Date().toISOString().slice(0, 19).replace('T', ' ');
    data["categories"] = document.querySelector("#editPostCategories").value;

    let imgData = new FormData();
    imgData.append("headerImg", document.querySelector("#editHeaderImg").files[0]);

    fetch("/api/blog/post/" + id, {
        method: "PATCH",
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            if (imgData.get("headerImg") === "undefined")
            {
                document.querySelector("#editPostForm").reset();
                document.querySelector("#editPostForm input[type='submit']").id = "";
                editors["CKEditorEditPost"].setData("");
                showSuccessMessage("Post edited successfully", "editPost");
                return;
            }

            return fetch("/api/blog/headerImage/" + id, {
                method: "POST",
                body: imgData,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem("token")
                }
            });

        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        res.json().then(json => showErrorMessage(json.error, "editPost"));
    }).then(res => res.json().then(json =>
    {
        if (res.ok)
        {
            document.querySelector("#editPostForm").reset();
            document.querySelector("#editPostForm input[type='submit']").id = "";
            editors["CKEditorEditPost"].setData("");
            showSuccessMessage("Post edited successfully", "editPost");
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        showErrorMessage(json.error.message, "editPost");
    }));

});

document.querySelector("#goToCV").addEventListener("click", () =>
{
    textareaLoaded = false;
    addActiveClass("goToCV");
    goToPage("curriculumVitae");
});

document.querySelector("#goToProjects").addEventListener("click", () =>
{
    textareaLoaded = false;
    addActiveClass("goToProjects");
    goToPage("projects");
});

document.querySelector("#blog").addEventListener("click", () =>
{
    // document.querySelector("#blog").classList.add("active");
    document.querySelector("nav.sideNav ul li.dropdown ul").classList.toggle("active");
    document.querySelector("#blog i.fa").classList.toggle("fa-caret-down");
    document.querySelector("#blog i.fa").classList.toggle("fa-caret-right");
});

document.querySelector("#goToAddPost").addEventListener("click", () =>
{
    textareaLoaded = false;
    addActiveClass("goToAddPost");
    goToPage("addPost");
    document.querySelector("#blog").classList.add("active");
});

document.querySelector("#goToEditPost").addEventListener("click", () =>
{
    textareaLoaded = false;
    addActiveClass("goToEditPost");
    goToPage("editPost");
    document.querySelector("#blog").classList.add("active");
});

document.querySelector("#logout").addEventListener("click", () =>
{
    fetch("/api/user/logout").then(res =>
    {
        if (res.ok)
        {
            window.location.reload();
        }
    });
});

document.querySelector("#eduError .close").addEventListener("click", () =>
    document.querySelector("#eduError").classList.toggle("hidden"));

document.querySelector("#workError .close").addEventListener("click", () =>
    document.querySelector("#workError").classList.toggle("hidden"));

document.querySelector("#projError .close").addEventListener("click", () =>
    document.querySelector("#projError").classList.toggle("hidden"));

document.querySelector("#addPostError .close").addEventListener("click", () =>
    document.querySelector("#addPostError").classList.toggle("hidden"));

document.querySelector("#addPostSuccess .close").addEventListener("click", () =>
    document.querySelector("#addPostSuccess").classList.toggle("hidden"));

document.querySelector("#editPostError .close").addEventListener("click", () =>
    document.querySelector("#editPostError").classList.toggle("hidden"));

document.querySelector("#editPostSuccess .close").addEventListener("click", () =>
    document.querySelector("#editPostSuccess").classList.toggle("hidden"));


/**
 * Goes to the page with the given id of the section
 * @param {string} id - The id of the section to go to
 */
function goToPage(id)
{
    document.querySelectorAll(".editor section").forEach(element =>
    {
        element.style.display = "none";
        if (element.id === id)
        {
            element.style.display = "flex";
        }
    });

}

/**
 * Removes the active class from all nav items and adds it to the one with the given id
 * @param {string} id - The id to add the active class to
 */
function addActiveClass(id)
{
    document.querySelectorAll("nav.sideNav ul li a").forEach(element =>
    {
        element.classList.remove("active");
        if (element.id === id)
        {
            element.classList.add("active");
        }
    });
}


/**
 * Toggles the editing mode of the project item with the given id
 * @param id {number} - the id of the project item from the database
 */
function editProjectItem(id)
{
    document.querySelector(`#projectItem${id}`).classList.toggle("editing");
    document.querySelector(`#title${id}proj`).toggleAttribute("disabled");
    document.querySelector(`#info${id}proj`).toggleAttribute("disabled");
}

/**
 * Creates new CKEditor instances
 * @param ids {string[]} - the ids of the divs to create editors for
 */
function createEditors(...ids)
{
    ids.forEach(id =>
    {
        ClassicEditor.create(document.querySelector(`#${id}`), {
            placeholder: "Write something amazing...",
            simpleUpload: {
                uploadUrl: '/api/blog/uploadPostImage',
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token")
                }
            }
        }).then(CKEditor =>
        {
            editors[id] = CKEditor;
        }).catch(error =>
        {
            console.error('Oops, something went wrong!');
            console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
            console.warn('Build id: 1eo8ioyje2om-vgar4aghypdm');
            console.error(error);
        });
    })
}

/**
 * Edits the post with the given id
 * @param {number} id - the id of the post from the database
 */
function editPostItem(id)
{
    posts.forEach(post =>
    {
        if (post.ID === id)
        {
            document.querySelector("#editPostTitle").value = post.title;
            document.querySelector("#editIsFeatured").checked = (post.featured === 1);
            document.querySelector("#editPostCategories").value = post.categories;
            editors["CKEditorEditPost"].setData(post.body);
            document.querySelector("#editPostForm input[type='submit']").id = id;
        }
    })
}

/**
 * Shows respective error message for form
 * @param {string} message - The error message to show
 * @param {string} form - The form to show the error message for
 */
function showErrorMessage(message, form)
{
    document.querySelector(`#${form}Error`).classList.remove("hidden");
    document.querySelector(`#${form}Error div`).innerText = message;
}

/**
 * Shows respective success message for form
 * @param message - The success message to show
 * @param form - The form to show the success message for
 */
function showSuccessMessage(message, form)
{
    document.querySelector(`#${form}Success`).classList.remove("hidden");
    document.querySelector(`#${form}Success div`).innerText = message;
}

/**
 * Switches the timeline item between edit and view mode
 * @param id - the id of the timeline item from the database
 */
function editCVItem(id)
{
    textareaLoaded = false;
    document.querySelector(`#timelineItem${id}`).classList.toggle("editing");
    if (id.includes("e"))
    {
        document.querySelector(`#grade${id}`).toggleAttribute("disabled");
        document.querySelector(`#course${id}`).toggleAttribute("disabled");
        return;
    }
    document.querySelector(`#companyName${id}`).toggleAttribute("disabled");
    document.querySelector(`#area${id}`).toggleAttribute("disabled");
    document.querySelector(`#jobTitle${id}`).toggleAttribute("disabled");
}

/**
 * Updates the education timeline item with the given id
 * @param {number} ID - the id of the course timeline item from the database
 * @param {string} startPeriod - the start date of the course
 * @param {string} endPeriod - the end date of the course
 * @param {string} grade - the grade of the course
 * @param {string} course - the name of the course
 * @param {boolean} prepend - whether to prepend the timeline item to the timeline
 */
function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
{
    let id = ID + "e";
    let timelineItem = document.createElement("form")
    timelineItem.id = "timelineItem" + id;
    timelineItem.classList.add("timelineItem");
    timelineItem.onsubmit = e => updateEduItem(ID, e);
    timelineItem.innerHTML = `
    <div class="modifyBtnContainer">
        <button class="edit" type="button" id="edit${id}" onclick="editCVItem('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
        <button class="delete" type="button" id="delete${id}" onclick="deleteEduItem(${ID})"><i class="fa-solid fa-trash"></i></button>
    </div>
    <div class="dateContainer formControl">
        <input type="date" name="dateFrom${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${startPeriod}">
        -
        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod}">
    </div>
    <h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
    <div class="gradeContainer formControl">
        <label for="grade${id}">Grade:</label>
        <input type="text" name="grade${id}" id="grade${id}" value="${grade}" disabled>
    </div>
    <div class="formControl">
        <textarea class="courseText" name="course${id}" id="course${id}" cols="10" rows="3" disabled>${course}</textarea>
    </div>
    
    <div class="error hidden" id="eduError${id}">
        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
        <div></div>
    </div>
    <input type="submit" value="Change">
    `;
    if (prepend)
    {
        document.querySelector("#edu").prepend(timelineItem);
        return;
    }
    document.getElementById("edu").appendChild(timelineItem);
}

/**
 * Adds a new work timeline item to the page
 * @param {number} ID - the id of the work timeline item from the database
 * @param {string} startPeriod - the start date of the job
 * @param {string} endPeriod - the end date of the job
 * @param {string} companyName - the name of the company
 * @param {string} area - the area of the company
 * @param {string} jobTitle - the job title
 * @param {boolean} prepend - whether to prepend the timeline item to the timeline
 */
function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, prepend=false)
{
    let id = ID + "w";
    let timelineItem = document.createElement("form")
    timelineItem.id = "timelineItem" + id;
    timelineItem.classList.add("timelineItem");
    timelineItem.onsubmit = e => updateWorkItem(ID, e);
    timelineItem.innerHTML = `
    <div class="modifyBtnContainer">
        <button class="edit" type="button" id="edit${id}" onclick="editCVItem('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
        <button class="delete" type="button" id="delete${id}" onclick="deleteWorkItem(${ID})"><i class="fa-solid fa-trash"></i></button>
    </div>
    <div class="dateContainer formControl">
        <input type="date" name="dateFrom${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${startPeriod}">
        -
        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod === 'Present' ? '' : endPeriod}">
    </div>
    <h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${endPeriod === 'Present' ? 'Present' : new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
    <div class="companyAreaContainer formControl">
        <input type="text" name="companyName${id}" id="companyName${id}" value="${companyName}" disabled>
        -
        <input type="text" name="area${id}" id="area${id}" value="${area}" disabled>                      
    </div>
    <div class="formControl">
        <textarea class="jobTitleText" name="jobTitle${id}" id="jobTitle${id}" cols="10" rows="3" disabled>${jobTitle}</textarea>
    </div>
    
    <div class="error hidden" id="workError${id}">
        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
        <div></div>
    </div>
    <input type="submit" value="Change">
	`;
    if (prepend)
    {
        document.querySelector("#work").prepend(timelineItem);
        return;
    }
    
    document.getElementById("work").appendChild(timelineItem);
}

/**
 * Updates the edu timeline item with the given id
 * and data from the form
 * @param {number} id - the id of the edu timeline item from the database
 * @param {SubmitEvent} e - the event that triggered the function
 */
function updateEduItem(id, e)
{
    e.preventDefault();
    let data = {}
    data["dateFrom"] = document.querySelector(`#dateFrom${id}e`).value;
    data["dateTo"] = document.querySelector(`#dateTo${id}e`).value;
    data["grade"] = document.querySelector(`#grade${id}e`).value;
    data["course"] = document.querySelector(`#course${id}e`).value;
    
    fetch("/api/timelineData/edu/" + id, {
        method: "PATCH",
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            document.querySelector(`#timelineHeader${id}e`).innerHTML = new Date(document.querySelector(`#dateFrom${id}e`).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector(`#dateTo${id}e`).value).toLocaleString('en-gb', dateOptions);
            document.querySelector(`#timelineItem${id}e`).classList.toggle("editing");
            document.querySelector(`#grade${id}e`).setAttribute("disabled", "");
            document.querySelector(`#course${id}e`).setAttribute("disabled", "");
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }        
        
        res.json().then(json =>
        {
            document.querySelector(`#eduError${id}e`).classList.remove("hidden");
            document.querySelector(`#eduError${id}e div`).innerHTML = json.error;
        });
        
    })
}

/**
 * Updates the work timeline item with the given id
 * and data from the form
 * @param {number} id - the id of the work timeline item from the database
 * @param {SubmitEvent} e - the event that triggered the function
 */
function updateWorkItem(id, e)
{
    e.preventDefault();
    let data = {}
    data["dateFrom"] = document.querySelector(`#dateFrom${id}w`).value;
    data["dateTo"] = document.querySelector(`#dateTo${id}w`).value;
    data["companyName"] = document.querySelector(`#companyName${id}w`).value;
    data["area"] = document.querySelector(`#area${id}w`).value;
    data["title"] = document.querySelector(`#jobTitle${id}w`).value;
    
    fetch("/api/timelineData/work/" + id, {
        method: "PATCH",
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res => 
    {
        if(res.ok)
        {
            document.querySelector(`#timelineHeader${id}w`).innerHTML = new Date(document.querySelector(`#dateFrom${id}w`).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector(`#dateTo${id}w`).value).toLocaleString('en-gb', dateOptions);
            document.querySelector(`#timelineItem${id}w`).classList.toggle("editing");
            document.querySelector(`#companyName${id}w`).setAttribute("disabled", "");
            document.querySelector(`#area${id}w`).setAttribute("disabled", "");
            document.querySelector(`#jobTitle${id}w`).setAttribute("disabled", "");
            return;
        }
        
        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }
        
        res.json().then(json =>
        {
            document.querySelector(`#workError${id}w`).classList.remove("hidden");
            document.querySelector(`#workError${id}w div`).innerHTML = json.error;
        });
    });
}

/**
 * Deletes the timeline item with the given id
 * @param {number} id - the id of the timeline item
 */
function deleteEduItem(id)
{
    fetch("/api/timelineData/edu/" + id, {
        method: "DELETE",
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res => 
    {
        if (res.ok)
        {
            document.querySelector(`#timelineItem${id}e`).remove();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }
        res.json().then(json => alert(json.error));
    });
}

/**
 * Updates the timeline item with the given id
 * @param {number} id - the id of the timeline item from the database
 */
function deleteWorkItem(id)
{
    fetch("/api/timelineData/work/" + id, {
        method: "DELETE",
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            document.querySelector(`#timelineItem${id}w`).remove();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }
        res.json().then(json => alert(json.error));

    }); 
}

/**
 * Updates the project item with the given id
 * and data from the form
 * @param {string} id - the base id of the element
 * @param {SubmitEvent} e - the event of the form that was submitted
 */
function updateProjectItem(id, e)
{
    e.preventDefault();
    let data = {}
    data["title"] = document.querySelector(`#title${id}`).value;
    data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked ? "true" : "false";
    data["information"] = document.querySelector(`#info${id}`).value;
    data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
    data["gitLink"] = document.querySelector(`#git${id}`).value;

    let imgData = new FormData();
    imgData.append("img", document.querySelector(`#img${id}`).files[0]);

    fetch("/api/projectData/" + id, {
        method: "PATCH",
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {

            if (imgData.get("img") === "undefined")
            {

                if (data["isMainProject"] === "true")
                {
                    document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
                    document.querySelector(`#isMainProject${id}`).checked = true;
                    document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
                }

                document.querySelector(`#projectItem${id}`).classList.toggle("editing");
                document.querySelector(`#title${id}`).setAttribute("disabled", "");
                document.querySelector(`#info${id}`).setAttribute("disabled", "");
                return;
            }
            console.log("updating image")
            return fetch("/api/projectImage/" + id, {
                method: "POST",
                body: imgData,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem("token")
                }
            });
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        res.json().then(projectDataError =>
        {
            document.querySelector(`#projError${id}`).classList.remove("hidden");
            document.querySelector(`#projError${id} div`).innerHTML = projectDataError.error;
        });

    }).then(res => res.json().then(updatedProjectImage =>
    {
        if (res.ok)
        {

            if (updatedProjectImage["isMainProject"] === "true")
            {
                document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
                document.querySelector(`#isMainProject${id}`).checked = true;
                document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
            }

            document.querySelector(`#projectItem${id}`).classList.toggle("editing");
            document.querySelector(`#title${id}`).setAttribute("disabled", "");
            document.querySelector(`#info${id}`).setAttribute("disabled", "");
            document.querySelector(`#projectImage${id}`).src = updatedProjectImage.imgLocation;
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        document.querySelector(`#projError${id}`).classList.remove("hidden");
        document.querySelector(`#projError${id} div`).innerHTML = updatedProjectImage.error;

    }));

}

/**
 * Deletes the project item with the given id
 * @param id {number} - the id of the project item from the database
 */
function deleteProjectItem(id)
{
    fetch("/api/projectData/" + id, {
        method: "DELETE",
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            document.querySelector(`#projectItem${id}`).remove();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        res.json().then(json => alert(json.error));
    });
}

/**
 * Adds a new project to the page
 * @param {number} ID - the id of the project from the database
 * @param {string} isMainProject - is it the main project
 * @param {string} imgLocation - the relative path of the image
 * @param {string} title - the title of the project
 * @param {string} information - the information about the project
 * @param {string} projectLink - the link to the project
 * @param {string} gitLink - the link to the git repository
 */
function addProject(ID, isMainProject, imgLocation, title, information, projectLink, gitLink)
{
    let projectItem = document.createElement("form");
    let id = ID + "proj";
    projectItem.id = "projectItem" + ID;
    projectItem.classList.add("projItem");
    projectItem.onsubmit = e => updateProjectItem(id, e);
    projectItem.innerHTML = `
        <div class="modifyBtnContainer">
            <button class="edit" type="button" id="edit${id}" onclick="editProjectItem(${ID})"><i class="fa-solid fa-pen-to-square"></i></button>
            <button class="delete" type="button" id="delete${id}" onclick="deleteProjectItem(${ID})"><i class="fa-solid fa-trash"></i></button>
        </div>
        <img class="displayedImage" id="projectImage${id}" src="${imgLocation}" alt="image preivew of the project">
        <div class="formControl imageContainer">
            <input type="file" name="img${id}" id="img${id}">
        </div>
        <div class="formControl projectTitleContainer">
            <input type="text" name="title${id}" id="title${id}" value="${title}" disabled>
        </div>
        <div class="formControl isMainProject">
            <label class="checkContainer" for="isMainProject${id}">Is It The Main Project
                <input type="checkbox" id="isMainProject${id}" name="isMainProject${id}" ${(isMainProject === "true" ? "checked=''" : "")}>
                <span class="checkmark"></span>
            </label>
        </div> 
        <div class="formControl infoContainer">
            <textarea name="info${id}" id="info${id}" disabled>${information}</textarea>
        </div>
        <div class="formControl viewProjContainer">
            <input type="text" name="viewProj${id}" id="viewProj${id}" value="${projectLink}">
        </div>    
        <div class="formControl gitContainer">
            <input type="text" name="git${id}" id="git${id}" value="${gitLink}">
        </div>    
        <div class="error hidden" id="projError${id}">
            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
            <div></div>
        </div>
        <input type="submit" value="Change">
        <div class="linkContainer">
           <a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
           <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
        </div>
    `;

    if (isMainProject === "true")
    {
        document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);

        document.querySelector("#projList").prepend(projectItem);
        return;
    }

    document.querySelector("#projList").appendChild(projectItem);
}


/**
 * Deletes the post item with the given id
 * @param {number} id - the id of the post item from the database
 */
function deletePostItem(id)
{
    fetch("/api/blog/post/" + id, {
        method: "DELETE",
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            document.querySelector(`#postInfo${id}`).remove();
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }

        res.json().then(json => alert(json.error));
    });
}

/**
 * Adds a new post info to the edit post table
 * @param {number} ID - the id of the post
 * @param {string} title - the title of the post
 * @param {string} dateCreated - the date the post was created
 * @param {string} dateModified - the date the post was modified
 */
function addPostInfo(ID, title, dateCreated, dateModified)
{
    let postInfo = document.createElement("tr");
    let id = ID + "post";
    postInfo.id = "postInfo" + ID;
    postInfo.innerHTML = `
        <td>
            ${title}
        </td>
        <td>
            ${new Date(dateCreated).toLocaleDateString()}
        </td>
        <td>
            ${new Date(dateModified).toLocaleDateString()}
        </td>
        <td>
            <button class="edit" type="button" id="edit${id}" onclick="editPostItem(${ID})"><i class="fa-solid fa-pen-to-square"></i></button>
            <button class="delete" type="button" id="delete${id}" onclick="deletePostItem(${ID})"><i class="fa-solid fa-trash"></i></button>
        </td>
    `;
    document.querySelector("#editPost table tbody").appendChild(postInfo);
}