@php
    $currentUser = auth()->user();
    $unreadCount = $currentUser ? $currentUser->notifications()->whereNull('read_at')->count() : 0;
    $recentNotifications = $currentUser ? $currentUser->notifications()->latest('id')->limit(5)->get() : collect();
@endphp

<header class="sticky top-0 z-20 border-b border-[var(--user-border)] bg-[var(--user-surface)]/90 backdrop-blur">
    <div class="flex flex-wrap items-center justify-between gap-2 px-6 py-4">
        <div class="flex items-center gap-2">
            <button type="button" data-sidebar-toggle class="rounded-lg border border-[var(--user-border)] bg-[var(--user-surface)] px-2 py-1 text-[var(--user-text)] lg:hidden">
                Menu
            </button>
            <div>
                <div class="text-xl font-semibold" style="font-family: var(--admin-font-heading);">{{ $heading ?? 'Dashboard' }}</div>
                @if(!empty($subheading ?? ''))
                    <div class="text-xs text-[var(--user-muted)]">{{ $subheading }}</div>
                @endif
            </div>
        </div>
        <div class="flex items-center gap-3">
            <button type="button" data-theme-toggle class="rounded-lg border border-[var(--user-border)] px-3 py-2 text-xs text-[var(--user-muted)]">
                Theme: <span data-theme-label>Light</span>
            </button>
            <div class="relative">
                <button type="button" data-notification-toggle class="rounded-lg border border-[var(--user-border)] px-3 py-2 text-xs text-[var(--user-muted)]">
                    Alerts {{ $unreadCount > 0 ? '('.$unreadCount.')' : '' }}
                </button>
                <div data-notification-panel class="absolute right-0 mt-2 hidden w-[min(90vw,16rem)] rounded-2xl border border-[var(--user-border)] bg-[var(--user-surface)] p-3 shadow-xl">
                    <div class="text-xs text-[var(--user-muted)]">Recent Alerts</div>
                    <div class="mt-2 space-y-2">
                        @forelse($recentNotifications as $note)
                            <div class="rounded-lg border border-[var(--user-border)] p-2 text-xs">
                                <div class="font-semibold">{{ $note->title }}</div>
                                <div class="text-[var(--user-muted)]">{{ \Illuminate\Support\Str::limit($note->message, 60) }}</div>
                            </div>
                        @empty
                            <div class="text-xs text-[var(--user-muted)]">No alerts yet.</div>
                        @endforelse
                    </div>
                    <a href="{{ route('franchise.notifications') }}" class="mt-3 inline-block text-xs text-[var(--user-primary)]">View all</a>
                </div>
            </div>
            <span class="user-badge success">Franchise</span>
            <div class="hidden rounded-full bg-[var(--user-border)] px-3 py-1 text-sm text-[var(--user-muted)] sm:block">
                {{ auth()->user()->name ?? 'Franchise' }}
            </div>
        </div>
    </div>
</header>