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

<div class="pub-card">
    <div class="text-center mb-4">
        <div class="badge-pill">
            <i class="bi bi-mortarboard"></i> Cek Kelulusan
        </div>
        <h2 style="font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:#f1f5f9; margin-bottom:0.25rem;">
            Status Kelulusan
        </h2>
        <?php if (!empty($academicYear)): ?>
        <p style="color:#64748b; font-size:0.82rem; margin:0;">
            Tahun Ajaran <?= esc($academicYear['name']) ?>
        </p>
        <?php endif; ?>
        <?php if (!empty($settings['custom_message'])): ?>
        <div class="alert-pub mt-3">
            <i class="bi bi-info-circle me-2"></i><?= esc($settings['custom_message']) ?>
        </div>
        <?php endif; ?>
    </div>

    <!-- Form Cek NISN -->
    <form id="checkForm">
        <?= csrf_field() ?>
        <input type="hidden" name="captcha_key" value="<?= esc($captcha_key) ?>">

        <div class="mb-3">
            <label class="form-label">NISN</label>
            <input type="text"
                   name="nisn"
                   id="nisnInput"
                   class="form-control"
                   placeholder="Masukkan NISN Anda"
                   maxlength="20"
                   inputmode="numeric"
                   autocomplete="off"
                   required>
        </div>

        <div class="mb-4">
            <label class="form-label">
                <i class="bi bi-shield-check me-1 text-indigo"></i>
                Verifikasi: <?= esc($captcha_question) ?>
            </label>
            <input type="text"
                   name="captcha_answer"
                   class="form-control"
                   placeholder="Jawaban"
                   maxlength="3"
                   inputmode="numeric"
                   autocomplete="off"
                   required>
        </div>

        <button type="submit" class="btn-pub-primary" id="btnCheck">
            <i class="bi bi-search me-2"></i>Cek Status Kelulusan
        </button>
    </form>

    <!-- Area Hasil -->
    <div id="resultArea" style="display:none"></div>
</div>

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

<?= $this->section('scripts') ?>
<script>
    document.getElementById('checkForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const btn = document.getElementById('btnCheck');
        const res = document.getElementById('resultArea');

        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" style="width:1rem;height:1rem;border-width:2px"></span>Memeriksa...';
        res.style.display = 'none';

        fetch('/api/public/graduation/check', {
            method: 'POST',
            body: new FormData(this)
        })
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-search me-2"></i>Cek Status Kelulusan';
            res.style.display = 'block';

            if (!data.success) {
                res.innerHTML = `
                    <div class="result-card result-belum text-center">
                        <i class="bi bi-exclamation-triangle" style="font-size:2rem;color:#f59e0b;"></i>
                        <p style="margin:0.75rem 0 0;color:#94a3b8;font-size:0.9rem;">${data.message}</p>
                    </div>`;
                return;
            }

            const s = data.data;
            const isLulus      = s.kelulusan_status === 'LULUS';
            const isTidakLulus = s.kelulusan_status === 'TIDAK_LULUS';

            const cardClass  = isLulus ? 'result-lulus' : (isTidakLulus ? 'result-tidak-lulus' : 'result-belum');
            const badgeClass = isLulus ? 'status-badge-lulus' : (isTidakLulus ? 'status-badge-tidak' : 'status-badge-belum');
            const statusText = isLulus ? '✓ LULUS' : (isTidakLulus ? '✗ TIDAK LULUS' : '— BELUM DITENTUKAN');
            const icon       = isLulus ? 'bi-patch-check-fill' : (isTidakLulus ? 'bi-x-circle-fill' : 'bi-hourglass-split');
            const iconColor  = isLulus ? '#10b981' : (isTidakLulus ? '#ef4444' : '#f59e0b');

            const birthInfo = (s.birth_place && s.birth_date)
                ? `<p style="color:#64748b;font-size:0.78rem;margin:4px 0 0;">${s.birth_place}, ${s.birth_date}</p>`
                : '';

            const downloadBtn = data.download_token
                ? `<a href="/api/public/graduation/skl/${data.download_token}" class="btn-pub-success mt-3">
                       <i class="bi bi-file-earmark-pdf me-2"></i>Download SKL Digital
                   </a>`
                : '';

            res.innerHTML = `
                <div class="result-card ${cardClass} text-center">
                    <i class="bi ${icon}" style="font-size:2.5rem;color:${iconColor};"></i>
                    <p style="font-weight:700;font-size:1.05rem;color:#f1f5f9;margin:0.75rem 0 0.25rem;">${s.full_name}</p>
                    ${birthInfo}
                    <div style="margin:1rem 0;">
                        <span class="${badgeClass}">${statusText}</span>
                    </div>
                    ${downloadBtn}
                    <p style="color:#475569;font-size:0.72rem;margin:1rem 0 0;">
                        <i class="bi bi-arrow-repeat me-1"></i>
                        <a href="#" onclick="location.reload()" style="color:#6366f1;text-decoration:none;">Cek NISN lain</a>
                    </p>
                </div>`;
        })
        .catch(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-search me-2"></i>Cek Status Kelulusan';
            res.style.display = 'block';
            res.innerHTML = `<div class="result-card result-belum text-center">
                <i class="bi bi-wifi-off" style="font-size:2rem;color:#f59e0b;"></i>
                <p style="margin:0.75rem 0 0;color:#94a3b8;font-size:0.9rem;">Gagal terhubung ke server. Coba lagi.</p>
            </div>`;
        });
    });
</script>
<?= $this->endSection() ?>