<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $this->renderSection('title') ?> | SIMKP ASN</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        :root {
            --sidebar-width: 280px;
            --accent-color: #4361ee;
            --accent-hover: #3a56d4;
            --bg-color: #f0f2f5;
            --card-glass: rgba(255, 255, 255, 0.9);
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--bg-color);
            background-image: radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
                radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
                radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
            background-attachment: fixed;
            min-height: 100vh;
            color: #1a1a1a;
        }

        /* Sidebar Modern Design */
        .sidebar {
            width: var(--sidebar-width);
            background: rgba(15, 23, 42, 0.95); /* Slate 900 for premium dark look */
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            height: 100vh;
            position: fixed;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            padding: 2rem 1.2rem;
            padding-bottom: 2rem;
            color: white;
            display: flex;
            flex-direction: column;
        }

        .main-content {
            margin-left: var(--sidebar-width);
            padding: 2.5rem;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .nav {
            flex-grow: 1;
            overflow-y: auto;
            scrollbar-width: none; /* Hide scrollbar for cleaner look */
        }

        .nav::-webkit-scrollbar {
            display: none;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.6) !important;
            font-weight: 500;
            padding: 0.9rem 1.2rem;
            border-radius: 8px;
            margin-bottom: 0.4rem;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.3s ease;
            position: relative;
            border: 1px solid transparent;
            text-decoration: none;
        }

        .nav-link i {
            font-size: 1.3rem;
            opacity: 0.8;
            transition: all 0.3s;
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.05);
            color: white !important;
            transform: translateX(5px);
        }

        .nav-link:hover i {
            opacity: 1;
            transform: scale(1.1);
        }

        .nav-link.active {
            background: linear-gradient(135deg, var(--accent-color) 0%, #3a56d4 100%) !important;
            color: white !important;
            box-shadow: 0 8px 15px rgba(67, 97, 238, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .nav-link.active i {
            opacity: 1;
            transform: scale(1.1);
        }

        .nav-link.text-danger:hover {
            background: rgba(220, 53, 69, 0.1) !important;
            color: #ef4444 !important;
        }

        .menu-section-label {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: rgba(255, 255, 255, 0.3);
            margin: 1.5rem 0 0.8rem 1.2rem;
        }

        .sidebar-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            margin: 0.5rem 1rem;
        }

        .glass-card {
            background: var(--card-glass);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            transition: transform 0.3s ease;
            border-radius: 10px;
        }

        .stat-card:hover {
            transform: translateY(-8px);
        }

        .badge-status {
            border-radius: 6px;
            padding: 6px 16px;
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
        }

        .profile-badge {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn {
            border-radius: 8px !important;
            padding: 0.6rem 1.2rem;
            font-weight: 600;
        }

        .form-control, .form-select {
            border-radius: 8px !important;
            padding: 0.75rem 1.25rem;
            border: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 0.9rem;
        }

        .form-control:focus, .form-select:focus {
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.15);
            border-color: var(--accent-color);
        }

        .profile-badge:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }

        .dropdown-menu {
            border-radius: 12px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        h1,
        h2,
        h3 {
            font-weight: 700;
            color: #1a1a1a;
        }

        .text-gradient {
            background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Full-Width Sticky Header */
        .header-sticky {
            position: sticky;
            top: 0;
            z-index: 900;
            background: rgba(15, 23, 42, 0.4); /* Match footer/sidebar for consistency */
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 1rem 2.5rem;
            margin: -2.5rem -2.5rem 2.5rem -2.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        /* Hide CI4 Toolbar Icon */
        #debug-icon, .debug-bar-icon {
            display: none !important;
        }

        /* Full-Width Footer Styling */
        .professional-footer {
            margin-top: auto;
            margin-left: -2.5rem;
            margin-right: -2.5rem;
            margin-bottom: -2.5rem;
            padding: 1.5rem 2.5rem;
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
        }

    </style>
    <?= $this->renderSection('styles') ?>
</head>

<body>

    <!-- Sidebar -->
    <div class="sidebar d-none d-lg-block">
        <div class="mb-4 px-3">
            <div class="d-flex align-items-center gap-3 py-2">
                <img src="<?= base_url('assets/img/logo.png') ?>" alt="Logo" height="45">
                <div>
                    <h5 class="fw-bold mb-0 text-uppercase"><?= get_setting('app_name', 'SIMKP ASN') ?></h5>
                    <p class="small opacity-50 mb-0" style="font-size: 0.7rem;"><?= get_setting('app_version', 'v4.7.2') ?> Backend</p>
                </div>
            </div>
        </div>



        <nav class="nav flex-column">
            <div class="menu-section-label">Menu Utama</div>

            <?php if (in_array('admin', session()->get('roles')) || in_array('superadmin', session()->get('roles'))): ?>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'dashboard' ? 'active' : '' ?>"
                    href="<?= base_url('admin/dashboard') ?>">
                    <i class="bi bi-grid-fill"></i> Dashboard
                </a>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'pegawai' ? 'active' : '' ?>"
                    href="<?= base_url('admin/pegawai') ?>">
                    <i class="bi bi-people-fill"></i> Pegawai
                </a>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'pengajuan' ? 'active' : '' ?>"
                    href="<?= base_url('admin/pengajuan') ?>">
                    <i class="bi bi-file-earmark-check-fill"></i> Semua Pengajuan
                </a>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'laporan' ? 'active' : '' ?>"
                    href="<?= base_url('admin/laporan') ?>">
                    <i class="bi bi-journal-text"></i> Laporan KP
                </a>
                <div class="menu-section-label">Sistem</div>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'chatbot' ? 'active' : '' ?>"
                    href="<?= base_url('admin/chatbot') ?>">
                    <i class="bi bi-chat-dots-fill"></i> Chatbot WA
                </a>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'user' ? 'active' : '' ?>"
                    href="<?= base_url('admin/user') ?>">
                    <i class="bi bi-person-fill"></i> Pengaturan User
                </a>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'settings' ? 'active' : '' ?>"
                    href="<?= base_url('admin/settings') ?>">
                    <i class="bi bi-gear-fill"></i> Pengaturan Sistem
                </a>
            <?php elseif (in_array('keuangan', session()->get('roles'))): ?>
                <div class="menu-section-label">Keuangan</div>
                <a class="nav-link <?= current_url(true)->getSegment(1) == 'keuangan' && current_url(true)->getSegment(2) == 'laporan' ? 'active' : '' ?>"
                    href="<?= base_url('keuangan/laporan') ?>">
                    <i class="bi bi-journal-text"></i> Laporan KP
                </a>
            <?php elseif (in_array('verifikator', session()->get('roles'))): ?>
                <a class="nav-link active" href="<?= base_url('verifikator/dashboard') ?>">
                    <i class="bi bi-clipboard-check-fill"></i> Verifikasi
                </a>
            <?php else: ?>
                <a class="nav-link <?= current_url(true)->getSegment(2) == 'dashboard' ? 'active' : '' ?>"
                    href="<?= base_url('user/dashboard') ?>">
                    <i class="bi bi-grid-fill"></i> Dashboard
                </a>

                <div class="menu-section-label">Layanan Mandiri</div>

                <a class="nav-link <?= current_url(true)->getSegment(2) == 'pengajuan' ? 'active' : '' ?>"
                    href="<?= base_url('user/pengajuan') ?>">
                    <i class="bi bi-file-earmark-plus-fill"></i> Usul Kenaikan Pangkat
                </a>

                <a class="nav-link <?= in_array(current_url(true)->getSegment(2), ['riwayat', 'riwayat_detail']) ? 'active' : '' ?>"
                    href="<?= base_url('user/riwayat') ?>">
                    <i class="bi bi-clock-fill"></i> Riwayat Usul
                </a>
            <?php endif; ?>

        </nav>

        <div class="mt-auto px-1 pt-2">
            <div class="sidebar-divider"></div>
            <a class="nav-link text-danger" href="<?= base_url('auth/logout') ?>">
                <i class="bi bi-box-arrow-right"></i> Logout
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Top Navbar (Sticky Drawer Look) -->
        <header class="header-sticky">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-0 text-white fw-bold"><?= $this->renderSection('page_title') ?></h4>
                    <p class="text-white opacity-50 mb-0" style="font-size: 0.8rem;">
                        <i class="bi bi-calendar3 me-2"></i>
                        <?php
                        $hari = date('l');
                        $daftar_hari = ['Sunday' => 'Minggu', 'Monday' => 'Senin', 'Tuesday' => 'Selasa', 'Wednesday' => 'Rabu', 'Thursday' => 'Kamis', 'Friday' => 'Jumat', 'Saturday' => 'Sabtu'];
                        $bulan = date('F');
                        $daftar_bulan = ['January' => 'Januari', 'February' => 'Februari', 'March' => 'Maret', 'April' => 'April', 'May' => 'Mei', 'June' => 'Juni', 'July' => 'Juli', 'August' => 'Agustus', 'September' => 'September', 'October' => 'Oktober', 'November' => 'November', 'December' => 'Desember'];
                        echo $daftar_hari[$hari] . ', ' . date('d') . ' ' . $daftar_bulan[$bulan] . ' ' . date('Y');
                        ?>
                    </p>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <div class="vr bg-white opacity-25 d-none d-md-block" style="height: 30px;"></div>
                    <a href="<?= base_url('auth/profile') ?>" class="text-decoration-none">
                        <div class="profile-badge text-white">
                            <div class="text-end d-none d-md-block">
                                <span class="small fw-bold d-block lh-1"><?= session()->get('name') ?></span>
                                <span class="opacity-50" style="font-size: 0.65rem;">ONLINE</span>
                            </div>
                            <?php if (session()->get('photo')): ?>
                                <img src="<?= base_url('uploads/profile/' . session()->get('photo')) ?>"
                                    class="rounded-circle shadow-sm"
                                    style="width: 38px; height: 38px; object-fit: cover; border: 2px solid rgba(255,255,255,0.3);">
                            <?php else: ?>
                                <div class="bg-white bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;">
                                    <i class="bi bi-person-fill fs-5"></i>
                                </div>
                            <?php endif; ?>
                        </div>
                    </a>
                </div>
            </div>
        </header>

        <!-- Global Alert Notifications -->
        <?php if (session()->getFlashdata('success')): ?>
            <div class="alert alert-success alert-dismissible fade show rounded-4 border-0 mb-4 shadow-sm py-3 px-4"
                role="alert">
                <div class="d-flex align-items-center">
                    <i class="bi bi-check-circle-fill fs-5 me-3"></i>
                    <div>
                        <strong class="d-block">Berhasil!</strong>
                        <span class="small"><?= session()->getFlashdata('success') ?></span>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        <?php endif; ?>

        <?php if (session()->getFlashdata('error')): ?>
            <div class="alert alert-danger alert-dismissible fade show rounded-4 border-0 mb-4 shadow-sm py-3 px-4"
                role="alert">
                <div class="d-flex align-items-center">
                    <i class="bi bi-exclamation-triangle-fill fs-5 me-3"></i>
                    <div>
                        <strong class="d-block">Gagal!</strong>
                        <span class="small"><?= session()->getFlashdata('error') ?></span>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        <?php endif; ?>

        <?= $this->renderSection('content') ?>

        <!-- Professional Footer -->
        <footer class="professional-footer">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center small">
                <div class="mb-3 mb-md-0">
                    <strong><?= get_setting('app_name', 'SIMKP ASN') ?></strong> - Sistem Informasi Kenaikan Pangkat <?= get_setting('app_version', 'v4.7.2') ?>
                </div>
                <div class="d-flex gap-4">
                    <span>&copy; <?= date('Y') ?> BKPSDM Kabupaten Boalemo</span>
                    <span class="d-none d-md-inline opacity-50">|</span>
                    <a href="#" class="text-decoration-none text-reset opacity-75 hover-opacity-100">Pusat Bantuan</a>
                </div>
            </div>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Auto-hide alerts after 7 seconds
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert-dismissible');
            alerts.forEach(function(alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 7000);
    </script>
    <?= $this->renderSection('scripts') ?>
</body>

</html>