{{-- ┌──────────────────────────────────────────────────┐ --}}
{{-- │  Admin Top Bar                                    │ --}}
{{-- └──────────────────────────────────────────────────┘ --}}

<header class="sticky top-0 z-20 bg-white border-b border-gray-100">
    <div class="flex items-center justify-between h-16 px-4 lg:px-8">

        {{-- Left: Hamburger + Search --}}
        <div class="flex items-center gap-4">
            {{-- Hamburger --}}
            <button onclick="toggleSidebar()" class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors" aria-label="Toggle sidebar">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                </svg>
            </button>

            {{-- Search --}}
            <!--<div class="hidden sm:flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2 w-72 border border-gray-100 focus-within:border-primary-300 focus-within:ring-2 focus-within:ring-primary-100 transition-all">-->
            <!--    <svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">-->
            <!--        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>-->
            <!--    </svg>-->
            <!--    <input type="text" placeholder="Search anything…" class="bg-transparent text-sm w-full outline-none placeholder-gray-400 text-gray-700">-->
            <!--</div>-->
        </div>

        {{-- Right: Actions --}}
        <div class="flex items-center gap-2">

            {{-- Notifications --}}
            <!--<button class="relative p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors" aria-label="Notifications">-->
            <!--    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">-->
            <!--        <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/>-->
            <!--    </svg>-->
            <!--    <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full ring-2 ring-white"></span>-->
            <!--</button>-->

            {{-- Fullscreen --}}
            <button onclick="document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen()" class="hidden md:block p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors" aria-label="Fullscreen">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>
                </svg>
            </button>

            {{-- Divider --}}
            <div class="w-px h-8 bg-gray-200 mx-1 hidden sm:block"></div>

            {{-- User menu --}}
            @auth
            <div class="relative" id="user-menu-wrapper">
                <button onclick="document.getElementById('user-dropdown').classList.toggle('hidden')" class="flex items-center gap-3 p-1.5 rounded-lg hover:bg-gray-50 transition-colors">
                    @if(auth()->user()->avatar)
                        <img src="{{ auth()->user()->avatar }}" alt="" class="w-8 h-8 rounded-full object-cover">
                    @else
                        <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">
                            {{ strtoupper(collect(explode(' ', auth()->user()->name))->map(fn($word) => substr($word, 0, 1))->take(2)->implode('')) }}
                        </div>
                    @endif
                    <div class="hidden sm:block text-left">
                        <p class="text-sm font-medium text-gray-800 leading-tight">{{ auth()->user()->name }}</p>
                        <p class="text-xs text-gray-400 leading-tight">{{ auth()->user()->email }}</p>
                    </div>
                    <svg class="w-4 h-4 text-gray-400 hidden sm:block" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                    </svg>
                </button>

                {{-- Dropdown --}}
                <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-100 py-1.5 z-50">
                    <!--<a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900">-->
                    <!--    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0"/></svg>-->
                    <!--    My Profile-->
                    <!--</a>-->
                    <!--<a href="{{ route('admin.settings.general') }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900">-->
                    <!--    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87a6.4 6.4 0 0 1 .58.303c.312.2.698.278 1.064.163l1.22-.407a1.158 1.158 0 0 1 1.369.49l1.296 2.247a1.158 1.158 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.431.992a6.759 6.759 0 0 1 0 .59c-.007.38.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.158 1.158 0 0 1-1.369.491l-1.217-.406c-.366-.115-.752-.037-1.064.163-.192.124-.39.24-.58.303-.333.183-.582.495-.644.869l-.214 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.063-.374-.312-.687-.644-.87a6.52 6.52 0 0 1-.58-.302c-.312-.2-.698-.278-1.064-.163l-1.22.407a1.158 1.158 0 0 1-1.369-.49l-1.297-2.247a1.158 1.158 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.59c.007-.38-.138-.75-.43-.99l-1.004-.828a1.158 1.158 0 0 1-.26-1.43l1.297-2.247a1.158 1.158 0 0 1 1.37-.491l1.216.406c.366.115.752.037 1.064-.163.19-.124.39-.24.58-.303.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>-->
                    <!--    Settings-->
                    <!--</a>-->
                    <!--<hr class="my-1.5 border-gray-100">-->
                    <form action="{{ route('admin.logout') }}" method="POST" class="block">
                        @csrf
                        <button type="submit" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 text-left">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15"/></svg>
                            Sign out
                        </button>
                    </form>
                </div>
            </div>
            @endauth
        </div>
    </div>
</header>

<script>
    // Close dropdown on click outside
    document.addEventListener('click', (e) => {
        const wrapper = document.getElementById('user-menu-wrapper');
        const dropdown = document.getElementById('user-dropdown');
        if (wrapper && !wrapper.contains(e.target)) {
            dropdown?.classList.add('hidden');
        }
    });
</script>