<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
<div class="max-w-2xl mx-auto space-y-6">

    <!-- Header Navigation Back Link -->
    <div class="flex justify-between items-center">
        <a href="/wali/dashboard" class="inline-flex items-center space-x-2 text-primary font-bold hover:text-primary-hover transition text-sm">
            <span class="material-symbols-outlined text-sm">arrow_back</span>
            <span>Kembali ke Dashboard</span>
        </a>
        <button onclick="window.print()" class="inline-flex items-center space-x-2 px-3 py-1.5 rounded-lg border border-outline hover:bg-surface-dim text-on-surface-variant transition text-sm font-semibold">
            <span class="material-symbols-outlined text-sm">print</span>
            <span>Cetak Surat Izin</span>
        </button>
    </div>

    <!-- Ticket Card (Printable Area) -->
    <div id="print-area" class="bg-surface rounded-2xl border border-outline shadow-lg overflow-hidden relative">
        <!-- Ticket Border Edge Effect -->
        <div class="absolute inset-x-0 top-0 h-2 bg-gradient-to-r from-emerald-500 to-emerald-600"></div>

        <!-- Inner Content -->
        <div class="p-6 md:p-8 space-y-8">
            <!-- Header Institution Details -->
            <div class="text-center space-y-1 pb-6 border-b border-outline relative">
                <h3 class="text-lg font-bold text-on-surface tracking-wide uppercase">Pondok Pesantren Imam Ibnu Katsir</h3>
                <p class="text-xs text-outline font-semibold uppercase tracking-wider">Surat Izin Keluar / Pulang Santri Digital</p>
                <div class="absolute right-0 top-0">
                    <?php if ($permit['status'] === 'approved'): ?>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">AKTIF / DISETUJUI</span>
                    <?php elseif ($permit['status'] === 'active'): ?>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">SEDANG DI LUAR</span>
                    <?php elseif ($permit['status'] === 'done'): ?>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-surface-dim text-on-surface-variant border border-outline font-semibold">SELESAI / KEMBALI</span>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Two Column Layout: Info and QR -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
                <!-- QR Code Block -->
                <div class="md:col-span-1 flex flex-col items-center justify-center space-y-3">
                    <div class="bg-surface-dim p-4 rounded-2xl border border-outline shadow-sm flex items-center justify-center w-[180px] h-[180px]" id="qrcode-container">
                        <!-- QR JS Target -->
                        <div id="qrcode"></div>
                    </div>
                    <div class="text-center">
                        <span class="text-xs text-outline font-semibold uppercase tracking-wider block">ID PERIZINAN</span>
                        <span class="text-sm font-bold text-on-surface-variant font-mono"><?= esc($permit['token_izin']) ?></span>
                    </div>
                </div>

                <!-- Details Block -->
                <div class="md:col-span-2 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <span class="text-xs text-outline font-semibold uppercase block">Nama Lengkap</span>
                            <span class="text-sm font-bold text-on-surface"><?= esc($permit['santri_nama']) ?></span>
                        </div>
                        <div>
                            <span class="text-xs text-outline font-semibold uppercase block">NIS / Kelas</span>
                            <span class="text-sm font-bold text-on-surface"><?= esc($permit['santri_nis']) ?> / <?= esc($permit['santri_kelas']) ?></span>
                        </div>
                        <div>
                            <span class="text-xs text-outline font-semibold uppercase block">Asrama</span>
                            <span class="text-sm font-bold text-on-surface"><?= esc($permit['santri_asrama']) ?></span>
                        </div>
                        <div>
                            <span class="text-xs text-outline font-semibold uppercase block">Pembuat Izin</span>
                            <span class="text-sm font-bold text-on-surface"><?= esc($permit['pembuat_nama']) ?></span>
                        </div>
                    </div>

                    <div class="h-px bg-surface-dim my-4"></div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <span class="text-xs text-outline font-semibold uppercase block">Rencana Keluar</span>
                            <span class="text-sm font-bold text-on-surface flex items-center space-x-1">
                                <span class="material-symbols-outlined text-outline text-sm">logout</span>
                                <span><?= date('d M Y H:i', strtotime($permit['waktu_keluar'])) ?></span>
                            </span>
                        </div>
                        <div>
                            <span class="text-xs text-outline font-semibold uppercase block">Rencana Kembali</span>
                            <span class="text-sm font-bold text-on-surface flex items-center space-x-1">
                                <span class="material-symbols-outlined text-outline text-sm">login</span>
                                <span><?= date('d M Y H:i', strtotime($permit['waktu_kembali'])) ?></span>
                            </span>
                        </div>
                    </div>

                    <div>
                        <span class="text-xs text-outline font-semibold uppercase block">Jenis & Alasan Perizinan</span>
                        <p class="text-sm text-on-surface-variant bg-surface-dim p-3 rounded-lg border border-outline font-medium">
                            <strong class="text-on-surface"><?= esc($permit['jenis_izin']) ?></strong> - <?= esc($permit['alasan']) ?>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Verification Instructions -->
            <div class="p-4 bg-emerald-50 rounded-xl border border-emerald-100 flex items-start space-x-3 text-emerald-800">
                <span class="material-symbols-outlined text-emerald-600 flex-shrink-0">info</span>
                <div class="text-xs font-semibold leading-relaxed">
                    Tunjukkan Surat Izin Digital ini beserta QR Code kepada petugas gerbang pondok (Satpam) saat Anda keluar dan saat kembali masuk area pondok pesantren. Petugas akan memindai QR Code untuk mencatat log absensi perizinan secara otomatis.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- QR Code Generator Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Generate QR code based on the token
        var qrToken = "<?= esc($permit['token_izin']) ?>";
        new QRCode(document.getElementById("qrcode"), {
            text: qrToken,
            width: 140,
            height: 140,
            colorDark : "#0f172a",
            colorLight : "#f8fafc",
            correctLevel : QRCode.CorrectLevel.H
        });
    });
</script>

<style>
    @media print {
        body {
            background: white;
        }
        header, footer, button, a {
            display: none !important;
        }
        #print-area {
            border: none;
            box-shadow: none;
            margin: 0;
            padding: 0;
        }
    }
</style>
<?= $this->endSection() ?>
