{{-- Navbar / Header --}}
<header class="bg-white/80 backdrop-blur-md mx-6 mt-6 mb-2 rounded-2xl h-16 flex items-center justify-between px-5 flex-shrink-0 shadow-sm border border-white relative" style="z-index: 30;">
    <div class="flex items-center gap-4">
        <button onclick="window.toggleSidebar()" class="w-10 h-10 flex items-center justify-center text-sky-600 hover:bg-sky-50 border border-sky-100 rounded-xl focus:outline-none transition lg:hidden shadow-sm">
            <i class="fas fa-bars"></i>
        </button>
        <div class="w-10 h-10 hidden lg:flex items-center justify-center text-sky-600 border border-sky-100 rounded-xl bg-gradient-to-br from-sky-50 to-white shadow-sm">
            <i class="fas fa-bars"></i>
        </div>
        <h2 class="text-xl font-extrabold text-slate-800 hidden sm:block tracking-tight" id="pageTitle">Dashboard</h2>
    </div>

    <div class="flex items-center">

        {{-- Clock --}}
        <div class="hidden md:flex flex-col items-end justify-center mr-4 border-r border-slate-200 pr-5">
            <div id="headerDate" class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider mb-0.5">
                <i class="far fa-calendar-alt mr-1"></i> Memuat...
            </div>
            <div id="headerTime" class="text-sm font-black text-sky-600 tracking-widest">
                <i class="far fa-clock mr-1"></i> --:--:--
            </div>
        </div>

        {{-- User Profile Dropdown --}}
        <div class="relative" id="profileDropdownContainer">
            <button id="profileToggleBtn" class="flex items-center hover:bg-slate-50 p-1.5 pr-2 rounded-full transition group border border-transparent hover:border-slate-200 focus:outline-none" title="Buka Menu Pengguna">
                <div class="text-right hidden sm:block mr-3">
                    <p class="text-sm font-bold text-slate-800 leading-tight" id="headerRoleLabel">{{ auth()->user()->nama ?? 'User' }}</p>
                    <p class="text-[10px] font-bold text-sky-600 mt-0.5 uppercase tracking-wider" id="headerRole">{{ auth()->user()->role ?? 'Guest' }}</p>
                </div>
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-sky-100 to-blue-50 flex items-center justify-center text-sky-800 border-2 border-white group-hover:border-sky-200 transition shadow-sm font-bold">
                    <span id="userInitialsHeader">{{ strtoupper(substr(auth()->user()->nama ?? 'U', 0, 2)) }}</span>
                </div>
                <i class="fas fa-chevron-down text-slate-300 text-[10px] ml-2 mr-1 group-hover:text-sky-500 transition"></i>
            </button>

            {{-- Dropdown Menu --}}
            <div id="profileDropdown" class="hidden absolute right-0 mt-3 w-52 bg-white/95 backdrop-blur-md rounded-2xl shadow-xl border border-slate-100 overflow-hidden z-50 transform origin-top-right transition-all">
                <div class="p-2">
                    <button onclick="document.getElementById('profileDropdown').classList.add('hidden'); window.openModalProfile()" class="w-full text-left px-4 py-2.5 text-sm font-bold text-slate-600 hover:text-sky-600 hover:bg-sky-50 rounded-xl transition flex items-center">
                        <i class="fas fa-user-circle mr-3 text-slate-400"></i> Profil Saya
                    </button>
                    <div class="h-px bg-slate-100 my-1.5 mx-2"></div>
                    <button onclick="document.getElementById('profileDropdown').classList.add('hidden'); window.handleLogout()" class="w-full text-left px-4 py-2.5 text-sm font-bold text-rose-600 hover:bg-rose-50 rounded-xl transition flex items-center">
                        <i class="fas fa-sign-out-alt mr-3 text-rose-400"></i> Keluar Sistem
                    </button>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
(function() {
    const btn = document.getElementById('profileToggleBtn');
    const dropdown = document.getElementById('profileDropdown');
    const container = document.getElementById('profileDropdownContainer');
    if (!btn || !dropdown || !container) return;

    // Toggle saat klik tombol — stopPropagation agar tidak ditangkap listener luar
    btn.addEventListener('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        dropdown.classList.toggle('hidden');
    });

    // Tutup saat klik di luar container
    document.addEventListener('click', function(e) {
        if (!container.contains(e.target)) {
            dropdown.classList.add('hidden');
        }
    });
})();
</script>