<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capaian Materi — {{ $santri->nama_lengkap }}</title>
    <style>
        /* ── RESET & BASE ── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #222;
            background: #fff;
            font-size: 10.5pt;
            line-height: 1.5;
        }

        /* ── SCREEN WRAPPER ── */
        .page-wrap {
            max-width: 210mm;
            margin: 0 auto;
            padding: 16mm 14mm;
        }

        /* ── PRINT BUTTON (screen only) ── */
        .print-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: #6FBA9D;
            color: #fff;
            border: none;
            padding: 11px 22px;
            border-radius: 8px;
            font-size: 10.5pt;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(111,186,157,.45);
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .print-btn:hover { background: #5EA98C; }

        /* ════════════════════════════
           HEADER
        ════════════════════════════ */
        .rapor-header {
            text-align: center;
            padding-bottom: 14px;
            border-bottom: 3px double #6FBA9D;
            margin-bottom: 18px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .rapor-header h1 { font-size: 15pt; color: #2e7d32; margin-bottom: 3px; letter-spacing: .5px; }
        .rapor-header h2 { font-size: 11pt; color: #555; font-weight: 400; margin-bottom: 6px; }
        .rapor-header .subtitle { font-size: 9.5pt; color: #888; }

        /* ════════════════════════════
           INFO SANTRI
        ════════════════════════════ */
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px 20px;
            background: #f7faf8;
            border: 1px solid #dde8e3;
            border-radius: 7px;
            padding: 12px 14px;
            margin-bottom: 18px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .info-item { font-size: 9.5pt; padding: 2px 0; }
        .info-item .label { color: #888; display: inline-block; width: 124px; }
        .info-item .value { font-weight: 600; color: #222; }

        /* ════════════════════════════
           SUMMARY BOXES
        ════════════════════════════ */
        .summary-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 22px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .summary-box {
            text-align: center;
            padding: 12px 8px;
            border-radius: 7px;
            border: 1px solid #e0e0e0;
        }
        .summary-box .sb-val   { font-size: 17pt; font-weight: 800; line-height: 1.1; }
        .summary-box .sb-label { font-size: 7.5pt; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
        .summary-box .sb-comp  { font-size: 8pt; margin-top: 4px; }

        .sb-green { border-color: #c8e6c9; background: #f1f8e9; }
        .sb-green .sb-val  { color: #2e7d32; }
        .sb-blue  { border-color: #bbdefb; background: #e3f2fd; }
        .sb-blue  .sb-val  { color: #1565c0; }
        .sb-amber { border-color: #ffecb3; background: #fffde7; }
        .sb-amber .sb-val  { color: #f57f17; }
        .sb-red   { border-color: #ffcdd2; background: #fbe9e7; }
        .sb-red   .sb-val  { color: #c62828; }

        .comp-up   { color: #2e7d32; }
        .comp-down { color: #c62828; }
        .comp-same { color: #999;    }

        /* ════════════════════════════
           SECTION HEADINGS
        ════════════════════════════ */
        .section-title {
            font-size: 11pt;
            font-weight: 700;
            color: #2e7d32;
            padding: 6px 10px;
            border-left: 4px solid #6FBA9D;
            background: #f1f8e9;
            border-radius: 0 5px 5px 0;
            margin-bottom: 10px;
            /* Judul selalu ikut tabel di bawahnya */
            break-after: avoid;
            page-break-after: avoid;
        }

        /* ════════════════════════════
           TABLES
        ════════════════════════════ */
        .tbl-wrap {
            margin-bottom: 22px;
            /* Bungkus tabel agar tidak terpotong (berlaku jika tabel kecil) */
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9pt;
            /* Header tabel muncul ulang di setiap halaman baru */
        }

        /* Header tabel muncul di setiap halaman */
        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }

        th {
            background: #e8f5e9;
            color: #1b5e20;
            font-weight: 700;
            padding: 7px 6px;
            text-align: left;
            border: 1px solid #c8e6c9;
            font-size: 8pt;
            text-transform: uppercase;
            letter-spacing: .3px;
            /* Judul kolom jangan terpotong */
            page-break-inside: avoid;
            break-inside: avoid;
        }

        td {
            padding: 6px 6px;
            border: 1px solid #e0e0e0;
            vertical-align: middle;
        }

        tbody tr:nth-child(even) { background: #fafafa; }

        /* KUNCI: setiap baris tabel tidak terpotong di tengah */
        tbody tr {
            break-inside: avoid;
            page-break-inside: avoid;
        }

        /* ── Progress bar mini ── */
        .prog-bar-mini {
            height: 7px;
            background: #eee;
            border-radius: 4px;
            overflow: hidden;
            min-width: 70px;
        }
        .prog-fill-mini { height: 100%; border-radius: 4px; }

        /* ── Badges ── */
        .badge-sm {
            display: inline-block;
            padding: 2px 7px;
            border-radius: 10px;
            font-size: 8pt;
            font-weight: 600;
            white-space: nowrap;
        }
        .badge-success { background: #e8f5e9; color: #2e7d32; }
        .badge-warning { background: #fff8e1; color: #f57f17; }
        .badge-danger  { background: #fbe9e7; color: #c62828; }
        .badge-info    { background: #e3f2fd; color: #1565c0; }

        /* ════════════════════════════
           CATATAN BOX
        ════════════════════════════ */
        .catatan-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 22px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .catatan-box {
            background: #f7faf8;
            border: 1px solid #dde8e3;
            border-radius: 7px;
            padding: 12px 14px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .catatan-box h4 { font-size: 9pt; color: #555; margin-bottom: 8px; font-weight: 600; }
        .catatan-line   { border-bottom: 1px dotted #ccc; height: 22px; }

        /* ════════════════════════════
           TANDA TANGAN
        ════════════════════════════ */
        .ttd-section {
            display: flex;
            justify-content: flex-end;   /* dorong ke kanan */
            margin-top: 24px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .ttd-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            min-width: 360px;
        }
        .ttd-col { text-align: center; }
        .ttd-col .ttd-header {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 0;
        }
        .ttd-col .ttd-kota   { font-size: 9pt; color: #555; }
        .ttd-col .ttd-menget { font-size: 9pt; color: #555; }
        .ttd-col .ttd-space  { height: 56px; }
        .ttd-col .ttd-line   {
            border-top: 1px solid #333;
            display: block;
            padding-top: 4px;
            font-size: 9pt;
            color: #555;
            letter-spacing: .5px;
        }

        /* ════════════════════════════
           FOOTER
        ════════════════════════════ */
        .rapor-footer {
            text-align: center;
            padding-top: 16px;
            margin-top: 20px;
            border-top: 1px solid #e0e0e0;
            font-size: 8.5pt;
            color: #aaa;
            break-inside: avoid;
            page-break-inside: avoid;
        }

        /* ════════════════════════════
           PRINT RULES
        ════════════════════════════ */
        @media print {
            body { background: #fff; }

            /*
             * margin: 0 di @page menghilangkan area header/footer bawaan browser
             * (tempat browser mencetak URL, judul, tanggal).
             * Padding halaman ditangani oleh .page-wrap.
             */
            @page {
                size: A4 portrait;
                margin: 0;
            }

            .page-wrap { padding: 10mm 12mm; max-width: 100%; }

            .print-btn,
            .no-print { display: none !important; }

            /* Pastikan bagian-bagian penting tidak terpotong */
            .rapor-header,
            .info-grid,
            .summary-row,
            .section-title,
            .catatan-section,
            .catatan-box,
            .ttd-section,
            .rapor-footer { break-inside: avoid; page-break-inside: avoid; }

            /* Tabel boleh melintasi halaman TAPI baris tidak boleh terpotong */
            table  { break-inside: auto; page-break-inside: auto; }
            thead  { display: table-header-group; }
            tbody tr {
                break-inside: avoid !important;
                page-break-inside: avoid !important;
            }

            /* Judul section tidak boleh tertinggal sendirian di bawah halaman */
            .section-title {
                break-after: avoid !important;
                page-break-after: avoid !important;
            }
        }
    </style>
</head>
<body>

<button class="print-btn no-print" onclick="window.print()">
    🖨️ Cetak / Simpan PDF
</button>

<div class="page-wrap">

    {{-- ── HEADER ── --}}
    <div class="rapor-header">
        <h1>CAPAIAN MATERI</h1>
        <h2>Pondok Pesantren Riyadlul Jannah</h2>
        <div class="subtitle">{{ $semester->nama_semester }} — Tahun Ajaran {{ $semester->tahun_ajaran }}</div>
    </div>

    {{-- ── INFO SANTRI ── --}}
    <div class="info-grid">
        <div class="info-item"><span class="label">Nama Lengkap</span><span class="value">{{ $santri->nama_lengkap }}</span></div>
        <div class="info-item"><span class="label">NIS</span><span class="value">{{ $santri->nis }}</span></div>
        <div class="info-item"><span class="label">Kelas</span><span class="value">{{ $santri->kelas }}</span></div>
        <div class="info-item"><span class="label">Status</span><span class="value">{{ $santri->status }}</span></div>
        <div class="info-item"><span class="label">Semester</span><span class="value">{{ $semester->nama_semester }}</span></div>
        <div class="info-item"><span class="label">Tanggal Cetak</span><span class="value">{{ now()->translatedFormat('d F Y') }}</span></div>
    </div>

    {{-- ── SUMMARY ── --}}
    <div class="summary-row">
        <div class="summary-box sb-green">
            <div class="sb-val">{{ number_format($avgProgress, 1) }}%</div>
            <div class="sb-label">Rata-rata Progress</div>
            @if($prevSemester)
                @php $delta = $avgProgress - $avgPrev; @endphp
                <div class="sb-comp {{ $delta >= 0 ? 'comp-up' : 'comp-down' }}">
                    {{ $delta >= 0 ? '▲' : '▼' }} {{ number_format(abs($delta), 1) }}%
                    <span style="font-size:7.5pt;color:#999;display:block;">dari {{ $prevSemester->nama_semester }}</span>
                </div>
            @endif
        </div>
        <div class="summary-box sb-blue">
            <div class="sb-val">{{ $totalMateri }}</div>
            <div class="sb-label">Total Materi</div>
        </div>
        <div class="summary-box sb-amber">
            <div class="sb-val">{{ $selesai }}</div>
            <div class="sb-label">Materi Selesai</div>
        </div>
        <div class="summary-box {{ $avgProgress >= 70 ? 'sb-green' : ($avgProgress >= 40 ? 'sb-amber' : 'sb-red') }}">
            <div class="sb-val">{{ $avgProgress >= 80 ? 'A' : ($avgProgress >= 65 ? 'B' : ($avgProgress >= 50 ? 'C' : 'D')) }}</div>
            <div class="sb-label">Predikat</div>
        </div>
    </div>

    {{-- ── RINGKASAN PER KATEGORI ── --}}
    <div class="section-title">Ringkasan Per Kategori</div>
    <div class="tbl-wrap">
        <table>
            <thead>
                <tr>
                    <th style="width:28%;">Kategori</th>
                    <th style="width:12%;text-align:center;">Jml Materi</th>
                    <th style="width:10%;text-align:center;">Selesai</th>
                    <th style="width:18%;text-align:center;">Rata-rata Progress</th>
                    <th style="width:15%;text-align:center;">Semester Lalu</th>
                    <th style="width:17%;text-align:center;">Perubahan</th>
                </tr>
            </thead>
            <tbody>
                @foreach($perKategori as $kat => $data)
                @php $change = $data['avg'] - $data['prev']; @endphp
                <tr>
                    <td><strong>{{ $kat }}</strong></td>
                    <td style="text-align:center;">{{ $data['count'] }}</td>
                    <td style="text-align:center;">{{ $data['selesai'] }}</td>
                    <td style="text-align:center;">
                        <span class="badge-sm {{ $data['avg'] >= 70 ? 'badge-success' : ($data['avg'] >= 40 ? 'badge-warning' : 'badge-danger') }}">
                            {{ number_format($data['avg'], 1) }}%
                        </span>
                    </td>
                    <td style="text-align:center;">{{ number_format($data['prev'], 1) }}%</td>
                    <td style="text-align:center;">
                        <span class="{{ $change > 0 ? 'comp-up' : ($change < 0 ? 'comp-down' : 'comp-same') }}">
                            {{ $change > 0 ? '+' : '' }}{{ number_format($change, 1) }}%
                        </span>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- ── DETAIL PER MATERI ── --}}
    <div class="section-title">Detail Progress Per Materi</div>
    <div class="tbl-wrap">
        <table>
            <thead>
                <tr>
                    <th style="width:4%;text-align:center;">No</th>
                    <th style="width:24%;">Nama Materi</th>
                    <th style="width:13%;">Kategori</th>
                    <th style="width:9%;text-align:center;">Halaman</th>
                    <th style="width:14%;">Progress</th>
                    <th style="width:9%;text-align:center;">%</th>
                    <th style="width:12%;text-align:center;">Sem. Lalu</th>
                    <th style="width:15%;">Catatan</th>
                </tr>
            </thead>
            <tbody>
                @forelse($capaians as $idx => $cap)
                @php
                    $prevCap   = $prevCapaians->where('id_materi', $cap->id_materi)->first();
                    $prevPct   = $prevCap ? floatval($prevCap->persentase) : 0;
                    $changePct = floatval($cap->persentase) - $prevPct;
                    $pct       = min(floatval($cap->persentase), 100);
                    $barColor  = $pct >= 80 ? '#66bb6a' : ($pct >= 50 ? '#ffa726' : '#ef5350');
                    $pctColor  = $pct >= 100 ? '#2e7d32' : ($pct >= 50 ? '#f57f17' : '#c62828');
                @endphp
                <tr>
                    <td style="text-align:center;">{{ $idx + 1 }}</td>
                    <td><strong>{{ $cap->materi->nama_kitab }}</strong></td>
                    <td>
                        <span class="badge-sm {{ $cap->materi->kategori === "Al-Qur'an" ? 'badge-success' : ($cap->materi->kategori === 'Hadist' ? 'badge-info' : 'badge-warning') }}">
                            {{ $cap->materi->kategori }}
                        </span>
                    </td>
                    <td style="text-align:center;font-size:8.5pt;">{{ $cap->halaman_selesai ?: '—' }}</td>
                    <td>
                        <div class="prog-bar-mini">
                            <div class="prog-fill-mini" style="width:{{ $pct }}%;background:{{ $barColor }};"></div>
                        </div>
                    </td>
                    <td style="text-align:center;">
                        <strong style="color:{{ $pctColor }};">{{ number_format($cap->persentase, 1) }}%</strong>
                    </td>
                    <td style="text-align:center;">
                        {{ number_format($prevPct, 1) }}%
                        <div class="{{ $changePct > 0 ? 'comp-up' : ($changePct < 0 ? 'comp-down' : 'comp-same') }}" style="font-size:7.5pt;">
                            {{ $changePct > 0 ? '+' : '' }}{{ number_format($changePct, 1) }}%
                        </div>
                    </td>
                    <td style="font-size:8pt;color:#555;">{{ $cap->catatan ?: '—' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" style="text-align:center;color:#999;padding:18px;">
                        Belum ada data capaian untuk semester ini.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- ── CATATAN & TARGET ── --}}
    <div class="catatan-section">
        <div class="catatan-box">
            <h4>Catatan / Rekomendasi Ustadz:</h4>
            <div class="catatan-line"></div>
            <div class="catatan-line"></div>
            <div class="catatan-line"></div>
        </div>
        <div class="catatan-box">
            <h4>Target Semester Depan:</h4>
            <div class="catatan-line"></div>
            <div class="catatan-line"></div>
            <div class="catatan-line"></div>
        </div>
    </div>

{{-- ── TANDA TANGAN ── --}}
    <div class="ttd-section">
        <div style="display:flex; justify-content:flex-end;">
            <div class="ttd-col">
                <div style="font-size:9pt;color:#555;">Mengetahui, ...............................</div>
                <div class="ttd-space"></div>
                <div class=>( ................................................ )</div>
            </div>
        </div>
    </div>

</div>{{-- /page-wrap --}}

</body>
</html>