async function loadLoginModal(e){
    if(e.preventDefault)e.preventDefault();
    createModal(`
        <img src="/logo.png" style="width:100%;height:auto;padding:20pt 0pt;">
        <h1>Login</h1>
        <form action="/dashboard/vehicle-profiles/">
            <label style="font-size:80%;font-weight:bold;color:gray;">Email</label><br><input type="text" id="email" style="width:100%;padding:5pt;"><br><br>
            <label style="font-size:80%;font-weight:bold;color:gray;">Password</label><br><input type="password" id="password" style="width:100%;padding:5pt;"><br><br>
            <div style="display:flex;column-gap:10pt;row-gap:10pt;">
                <a href="#" style="text-decoration:none;display:inline-block;flex:1;min-width:150pt;background-color:var(--primary-color);color:white;padding:10pt;text-align:center;border-radius:4pt;" onclick="postLoginModal(event)">Submit</a>
                <a href="#" onclick="closeModal(event)" style="color:gray;text-decoration:none;flex:1;min-width:150pt;padding:10pt 10pt 10pt 0pt;">Cancel</a>
            </div>

        </form>    
    `);
}

async function loadSignUpModal(e){
    if(e.preventDefault)e.preventDefault();
    createModal(`
        <div style="background-color:lightgray;min-height:200pt;width:100%;">Video Placeholder</div>
        <h1>Sign-Up</h1>
        <form action="/sign-up/" method="POST" style="width:calc(98% - 4pt);">
            <div style="display:flex; column-gap:1rem;">
                <div style="flex:1;min-width:125pt;">
                    <label style="font-size:80%;font-weight:bold;color:gray;">First Name</label><br><input type="text" id="firstName" style="width:100%;padding:5pt;"><br><br>
                </div>
                <div style="flex:1;min-width:150pt;">
                    <label style="font-size:80%;font-weight:bold;color:gray;">Last Name</label><br><input type="text" id="lastName" style="width:100%;padding:5pt;"><br><br>
                </div>
            </div>
            <label style="font-size:80%;font-weight:bold;color:gray;">Email</label><br><input type="text" id="email" style="width:100%;padding:5pt;"><br><br>
            <label style="font-size:80%;font-weight:bold;color:gray;">Password</label><br><input type="password" id="password" style="width:100%;padding:5pt;"><br><br>
            <div style="display:flex;column-gap:10pt;row-gap:10pt;">
                <a href="#" style="text-decoration:none;display:inline-block;flex:1;min-width:150pt;background-color:var(--primary-color);color:white;padding:10pt;text-align:center;border-radius:4pt;" onclick="postSignUpModal(event)">Submit</a>
                <a href="#" onclick="closeModal(event)" style="color:gray;text-decoration:none;flex:1;min-width:150pt;padding:10pt 10pt 10pt 0pt;">Cancel</a>
            </div>
        </form>    
    `);
}

async function postSignUpModal(e){
    if(e.preventDefault)e.preventDefault();
    let formData = new FormData();
    formData.append("email",document.querySelector("#email").value);
    formData.append("password",document.querySelector("#password").value);
    formData.append("firstName",document.querySelector("#firstName").value);
    formData.append("lastName",document.querySelector("#lastName").value);
    
    let a = await fetch(`/sign-up/`, {
        method: 'POST',
        body: formData,				
    }).then(response => response.json());

    if(a.token){
        document.cookie = `token=${a.token}`;
        window.location.href = '/dashboard/vehicle-profiles/#welcome';
    } else {
        alert(a.msg);
    }
}

async function postLoginModal(e){
    if(e.preventDefault)e.preventDefault();
    document.cookie = `token=''`;
    let formData = new FormData();
    formData.append("email",document.querySelector("#email").value);
    formData.append("password",document.querySelector("#password").value);
    
    let a = await fetch(`/login/`, {
        method: 'POST',
        body: formData,				
    }).then(response => response.json());

    if(a.token){
        document.cookie = `token=${a.token}`;
        document.cookie = `email=${document.querySelector("#email").value}`;
        window.location.href = '/dashboard/vehicle-profiles/';
    } else {
        alert(a.msg);
    }
}

async function logout(e){
    if(e.preventDefault)e.preventDefault();
    document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    document.cookie = "email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    window.location = '/';
}

async function createModal(html){
    if(document.querySelector("#top-modal"))return false;

    let modal = document.createElement('div');
    modal.id = "top-modal";
    modal.innerHTML = html;
    modal.style.visibility = 'visible';
    modal.style.position = 'fixed';
    modal.style.width = '95%';
    modal.style.minWidth = '200pt';
    modal.style.maxWidth = '400pt';
    modal.style.maxHeight = '90vh';
    modal.style.top = '50%';
    modal.style.left = '50%';
    modal.style.transform = 'translate(-50%,-50%)';
    modal.style.boxShadow = '3pt 3pt 3pt gray';
    modal.style.border = '1pt solid gray';
    modal.style.borderRadius = '3pt';
    modal.style.padding = '3pt';

    
    document.querySelector('body').appendChild(modal);
    document.querySelector('body').style.visibility = 'hidden';
}


async function closeModal(e){
    let n;
    if(!(n = document.querySelector("#top-modal")))return false;
    n.remove();
    document.querySelector('body').style.visibility = 'visible';
}