<script>
    var countdownInterval = '';

    $(() => {
        initDashboard();
    });

    function initDashboard() {
        APP.block();
        APP.axiosRequest({
            url: `${BASE_API_MENU}/info`,
        }).then(res => {
            console.log(res);

            // Tampilkan info lainnya
            $.each(res.data, (i, v) => {
                $(`.info-${i}`).html(v);
            });

            // Jalankan countdown jika ada tanggal pengumuman
            if (res.data.pengumuman_at) {
                startCountdown(res.data.pengumuman_at);
            }

            APP.unblock();
        }).catch(error => {
            console.error("Fetch error:", error);
            APP.unblock();
        });
    }

    function startCountdown(dateString) {
        const targetDate = new Date(dateString).getTime();

        const countdownInterval = setInterval(() => {
            const now = new Date().getTime();
            const distance = targetDate - now;

            if (distance <= 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown-section").style.display = "none";

                // 🔥 Trigger request ke API untuk ambil status kelulusan
                fetchKelulusanStatus();

                return;
            }

            // Update countdown UI
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("days").innerText = String(days).padStart(2, '0');
            document.getElementById("hours").innerText = String(hours).padStart(2, '0');
            document.getElementById("minutes").innerText = String(minutes).padStart(2, '0');
            document.getElementById("seconds").innerText = String(seconds).padStart(2, '0');
        }, 1000);
    }

    // ✅ Fungsi request untuk ambil status kelulusan
    function fetchKelulusanStatus() {
        $('#ucapan').html('');
        APP.axiosRequest({
            url: `${BASE_API_MENU}/status-kelulusan`, // Ganti sesuai endpoint API kamu
        }).then(res => {
            const status = res.data.status; // 'lulus', 'tidak_lulus', atau null
            const statusEl = document.getElementById("status-message");
            const cardEl = document.getElementById("pengumuman-card"); // Target seluruh card

            if (status === 'lulus') {
                cardEl.classList.add("border-success", "bg-success");
                statusEl.innerHTML = `
                    <div class="alert alert-success text-center py-4">
                        <p class="text-black m-0 p-0">Berdasarkan SURAT KEPUTUSAN KEPALA SMK NEGERI 2 BLORA </p>
                        <p class="text-black m-0 p-0"> NO ${res.data.no_skl}</p>
                        <p class="text-black m-0 p-0">TENTANG KELULUSAN PESERTA DIDIK SMK NEGERI 2 BLORA TAHUN PELAJARAN 2024/2025,</p> 
                        <p class="text-black m-0 p-0">maka siswa tersebut di atas dinyatakan :</p>
                        <div class="fw-bold my-4 pt-4" style="font-size: 4rem; color: #198754;">LULUS</div>
                    </div>`;
                $('#ucapan').html(` <div class="card shadow-sm mt-4">
                                        <div class="card-body">
                                            <h5 class="card-title fw-bold mb-3">Selamat Atas Kelulusan Anda!</h5>
                                            <p class="card-text">
                                                Kami mengucapkan selamat kepada seluruh siswa yang telah lulus. Semoga pencapaian ini menjadi langkah awal menuju kesuksesan yang lebih besar di masa depan. Teruslah berprestasi, menjaga etika, dan membawa nama baik almamater di mana pun berada.
                                            </p>
                                            <p class="card-text">
                                                Diharapkan kepada seluruh siswa untuk menyikapi kelulusan ini dengan penuh rasa syukur dan menjaga ketertiban serta tidak melakukan kegiatan yang melanggar norma maupun aturan yang berlaku.
                                            </p>
                                        </div>
                                    </div>`)
            } else if (status === 'tidak_lulus') {
                cardEl.classList.add("border-danger", "bg-danger");
                statusEl.innerHTML = `
                    <div class="alert alert-danger text-center py-4">
                        <div class="fw-bold my-4" style="font-size: 4rem; color: #dc3545;">TIDAK LULUS</div>
                        <div class="mt-2 text-black">Mohon maaf, Anda <strong>belum lulus</strong>. Tetap semangat dan jangan menyerah.</div>
                    </div>`;
            } else {
                cardEl.classList.remove("border-success", "border-danger", "bg-light");
                statusEl.innerHTML = `
                    <div class="alert alert-warning text-center">
                        Status kelulusan belum tersedia. Silakan cek kembali nanti.
                    </div>`;
            }

        }).catch(error => {
            console.error("Gagal mengambil status kelulusan:", error);
            document.getElementById("status-message").innerHTML =
                `<div class="alert alert-danger">❌ Gagal memuat status kelulusan. Silakan coba lagi nanti.</div>`;
        });
    }
</script>