{{-- Top Header: 64px --}}
<header class="sticky top-0 z-20 bg-white border-b border-gray-200 h-16 flex items-center justify-between px-4 sm:px-5 md:px-7">

    {{-- Left: Hamburger (mobile) + Page Title --}}
    <div class="flex items-center gap-3">
        {{-- Hamburger Menu Button (mobile only) --}}
        <button
            @click="$store.sidebar.toggle()"
            class="btn-icon lg:hidden"
            aria-label="Toggle sidebar"
        >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="3" y1="12" x2="21" y2="12"/>
                <line x1="3" y1="6" x2="21" y2="6"/>
                <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
        </button>

        {{-- Page Title (shown in header on mobile, hidden on desktop since it's in content area) --}}
        <h1 class="font-display text-lg font-semibold text-gray-900 lg:hidden truncate max-w-[200px]">
            @yield('page-title', 'Dashboard')
        </h1>
    </div>

    {{-- Right: Search + Notifications + User --}}
    <div class="flex items-center gap-2">

        {{-- Search Bar (admin roles only, hidden on mobile) --}}
        @role('super_admin', 'company_admin')
        <div class="hidden md:block relative" x-data="{ query: '' }">
            <input
                type="text"
                x-model="query"
                placeholder="Search..."
                class="w-56 lg:w-64 pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-700 bg-gray-50
                       focus:bg-white focus:border-primary-600 focus:ring-[3px] focus:ring-primary-600/10
                       placeholder:text-gray-400 outline-none transition-all duration-200"
            >
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
        </div>
        @endrole

        {{-- Notification Bell --}}
        <div x-data="{ open: false }" class="relative">
            <button
                @click="open = !open"
                class="btn-icon"
                aria-label="Notifications"
            >
                <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                    <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                </svg>
                @if(isset($unreadCount) && $unreadCount > 0)
                    <span class="notif-dot"></span>
                @endif
            </button>

            {{-- Notification Dropdown --}}
            <div
                x-show="open"
                @click.away="open = false"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 translate-y-1"
                class="absolute right-0 top-full mt-2 w-80 bg-white rounded-xl border border-gray-200 shadow-lg overflow-hidden z-50"
                style="display: none;"
            >
                <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="font-display text-sm font-semibold text-gray-800">Notifications</h3>
                    <button
                        @click="fetch('{{ route('notifications.readAll') }}', {method:'POST',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}})"
                        class="btn-ghost"
                    >Mark all read</button>
                </div>
                <div class="max-h-80 overflow-y-auto divide-y divide-gray-50" id="notification-list">
                    <div class="px-4 py-8 text-center text-sm text-gray-400">
                        No notifications yet
                    </div>
                </div>
            </div>
        </div>

        {{-- User Avatar / Menu --}}
        <div x-data="{ open: false }" class="relative">
            <button @click="open = !open" class="flex items-center gap-2 cursor-pointer" aria-label="User menu">
                @if(isset($authUser))
                    @if($authUser->avatar)
                        <img src="{{ $authUser->avatar_url }}" alt="{{ $authUser->name }}" class="w-8 h-8 rounded-full object-cover">
                    @else
                        <div class="avatar avatar-sm {{ 'bg-gradient-to-br from-primary-600 to-accent-500' }}">
                            {{ $authUser->initials }}
                        </div>
                    @endif
                    <div class="hidden sm:block text-left">
                        <p class="text-sm font-medium text-gray-700 leading-tight">{{ $authUser->name }}</p>
                        <p class="text-xxs text-gray-400">{{ $authUser->role_label }}</p>
                    </div>
                @endif
                <svg class="w-4 h-4 text-gray-400 hidden sm:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
            </button>

            {{-- User Dropdown --}}
            <div
                x-show="open"
                @click.away="open = false"
                x-transition
                class="absolute right-0 top-full mt-2 w-48 bg-white rounded-xl border border-gray-200 shadow-lg py-1 z-50"
                style="display: none;"
            >
                <div class="px-4 py-2 border-b border-gray-100">
                    <p class="text-sm font-medium text-gray-700 truncate">{{ $authUser->name ?? '' }}</p>
                    <p class="text-xxs text-gray-400 truncate">{{ $authUser->email ?? '' }}</p>
                </div>
                <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Profile
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-danger-500 hover:bg-danger-50 transition-colors">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                        Sign out
                    </button>
                </form>
            </div>
        </div>

    </div>
</header>