<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <title>Permit Request - Sistem Perizinan Santri</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com" rel="preconnect"/>
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet"/>
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: '#059669',
                        "primary-hover": '#047857',
                        secondary: '#1E293B',
                        background: '#F8FAFC',
                        surface: '#FFFFFF',
                    },
                    fontFamily: {
                        heading: ['Plus Jakarta Sans', 'sans-serif'],
                        body: ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', sans-serif; }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        .material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .ticket-card {
            background: radial-gradient(circle at top right, #ffffff, #f8fafc);
            border: 1px solid #e2e8f0;
            position: relative;
        }
        .ticket-card::before, .ticket-card::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background-color: #F8FAFC;
            border-radius: 50%;
            transform: translateY(-50%);
            border: 1px solid #e2e8f0;
        }
        .ticket-card::before { left: -11px; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; box-shadow: inset -2px 0 3px rgba(0,0,0,0.02); }
        .ticket-card::after { right: -11px; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; box-shadow: inset 2px 0 3px rgba(0,0,0,0.02); }
        .ticket-divider {
            border-top: 2px dashed #e2e8f0;
            margin: 0 16px;
        }

        .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
        .animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); }
        
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body class="text-secondary antialiased pb-24 min-h-screen relative overflow-x-hidden">
    
    <!-- Background Decoration -->
    <div class="fixed top-0 left-0 w-full h-64 bg-gradient-to-br from-primary/20 to-transparent -z-10 rounded-b-[3rem] blur-xl opacity-60"></div>
    <div class="fixed top-[-10%] right-[-10%] w-96 h-96 bg-primary/10 rounded-full blur-3xl -z-10"></div>

    <!-- Header -->
    <header class="sticky top-0 z-40 glass-panel shadow-sm px-5 h-16 flex items-center justify-between animate-fade-in">
        <h1 class="text-xl font-bold text-primary font-heading tracking-tight">Portal Wali</h1>
        <div class="flex items-center gap-3">
            <a href="/auth/logout" class="p-2 rounded-full bg-red-50 text-red-500 hover:bg-red-100 transition-colors flex items-center justify-center shadow-sm">
                <span class="material-symbols-outlined text-[20px]">logout</span>
            </a>
            <div class="w-9 h-9 rounded-full bg-white shadow-sm flex items-center justify-center overflow-hidden border-2 border-white ring-2 ring-primary/20">
                <img alt="User profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC51lAsfiwhZ0hGpyaglt6SMskUZ9Wf4TvQgnizkDepXL0P0swB2QyeoV3AwRW9imBVQiOix1F_1k2K2Jq69bkVASCTKw1fc-ajbMZq1gVEa1ykTLT3mDdv4keCPsrKVr-yWN1mbpeVWXJKSuzWkSlOMEJc0LXJG0tSuaC6HIzsEK1TTr4mKoJmj54BF3J2X_33m651RgSGIKCRUVlw006oFR9ceu48x0juhXJSWCGltJAx0_XgOJw-"/>
            </div>
        </div>
    </header>

    <main class="p-5 flex flex-col gap-8 max-w-3xl mx-auto">
        <!-- Welcome Message -->
        <section class="animate-slide-up mt-2" style="animation-delay: 0.1s;">
            <h2 class="text-2xl font-extrabold mb-1 font-heading text-slate-800">Pengajuan Izin</h2>
            <p class="text-sm text-slate-500 leading-relaxed">Kelola dan pantau perizinan santri secara digital dengan mudah dan cepat.</p>
        </section>

        <!-- Request Form -->
        <section class="glass-panel rounded-2xl shadow-lg shadow-slate-200/50 p-6 animate-slide-up" style="animation-delay: 0.2s;">
            <form action="/wali/submit" method="post" class="flex flex-col gap-5">
                
                <!-- Santri Selection -->
                <div class="flex flex-col gap-1.5">
                    <label class="text-sm font-semibold text-slate-700">Pilih Santri</label>
                    <div class="relative group">
                        <select name="santri_id" required class="w-full bg-white border border-slate-200 rounded-xl p-3.5 appearance-none focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-sm font-medium text-slate-700 hover:border-slate-300 shadow-sm cursor-pointer">
                            <option value="">-- Pilih nama santri --</option>
                            <?php foreach($santri as $s): ?>
                                <option value="<?= $s['id'] ?>"><?= esc($s['nama_santri']) ?> (Kelas <?= esc($s['kelas']) ?>)</option>
                            <?php endforeach; ?>
                        </select>
                        <span class="material-symbols-outlined absolute right-3 top-3.5 text-slate-400 pointer-events-none group-hover:text-primary transition-colors">expand_more</span>
                    </div>
                </div>

                <!-- Kategori Izin -->
                <div class="flex flex-col gap-1.5 mt-2">
                    <label class="text-sm font-semibold text-slate-700">Kategori Izin</label>
                    <div class="grid grid-cols-3 gap-3">
                        <label class="cursor-pointer group">
                            <input class="peer sr-only" name="category" type="radio" value="sakit"/>
                            <div class="flex flex-col items-center justify-center p-3.5 border-2 border-slate-100 rounded-xl peer-checked:border-primary peer-checked:bg-emerald-50 peer-checked:text-primary transition-all bg-white text-slate-500 hover:bg-slate-50 hover:border-slate-200 shadow-sm">
                                <span class="material-symbols-outlined mb-1.5 group-hover:scale-110 transition-transform">medical_services</span>
                                <span class="text-xs font-semibold">Sakit</span>
                            </div>
                        </label>
                        <label class="cursor-pointer group">
                            <input checked="" class="peer sr-only" name="category" type="radio" value="pulang"/>
                            <div class="flex flex-col items-center justify-center p-3.5 border-2 border-slate-100 rounded-xl peer-checked:border-primary peer-checked:bg-emerald-50 peer-checked:text-primary transition-all bg-white text-slate-500 hover:bg-slate-50 hover:border-slate-200 shadow-sm">
                                <span class="material-symbols-outlined mb-1.5 group-hover:scale-110 transition-transform">home</span>
                                <span class="text-xs font-semibold">Pulang</span>
                            </div>
                        </label>
                        <label class="cursor-pointer group">
                            <input class="peer sr-only" name="category" type="radio" value="sambang"/>
                            <div class="flex flex-col items-center justify-center p-3.5 border-2 border-slate-100 rounded-xl peer-checked:border-primary peer-checked:bg-emerald-50 peer-checked:text-primary transition-all bg-white text-slate-500 hover:bg-slate-50 hover:border-slate-200 shadow-sm">
                                <span class="material-symbols-outlined mb-1.5 group-hover:scale-110 transition-transform">group</span>
                                <span class="text-xs font-semibold">Sambang</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Date Range -->
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-sm font-semibold text-slate-700">Tanggal Mulai</label>
                        <input name="tgl_mulai" required class="w-full bg-white border border-slate-200 rounded-xl p-3 focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-sm font-medium text-slate-700 shadow-sm hover:border-slate-300" type="date"/>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-sm font-semibold text-slate-700">Kembali</label>
                        <input name="tgl_kembali_rencana" required class="w-full bg-white border border-slate-200 rounded-xl p-3 focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-sm font-medium text-slate-700 shadow-sm hover:border-slate-300" type="date"/>
                    </div>
                </div>

                <!-- Reason Textarea -->
                <div class="flex flex-col gap-1.5 mt-2">
                    <label class="text-sm font-semibold text-slate-700">Alasan</label>
                    <textarea name="alasan" required class="w-full bg-white border border-slate-200 rounded-xl p-3 focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all text-sm font-medium text-slate-700 shadow-sm hover:border-slate-300 placeholder:text-slate-400 placeholder:font-normal resize-none" placeholder="Tuliskan alasan perizinan dengan detail..." rows="3"></textarea>
                </div>

                <!-- Submit Button -->
                <button class="w-full mt-4 bg-primary text-white py-3.5 rounded-xl text-sm font-bold tracking-wide hover:bg-primary-hover hover:shadow-lg hover:-translate-y-0.5 transition-all flex items-center justify-center gap-2" type="submit">
                    <span class="material-symbols-outlined text-[20px]">send</span>
                    Kirim Pengajuan
                </button>
            </form>
        </section>

        <!-- Active Tickets -->
        <section class="mt-4 animate-slide-up" style="animation-delay: 0.3s;">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold font-heading text-slate-800">Tiket Aktif Anda</h2>
                <a class="text-xs font-semibold text-primary hover:text-primary-hover transition-colors flex items-center bg-primary/10 px-3 py-1.5 rounded-full" href="#">Riwayat <span class="material-symbols-outlined text-[16px] ml-1">history</span></a>
            </div>
            
            <div class="flex flex-col gap-4">
                <?php if (empty($perizinan)): ?>
                    <div class="p-8 text-center bg-white border border-dashed border-slate-300 rounded-2xl flex flex-col items-center justify-center gap-3">
                        <div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center text-slate-400">
                            <span class="material-symbols-outlined">inbox</span>
                        </div>
                        <p class="text-sm text-slate-500 font-medium">Belum ada pengajuan izin yang aktif.</p>
                    </div>
                <?php else: ?>
                    <?php foreach($perizinan as $p): ?>
                        <div class="ticket-card rounded-2xl shadow-sm hover:shadow-md transition-shadow flex flex-col overflow-hidden">
                            
                            <!-- Ticket Header -->
                            <div class="px-5 py-3.5 flex justify-between items-center bg-white">
                                <span class="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
                                    <span class="material-symbols-outlined text-[14px]">confirmation_number</span> 
                                    <?= esc($p['kode_izin']) ?>
                                </span>
                                
                                <?php if ($p['status_approval'] == 'pending'): ?>
                                    <div class="px-3 py-1 rounded-full bg-amber-100 text-amber-700 text-xs font-bold flex items-center gap-1">
                                        <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div> Menunggu
                                    </div>
                                <?php elseif ($p['status_approval'] == 'approved'): ?>
                                    <div class="px-3 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-bold flex items-center gap-1">
                                        <span class="material-symbols-outlined text-[12px] fill">check_circle</span> Disetujui
                                    </div>
                                <?php else: ?>
                                    <div class="px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-bold">Ditolak</div>
                                <?php endif; ?>
                            </div>
                            
                            <!-- Ticket Body -->
                            <div class="px-5 pb-4 pt-1 bg-white flex flex-col gap-1 z-10 relative">
                                <?php 
                                $santri_name = '';
                                foreach($santri as $s) { if($s['id'] == $p['santri_id']) $santri_name = $s['nama_santri']; }
                                ?>
                                <h3 class="text-lg font-extrabold text-slate-800 font-heading"><?= esc($santri_name) ?></h3>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs font-semibold uppercase tracking-wider">Izin <?= esc($p['kategori_izin']) ?></span>
                                </div>
                                <div class="flex items-center gap-3 mt-4 text-xs font-medium text-slate-500 bg-slate-50 p-2.5 rounded-lg border border-slate-100">
                                    <div class="flex flex-col">
                                        <span class="text-[10px] uppercase text-slate-400 mb-0.5">Mulai</span>
                                        <span class="text-slate-700"><?= date('d M Y', strtotime($p['tgl_mulai'])) ?></span>
                                    </div>
                                    <span class="material-symbols-outlined text-slate-300">arrow_forward</span>
                                    <div class="flex flex-col">
                                        <span class="text-[10px] uppercase text-slate-400 mb-0.5">Kembali</span>
                                        <span class="text-slate-700"><?= date('d M Y', strtotime($p['tgl_kembali_rencana'])) ?></span>
                                    </div>
                                </div>
                            </div>

                            <div class="ticket-divider"></div>

                            <!-- Ticket Footer (QR Code) -->
                            <?php if ($p['status_approval'] == 'approved' && $p['qr_token']): ?>
                                <div class="px-5 py-5 bg-white flex flex-col items-center justify-center">
                                    <p class="text-xs font-semibold text-slate-500 mb-3 tracking-wide uppercase">Tunjukkan QR ke Satpam</p>
                                    <div class="bg-white p-2.5 rounded-xl shadow-[0_0_15px_rgba(0,0,0,0.05)] border border-slate-100">
                                        <div id="qr-<?= $p['id'] ?>"></div>
                                        <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
                                        <script>
                                            new QRCode(document.getElementById("qr-<?= $p['id'] ?>"), {
                                                text: "<?= esc($p['qr_token']) ?>",
                                                width: 140,
                                                height: 140,
                                                colorDark : "#0F172A",
                                                colorLight : "#ffffff",
                                                correctLevel : QRCode.CorrectLevel.H
                                            });
                                        </script>
                                    </div>
                                    <p class="text-[10px] text-slate-400 mt-3 font-mono"><?= esc($p['qr_token']) ?></p>
                                </div>
                            <?php elseif ($p['status_approval'] == 'pending'): ?>
                                <div class="px-5 py-4 bg-slate-50 flex items-center justify-center">
                                    <p class="text-xs text-slate-500 flex items-center gap-1.5 font-medium"><span class="material-symbols-outlined text-[16px] animate-spin">sync</span> Sedang ditinjau oleh Kesantrian...</p>
                                </div>
                            <?php endif; ?>
                            
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </section>
    </main>

    <!-- Bottom Navigation Bar -->
    <nav class="md:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-[72px] px-2 bg-white/90 backdrop-blur-md border-t border-slate-200 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] rounded-t-3xl pb-2">
        <a class="flex flex-col items-center justify-center text-slate-400 hover:text-primary transition-colors w-16 h-full rounded-xl" href="#">
            <span class="material-symbols-outlined mb-1">home</span>
            <span class="text-[10px] font-bold tracking-wide">Home</span>
        </a>
        <a class="flex flex-col items-center justify-center text-white font-bold transition-all w-[60px] h-[60px] bg-primary rounded-full shadow-lg shadow-primary/30 -mt-6 ring-4 ring-white" href="#">
            <span class="material-symbols-outlined fill text-2xl">add</span>
        </a>
        <a class="flex flex-col items-center justify-center text-slate-400 hover:text-primary transition-colors w-16 h-full rounded-xl" href="#">
            <span class="material-symbols-outlined mb-1">person</span>
            <span class="text-[10px] font-bold tracking-wide">Profil</span>
        </a>
    </nav>
    
</body>
</html>