<%- include("partials/header", { path, title: "Home"}) %>
<div class="w-[744px] h-[1133px] relative bg-neutral-900 select-none overflow-x-hidden">
    <div class="flex flex-row flex-nowrap justify-center items-center h-[200px]">
        <img class="h-[150px]" src="img/hlm-alieni.png" />
        <div class="text-center text-neutral-200 text-[200px] font-normal font-['Bebas Neue'] mt-[20px]">Kioski</div>
        <img class="h-[150px]" src="img/hlm-alieni.png" />
    </div>
    <img class="w-[500px] h-[500px] left-[483.18px] top-[591px] absolute origin-top-left rotate-[22.11deg] opacity-25" src="img/hlm-alieni.png" />
    <img class="w-[219.41px] h-[219.41px] left-[-110px] top-[628.66px] absolute origin-top-left rotate-[-29.99deg] opacity-10" src="img/hlm-alieni.png" />
    <img class="w-[219.41px] h-[219.41px] left-[125.97px] top-[765px] absolute origin-top-left rotate-[33.15deg] opacity-10" src="img/hlm-alieni.png" />
    <div id="buttons" class="hidden">
        <div class="w-[285px] h-[102px] left-[230px] top-[241px] absolute" id="shopButton">
            <div class="w-[285px] h-[102px] left-0 top-0 absolute bg-[#ec008c] rounded-[13px]"></div>
            <div class="w-[285px] h-20 left-0 top-[22px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue']">OSTA TUOTE</div>
        </div>
        <div class="w-[285px] h-[102px] left-[230px] top-[375px] absolute" id="debtButton">
            <div class="w-[285px] h-[102px] left-0 top-0 absolute bg-[#ec008c] rounded-[13px]"></div>
            <div class="w-[284px] h-20 left-[1px] top-[22px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue']">MAKSA VELKA</div>
        </div>
        <div class="w-[294px] h-[102px] left-[222px] top-[509px] absolute" id="balanceButton">
            <div class="w-[285px] h-[102px] left-[8px] top-0 absolute bg-[#ec008c] rounded-[13px]"></div>
            <div class="w-[294px] h-20 left-0 top-[22px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue']">OMA SALDO</div>
        </div>
    </div>
    <p class="top-[241px] absolute flex flex-col items-center justify-center bg-gray-600 rounded-[13px]" id="error"></p>
    <div id="no-user" class="top-[241px] flex flex-col items-center justify-center bg-gray-600 rounded-[13px] hidden">
        <p class="text-[60px]">Ei Käyttäjää</p>
        <form action="/api/user/add" method="post" class="flex flex-col items-center justify-center">
            <input type="hidden" name="cardId" id="cardId">
            <label class="text-[40px]" for="name">Anna Nimi</label><input class="text-gray-950 p-6 rounded-[13px] text-center text-[25px] font-nunito" type="text" name="name" id="name">
            <input class="bg-[#ec008c] hover:bg-[#af0068] py-8 px-10 m-4 text-5xl rounded-md shadow-md" type="submit" value="Lisää käyttäjä">
        </form>
    </div>
    <div class="w-[294px] h-[102px] left-[222px] top-[866px] absolute" id="exitButton">
        <div class="w-[285px] h-[102px] left-[8px] top-0 absolute bg-[#ec008c] rounded-[13px]"></div>
        <div class="w-[294px] h-20 left-0 top-[22px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue']">LOPETA</div>
    </div>
</div>

<script>
    function refreshPage() {
        if(localStorage.getItem("user")) {
            data = JSON.parse(localStorage.getItem("user"));
            fetch('/api/updateData/' + data.user[0].id)
                .then(response => response.json())
                .then(user => {
                    data.user = user;
                    localStorage.setItem("user", JSON.stringify(data));
                });
            if(document.getElementById('refreshButton')) document.getElementById('refreshButton').remove();
            document.getElementById("buttons").classList.remove("hidden");
        } else {
            fetch('/api/reader')
                .then(response => response.json())
                .then(data => {
                    // Update the page with the new data
                    if(data.error) {
                        document.getElementById('error').innerHTML = `${data.error}`;

                        const refreshButton = document.createElement('button');
                        refreshButton.classList.add("bg-[#ec008c]", "rounded-[13px]", "text-center", "text-neutral-200", "text-6xl", "font-normal", "w-[285px]", "h-[102px]", "left-[230px]", "top-[375px]", "absolute")
                        refreshButton.addEventListener('click', refresh)
                        refreshButton.id = 'refreshButton'
                        refreshButton.textContent = 'Refresh';

                        document.getElementById('buttons').insertAdjacentElement('afterend', refreshButton);
                        return;
                    } else if(data.uid) {
                        if(document.getElementById('refreshButton')) document.getElementById('refreshButton').remove();
                        if(data.user.length === 0) {
                            document.getElementById("no-user").classList.remove("hidden");
                            document.getElementById("cardId").value = data.uid;
                        } else {
                            document.getElementById("buttons").classList.remove("hidden");
                            localStorage.setItem("user", JSON.stringify(data));
                        }
                    }
                });

        }
    }
    window.onload = function() {
        refreshPage()
    }
    function refresh() {
        window.location.reload()
    }
    document.getElementById("exitButton").addEventListener("click", exit);
    function exit() {
        localStorage.removeItem("user");
        window.location.href = "/";
        window.location.replace("/");
    }
    document.getElementById("balanceButton").addEventListener("click", balance);
    function balance() {
        window.location.href = "/balance";
        window.location.replace("/balance");
    }
    document.getElementById("shopButton").addEventListener("click", shop);
    function shop() {
        window.location.href = "/shop";
        window.location.replace("/shop");
    }
    document.getElementById("debtButton").addEventListener("click", payDebt);
    function payDebt() {
        window.location.href = "/pay";
        window.location.replace("/pay");
    }
    setTimeout(function() {
        localStorage.removeItem("user");
        window.location.href = "/";
        window.location.replace("/");
    }, 30000);
</script>