@php
    $role = session('user')['role'] ?? '';
    $dashboardRoute = $role === 'superadmin' ? route('admin.superadmin.dashboard') : route('admin.dashboard');
    $usersRoute = $role === 'superadmin' ? route('admin.superadmin.user.index') : route('admin.users');
    $penugasanRoute = $role === 'superadmin' ? route('admin.superadmin.kegiatan.create') : route('admin.kegiatan.index');
    
    $isDashboard = request()->routeIs('*.dashboard');
    $isUsers = request()->routeIs('*.user*') || request()->routeIs('*.users*');
    $isPenugasan = request()->routeIs('*.kegiatan.*');

    $activeStyle = "bg-[#0D215C] text-white";
    $inactiveStyle = "text-slate-500 bg-transparent hover:bg-slate-100 hover:text-[#0D215C]";
    
    $roleVal = session('user')['role'] ?? 'Administrator';
    if ($roleVal === 'admin') {
        $roleVal = 'Administrator';
    } elseif ($roleVal === 'superadmin') {
        $roleVal = 'Super Admin';
    } else {
        $roleVal = 'Petugas';
    }
@endphp
<nav class="bg-white border-b border-slate-200 shadow-[0_1px_12px_rgba(13,33,92,0.06)] sticky top-0 z-50">
    <div class="max-w-[1440px] mx-auto px-4 md:px-6 lg:px-8">
        <div class="flex justify-between items-center h-[66px]">
            {{-- Logo & Brand --}}
            <div class="flex items-center gap-2 md:gap-3">
                <img src="{{ asset('Kalimantan-Barat-Logo-Vector.png') }}"
                    alt="Logo Kalbar"
                    class="w-9 md:w-[46px] h-auto object-contain">
                <div class="border-l-2 border-slate-200 pl-2 md:pl-3">
                    <p class="text-[11px] md:text-[13.5px] font-bold text-[#0D215C] tracking-tight leading-tight m-0">
                        Dinas Tenaga Kerja dan Transmigrasi
                    </p>
                    <p class="text-[8px] md:text-[10px] font-medium text-slate-400 tracking-[1.8px] uppercase mt-0.5 m-0">
                        Provinsi Kalimantan Barat
                    </p>
                </div>
            </div>

            <!-- Hamburger Button (Mobile) -->
            <div class="flex md:hidden">
                <button type="button" id="admin-menu-btn" class="text-slate-500 hover:text-[#0D215C] focus:outline-none p-2 rounded-md hover:bg-slate-100 transition-colors">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
            </div>

            {{-- Nav + User (Desktop) --}}
            <div class="hidden md:flex items-center gap-2">
                <div class="flex items-center gap-1 mr-2">
                    <a href="{{ $dashboardRoute }}" class="text-[11.5px] font-semibold tracking-[0.4px] px-[18px] py-2 rounded-lg flex items-center gap-[7px] transition-all duration-200 {{ $isDashboard ? $activeStyle : $inactiveStyle }}">
                        <i data-lucide="layout-dashboard" class="w-3.5 h-3.5"></i> Dashboard
                    </a>
                    <a href="{{ $usersRoute }}" class="text-[11.5px] font-semibold tracking-[0.4px] px-[18px] py-2 rounded-lg flex items-center gap-[7px] transition-all duration-200 {{ $isUsers ? $activeStyle : $inactiveStyle }}">
                        <i data-lucide="users" class="w-3.5 h-3.5"></i> Kelola Pengguna
                    </a>
                    <a href="{{ $penugasanRoute }}" class="text-[11.5px] font-semibold tracking-[0.4px] px-[18px] py-2 rounded-lg flex items-center gap-[7px] transition-all duration-200 {{ $isPenugasan ? $activeStyle : $inactiveStyle }}">
                        <i data-lucide="clipboard-list" class="w-3.5 h-3.5"></i> Penugasan
                    </a>
                </div>

                <div class="w-px h-7 bg-slate-200 mx-1"></div>

                <div class="flex items-center gap-2.5">
                    <div class="text-right">
                        <p class="text-[13px] font-semibold text-slate-900 leading-none m-0">
                            {{ session('user')['name'] ?? 'User' }}
                        </p>
                        <p class="text-[10px] font-medium text-slate-400 uppercase tracking-[1.2px] mt-1 m-0">
                            {{ $roleVal }}
                        </p>
                    </div>

                    <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#0D215C] to-blue-800 text-white flex items-center justify-center font-bold text-xs tracking-[0.5px]">
                        {{ strtoupper(substr(session('user')['name'] ?? 'US',0,2)) }}
                    </div>

                    <form method="POST" action="{{ route('logout') }}" class="m-0">
                        @csrf
                        <button type="submit" class="w-9 h-9 rounded-lg bg-slate-50 text-slate-400 border border-slate-200 cursor-pointer flex items-center justify-center transition-all duration-200 hover:bg-rose-50 hover:text-rose-500 hover:border-rose-200" title="Keluar dari Sistem">
                            <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Mobile Menu Panel -->
    <div id="admin-mobile-menu" class="hidden md:hidden bg-white border-t border-slate-100 shadow-xl absolute w-full left-0 pb-4">
        <div class="px-4 py-3 flex flex-col gap-2">
            <a href="{{ $dashboardRoute }}" class="text-[13px] font-semibold tracking-[0.4px] px-4 py-3 rounded-lg flex items-center gap-3 transition-all duration-200 {{ $isDashboard ? $activeStyle : $inactiveStyle }}">
                <i data-lucide="layout-dashboard" class="w-4 h-4"></i> Dashboard
            </a>
            <a href="{{ $usersRoute }}" class="text-[13px] font-semibold tracking-[0.4px] px-4 py-3 rounded-lg flex items-center gap-3 transition-all duration-200 {{ $isUsers ? $activeStyle : $inactiveStyle }}">
                <i data-lucide="users" class="w-4 h-4"></i> Kelola Pengguna
            </a>
            <a href="{{ $penugasanRoute }}" class="text-[13px] font-semibold tracking-[0.4px] px-4 py-3 rounded-lg flex items-center gap-3 transition-all duration-200 {{ $isPenugasan ? $activeStyle : $inactiveStyle }}">
                <i data-lucide="clipboard-list" class="w-4 h-4"></i> Penugasan
            </a>
            
            <div class="h-px w-full bg-slate-100 my-1"></div>
            
            <div class="flex items-center justify-between px-2 py-2">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#0D215C] to-blue-800 text-white flex items-center justify-center font-bold text-xs tracking-[0.5px]">
                        {{ strtoupper(substr(session('user')['name'] ?? 'US',0,2)) }}
                    </div>
                    <div>
                        <p class="text-[13px] font-semibold text-slate-900 leading-none m-0">
                            {{ session('user')['name'] ?? 'User' }}
                        </p>
                        <p class="text-[10px] font-medium text-slate-400 uppercase tracking-[1.2px] mt-1 m-0">
                            {{ $roleVal }}
                        </p>
                    </div>
                </div>
                <form method="POST" action="{{ route('logout') }}" class="m-0">
                    @csrf
                    <button type="submit" class="w-9 h-9 rounded-lg bg-slate-50 text-slate-400 border border-slate-200 cursor-pointer flex items-center justify-center transition-all duration-200 hover:bg-rose-50 hover:text-rose-500 hover:border-rose-200" title="Keluar dari Sistem">
                        <i data-lucide="log-out" class="w-4 h-4"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('admin-menu-btn');
        const menu = document.getElementById('admin-mobile-menu');
        if(btn && menu) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                menu.classList.toggle('hidden');
                lucide.createIcons();
            });
            document.addEventListener('click', function(e) {
                if(!menu.contains(e.target) && !btn.contains(e.target)) {
                    menu.classList.add('hidden');
                }
            });
        }
    });
</script>