<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Layanan Pengaduan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Google Fonts: Plus Jakarta Sans -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f3f6f9; /* Warna abu-abu sangat soft untuk background */
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #3f4254;
        }
        
        /* Gaya Sidebar Modern */
        .sidebar {
            min-height: 100vh;
            background-color: #1e1e2d; /* Biru dongker modern */
            color: #a2a3b7;
        }
        .sidebar .logo-area {
            background-color: #1a1a27;
            padding: 25px 20px;
        }
        .sidebar a {
            color: #a2a3b7;
            text-decoration: none;
            padding: 12px 15px;
            margin: 5px 15px;
            display: block;
            border-radius: 8px; /* Sudut melengkung modern */
            transition: all 0.3s ease;
            font-weight: 500;
        }
        .sidebar a i {
            font-size: 1.1rem;
            margin-right: 10px;
            color: #494b74;
            transition: all 0.3s ease;
        }
        .sidebar a:hover {
            color: #ffffff;
            background-color: #2b2b40;
        }
        .sidebar a:hover i {
            color: #009ef7;
        }
        .sidebar a.active {
            background-color: #009ef7; /* Warna biru cerah utama */
            color: #ffffff;
        }
        .sidebar a.active i {
            color: #ffffff;
        }
        
        /* Tombol keluar / publik */
        .sidebar a.btn-logout:hover {
            background-color: rgba(241, 65, 108, 0.1);
            color: #f1416c;
        }
        .sidebar a.btn-logout:hover i {
            color: #f1416c;
        }

        .content-area {
            padding: 35px 40px;
        }
        
        /* Global Shadow & Radius */
        .shadow-sm {
            box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02) !important;
        }
        .rounded-4 {
            border-radius: 12px !important;
        }
    </style>
</head>
<body>

<div class="d-flex">
    <!-- Sidebar -->
    <div class="sidebar" style="width: 260px; flex-shrink: 0;">
        <div class="text-center border-bottom border-dark logo-area">
            <h5 class="fw-bold mb-1 text-white">ADMIN PANEL</h5>
            <small class="text-muted" style="letter-spacing: 1px;">DPRD KAB. SBB</small>
        </div>
        <div class="mt-4">
            <a href="<?= base_url('admin/dashboard') ?>" class="<?= (current_url() == base_url('admin/dashboard') || current_url() == base_url('admin')) ? 'active' : '' ?>">
                <i class="bi bi-grid-1x2-fill"></i> Dashboard
            </a>
            <a href="<?= base_url('admin/pengaduan') ?>" class="<?= (current_url() == base_url('admin/pengaduan')) ? 'active' : '' ?>">
                <i class="bi bi-inboxes-fill"></i> Kelola Pengaduan
            </a>
            <a href="<?= base_url('admin/notifikasi') ?>" class="<?= (current_url() == base_url('admin/notifikasi')) ? 'active' : '' ?>">
                <i class="bi bi-bell-fill"></i> Pusat Notifikasi
            </a>
            <a href="<?= base_url('admin/pengaturan') ?>" class="<?= (current_url() == base_url('admin/pengaturan')) ? 'active' : '' ?>">
                <i class="bi bi-gear-fill"></i> Pengaturan
            </a>
            
            <hr class="border-secondary mx-3 mt-4 mb-3">
            
            <a href="<?= base_url('/') ?>" class="btn-logout text-danger">
                <i class="bi bi-box-arrow-left text-danger"></i> Ke Halaman Publik
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-grow-1 content-area">
        <?= $this->renderSection('content') ?>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<?= $this->renderSection('scripts') ?>
</body>
</html>