function moveEditor(){
        treepos = 90 - document.getElementById("tree").getBoundingClientRect().top;
        editor.style.position = 'relative';
        editor.style.top = treepos+'px';
}
function scrollToEditor(){
    let editor = document.getElementById("editor");
    editor.scrollIntoView( {behavior: "smooth" });
}

function newCat(){
    document.getElementById("editor").classList.remove("d-none");
    document.getElementById("id").value = 0;
    document.getElementById("bookable").checked = true;
    document.getElementById("account").checked = false;
    document.getElementById("monitor").checked = false;
    document.getElementById("deleted_at").checked = false;
    document.getElementById("parent").value = 0;
    document.getElementById("description").value = "";
   // scrollEditor();
}

document.addEventListener("DOMContentLoaded", function(event) {
    editor = document.getElementById("editor");
    document.querySelectorAll('.tree li:has(ul)').forEach((single) => {
        single.classList.add("parent_li");
        single.getElementsByTagName("i")[0].classList.add("fa-square-minus");
    });
    document.querySelectorAll(".tree span").forEach((spa) => {
        spa.addEventListener("dblclick", (event) => {
            const viewportWidth = document.documentElement.clientWidth;
            if (viewportWidth < 768) 
                scrollToEditor();
            else
                moveEditor();
        
            editor.classList.remove("d-none");
        
            document.getElementById("bookable").checked = event.target.getAttribute("data-bookable")=="true";
            document.getElementById("account").checked = event.target.getAttribute("data-account")=="true";
            document.getElementById("monitor").checked = event.target.getAttribute("data-monitor")=="true";
            document.getElementById("deleted_at").checked = event.target.getAttribute("data-deleted")!== "";
            document.getElementById("id").value = event.target.getAttribute("data-id");
            document.getElementById("parent").value = event.target.getAttribute("data-pid");
            document.getElementById("description").value = event.target.getAttribute("data-description");
//            scrollEditor();
        });
    });
    document.querySelectorAll('.tree li.parent_li > span, .tree li.parent_li > i').forEach((parent) => {
        parent.addEventListener("click",(event) => {
            let single = event.target.parentElement.querySelector('ul,li');
                let visible = single.classList.toggle("d-none");
                if (visible) {
                    event.target.parentElement.querySelector("i").classList.add("fa-square-plus");
                    event.target.parentElement.querySelector("i").classList.remove("fa-square-minus");
                } else {
                    event.target.parentElement.querySelector("i").classList.add("fa-square-minus");
                    event.target.parentElement.querySelector("i").classList.remove("fa-square-plus");
                }
            
        });
    });    
    document.getElementById("viewdeleted").addEventListener("click",(event) => {
        document.querySelectorAll(".tree span").forEach((spa) => {
            if (event.currentTarget.checked && spa.getAttribute("data-deleted")!== "")
                spa.parentElement.classList.remove("d-none");
            else if ((!event.currentTarget.checked) && spa.getAttribute("data-deleted")!== "")
                spa.parentElement.classList.add("d-none");
        });
    });
});