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

<?= $this->include('guru/tahfidz/_subnav') ?>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-success bg-opacity-10 border-0 py-3">
                <h5 class="card-title fw-bold text-success mb-0">
                    <i class="bi bi-gear-fill me-2"></i>Persiapan Rapor Tahfidz Akhir Semester
                </h5>
            </div>
            <div class="card-body">
                <!-- Info Siswa -->
                <div class="p-3 bg-light rounded-3 mb-4">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <span class="text-muted small d-block">Nama Lengkap</span>
                            <strong class="fs-6 text-dark"><?= esc($student['full_name']) ?></strong>
                        </div>
                        <div class="col-sm-3">
                            <span class="text-muted small d-block">NIS / NISN</span>
                            <span class="fw-semibold text-dark"><?= esc($student['nis']) ?> / <?= esc($student['nisn'] ?: '-') ?></span>
                        </div>
                        <div class="col-sm-3">
                            <span class="text-muted small d-block">Kelas</span>
                            <span class="badge bg-secondary"><?= esc($student['classroom_name'] ?: '-') ?></span>
                        </div>
                    </div>
                </div>

                <!-- Rekap Nilai Harian (Sebagai Referensi Guru) -->
                <div class="card border-1 border-light mb-4">
                    <div class="card-header bg-light py-2">
                        <span class="fw-bold text-secondary small"><i class="bi bi-info-circle me-1"></i>Referensi Capaian Riil Database (Semester Ini)</span>
                    </div>
                    <div class="card-body py-3">
                        <div class="row text-center g-2">
                            <div class="col-4 border-end">
                                <span class="text-muted small d-block">Rerata Nilai Harian</span>
                                <strong class="fs-5 text-primary"><?= $avgScore ?: '0' ?></strong>
                                <span class="d-block small text-muted">
                                    <?php
                                    $pLabel = 'Dhoif';
                                    if ($avgScore >= 95) $pLabel = 'Mumtaz';
                                    elseif ($avgScore >= 85) $pLabel = 'Jayyid Jiddan';
                                    elseif ($avgScore >= 75) $pLabel = 'Jayyid';
                                    elseif ($avgScore >= 60) $pLabel = 'Maqbul';
                                    echo "({$pLabel})";
                                    ?>
                                </span>
                            </div>
                            <div class="col-4 border-end">
                                <span class="text-muted small d-block">Total Maju Setoran</span>
                                <strong class="fs-5 text-success"><?= $totalSetoran ?>x</strong>
                                <span class="d-block small text-muted">ziyadah & murojaah</span>
                            </div>
                            <div class="col-4">
                                <span class="text-muted small d-block">Surah Selesai Hafal</span>
                                <strong class="fs-5 text-warning"><?= $totalHafal ?> Surah</strong>
                                <span class="d-block small text-muted">dari 114 surah</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Pengisian Rapor -->
                <form action="/guru/tahfidz/save-report" method="POST" target="_blank">
                    <?= csrf_field() ?>
                    <input type="hidden" name="program_id" value="<?= esc($program['id']) ?>">
                    <input type="hidden" name="student_id" value="<?= esc($student['id']) ?>">

                    <h6 class="fw-bold text-dark border-bottom pb-2 mb-3">II. Penilaian Kualitas (Karakter &amp; Bacaan)</h6>
                    
                    <div class="row g-3 mb-4">
                        <!-- Kelancaran & Fashahah -->
                        <div class="col-md-4">
                            <label for="fashahah" class="form-label fw-semibold small">1. Fashahah &amp; Kelancaran</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="fashahah" id="fashahah" class="form-control text-center fw-bold" min="0" max="100" value="<?= $fashahahVal ?>" oninput="calculatePredikat('fashahah')">
                                <span class="input-group-text">/ 100</span>
                            </div>
                            <div class="mt-2 text-center">
                                <span id="fashahah_badge" class="badge bg-secondary">Predikat</span>
                            </div>
                        </div>

                        <!-- Hukum Tajwid -->
                        <div class="col-md-4">
                            <label for="tajwid" class="form-label fw-semibold small">2. Hukum Tajwid &amp; Mad</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="tajwid" id="tajwid" class="form-control text-center fw-bold" min="0" max="100" value="<?= $tajwidVal ?>" oninput="calculatePredikat('tajwid')">
                                <span class="input-group-text">/ 100</span>
                            </div>
                            <div class="mt-2 text-center">
                                <span id="tajwid_badge" class="badge bg-secondary">Predikat</span>
                            </div>
                        </div>

                        <!-- Adab & Sikap -->
                        <div class="col-md-4">
                            <label for="adab" class="form-label fw-semibold small">3. Sikap Adab &amp; Disiplin</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="adab" id="adab" class="form-control text-center fw-bold" min="0" max="100" value="<?= $adabVal ?>" oninput="calculatePredikat('adab')">
                                <span class="input-group-text">/ 100</span>
                            </div>
                            <div class="mt-2 text-center">
                                <span id="adab_badge" class="badge bg-secondary">Predikat</span>
                            </div>
                        </div>
                    </div>

                    <h6 class="fw-bold text-dark border-bottom pb-2 mb-3">III. Catatan Evaluasi &amp; Rekomendasi Guru</h6>
                    <div class="mb-4">
                        <label for="catatan" class="form-label small text-muted">Akan ditampilkan di lembar rapor bagian bawah</label>
                        <textarea name="catatan" id="catatan" rows="3" class="form-control form-control-sm" placeholder="Masukkan evaluasi perkembangan hafalan, kendala atau nasihat belajar untuk ananda..."><?= esc($catatanVal) ?></textarea>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="/guru/tahfidz/laporan/<?= esc($program['id']) ?>" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>Kembali ke Laporan
                        </a>
                        <button type="submit" class="btn btn-sm btn-success px-4 fw-bold">
                            <i class="bi bi-printer me-2"></i>Pratinjau &amp; Cetak Rapor
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
function getPredicate(v) {
    const val = parseInt(v) || 0;
    if (val >= 95) return { text: 'Mumtaz', cls: 'bg-success text-white' };
    if (val >= 85) return { text: 'Jayyid Jiddan', cls: 'bg-primary text-white' };
    if (val >= 75) return { text: 'Jayyid', cls: 'bg-info text-dark' };
    if (val >= 60) return { text: 'Maqbul', cls: 'bg-warning text-dark' };
    return { text: 'Dhoif', cls: 'bg-danger text-white' };
}

function calculatePredikat(id) {
    const input = document.getElementById(id);
    const badge = document.getElementById(id + '_badge');
    if (!input || !badge) return;
    
    let val = parseInt(input.value);
    if (isNaN(val)) val = 0;
    if (val < 0) { val = 0; input.value = 0; }
    if (val > 100) { val = 100; input.value = 100; }
    
    const pred = getPredicate(val);
    badge.textContent = pred.text;
    badge.className = 'badge ' + pred.cls;
}

// Initial calculation on page load
document.addEventListener("DOMContentLoaded", function() {
    calculatePredikat('fashahah');
    calculatePredikat('tajwid');
    calculatePredikat('adab');
});
</script>
<?= $this->endSection() ?>
