<?php
include "koneksi.php";
date_default_timezone_set("Asia/Jakarta");

$tanggal = date("Y-m-d");
$jam_sekarang = date("H:i");

$query = mysqli_query($koneksi, "SELECT * FROM result_lengkap 
    WHERE tanggal = '$tanggal' 
    AND draw_time <= '$jam_sekarang' 
    AND draw_end > '$jam_sekarang'
    LIMIT 1");


$data = mysqli_fetch_assoc($query);

// Urutan tampil dari bawah ke atas
$urutan = [
    'consolation6',
    'consolation5',
    'consolation4',
    'consolation3',
    'consolation2',
    'consolation1',
    'spesial6',
    'spesial5',
    'spesial4',
    'spesial3',
    'spesial2',
    'spesial1',
    'prize3',
    'prize2',
    'winner_prize'
];

// Durasi sisa waktu (dalam detik)
$draw_end = DateTime::createFromFormat('H:i', $data['draw_end']);
$now = new DateTime($jam_sekarang);
$sisa_detik = max(10, $draw_end->getTimestamp() - $now->getTimestamp()); // minimal 10 detik agar aman

// Kirim data ke JavaScript
$data_draw = [];
foreach ($urutan as $key) {
    $angka = $data[$key] ?? '----';
    $data_draw[] = str_pad($angka, 4, '-', STR_PAD_LEFT);
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Live Draw</title>
    <style>
        body {
            background-color: #ffffff;
            font-family: Arial;
            color: #004b8c;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            border: 2px solid #004b8c;
            border-radius: 10px;
            background-color: #ffffff;
            text-align: center;
        }

        h1 {
            font-size: 24px;
            color: #004b8c;
            margin-bottom: 30px;
        }

        .prize {
            font-size: 20px;
            font-weight: bold;
            margin: 15px 0 5px;
            color: #004b8c;
        }

        .number {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #004b8c;
            letter-spacing: 5px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .grid .number {
            font-size: 28px;
            background-color: #e7f0f9;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #004b8c;
        }

        hr {
            border: none;
            border-top: 2px solid #004b8c;
            margin: 30px 0 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Live Draw - TOKYOPOOLS</h1>

        <div class="prize">WINNER PRIZE</div>
        <div class="number" id="winner_prize">----</div>

        <div class="prize">PRIZE 2</div>
        <div class="number" id="prize2">----</div>

        <div class="prize">PRIZE 3</div>
        <div class="number" id="prize3">----</div>

        <hr>

        <div class="prize">SPECIAL PRIZE</div>
        <div class="grid" id="special_prizes">
            <?php for ($i = 0; $i < 6; $i++)
                echo "<div class='number' id='sp_$i'>----</div>"; ?>
        </div>

        <hr>

        <div class="prize">CONSOLATION PRIZE</div>
        <div class="grid" id="consolation_prizes">
            <?php for ($i = 0; $i < 6; $i++)
                echo "<div class='number' id='cs_$i'>----</div>"; ?>
        </div>
    </div>

    <script>
        const data = <?php echo json_encode($data_draw); ?>;
        const totalDurasi = <?php echo $sisa_detik; ?>;
        const delayPerAngka = Math.floor(totalDurasi / data.length) * 1000;

        const mapping = [
            "cs_5", "cs_4", "cs_3", "cs_2", "cs_1", "cs_0",
            "sp_5", "sp_4", "sp_3", "sp_2", "sp_1", "sp_0",
            "prize3", "prize2", "winner_prize"
        ];

        function tampilkanDigit(id, angka, delayAwal) {
            const el = document.getElementById(id);
            if (!el) return;
            el.textContent = "----";

            for (let i = 0; i < 4; i++) {
                setTimeout(() => {
                    let tampil = angka.substring(0, i + 1).padEnd(4, "-");
                    el.textContent = tampil;
                }, delayAwal + i * 300);
            }
        }

        // Mulai animasi berdasarkan waktu yang tersisa
        mapping.forEach((id, index) => {
            let delay = index * delayPerAngka;
            tampilkanDigit(id, data[index], delay);
        });
    </script>

</body>

</html>