<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Dasbor Madrasah</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-slate-50 min-h-screen text-slate-800 p-8">

    <div class="max-w-6xl mx-auto">
        <div class="flex justify-between items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-8">
            <div>
                <h1 class="text-2xl font-black text-slate-900">Halo, Pak/Bu Admin <?= session()->get('instansi') ?></h1>
                <p class="text-sm text-slate-500">Kelola pengajuan sertifikat siswa di sini.</p>
            </div>
            <div class="flex gap-3">
                <button onclick="document.getElementById('modal-form').classList.remove('hidden')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-5 rounded-lg shadow-md transition-all text-sm">
                    <i class="fa fa-plus mr-1"></i> Input Data Siswa
                </button>
                <a href="/logout" class="bg-red-50 hover:bg-red-100 text-red-600 font-bold py-2.5 px-5 rounded-lg transition-all text-sm">Keluar</a>
            </div>
        </div>

        <?php if(session()->getFlashdata('success')): ?>
            <div class="bg-green-100 text-green-700 p-4 rounded-xl mb-6 font-medium text-sm">✓ <?= session()->getFlashdata('success') ?></div>
        <?php endif; ?>

        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
            <table class="w-full text-left text-sm">
                <thead class="bg-slate-100 text-slate-600 uppercase text-xs font-bold border-b border-slate-200">
                    <tr>
                        <th class="p-4">Identitas Siswa</th>
                        <th class="p-4">Detail Kejuaraan</th>
                        <th class="p-4">Status Pusat</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <?php foreach($riwayat as $r): ?>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <p class="font-bold text-slate-800"><?= $r['nama_siswa'] ?></p>
                            <p class="text-xs text-slate-500 mt-0.5">NISN: <?= $r['nisn'] ?></p>
                        </td>
                        <td class="p-4">
                            <p class="font-medium"><?= $r['nama_prestasi'] ?></p>
                            <span class="bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded text-[10px] font-bold uppercase mt-1 inline-block"><?= $r['tingkat'] ?></span>
                        </td>
                        <td class="p-4">
                            <?php if($r['status_verifikasi'] == 'pending'): ?>
                                <span class="bg-amber-100 text-amber-700 px-3 py-1 rounded-full text-xs font-bold">Menunggu Validasi</span>
                            <?php elseif($r['status_verifikasi'] == 'valid'): ?>
                                <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-bold">Sertifikat Valid</span>
                            <?php else: ?>
                                <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-xs font-bold">Revisi Ditolak</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div id="modal-form" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4 z-50">
        <div class="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-lg">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-black text-xl">Unggah Dokumen Sertifikat</h3>
                <button onclick="document.getElementById('modal-form').classList.add('hidden')" class="text-slate-400 hover:text-red-500 font-bold text-xl">&times;</button>
            </div>
            
            <form action="/madrasah/upload_prestasi" method="POST" enctype="multipart/form-data" class="space-y-4">
                <?= csrf_field() ?>
                <div>
                    <label class="text-xs font-bold text-slate-700 uppercase">Nama Lengkap Siswa</label>
                    <input type="text" name="nama_siswa" required class="w-full bg-slate-50 border p-2.5 rounded-lg mt-1 text-sm outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="text-xs font-bold text-slate-700 uppercase">NISN</label>
                    <input type="number" name="nisn" required class="w-full bg-slate-50 border p-2.5 rounded-lg mt-1 text-sm outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="text-xs font-bold text-slate-700 uppercase">Nama Prestasi/Lomba</label>
                    <input type="text" name="nama_prestasi" required class="w-full bg-slate-50 border p-2.5 rounded-lg mt-1 text-sm outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="text-xs font-bold text-slate-700 uppercase">Tingkat</label>
                    <select name="tingkat" class="w-full bg-slate-50 border p-2.5 rounded-lg mt-1 text-sm outline-none focus:border-indigo-500">
                        <option value="Kabupaten">Tingkat Kabupaten</option>
                        <option value="Provinsi">Tingkat Provinsi</option>
                        <option value="Nasional">Tingkat Nasional</option>
                    </select>
                </div>
                <div>
                    <label class="text-xs font-bold text-slate-700 uppercase block mb-1">Unggah Scan Asli (PDF/JPG)</label>
                    <input type="file" name="sertifikat" required class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-bold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                </div>
                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-lg shadow-md mt-4">Kirim ke Sistem Pusat</button>
            </form>
        </div>
    </div>

</body>
</html>