<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Rapor Tahfidz Akhir Semester - <?= esc($student['full_name']) ?></title>
    <style>
        body {
            font-family: Arial, sans-serif;
            color: #000;
            font-size: 11pt;
            line-height: 1.4;
            margin: 40px;
        }
        .report-title {
            text-align: center;
            margin-top: 15px;
            margin-bottom: 25px;
        }
        .report-title h3 {
            margin: 0;
            font-size: 13pt;
            font-weight: bold;
            text-decoration: underline;
            text-transform: uppercase;
        }
        .report-title p {
            margin: 5px 0 0 0;
            font-size: 10pt;
            color: #555;
        }
        .student-info {
            width: 100%;
            margin-bottom: 20px;
            font-size: 10pt;
            border-collapse: collapse;
        }
        .student-info td {
            padding: 4px 0;
            vertical-align: top;
        }
        .student-info td.label {
            width: 130px;
            font-weight: bold;
        }
        .section-title {
            font-size: 11pt;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 8px;
            border-bottom: 1px solid #000;
            padding-bottom: 4px;
            color: #000;
        }
        table.data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10pt;
            margin-bottom: 20px;
        }
        table.data-table th, table.data-table td {
            border: 1px solid #000;
            padding: 8px 10px;
            text-align: left;
        }
        table.data-table th {
            background-color: #f2f2f2;
            font-weight: bold;
            text-align: center;
        }
        .text-center {
            text-align: center !important;
        }
        .badge {
            display: inline-block;
            padding: 3px 6px;
            font-size: 8pt;
            font-weight: bold;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        .notes-box {
            border: 1px solid #000;
            padding: 12px;
            border-radius: 6px;
            font-size: 9.5pt;
            min-height: 50px;
            background-color: #fafafa;
        }
        .footer-sign {
            width: 100%;
            margin-top: 40px;
            border-collapse: collapse;
        }
        .footer-sign td {
            text-align: center;
            width: 50%;
            font-size: 10.5pt;
            vertical-align: top;
        }
        .signature-space {
            height: 70px;
        }
        
        /* Interactive contenteditable styling */
        [contenteditable="true"] {
            border-bottom: 1px dotted #666;
            padding: 2px 4px;
            outline: none;
            cursor: text;
        }
        [contenteditable="true"]:focus {
            background-color: #fff9db;
            border-bottom: 1px solid #f59f00;
        }
        @media print {
            body { margin: 20px; }
            .no-print { display: none; }
            [contenteditable="true"] {
                border-bottom: none !important;
                background-color: transparent !important;
                padding: 0 !important;
            }
        }
    </style>
</head>
<body>

    <!-- Floating Action Button for print -->
    <div class="no-print" style="margin-bottom: 20px; text-align: right; padding: 10px; background-color: #e3f2fd; border: 1px solid #90caf9; border-radius: 5px;">
        <button onclick="window.print();" style="padding: 8px 16px; font-weight: bold; background: #0d6efd; color: #fff; border: none; border-radius: 4px; cursor: pointer;">
            🖨️ Cetak Rapor Tahfidz
        </button>
        <span style="margin-left: 15px; font-size: 9.5pt; color: #555;">Gunakan dialog cetak browser Anda untuk menyimpan sebagai PDF.</span>
    </div>

    <!-- Kop Surat Resmi (Sama persis dengan Surat Keterangan Aktif / Mutasi) -->
    <?= view('letter/_kop', ['letterSettings' => $schoolSettings, 'schoolSettings' => $schoolSettings]) ?>

    <!-- Judul Rapor -->
    <div class="report-title">
        <h3>Laporan Hasil Belajar Tahfidz Al-Qur'an</h3>
        <p>Evaluasi Capaian Akhir Semester</p>
    </div>

    <!-- Profil Siswa -->
    <table class="student-info">
        <tr>
            <td class="label">Nama Lengkap</td>
            <td style="width: 40%;">: <strong><?= esc($student['full_name']) ?></strong></td>
            <td class="label" style="padding-left: 20px;">Semester</td>
            <td>: Sem. <?= esc($period['semester'] ?? '-') ?></td>
        </tr>
        <tr>
            <td class="label">NIS / NISN</td>
            <td>: <?= esc($student['nis']) ?> / <?= esc($student['nisn'] ?: '-') ?></td>
            <td class="label" style="padding-left: 20px;">Tahun Pelajaran</td>
            <td>: <?= esc($period['year_name'] ?? '-') ?></td>
        </tr>
        <tr>
            <td class="label">Kelas</td>
            <td>: <?= esc($student['classroom_name'] ?: '-') ?></td>
            <td class="label" style="padding-left: 20px;">Guru Pengampu</td>
            <td>: <?= esc($teacher['name']) ?></td>
        </tr>
    </table>

    <!-- SECTION I: CAPAIAN QUANTITATIVE -->
    <div class="section-title">I. Capaian Progres &amp; Kuantitas Hafalan (Selesai Tasmi' / Hafal)</div>
    <table class="data-table">
        <thead>
            <tr>
                <th style="width: 5%;" class="text-center">No</th>
                <th style="width: 35%;">Nama Surah (Jumlah Ayat)</th>
                <th style="width: 20%;" class="text-center">Frekuensi Maju Setoran</th>
                <th style="width: 20%;" class="text-center">Rerata Nilai Setoran</th>
                <th style="width: 20%;" class="text-center">Kategori Predikat</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $getPredikatLabel = function($score) {
                if ($score === null) return '—';
                if ($score >= 95) return 'Mumtaz';
                if ($score >= 85) return 'Jayyid Jiddan';
                if ($score >= 75) return 'Jayyid';
                if ($score >= 60) return 'Maqbul';
                return 'Dhoif';
            };
            ?>
            <?php if (empty($completedSurahs) && !($latestIqraSetoran ?? null)): ?>
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted">Belum ada surah yang selesai dihafalkan atau progres Iqra pada semester ini.</td>
                </tr>
            <?php else: ?>
                <?php $no = 1; ?>
                <?php if (isset($latestIqraSetoran) && $latestIqraSetoran): ?>
                    <?php
                    $score = $avgScore;
                    $predikat = $getPredikatLabel($score);
                    ?>
                    <tr>
                        <td class="text-center"><?= $no++ ?></td>
                        <td><strong>Membaca Iqra <?= esc($latestIqraSetoran['iqra_no']) ?></strong> (Halaman <?= esc($latestIqraSetoran['iqra_page_start']) ?> – <?= esc($latestIqraSetoran['iqra_page_end']) ?>)</td>
                        <td class="text-center"><?= $totalSetoran ?> Kali</td>
                        <td class="text-center fw-bold"><?= $score !== null ? number_format($score, 1) : '—' ?></td>
                        <td class="text-center"><?= $predikat ?></td>
                    </tr>
                <?php endif; ?>
                <?php foreach ($completedSurahs as $cs): ?>
                    <?php
                    $score = $cs['avg_score'];
                    $predikat = $getPredikatLabel($score);
                    ?>
                    <tr>
                        <td class="text-center"><?= $no++ ?></td>
                        <td><strong>Surah <?= esc($cs['surah_name']) ?></strong> (<?= $cs['total_ayat'] ?> Ayat)</td>
                        <td class="text-center"><?= $cs['total_maju'] ?> Kali</td>
                        <td class="text-center fw-bold"><?= $score !== null ? $score : '—' ?></td>
                        <td class="text-center"><?= $predikat ?></td>
                    </tr>
                <?php endforeach; ?>
            <?php endif; ?>
        </tbody>
    </table>

    <!-- SECTION II: PENILAIAN KUALITATIF -->
    <div class="section-title">II. Penilaian Kualitas Hafalan (Karakter &amp; Bacaan)</div>
    <table class="data-table">
        <thead>
            <tr>
                <th style="width: 5%;">No</th>
                <th>Aspek Kompetensi Penilaian</th>
                <th style="width: 15%;" class="text-center">Nilai Rata-rata</th>
                <th style="width: 25%;" class="text-center">Kategori Predikat</th>
                <th style="width: 35%;">Keterangan Hasil Belajar</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $fashInfo = $getPredikatLabel($fashahah);
            $tajwidInfo = $getPredikatLabel($tajwid);
            $adabInfo = $getPredikatLabel($adab);
            ?>
            <tr>
                <td class="text-center">1</td>
                <td><strong>Kelancaran &amp; Fashahah (Makharijul Huruf)</strong></td>
                <td class="text-center fw-bold"><?= $fashahah ?></td>
                <td class="text-center"><strong><?= $fashInfo ?></strong></td>
                <td class="small text-muted">Menilai ketepatan pengucapan huruf, waqaf, ibtida, serta kelancaran menyambung ayat tanpa tersendat.</td>
            </tr>
            <tr>
                <td class="text-center">2</td>
                <td><strong>Hukum Tajwid &amp; Mad Bacaan</strong></td>
                <td class="text-center fw-bold"><?= $tajwid ?></td>
                <td class="text-center"><strong><?= $tajwidInfo ?></strong></td>
                <td class="small text-muted">Menilai ketepatan panjang pendek (mad), dengung (ghunnah), dan kaidah tajwid lainnya selama menyetor.</td>
            </tr>
            <tr>
                <td class="text-center">3</td>
                <td><strong>Sikap Adab &amp; Kedisiplinan Setoran</strong></td>
                <td class="text-center fw-bold"><?= $adab ?></td>
                <td class="text-center"><strong><?= $adabInfo ?></strong></td>
                <td class="small text-muted">Menilai antusiasme, etika selama berhadapan dengan guru, kerajinan murojaah harian, serta kehadiran kelas.</td>
            </tr>
        </tbody>
    </table>

    <!-- SECTION III: CATATAN GURU -->
    <div class="section-title">III. Catatan Evaluasi &amp; Rekomendasi Guru</div>
    <div class="notes-box">
        <?= nl2br(esc($catatan)) ?>
    </div>

    <!-- SIGNATURES -->
    <?php
    $kota = !empty($schoolSettings['letter_city']) ? $schoolSettings['letter_city'] : (!empty($schoolSettings['city']) ? $schoolSettings['city'] : 'Wonogiri');
    $isMadrasah = (isset($schoolSettings['school_type']) && strtolower($schoolSettings['school_type']) === 'madrasah') || (isset($schoolSettings['school_name']) && stripos($schoolSettings['school_name'], 'madrasah') !== false) || (isset($schoolSettings['school_name']) && stripos($schoolSettings['school_name'], 'man') !== false) || (isset($schoolSettings['school_name']) && stripos($schoolSettings['school_name'], 'mts') !== false) || (isset($schoolSettings['school_name']) && stripos($schoolSettings['school_name'], 'ma') !== false) || (isset($schoolSettings['school_name']) && stripos($schoolSettings['school_name'], 'mi') !== false);
    $principalTitle = $isMadrasah ? 'Kepala Madrasah' : 'Kepala Sekolah';
    ?>
    <table class="footer-sign">
        <tr>
            <td style="vertical-align: top; width: 50%;">
                <p style="margin-bottom: 5px;">Mengetahui,</p>
                <p style="font-weight: bold; margin-top: 0;"><?= $principalTitle ?></p>
                <div class="signature-space"></div>
                <p style="text-decoration: underline; font-weight: bold; margin-bottom: 0;"><?= esc($schoolSettings['principal_name'] ?? '___________________________') ?></p>
                <p style="font-size: 9.5pt; color: #555; margin-top: 4px;">NIP. <?= esc($schoolSettings['principal_nip'] ?? '-') ?></p>
            </td>
            <td style="vertical-align: top; width: 50%;">
                <p style="margin-bottom: 5px;"><?= esc($kota) ?>, <?= format_tanggal_indonesia(date('Y-m-d')) ?></p>
                <p style="font-weight: bold; margin-top: 0;">Guru Pengampu,</p>
                <div class="signature-space"></div>
                <p style="text-decoration: underline; font-weight: bold; margin-bottom: 0;"><?= esc(format_person_name($teacher['name'])) ?></p>
                <p style="font-size: 9.5pt; color: #555; margin-top: 4px;"><?= esc(teacher_id_label($teacher['status_kepegawaian'] ?? null)) ?>. <?= esc(teacher_id_display($teacher)) ?></p>
            </td>
        </tr>
    </table>

    <script>
        window.onload = function() {
            window.print();
        }
    </script>
</body>
</html>
