<!DOCTYPE html>
<html lang="ms">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengesahan BOSS — {{ $user->nama_sekolah ?? $user->name }} — {{ $pengesahan->tahun }}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 10px;
            color: #000;
            background: #fff;
            padding: 12mm 15mm 10mm 15mm;
        }

        /* ── Letterhead ── */
        .letterhead {
            text-align: center;
            border-bottom: 3px double #000;
            padding-bottom: 10px;
            margin-bottom: 12px;
        }

        .letterhead img {
            height: 75px;
            margin-bottom: 6px;
        }

        .letterhead h1 {
            font-size: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 2px;
        }

        .letterhead h2 {
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .letterhead h3 {
            font-size: 11px;
            font-weight: normal;
            text-transform: uppercase;
        }

        .letterhead h4 {
            font-size: 12px;
            font-weight: bold;
            margin-top: 8px;
            text-decoration: underline;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ── Info box ── */
        .info-box {
            border: 1px solid #555;
            border-radius: 3px;
            padding: 7px 12px;
            margin-bottom: 12px;
            background: #f9f9f9;
        }

        .info-box table {
            width: 100%;
            border-collapse: collapse;
        }

        .info-box td {
            padding: 3px 5px;
            font-size: 10px;
            vertical-align: top;
        }

        .info-box td:nth-child(odd) {
            font-weight: bold;
            width: 18%;
            white-space: nowrap;
        }

        .info-box td.sep {
            width: 2%;
        }

        /* ── Status badge ── */
        .badge-status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 9.5px;
            font-weight: bold;
            color: #fff;
        }

        .badge-lulus {
            background: #28a745;
        }

        .badge-ditolak {
            background: #dc3545;
        }

        .badge-belum {
            background: #ffc107;
            color: #000;
        }

        /* ── Darjah section ── */
        .darjah-section {
            margin-bottom: 14px;
            page-break-inside: avoid;
        }

        .darjah-title {
            background: #2c3e50;
            color: #fff;
            font-size: 10.5px;
            font-weight: bold;
            padding: 4px 10px;
            border-radius: 3px 3px 0 0;
        }

        /* ── Data table ── */
        table.data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 8.5px;
        }

        table.data-table th {
            background: #3d5a80;
            color: #fff;
            text-align: center;
            padding: 4px 3px;
            border: 1px solid #2c3e50;
            font-size: 8px;
            line-height: 1.3;
        }

        table.data-table td {
            border: 1px solid #bbb;
            padding: 3px 4px;
            vertical-align: middle;
        }

        table.data-table tbody tr:nth-child(even) {
            background: #f4f8ff;
        }

        table.data-table td.num {
            text-align: right;
        }

        table.data-table td.center {
            text-align: center;
        }

        table.data-table tfoot td {
            background: #e8f0fe;
            font-weight: bold;
            font-size: 8.5px;
            border: 1px solid #aaa;
        }

        /* ── Signature ── */
        .signature-section {
            margin-top: 20px;
            page-break-inside: avoid;
        }

        .signature-section table {
            width: 100%;
            border-collapse: collapse;
        }

        .signature-section td {
            width: 50%;
            padding: 0 20px;
            vertical-align: top;
            text-align: center;
        }

        .sig-box {
            border: 1px solid #999;
            border-radius: 3px;
            padding: 8px;
        }

        .sig-title {
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 1px solid #ccc;
            padding-bottom: 4px;
            margin-bottom: 6px;
        }

        .sig-line {
            border-bottom: 1px solid #000;
            height: 55px;
            margin: 0 10px 6px 10px;
        }

        .sig-name {
            font-size: 9px;
            margin-bottom: 2px;
        }

        .sig-post {
            font-size: 8.5px;
            color: #555;
        }

        /* ── Print button (hidden on print) ── */
        .print-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #1a56a0;
            color: #fff;
            border: none;
            padding: 10px 22px;
            border-radius: 5px;
            font-size: 13px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            z-index: 999;
        }

        .print-btn:hover {
            background: #13408a;
        }

        /* ── Footer ── */
        .doc-footer {
            margin-top: 16px;
            border-top: 1px solid #ccc;
            padding-top: 5px;
            font-size: 8px;
            color: #777;
            display: flex;
            justify-content: space-between;
        }

        @media print {
            .print-btn {
                display: none;
            }

            body {
                padding: 8mm 12mm 8mm 12mm;
            }
        }
    </style>
</head>

<body>

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

    {{-- ── LETTERHEAD ── --}}
    <div class="letterhead">
        <img src="{{ asset('image/JAIS-Logo (3).png') }}" alt="Logo JAIS">
        <h1>Jabatan Agama Islam Selangor (JAIS)</h1>
        <h2>Sistem Pengurusan Buku Teks (SPBT)</h2>
        <h3>Bahagian Pendidikan Islam</h3>
        <h4>Borang Pengesahan Daftar Jumlah Buku BOSS</h4>
    </div>

    {{-- ── INFO PENGESAHAN ── --}}
    <div class="info-box">
        <table>
            <tr>
                <td>Tahun</td>
                <td class="sep">:</td>
                <td><strong>{{ $pengesahan->tahun }}</strong></td>
                <td>Jenis Sekolah</td>
                <td class="sep">:</td>
                <td><strong>{{ $pengesahan->jenis_sekolah ?? '-' }}</strong></td>
            </tr>
            <tr>
                <td>Kod Sekolah</td>
                <td class="sep">:</td>
                <td>{{ $user->kod_sekolah ?? '-' }}</td>
                <td>Nama Sekolah</td>
                <td class="sep">:</td>
                <td><strong>{{ $user->nama_sekolah ?? '-' }}</strong></td>
            </tr>
            <tr>
                <td>Nama Pemohon</td>
                <td class="sep">:</td>
                <td>{{ $user->name }}</td>
                <td>Nama Penyemak</td>
                <td class="sep">:</td>
                <td>{{ $pengesahan->checker->name ?? 'Belum ditugaskan' }}</td>
            </tr>
            <tr>
                <td>Tarikh Hantar</td>
                <td class="sep">:</td>
                <td>{{ $pengesahan->dihantar_pada ? $pengesahan->dihantar_pada->format('d/m/Y H:i') : '-' }}</td>
                <td>Tarikh Semakan</td>
                <td class="sep">:</td>
                <td>{{ $pengesahan->disemak_pada ? $pengesahan->disemak_pada->format('d/m/Y H:i') : '-' }}</td>
            </tr>
            <tr>
                <td>Status</td>
                <td class="sep">:</td>
                <td colspan="3">
                    @if ($pengesahan->status === 'lulus')
                        <span class="badge-status badge-lulus">✔ Diluluskan</span>
                    @elseif ($pengesahan->status === 'ditolak')
                        <span class="badge-status badge-ditolak">✘ Ditolak</span>
                    @else
                        <span class="badge-status badge-belum">⏳ Belum Disemak</span>
                    @endif
                    @if ($pengesahan->catatan)
                        &nbsp; <em style="font-size:9px">Catatan: {{ $pengesahan->catatan }}</em>
                    @endif
                </td>
            </tr>
        </table>
    </div>

    {{-- ── MAKLUMAT BUKU PER DARJAH ── --}}
    @forelse ($maklumatPerDarjah as $darjah => $rows)
        <div class="darjah-section">
            <div class="darjah-title">
                {{ str_starts_with($darjah, 'TING') ? 'Tingkatan' : 'Darjah' }} {{ $darjah }}
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="width:28px">Bil</th>
                        <th style="min-width:65px">Kod Buku</th>
                        <th style="min-width:160px; text-align:left">Judul Buku</th>
                        <th>Unjuran<br>Enrolmen<br>(Thn {{ $pengesahan->tahun + 1 }})</th>
                        <th>Baki Buku<br>BOSS<br>(Thn {{ $pengesahan->tahun }})</th>
                        <th>Buku di<br>Tangan Murid<br>(Thn {{ $pengesahan->tahun }})</th>
                        <th>Buku Elok<br>BOSS<br>(Thn {{ $pengesahan->tahun }})</th>
                        <th>Anggaran<br>Buku Elok<br>Tangan Akhir</th>
                        <th>Stok<br>Hingga Akhir</th>
                        <th>Elok<br>Hingga Akhir</th>
                        <th>Pesanan<br>Buku<br>(Thn {{ $pengesahan->tahun + 1 }})</th>
                        <th>Buku<br>Lebih<br>(Thn {{ $pengesahan->tahun + 1 }})</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $i => $m)
                        <tr>
                            <td class="center">{{ $i + 1 }}</td>
                            <td class="center">{{ $m->kod_buku }}</td>
                            <td>{{ $m->judul }}</td>
                            <td class="num">{{ number_format($m->unjuran_enrolmen) }}</td>
                            <td class="num">{{ number_format($m->baki_buku_boss) }}</td>
                            <td class="num">{{ number_format($m->buku_di_tangan_murid) }}</td>
                            <td class="num">{{ number_format($m->buku_elok_boss) }}</td>
                            <td class="num">{{ number_format($m->anggaran_buku_elok_tangan) }}</td>
                            <td class="num">{{ number_format($m->stok_hingga_akhir) }}</td>
                            <td class="num">{{ number_format($m->elok_hingga_akhir) }}</td>
                            <td class="num" style="color:#c0392b">{{ number_format($m->pesanan_buku) }}</td>
                            <td class="num" style="color:#27ae60">{{ number_format($m->lebihan_buku) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="center">JUMLAH</td>
                        <td class="num">{{ number_format($rows->sum('unjuran_enrolmen')) }}</td>
                        <td class="num">{{ number_format($rows->sum('baki_buku_boss')) }}</td>
                        <td class="num">{{ number_format($rows->sum('buku_di_tangan_murid')) }}</td>
                        <td class="num">{{ number_format($rows->sum('buku_elok_boss')) }}</td>
                        <td class="num">{{ number_format($rows->sum('anggaran_buku_elok_tangan')) }}</td>
                        <td class="num">{{ number_format($rows->sum('stok_hingga_akhir')) }}</td>
                        <td class="num">{{ number_format($rows->sum('elok_hingga_akhir')) }}</td>
                        <td class="num" style="color:#c0392b">{{ number_format($rows->sum('pesanan_buku')) }}</td>
                        <td class="num" style="color:#27ae60">{{ number_format($rows->sum('lebihan_buku')) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    @empty
        <p style="text-align:center; color:#888; padding:20px 0">Tiada maklumat buku.</p>
    @endforelse

    {{-- ── TANDATANGAN ── --}}
    <div class="signature-section">
        <table>
            <tr>
                {{-- Pemohon --}}
                <td>
                    <div class="sig-box">
                        <div class="sig-title">Tandatangan Pemohon</div>
                        <div class="sig-line"></div>
                        <div class="sig-name"><strong>{{ $user->name }}</strong></div>
                        <div class="sig-post">Pemohon SPBT</div>
                        <div class="sig-post">{{ $user->nama_sekolah ?? '' }}</div>
                        <div class="sig-post" style="margin-top:4px">Tarikh: ___________________</div>
                    </div>
                </td>
                {{-- Penyemak --}}
                <td>
                    <div class="sig-box">
                        <div class="sig-title">Tandatangan Penyemak (Checker)</div>
                        <div class="sig-line"></div>
                        <div class="sig-name">
                            <strong>{{ $pengesahan->checker->name ?? '___________________________' }}</strong></div>
                        <div class="sig-post">Penyemak SPBT</div>
                        <div class="sig-post" style="margin-top:4px">
                            Tarikh:
                            {{ $pengesahan->disemak_pada ? $pengesahan->disemak_pada->format('d/m/Y') : '___________________' }}
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    {{-- ── FOOTER ── --}}
    <div class="doc-footer">
        <span>Dijana oleh Sistem Pengurusan Buku Teks (SPBT) — JAIS</span>
        <span>Tarikh Cetak: {{ now()->format('d/m/Y H:i') }}</span>
    </div>

</body>

</html>
