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

<?php
    $selectedTypeName = 'Tahfidz Al-Qur\'an';
    $selectedTypeBadge = 'success';
    $selectedTypeIcon  = '☀️';
    if (isset($selectedProgram)) {
        $selectedTypeName  = match($selectedProgram['type']) {
            'pk'      => 'Tahfidz Program Khusus',
            'boarding'=> 'Tahfidz Boarding',
            default   => 'Tahfidz KBM Pagi'
        };
        $selectedTypeBadge = match($selectedProgram['type']) {
            'pk'      => 'warning',
            'boarding'=> 'primary',
            default   => 'success'
        };
        $selectedTypeIcon  = match($selectedProgram['type']) {
            'pk'      => '🏫',
            'boarding'=> '🌙',
            default   => '☀️'
        };
    }
?>

<div class="row g-3">

    <!-- ── HEADER BANNER ──────────────────────────────────────────── -->
    <div class="col-12">
        <div class="card border-0 shadow-sm overflow-hidden"
             style="background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 55%, #40916c 100%); border-radius: 14px; min-height: 120px;">
            <div class="card-body d-flex align-items-center gap-4 p-4 text-white">
                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                     style="width: 68px; height: 68px; background: rgba(255,255,255,0.15); font-size: 2rem;">
                    📖
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <h5 class="mb-0 fw-bold"><?= esc($selectedTypeName) ?></h5>
                        <span class="badge bg-white bg-opacity-20 text-white fw-normal" style="font-size:0.72rem;"><?= esc($selectedTypeIcon) ?> <?= esc($selectedProgram['name'] ?? 'Pilih Program') ?></span>
                    </div>
                    <p class="mb-0 opacity-75 small mt-1">
                        <?= esc($student['full_name']) ?> &bull; NIS: <?= esc($student['nis']) ?>
                        &bull; <?= esc($activePeriod['year_name'] ?? '') ?> — Sem. <?= esc($activePeriod['semester'] ?? '') ?>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <?php if (empty($programs)): ?>
    <!-- ── EMPTY STATE ───────────────────────────────────────────── -->
    <div class="col-12">
        <div class="card border-0 shadow-sm text-center py-5">
            <div class="card-body text-muted">
                <div style="font-size: 3.5rem; opacity: 0.2;">📿</div>
                <h5 class="fw-bold text-dark mt-3">Belum Terdaftar di Program Tahfidz</h5>
                <p class="small mb-0 text-muted">Anda belum dimasukkan ke dalam program tahfidz manapun pada periode ini.<br>Hubungi admin atau guru pengampu untuk informasi lebih lanjut.</p>
            </div>
        </div>
    </div>

    <?php else: ?>

    <!-- ── PILL SELECTOR PROGRAM (tampil hanya jika > 1 program) ── -->
    <?php if (count($programs) > 1): ?>
    <div class="col-12">
        <div class="card border-0 shadow-sm p-3">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="text-muted small fw-semibold me-2"><i class="bi bi-diagram-3 me-1"></i>Pilih Program:</span>
                <?php foreach ($programs as $p): ?>
                <?php
                    $pLabel = match($p['type']) { 'pk' => '🏫 Tahfidz PK', 'boarding' => '🌙 Boarding', default => '☀️ KBM Pagi' };
                    $pActive = ($selectedProgram && $p['id'] == $selectedProgram['id']);
                    $pBadge  = match($p['type']) { 'pk' => 'warning', 'boarding' => 'primary', default => 'success' };
                ?>
                <a href="/siswa/tahfidz?program_id=<?= $p['id'] ?>"
                   class="btn btn-sm <?= $pActive ? 'btn-'.$pBadge : 'btn-outline-'.$pBadge ?> fw-semibold"
                   style="border-radius: 20px; font-size: 0.8rem; padding: 4px 14px;">
                    <?= $pLabel ?> — <?= esc($p['name']) ?>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── METRIK RINGKASAN ─────────────────────────────────────── -->
    <div class="col-12">
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center py-3 h-100">
                    <div class="fs-1 fw-bold text-success"><?= $totalHafal ?></div>
                    <div class="text-muted small fw-semibold">Surah Dihafal</div>
                    <div class="text-muted mt-1" style="font-size:0.7rem;">dari 114 surah</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center py-3 h-100">
                    <?php $juzSelesai = count(array_filter($progressJuz, fn($j) => $j['persen'] === 100)); ?>
                    <div class="fs-1 fw-bold text-primary"><?= $juzSelesai ?></div>
                    <div class="text-muted small fw-semibold">Juz Selesai</div>
                    <div class="text-muted mt-1" style="font-size:0.7rem;">khatam 100%</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center py-3 h-100">
                    <div class="fs-1 fw-bold text-warning"><?= $avgNilai !== null ? number_format($avgNilai, 1) : '—' ?></div>
                    <div class="text-muted small fw-semibold">Rerata Nilai</div>
                    <div class="text-muted mt-1" style="font-size:0.7rem;">skala 0 – 100</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center py-3 h-100">
                    <?php $pctKhatam = $totalHafal > 0 ? round(($totalHafal / 114) * 100) : 0; ?>
                    <div class="fs-1 fw-bold text-info"><?= $pctKhatam ?>%</div>
                    <div class="text-muted small fw-semibold">Khatam Al-Qur'an</div>
                    <div class="progress mt-2 mx-3" style="height: 6px;">
                        <div class="progress-bar bg-info" style="width: <?= $pctKhatam ?>%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ── PETA PROGRESS 30 JUZ ─────────────────────────────────── -->
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                <h6 class="fw-bold text-dark mb-0">
                    <i class="bi bi-grid-3x3-gap text-success me-2"></i>Peta Progres 30 Juz
                </h6>
                <small class="text-muted">Warna semakin gelap = semakin banyak hafal. ✅ = khatam</small>
            </div>
            <div class="card-body p-4">
                <div class="row g-2">
                    <?php foreach ($progressJuz as $juz => $data): ?>
                    <?php
                        $pct = $data['persen'];
                        $bgColor   = match(true) {
                            $pct === 100 => '#1b4332',
                            $pct >= 75   => '#2d6a4f',
                            $pct >= 50   => '#52b788',
                            $pct > 0     => '#b7e4c7',
                            default      => '#f8f9fa',
                        };
                        $textColor = $pct >= 50 ? '#fff' : '#495057';
                        $border    = $pct > 0 ? 'none' : '1px solid #dee2e6';
                    ?>
                    <div class="col-4 col-sm-3 col-md-2">
                        <div class="rounded p-2 text-center position-relative d-flex flex-column justify-content-center align-items-center"
                             style="background: <?= $bgColor ?>; color: <?= $textColor ?>; border: <?= $border ?>; min-height: 70px; transition: transform .15s;"
                             title="Juz <?= $juz ?> — <?= $data['hafal'] ?>/<?= $data['total_surah'] ?> surah (<?= $pct ?>%)">
                            <div class="fw-bold" style="font-size: 0.75rem;">Juz <?= $juz ?></div>
                            <div style="font-size: 0.65rem; opacity: 0.85;"><?= $data['hafal'] ?>/<?= $data['total_surah'] ?></div>
                            <div class="fw-semibold" style="font-size: 0.6rem;"><?= $pct ?>%</div>
                            <?php if ($pct === 100): ?>
                            <span class="position-absolute top-0 end-0 p-1" style="font-size: 0.6rem;">✅</span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- ── PANEL KANAN: Setoran Terakhir + Info Program ──────────── -->
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                <h6 class="fw-bold text-dark mb-0">
                    <i class="bi bi-clock-history text-primary me-2"></i>Setoran Terakhir
                </h6>
            </div>
            <div class="card-body p-4">
                <?php if (!$lastSetoran): ?>
                <div class="text-center text-muted py-4">
                    <i class="bi bi-journal-text fs-2 d-block mb-2 opacity-25"></i>
                    Belum ada riwayat setoran hafalan.
                </div>
                <?php else: ?>
                <div class="p-3 rounded mb-3 border-start border-4 border-<?= $selectedTypeBadge ?>"
                     style="background: rgba(0,0,0,0.02);">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-<?= $lastSetoran['jenis'] === 'ziyadah' ? 'success' : 'info' ?> bg-opacity-15 text-<?= $lastSetoran['jenis'] === 'ziyadah' ? 'success' : 'info' ?> fw-bold">
                            <?= $lastSetoran['jenis'] === 'ziyadah' ? 'Ziyadah' : 'Mura\'jaah' ?>
                        </span>
                        <small class="text-muted"><?= date('d M Y', strtotime($lastSetoran['setoran_date'])) ?></small>
                    </div>
                    <?php if ($lastSetoran['is_iqra']): ?>
                        <h6 class="fw-bold mb-1 text-success">Membaca Iqra <?= esc($lastSetoran['iqra_no']) ?></h6>
                        <p class="small text-secondary mb-2">
                            Halaman: <strong class="text-dark"><?= $lastSetoran['iqra_page_start'] ?> – <?= $lastSetoran['iqra_page_end'] ?></strong>
                        </p>
                    <?php else: ?>
                        <h6 class="fw-bold mb-1 text-dark"><?= esc($lastSetoran['name_latin']) ?> (<?= esc($lastSetoran['name_arabic']) ?>)</h6>
                        <p class="small text-secondary mb-2">
                            Ayat: <strong class="text-dark"><?= $lastSetoran['ayat_start'] ?> – <?= $lastSetoran['ayat_end'] ?></strong>
                        </p>
                    <?php endif; ?>
                    <div class="d-flex align-items-center gap-2">
                        <span class="small text-muted">Nilai:</span>
                        <?php
                            $v = $lastSetoran['nilai'];
                            $cls = match(true) { $v>=95=>'success', $v>=85=>'primary', $v>=75=>'info', $v>=60=>'warning', default=>'danger' };
                        ?>
                        <span class="badge bg-<?= $cls ?> fw-bold"><?= $v ?></span>
                    </div>
                    <?php if ($lastSetoran['catatan']): ?>
                    <div class="mt-2 pt-2 border-top text-muted small fst-italic" style="font-size: 0.75rem;">
                        <strong>Catatan:</strong> "<?= esc($lastSetoran['catatan']) ?>"
                    </div>
                    <?php endif; ?>
                </div>
                <?php endif; ?>

                <!-- Info Program -->
                <div class="mt-3 pt-3 border-top">
                    <h6 class="fw-bold text-dark mb-2 small text-uppercase text-muted" style="letter-spacing:.04em;">
                        <i class="bi bi-info-circle me-1"></i>Informasi Program
                    </h6>
                    <div class="d-flex flex-column gap-1 small">
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Nama Program</span>
                            <span class="fw-semibold text-end"><?= esc($selectedProgram['name']) ?></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Tipe</span>
                            <span class="badge bg-<?= $selectedTypeBadge ?> bg-opacity-15 text-<?= $selectedTypeBadge ?>">
                                <?= esc($selectedTypeName) ?>
                            </span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Periode</span>
                            <span class="fw-semibold"><?= esc($activePeriod['year_name'] ?? '-') ?></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Semester</span>
                            <span class="fw-semibold"><?= esc($activePeriod['semester'] ?? '-') ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ── TABEL RIWAYAT SETORAN LENGKAP ─────────────────────────── -->
    <div class="col-12">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0 d-flex align-items-center justify-content-between">
                <h6 class="fw-bold text-dark mb-0">
                    <i class="bi bi-list-ol text-dark me-2"></i>Semua Riwayat Setoran
                </h6>
                <span class="badge bg-secondary bg-opacity-15 text-secondary"><?= count($recentSetoran) ?> data</span>
            </div>
            <div class="card-body p-0 mt-3">
                <div class="table-responsive">
                    <?php if (empty($recentSetoran)): ?>
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-journal-text fs-2 d-block mb-2 opacity-25"></i>
                        Tidak ada riwayat setoran hafalan.
                    </div>
                    <?php else: ?>
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="5%" class="text-center">No</th>
                                <th>Tanggal</th>
                                <th>Surah</th>
                                <th>Ayat</th>
                                <th>Jenis</th>
                                <th class="text-center">Nilai</th>
                                <th>Catatan Guru</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($recentSetoran as $idx => $s): ?>
                            <tr>
                                <td class="text-muted small text-center"><?= $idx + 1 ?></td>
                                <td class="small"><?= date('d/m/Y', strtotime($s['setoran_date'])) ?></td>
                                <td>
                                    <?php if ($s['is_iqra']): ?>
                                        <div class="fw-semibold small text-success">Iqra <?= esc($s['iqra_no']) ?></div>
                                    <?php else: ?>
                                        <div class="fw-semibold small text-dark"><?= esc($s['name_latin']) ?></div>
                                        <div class="text-muted" style="font-size:0.72rem; font-family: serif;"><?= esc($s['name_arabic']) ?></div>
                                    <?php endif; ?>
                                </td>
                                <td class="small fw-semibold">
                                    <?php if ($s['is_iqra']): ?>
                                        Hal. <?= $s['iqra_page_start'] ?> – <?= $s['iqra_page_end'] ?>
                                    <?php else: ?>
                                        <?= $s['ayat_start'] ?> – <?= $s['ayat_end'] ?>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <span class="badge bg-<?= $s['jenis'] === 'ziyadah' ? 'success' : 'info' ?> bg-opacity-15 text-<?= $s['jenis'] === 'ziyadah' ? 'success' : 'info' ?> small">
                                        <?= $s['jenis'] === 'ziyadah' ? 'Ziyadah' : 'Mura\'jaah' ?>
                                    </span>
                                </td>
                                <td class="text-center">
                                    <?php
                                        $v = $s['nilai'];
                                        $cls = match(true) { $v>=95=>'success', $v>=85=>'primary', $v>=75=>'info', $v>=60=>'warning', default=>'danger' };
                                    ?>
                                    <span class="badge bg-<?= $cls ?> fw-bold"><?= $v ?></span>
                                </td>
                                <td class="text-muted small fst-italic"><?= esc($s['catatan'] ?: '—') ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <?php endif; ?>
</div>

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