<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Admin - Pena Ilmu</title>
    <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" type="text/css" href="<?=base_url('asset/admin.css')?>">
    <?= $this->renderSection('css'); ?>
</head>
<body>

    <!-- ════════════════════════════════════════ SIDEBAR ════════════════════════════════════════ -->
    <aside class="sidebar">
        <div class="flex items-center gap-2.5 px-5 py-5">
            <div class="w-10 h-10 bg-[#0099b8] rounded-xl flex items-center justify-center text-lg text-white">📖</div>
            <div>
                <div class="text-white font-bold text-sm tracking-wide">PENA ILMU</div>
                <div class="text-[9px] text-[#0099b8] uppercase tracking-widest font-bold">Admin Panel</div>
            </div>
        </div>

        <div class="flex-1 overflow-y-auto pb-4">
            <div class="sidebar-section">Menu Utama</div>
            <a href="<?= base_url('admin')?>" class="sidebar-link active"><i class="fa-solid fa-house"></i> Dashboard</a>
            <a href="<?= base_url('inputdokumen')?>" class="sidebar-link"><i class="fa-solid fa-file-lines"></i> Dokumen</a>
            <a href="<?= base_url('inputtutor')?>" class="sidebar-link"><i class="fa-solid fa-graduation-cap"></i> Tutorial & Pojok Ilmu</a>
            <a href="<?= base_url('inputgrafis')?>" class="sidebar-link"><i class="fa-solid fa-book-open"></i> Perpustakaan & Infografis</a>
            <a href="<?= base_url('komentar')?>" class="sidebar-link"><i class="fa-solid fa-comments"></i> Komentar</a>

           <!--  <div class="sidebar-section">Pengaturan</div>
            <a class="sidebar-link"><i class="fa-solid fa-user-gear"></i> Profil Admin</a>
            <a class="sidebar-link"><i class="fa-solid fa-gear"></i> Pengaturan</a>
            <a class="sidebar-link"><i class="fa-solid fa-database"></i> Backup Data</a>
            <a class="sidebar-link"><i class="fa-solid fa-clock-rotate-left"></i> Log Aktivitas</a> -->

            <!-- KEAMANAN AKUN -->
            <!-- <div class="security-box">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fa-solid fa-shield-halved text-[#0099b8]"></i>
                    <span class="text-xs font-bold text-white">Keamanan Akun</span>
                </div>
                <div class="text-[10px] text-slate-400 mb-0.5">Terakhir aktif</div>
                <div class="text-[11px] text-slate-200 font-semibold mb-2">30 Juni 2026, 09:15 WIB</div>
                <a href="#" class="text-[11px] font-bold text-[#0099b8]">Lihat Detail <i class="fa-solid fa-arrow-right fa-xs"></i></a>
            </div> -->
        </div>

        <!-- USER FOOTER -->
        <div class="px-4 py-4 border-t border-white/5 flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-slate-700 flex items-center justify-center text-white text-xs font-bold overflow-hidden">
                <i class="fa-solid fa-user"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div class="text-xs font-bold text-white truncate">Administrator</div>
                <div class="text-[10px] text-slate-400 flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-green-400"></span> Online
                </div>
            </div>
            <i class="fa-solid fa-chevron-down text-slate-500 text-xs"></i>
        </div>
    </aside>

    <!-- 3. KONTEN UTAMA & SIDEBAR -->
    <?= $this->renderSection('conten'); ?>

     <?= $this->renderSection('myscript'); ?>
     <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Ambil URL halaman saat ini
        const currentUrl = window.location.href;
        
        // Ambil semua element dengan class 'sidebar-link'
        const sidebarLinks = document.querySelectorAll('.sidebar-link');

        sidebarLinks.forEach(link => {
            // Jika href pada link sama dengan URL saat ini, tambahkan class active
            if (link.href === currentUrl) {
                link.classList.add('active');
            } else {
                // Pastikan menghapus class active dari link lain yang tidak cocok
                link.classList.remove('active');
            }
        });
    });
</script>
     </body>
</html>