<%- 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-[530px] 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-[675.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-[837px] absolute origin-top-left rotate-[33.15deg] opacity-10" src="img/hlm-alieni.png" />
    <div class="w-[749px] h-[102px] left-[-2px] top-[226px] absolute bg-[#ec008c] rounded-[13px]"></div>
    <div class="w-[502px] h-20 left-[122px] top-[248px] absolute text-center text-neutral-200 text-6xl font-normal font-['Bebas Neue']">MITÄ SAISI OLLA?</div>
    <div class="top-[412px] absolute flex flex-col justify-center items-center">
        <div class="text-center">
            <p class="text-4xl text-neutral-200" id="balance"></p>
        </div>
        <div class="flex flex-row p-16 flex-wrap justify-center items-center">
            <form action="/api/transaction" method="post">
                <input type="hidden" name="amount" id="amount" value="1">
                <input class="userField" type="hidden" name="user" id="user" value="">
                <button class="bg-[#ec008c] hover:hover:bg-[#af0068] py-8 px-10 m-4 text-5xl rounded-md shadow-md">0.33l Pieni Limu 1€</button>
            </form>
            <form action="/api/transaction" method="post">
                <input type="hidden" name="amount" id="amount" value="2">
                <input class="userField" type="hidden" name="user" id="user" value="">
                <button class="bg-[#ec008c] hover:hover:bg-[#afe0068] py-8 px-10 m-4 text-5xl rounded-md shadow-md">
                    0.5l Energia juoma 2€
                </button>
            </form>
            <form action="/api/transaction" method="post">
                <input type="hidden" name="amount" id="amount" value="0.5">
                <input class="userField" type="hidden" name="user" id="user" value="">
                <button class="bg-[#ec008c] hover:hover:bg-[#afe0068] py-8 px-10 m-4 text-5xl rounded-md shadow-md">
                    Laku 0.5€
                </button>
            </form>
            <form action="/api/transaction" method="post">
                <input type="hidden" name="amount" id="amount" value="15">
                <input class="userField" type="hidden" name="user" id="user" value="">
                <button class="bg-[#ec008c] hover:hover:bg-[#af0068] py-8 px-10 m-4 text-5xl rounded-md shadow-md">
                    Filamentti 15€
                    <img src="/img/filament.jpg" class="h-60" />
                </button>
            </form>
        </div>
        <div id="backButton" class="p-8 bg-[#ec008c] rounded-[13px] 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));
                    userFields = document.getElementsByClassName("userField")
                    for (let i = 0; i < userFields.length; i++) {
                        userFields[i].value= data.user[0].id;
                    }
                    document.getElementById('balance').innerHTML = `${data.user[0].balance}`;
                });
        } else {
            window.location.href = "/menu";
            window.location.replace("/menu");
        }
    }
    window.onload = function() {
        refreshPage()
    }
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', (e) => {
            // Prevent if already submitting
            if (form.classList.contains('is-submitting')) {
                e.preventDefault();
            }

            // Add class to hook our visual indicator on
            form.classList.add('is-submitting');
        });
    });

    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("/");
    }, 60000);
</script>