<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ISK Fruit Stock</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: #060324;
            color: #fff;
        }

        .h-fit {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 5rem;
            margin-bottom: 3rem;
        }

        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .justify-center {
            justify-content: center;
        }

        .mt-20 {
            margin-top: 5rem;
        }

        .mb-12 {
            margin-bottom: 3rem;
        }

        .md\:px-10 {
            padding-left: 2.5rem;
            padding-right: 2.5rem;
        }

        .px-1 {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .text-center {
            text-align: center;
        }

        .text-xl.font-bold {
            font-size: 25px;
            text-align: center;
            font-weight: bold;
            margin-top: 25px;
        }

        .lg\:text-6xl.sm\:text-5xl.text-4xl.font-bold {
            text-align: center;
            margin-top: 25px;
            font-size: 55px;
            text-shadow: 0 0 10px white, 0 0 30px white;
            font-weight: bold;
        }

        .flex.flex-row.font-bold.lg\:space-x.sm\:space-x.space-x {
            margin-top: 25px;
            justify-content: center;
            align-items: center;
            gap: 35px;
            font-weight: bold;
            font-size: 25px;
        }

        .p-4.bg.rounded-2xl.outline.outline-1.outline-gray-600 {
            border-radius: 20px;
            background-color: rgba(4, 7, 30);
            border: 0.5px solid rgba(75, 85, 99);
            padding: 2rem;
            display: flex;
            gap: 2rem;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 600px;
            margin: 0 auto;
            margin-top: 25px;
        }

        .whitespace-justify-nowrap {
            text-align: center;
            margin-top: -10px;
        }

        .type-stock {
            text-align: center;
            margin-top: -0.3rem;
            font-size: 1.3rem;
            font-weight: bold;
        }

        .price-stock {
            margin-top: 0.5rem;
            font-size: 1.1rem;
            font-weight: bold;
        }

        .box {
            display: inline-block;
            border-radius: 100px;
            padding: 0.2rem 0.8rem;
            background-color: rgba(30, 28, 56);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        }

        button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding: 0.5rem 1.5rem;
            border: none;
            border-radius: 20px;
            font-weight: bold;
            font-size: 1.25rem;
            background-color: rgba(30, 28, 56);
            color: white;
            cursor: pointer;
            margin: 0.5rem 0;
            transition: background-color 0.3s ease;
        }

        button.selected {
            background-color: white;
            color: black;
        }

        button:disabled {
            opacity: 0.5;
            pointer-events: none;
        }

        .text-yellow-400 {
        color: rgb(250 204 21);
        }

        .text-center.py-4.border-t.border-gray-700.text-sm {
            text-align: center;
        }

        @media (min-width: 768px) {
            button {
                font-size: 1.5rem;
                padding: 0.75rem 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="h-fit flex flex-col justify-center mt-20 mb-12">
        <div dir="ltr" data-orientation="horizontal" class="md:px-10 px-1 mx-auto text-center box">
            <button type="button" role="tab" id="radix-:r0:-trigger-normal" class="justify-center whitespace-nowrap px-3 selected" aria-selected="true" onclick="selectButton(this, 'normal')">Normal</button>
            <button type="button" role="tab" id="radix-:r0:-trigger-mirage" class="justify-center whitespace-nowrap px-3" aria-selected="false" onclick="selectButton(this, 'mirage')">Mirage</button>
        </div>
        <div class="flex flex-col items-center my-6 space-y-2">
            <div class="text-xl font-bold">Next Stock In</div>
            <div class="lg:text-6xl sm:text-5xl text-4xl font-bold" id="countdown-normal" aria-selected="true">Loading...</div>
            <div class="lg:text-6xl sm:text-5xl text-4xl font-bold" id="countdown-mirage" aria-selected="false" style="display:none;">Loading...</div>

            <div class="flex flex-row font-bold lg:space-x sm:space-x space-x">
                <span>Hrs</span>
                <span>Min</span>
                <span>Sec</span>
            </div>
            <div id="normal" class="p-4 bg rounded-2xl outline outline-1 outline-gray-600" aria-selected="true">
                {% for fruit in result["result"]["regular"] %}
                <div class="flex flex-col items-center" style="opacity: 1; transform: none;">
                    <div class="whitespace-justify-nowrap">
                        <img src="{{ fruit['image']['src'] }}" alt="{{ fruit['image']['alt'] }}" height="100" width="100" loading="lazy" decoding="async" data-nimg="1" style="color:transparent">
                    </div>
                    <div class="type-stock">{{ fruit["fruit"] }}</div>
                    <div class="price-stock">{{ fruit["money"] }} / {{ fruit["robux"] }}</div>
                </div>
                {% endfor %}
            </div>
            <div id="mirage" class="p-4 bg rounded-2xl outline outline-1 outline-gray-600" aria-selected="false" style="display: none;">
                {% for fruit in result["result"]["mirage"] %}
                <div class="flex flex-col items-center" style="opacity: 1; transform: none;">
                    <div class="whitespace-justify-nowrap">
                        <img src="{{ fruit['image']['src'] }}" alt="{{ fruit['image']['alt'] }}" height="100" width="100" loading="lazy" decoding="async" data-nimg="1" style="color:transparent">
                    </div>
                    <div class="type-stock">{{ fruit["fruit"] }}</div>
                    <div class="price-stock">{{ fruit["money"] }} / {{ fruit["robux"] }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <script>
        function selectButton(button, section) {
            const buttons = document.querySelectorAll("button");
            buttons.forEach(btn => {
                btn.classList.remove("selected");
                btn.setAttribute("aria-selected", "false");
            });
            button.classList.add("selected");
            button.setAttribute("aria-selected", "true");

            const countdownNormal = document.getElementById("countdown-normal");
            const countdownMirage = document.getElementById("countdown-mirage");
            if (section === "normal") {
                countdownNormal.style.display = "block";
                countdownMirage.style.display = "none";
            } else if (section === "mirage") {
                countdownNormal.style.display = "none";
                countdownMirage.style.display = "block";
            }

            const normalDiv = document.getElementById("normal");
            const mirageDiv = document.getElementById("mirage");
            if (section === "normal") {
                normalDiv.style.display = "flex";
                mirageDiv.style.display = "none";
            } else {
                normalDiv.style.display = "none";
                mirageDiv.style.display = "flex";
            }
        }

        const normalStockTimes = [
            "03:00:05", "07:00:05", "11:00:05",
            "15:00:05", "19:00:05", "23:00:05",
        ];

        const mirageStockTimes = [
            "01:00:05", "03:00:05", "05:00:05",
            "07:00:05", "09:00:05", "11:00:05",
            "13:00:05", "15:00:05", "17:00:05",
            "19:00:05", "21:00:05", "23:00:05",
        ];

        function calculateNextUpdate(stockTimes, timezone) {
            try {
                const now = new Date().toLocaleString("en-US", { timeZone: timezone });
                const currentDateTime = new Date(now);
                const currentSeconds = currentDateTime.getHours() * 3600 + currentDateTime.getMinutes() * 60 + currentDateTime.getSeconds();

                for (let time of stockTimes) {
                    const [hours, minutes, seconds] = time.split(":").map(Number);
                    const stockSeconds = hours * 3600 + minutes * 60 + seconds;

                    if (stockSeconds > currentSeconds) {
                        return stockSeconds - currentSeconds;
                    }
                }

                const firstUpdateSeconds = stockTimes[0]
                    .split(":")
                    .map(Number)
                    .reduce((acc, val, idx) => acc + val * Math.pow(60, 2 - idx), 0);
                return 24 * 3600 - currentSeconds + firstUpdateSeconds;
            } catch (error) {
                console.error("Error calculating next update time:", error);
                return null;
            }
        }

        function updateCountdown(elementId, stockTimes) {
            const timezone = "Asia/Ho_Chi_Minh";

            function formatCountdown(seconds) {
                if (seconds === null) {
                    return "Loading...";
                }
                const hrs = Math.floor(seconds / 3600);
                const mins = Math.floor((seconds % 3600) / 60);
                const secs = seconds % 60;

                // Format hours, minutes, and seconds to be two digits
                return `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
            }

            function update() {
                const nextUpdateIn = calculateNextUpdate(stockTimes, timezone);
                document.getElementById(elementId).textContent = formatCountdown(nextUpdateIn);
            }

            update();
            setInterval(update, 1000);
        }

        document.addEventListener("DOMContentLoaded", () => {
            updateCountdown("countdown-normal", normalStockTimes);
            updateCountdown("countdown-mirage", mirageStockTimes);
        });
    </script>
</body>
<footer class="text-center py-4 border-t border-gray-700 text-sm">
    <p>© 2024 VulcanValues. All Rights Reserved.</p>
  </footer>
</html>