<?= $this->extend('layouts/public') ?>
<?= $this->section('content') ?>

<div class="pub-card text-center">
    <div class="badge-pill">
        <i class="bi bi-clock"></i> Segera Dibuka
    </div>

    <h2 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:#f1f5f9; margin-bottom:0.25rem;">
        Pengumuman Kelulusan
    </h2>
    <?php if (!empty($academicYear)): ?>
    <p style="color:#64748b; font-size:0.85rem; margin-bottom:1.5rem;">
        Tahun Ajaran <?= esc($academicYear['name']) ?>
    </p>
    <?php endif; ?>

    <?php if (!empty($settings['custom_message'])): ?>
    <div class="alert-pub mb-3">
        <i class="bi bi-info-circle me-2"></i><?= esc($settings['custom_message']) ?>
    </div>
    <?php endif; ?>

    <p style="color:#94a3b8; font-size:0.85rem; margin-bottom:0.5rem;">
        Pengumuman kelulusan akan dibuka dalam:
    </p>

    <div class="countdown-wrap">
        <div class="countdown-box">
            <div class="countdown-num" id="cd-days">00</div>
            <div class="countdown-label">Hari</div>
        </div>
        <div class="countdown-box">
            <div class="countdown-num" id="cd-hours">00</div>
            <div class="countdown-label">Jam</div>
        </div>
        <div class="countdown-box">
            <div class="countdown-num" id="cd-minutes">00</div>
            <div class="countdown-label">Menit</div>
        </div>
        <div class="countdown-box">
            <div class="countdown-num" id="cd-seconds">00</div>
            <div class="countdown-label">Detik</div>
        </div>
    </div>

    <p style="color:#475569; font-size:0.75rem; margin-top:0.5rem;">
        <i class="bi bi-calendar3 me-1"></i>
        <?php
            $dt = $settings['announcement_datetime'] ?? null;
            if ($dt) {
                $ts = strtotime($dt);
                $days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
                $months = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
                echo $days[date('w',$ts)] . ', ' . date('j', $ts) . ' ' . $months[(int)date('n',$ts)] . ' ' . date('Y', $ts) . ' pukul ' . date('H:i', $ts) . ' WIB';
            }
        ?>
    </p>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    let timeLeft = <?= (int)($statusData['countdown_seconds'] ?? 0) ?>;

    function pad(n) { return String(n).padStart(2, '0'); }

    function updateCountdown() {
        if (timeLeft <= 0) {
            location.reload();
            return;
        }
        const d = Math.floor(timeLeft / 86400);
        const h = Math.floor((timeLeft % 86400) / 3600);
        const m = Math.floor((timeLeft % 3600) / 60);
        const s = Math.floor(timeLeft % 60);

        document.getElementById('cd-days').textContent    = pad(d);
        document.getElementById('cd-hours').textContent   = pad(h);
        document.getElementById('cd-minutes').textContent = pad(m);
        document.getElementById('cd-seconds').textContent = pad(s);

        timeLeft--;
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
</script>
<?= $this->endSection() ?>