<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Superadmin - Kontrol Menu Core</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-900 text-slate-100 font-sans min-h-screen flex">

    <?php include(APPPATH . 'Views/layout/sidebar.php'); ?>

    <main class="flex-1 p-8 overflow-y-auto">
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-extrabold text-white tracking-tight">Core Menu Architecture</h1>
                <p class="text-sm text-slate-400">Ubah, tambah, dan suntikkan modul navigasi rute aplikasi secara dinamis.</p>
            </div>
            <span class="text-xs bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1.5 rounded-full font-semibold">Engine Active v4.x</span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-xl h-fit">
                <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <i class="fa fa-plus-circle text-indigo-500"></i> Inject Modul Baru
                </h3>
                
                <form action="/superadmin/menu/store" method="POST" class="space-y-4">
                    <?= csrf_field() ?>
                    <div>
                        <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Nama Menu</label>
                        <input type="text" name="nama_menu" required placeholder="Contoh: Laporan Analitik" class="w-full bg-slate-950 border border-slate-800 p-2.5 rounded-lg mt-1 text-sm text-white focus:border-indigo-500 outline-none">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">URL Base Route</label>
                        <input type="text" name="url_rute" required placeholder="Contoh: kantor/laporan" class="w-full bg-slate-950 border border-slate-800 p-2.5 rounded-lg mt-1 text-sm text-white focus:border-indigo-500 outline-none">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">FontAwesome Ikon</label>
                            <input type="text" name="ikon" required placeholder="fa-chart-bar" class="w-full bg-slate-950 border border-slate-800 p-2.5 rounded-lg mt-1 text-sm text-white focus:border-indigo-500 outline-none">
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Urutan Sort</label>
                            <input type="number" name="urutan" required value="1" class="w-full bg-slate-950 border border-slate-800 p-2.5 rounded-lg mt-1 text-sm text-white focus:border-indigo-500 outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-2">Otoritas Hak Akses Role</label>
                        <div class="space-y-2 bg-slate-950 p-3 rounded-lg border border-slate-800 text-sm">
                            <label class="flex items-center gap-2 text-slate-300"><input type="checkbox" name="role_akses[]" value="superadmin" class="rounded text-indigo-600 focus:ring-0 bg-slate-900 border-slate-700"> Superadmin</label>
                            <label class="flex items-center gap-2 text-slate-300"><input type="checkbox" name="role_akses[]" value="admin_kantor" class="rounded text-indigo-600 focus:ring-0 bg-slate-900 border-slate-700"> Admin Kantor</label>
                            <label class="flex items-center gap-2 text-slate-300"><input type="checkbox" name="role_akses[]" value="admin_madrasah" class="rounded text-indigo-600 focus:ring-0 bg-slate-900 border-slate-700"> Admin Madrasah</label>
                        </div>
                    </div>
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 rounded-lg transition shadow-lg shadow-indigo-600/20 text-sm">Deploy & Aktifkan Menu</button>
                </form>
            </div>

            <div class="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-xl shadow-xl overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-800 bg-slate-900/50 flex justify-between items-center">
                    <h3 class="font-bold text-white">Struktur Hirarki Menu Terpasang</h3>
                </div>
                <table class="w-full text-left text-sm">
                    <thead class="bg-slate-950 text-slate-400 text-xs uppercase tracking-wider border-b border-slate-800">
                        <tr>
                            <th class="px-6 py-3">Urutan</th>
                            <th class="px-6 py-3">Menu & Ikon</th>
                            <th class="px-6 py-3">Rute Sistem</th>
                            <th class="px-6 py-3">Otoritas Role</th>
                            <th class="px-6 py-3 text-center">Aksi Core</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60">
                        <?php foreach($menus as $menu): ?>
                        <tr class="hover:bg-slate-950/40 transition-colors">
                            <td class="px-6 py-4 font-bold text-indigo-400">#<?= $menu['urutan'] ?></td>
                            <td class="px-6 py-4 font-semibold text-white flex items-center gap-3">
                                <span class="h-8 w-8 bg-slate-800 rounded flex items-center justify-center border border-slate-700 text-slate-300"><i class="fa <?= $menu['ikon'] ?>"></i></span>
                                <?= $menu['nama_menu'] ?>
                            </td>
                            <td class="px-6 py-4 text-slate-400 font-mono text-xs"><?= $menu['url_rute'] ?></td>
                            <td class="px-6 py-4">
                                <?php foreach(explode(',', $menu['role_akses']) as $r): ?>
                                    <span class="inline-block text-[10px] font-bold uppercase bg-slate-800 text-slate-300 border border-slate-700 px-2 py-0.5 rounded-md mb-1 mr-1"><?= str_replace('_', ' ', $r) ?></span>
                                <?php endforeach; ?>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <a href="/superadmin/menu/delete/<?= $menu['id'] ?>" onclick="return confirm('Apakah Anda yakin ingin mematikan sirkuit menu ini?')" class="text-xs bg-red-500/10 text-red-400 border border-red-500/20 px-2.5 py-1 rounded hover:bg-red-500 hover:text-white transition-all">Destroy</a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

</body>
</html>