<%- include("partials/header", { path, title: "Home"}) %>
<div id="data"></div>
<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-[667px] 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-[526.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-[704px] absolute origin-top-left rotate-[33.15deg] opacity-10" src="img/hlm-alieni.png" />
    <div class="w-[749px] h-[102px] left-[-2px] top-[260px] absolute bg-[#ec008c] rounded-[13px]"></div>
    <div class="w-[284px] h-20 left-[231px] top-[282px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue'] underline">SINUN SALDOSI</div>
    <div class="w-[284px] h-20 left-[231px] top-[465px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue']" id="balance"></div>
    <div class="w-[294px] h-[102px] left-[222px] top-[917px] absolute" id="backButton">
        <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']">TAKAISIN</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));
                    document.getElementById('balance').innerHTML = `${data.user[0].balance}`;
                });
        } else {
            window.location.href = "/menu";
            window.location.replace("/menu");
        }
    }
    window.onload = function() {
        refreshPage()
    }
    document.getElementById("backButton").addEventListener("click", back)
    function back() {
        window.location.href = "/menu";
        window.location.replace("/menu");
    }
    setTimeout(function() {
        localStorage.removeItem("user");
        window.location.href = "/";
        window.location.replace("/");
    }, 30000);
</script>