    <!-- Navbar -->
    <nav class="site-nav">
        <div class="container-fluid d-flex justify-content-between align-items-center" style="max-width: 1280px; padding-left: 40px; padding-right: 40px; margin: 0 auto;">
            <a href="<?php echo e(route('home')); ?>" class="nav-brand">
                <img src="<?php echo e(asset('assets/certificate/lambang_kabupaten_bogor.png')); ?>" alt="Logo Tegar Beriman" style="height: 42px; width: auto; object-fit: contain; margin-right: 0.5rem;">
                <div class="nav-brand-text">
                    <strong>LENTERA Kab Bogor</strong>
                    <span>Layanan Integrasi Izin Riset dan Magang Kabupaten Bogor</span>
                </div>
            </a>

            <ul class="nav-links d-flex align-items-center gap-2.5">
                <?php if(auth()->check() && !in_array(auth()->user()->role, ['superadmin', 'admin_kesbangpol'], true)): ?>
                <li>
                    <a href="<?php echo e(route('absensi.index')); ?>" class="<?php if(Route::is('absensi.index')): ?> active <?php endif; ?>">
                        <i class="fa-regular fa-pen-to-square"></i> Absensi
                    </a>
                </li>
                <?php endif; ?>

                <!-- Light / Dark Mode Toggle Button (Outside, round button) -->
                <li>
                    <button id="theme-toggle" class="p-0 d-flex align-items-center justify-content-center transition-all border-0 bg-transparent" type="button" aria-label="Toggle theme" style="width: 38px; height: 38px; border-radius: 50%; background: var(--border); color: var(--text-muted); outline: none; box-shadow: none; text-decoration: none !important;" onmouseover="this.style.background='rgba(108, 92, 231, 0.1)'; this.style.color='var(--primary)';" onmouseout="this.style.background='var(--border)'; this.style.color='var(--text-muted)';">
                        <span id="theme-toggle-icon" class="material-symbols-outlined" style="font-size: 20px; text-decoration: none !important; border-bottom: 0 !important;">dark_mode</span>
                    </button>
                </li>

                <?php if(auth()->check()): ?>
                    <!-- Burger Toggle Button (For Sidebar Menu, only shown when logged in) -->
                    <li>
                        <button class="p-0 d-flex align-items-center justify-content-center transition-all border-0 bg-transparent" type="button" data-bs-toggle="offcanvas" data-bs-target="#userMenu" aria-label="Toggle menu" style="width: 38px; height: 38px; border-radius: 50%; color: var(--text); outline: none; box-shadow: none; text-decoration: none !important;" onmouseover="this.style.background='rgba(108, 92, 231, 0.05)'" onmouseout="this.style.background='none'">
                            <i class="fa-solid fa-bars fs-5" style="text-decoration: none !important;"></i>
                        </button>
                    </li>
                <?php else: ?>
                    <!-- Login Button (For Guest, shown outside on navbar) -->
                    <li>
                        <a href="<?php echo e(route('login.form')); ?>" class="d-flex align-items-center gap-1.5 transition-colors px-3 py-1.5" style="font-size: 0.85rem; font-weight: 600; color: var(--text); background: transparent; border: none; text-decoration: none;" onmouseover="this.style.color='var(--primary)';" onmouseout="this.style.color='var(--text)';">
                            <i class="fa-solid fa-lock"></i> Login
                        </a>
                    </li>
                <?php endif; ?>
            </ul>
        </div>
    </nav>

    <?php if(auth()->check()): ?>
    <!-- Sidebar Drawer (Off-canvas, only for authenticated users) -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="userMenu" style="max-width: 340px;">
        <div class="offcanvas-header justify-content-end pb-0 border-0">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body d-flex flex-column p-4 pt-2">
            <!-- User Profile Section -->
            <div class="text-center py-4 mb-4">
                <div class="mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; font-weight: 700; font-size: 1.8rem; box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);">
                    <?php echo e(strtoupper(substr(auth()->user()->nama, 0, 1))); ?>

                </div>
                <h5 style="font-weight: 700; color: var(--dark); margin-bottom: 0.2rem;" class="text-truncate"><?php echo e(auth()->user()->nama); ?></h5>
                <span class="badge rounded-pill bg-light text-muted px-3 py-1.5 border" style="font-size: 0.75rem; text-transform: capitalize; color: var(--text-muted) !important;">
                    <?php echo e(str_replace('_', ' ', auth()->user()->role)); ?>

                </span>
            </div>

            <!-- Navigation Links -->
            <div class="d-flex flex-column gap-2.5">
                <!-- Edit Profil / Data Diri -->
                <a href="<?php echo e(route('landing.profile')); ?>" class="d-flex align-items-center justify-content-between p-3 rounded-3 text-decoration-none transition-all" style="color: var(--text); background: var(--bg); border: 1px solid var(--border);" onmouseover="this.style.transform='translateX(4px)'; this.style.borderColor='var(--primary)';" onmouseout="this.style.transform='none'; this.style.borderColor='var(--border)';">
                    <span class="d-flex align-items-center gap-2" style="font-weight: 600; font-size: 0.9rem;">
                        <i class="fa-regular fa-user text-primary fs-5"></i> Edit Profil / Data Diri
                    </span>
                    <i class="fa-solid fa-chevron-right text-muted" style="font-size: 0.8rem;"></i>
                </a>

                <!-- Dashboard Route (If Admin/Kesbangpol) -->
                <?php
                    $dashboardRoute = null;
                    if (in_array(auth()->user()->role, ['admin', 'superadmin', 'admin_dinas', 'admin_bidang'], true)) {
                        $dashboardRoute = route('admin.dashboard');
                    } elseif (auth()->user()->role === 'admin_kesbangpol') {
                        $dashboardRoute = route('kesbangpol.applications.index');
                    }
                ?>
                <?php if($dashboardRoute): ?>
                    <a href="<?php echo e($dashboardRoute); ?>" class="d-flex align-items-center justify-content-between p-3 rounded-3 text-decoration-none transition-all" style="color: var(--text); background: var(--bg); border: 1px solid var(--border);" onmouseover="this.style.transform='translateX(4px)'; this.style.borderColor='var(--primary)';" onmouseout="this.style.transform='none'; this.style.borderColor='var(--border)';">
                        <span class="d-flex align-items-center gap-2" style="font-weight: 600; font-size: 0.9rem;">
                            <i class="fa-solid fa-gauge-high text-primary fs-5"></i> Dashboard Admin
                        </span>
                        <i class="fa-solid fa-chevron-right text-muted" style="font-size: 0.8rem;"></i>
                    </a>
                <?php endif; ?>
            </div>

            <!-- Logout Button -->
            <div class="pt-3 border-top mt-auto">
                <form action="<?php echo e(route('logout')); ?>" method="POST" class="m-0">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="btn btn-link text-decoration-none w-100 rounded-3 d-flex align-items-center justify-content-center gap-2 py-2.5" style="color: var(--rose); font-weight: 600; font-size: 0.95rem; transition: all 0.2s;" onmouseover="this.style.background='rgba(225, 112, 85, 0.08)'" onmouseout="this.style.background='transparent'">
                        <i class="fa-solid fa-arrow-right-from-bracket"></i> Keluar dari Akun
                    </button>
                </form>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <script>
        (function () {
            const html = document.documentElement;
            
            function updateThemeUI() {
                const isDark = html.classList.contains('dark');
                const toggleIcon = document.getElementById('theme-toggle-icon');
                
                if (toggleIcon) {
                    if (isDark) {
                        toggleIcon.textContent = 'light_mode';
                        toggleIcon.style.color = '#fdcb6e'; // sun gold
                    } else {
                        toggleIcon.textContent = 'dark_mode';
                        toggleIcon.style.color = 'var(--text-muted)';
                    }
                }
            }

            // Sync UI state initially
            document.addEventListener('DOMContentLoaded', () => {
                updateThemeUI();

                const toggleBtn = document.getElementById('theme-toggle');
                if (toggleBtn) {
                    toggleBtn.addEventListener('click', () => {
                        if (html.classList.contains('dark')) {
                            html.classList.remove('dark');
                            localStorage.setItem('theme', 'light');
                        } else {
                            html.classList.add('dark');
                            localStorage.setItem('theme', 'dark');
                        }
                        updateThemeUI();
                    });
                }
            });
        })();
    </script>
<?php /**PATH C:\Users\arjun\Documents\Magang\Project Magang\simalam\resources\views/partials/navbar.blade.php ENDPATH**/ ?>