{{-- * HEADER FIXE --}}
<header class="bg-white shadow-sm z-20 sticky top-0 px-4 py-3 flex justify-between items-center"
        x-data="notificationsHeader()"
        x-init="init()">

    {{-- Logo + Titre cliquable --}}
    <a href="{{ route('home') }}" class="flex items-center gap-2 hover:opacity-80 transition group">
        {{-- Logo B-Bloc Boulanger --}}
        <div class="w-10 h-10 flex items-center justify-center transform group-hover:scale-105 transition">
            <img src="{{ asset('images/logos/Bbloc_Seul_Orange_RVB.svg') }}" alt="Boulanger" class="w-full h-full">
        </div>
        <h1 class="font-display font-bold text-lg tracking-tight">
            Animation<span class="text-boulanger-orange">Vendeurs</span>
        </h1>
    </a>

    {{-- * Centre : Sélecteur de Magasin (Desktop uniquement) --}}
    <div class="hidden md:flex flex-1 justify-center px-4">
        @include('layouts.partials.store-selector')
    </div>

    <div class="flex items-center gap-3">
        {{-- Bouton Notifications --}}
        <button @click="toggleNotifications()"
                class="relative p-2 text-gray-500 hover:text-boulanger-orange transition rounded-lg hover:bg-gray-50">
            <i data-lucide="bell" class="w-6 h-6"></i>
            <span x-show="unreadCount > 0"
                  x-text="unreadCount > 99 ? '99+' : unreadCount"
                  class="absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center animate-pulse"></span>
        </button>

        {{-- Avatar avec Initiales --}}
        <button @click="showUserMenu = !showUserMenu; showNotifs = false"
                class="relative w-9 h-9 bg-gradient-to-br from-boulanger-orange to-orange-600 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200 ring-2 ring-white">
            @php
                $user = auth()->user();
                $initials = strtoupper(substr($user->first_name, 0, 1) . substr($user->last_name, 0, 1));
            @endphp
            <span>{{ $initials }}</span>
        </button>
    </div>

    {{-- * Notification Panel --}}
    <div x-show="showNotifs"
         @click.away="showNotifs = false"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="absolute top-full right-2 w-96 max-w-[calc(100vw-2rem)] bg-white shadow-2xl rounded-xl border border-gray-100 z-50 mt-2"
         style="display: none;">
        <div class="flex items-center justify-between p-4 border-b border-gray-100">
            <h3 class="font-display font-bold text-base text-boulanger-dark">Notifications</h3>
            <div class="flex items-center gap-2">
                <span class="text-xs text-boulanger-gray" x-text="unreadCount > 0 ? unreadCount + ' non lue(s)' : 'Tout lu'"></span>
                <button @click="markAllAsRead()"
                        x-show="unreadCount > 0"
                        class="text-xs text-boulanger-orange hover:underline">
                    Tout marquer lu
                </button>
            </div>
        </div>

        <div class="max-h-96 overflow-y-auto">
            <template x-if="isLoading">
                <div class="p-6 text-center">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-boulanger-orange mx-auto"></div>
                    <p class="text-xs text-gray-400 mt-2">Chargement...</p>
                </div>
            </template>

            <template x-if="!isLoading && notifications.length > 0">
                <div class="divide-y divide-gray-100">
                    <template x-for="notif in notifications.slice(0, 10)" :key="notif.id">
                        <a :href="notif.data.url || '#'"
                           @click="markAsRead(notif.id)"
                           class="block p-4 hover:bg-gray-50 transition cursor-pointer"
                           :class="notif.read_at ? 'opacity-60' : 'bg-blue-50/30'">
                            <div class="flex items-start gap-3">
                                {{-- Icône notification --}}
                                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
                                     :class="getNotifIcon(notif.type || notif.data?.type).bg">
                                    <span x-text="getNotifIcon(notif.type || notif.data?.type).emoji" class="text-lg"></span>
                                </div>

                                <div class="flex-1 min-w-0">
                                    {{-- Message principal (groupé ou simple) --}}
                                    <p class="text-sm font-medium text-boulanger-dark mb-1">
                                        <template x-if="notif.grouped && notif.count > 1">
                                            <span>
                                                <strong x-text="notif.users[0].name"></strong>
                                                <template x-if="notif.count === 2">
                                                    <span> et <strong x-text="notif.users[1].name"></strong></span>
                                                </template>
                                                <template x-if="notif.count > 2">
                                                    <span> et <strong x-text="(notif.count - 1) + ' autre' + (notif.count > 2 ? 's' : '')"></strong></span>
                                                </template>
                                                <span x-text="' ' + getGroupedMessage(notif.type)"></span>
                                            </span>
                                        </template>
                                        <template x-if="!notif.grouped || notif.count === 1">
                                            <span x-text="notif.data?.message || getNotificationTitle(notif)"></span>
                                        </template>
                                    </p>

                                    {{-- Preview du contenu --}}
                                    <p class="text-xs text-gray-500 truncate"
                                       x-text="notif.data?.post_content || notif.data?.comment_content"></p>

                                    {{-- Temps écoulé --}}
                                    <p class="text-xs text-gray-400 mt-1" x-text="timeAgo(notif.created_at)"></p>
                                </div>

                                {{-- Dot non lu --}}
                                <div x-show="!notif.read_at" class="w-2 h-2 rounded-full bg-boulanger-orange flex-shrink-0 mt-2"></div>
                            </div>
                        </a>
                    </template>
                </div>
            </template>

            <template x-if="!isLoading && notifications.length === 0">
                <div class="text-center py-12">
                    <i data-lucide="inbox" class="w-16 h-16 text-gray-300 mx-auto mb-3"></i>
                    <p class="text-sm text-boulanger-gray">Aucune notification</p>
                </div>
            </template>
        </div>

        <div class="p-3 border-t border-gray-100">
            <a href="{{ route('notifications.index') }}"
               class="block text-center text-sm text-boulanger-orange hover:underline font-medium">
                Voir toutes les notifications
            </a>
        </div>
    </div>

    {{-- * Menu Utilisateur Déroulant --}}
    {{-- Desktop : toujours visible en sidebar, Mobile : dropdown --}}
    <div class="hidden md:block fixed left-0 top-[73px] w-72 h-[calc(100vh-73px)] bg-white shadow-xl border-r border-gray-100 overflow-y-auto z-40">
        {{-- En-tête utilisateur --}}
        <div class="bg-gradient-to-br from-boulanger-orange to-orange-600 p-4 text-white">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-white/20 backdrop-blur rounded-full flex items-center justify-center font-bold text-lg">
                    {{ $initials }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-display font-bold truncate">{{ $user->first_name }} {{ $user->last_name }}</p>
                    <p class="text-xs text-white/80 truncate">{{ $user->email }}</p>
                    <p class="text-xs text-white/90 font-medium mt-1 flex items-center gap-1">
                        <i data-lucide="store" class="w-3 h-3"></i>
                        {{ $user->store->name ?? 'Siège' }}
                    </p>
                </div>
            </div>
        </div>

        {{-- Menu navigation --}}
        <nav class="p-2">
            <a href="{{ route('home') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('home') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="home" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Fil d'actualité</span>
            </a>

            <a href="{{ route('tools.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('tools.index') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="briefcase" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Boîte à outils</span>
            </a>

            <a href="{{ route('tools.infinity') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('tools.infinity') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="infinity" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Simulateur Infinity</span>
            </a>

            <a href="{{ route('tools.index') }}#zimms"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group"
               @click="$dispatch('open-zimms-tab')">
                <i data-lucide="tag" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Codes Zimms</span>
            </a>

            {{-- * Suivi Hebdo : Tous les rôles (vendeur = form, autres = validation) --}}
            <a href="{{ route('checklists.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('checklists.*') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="clipboard-check" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Suivi hebdo</span>
            </a>

            {{-- * Gestion Magasin : Manager/Animateur/Directeur/Admin → Rayons + Outils Store --}}
            @if(auth()->user()->canSuperviseTeam())
            <a href="{{ route('gestion.magasin') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('gestion.magasin') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="settings" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Gestion Magasin</span>
            </a>
            @endif

            <a href="{{ route('store.show') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('store.show') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="users" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Mon équipe</span>
            </a>

            <hr class="my-2 border-gray-100">

            <a href="{{ route('dashboard') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('dashboard') ? 'bg-boulanger-light text-boulanger-orange' : '' }}">
                <i data-lucide="user-circle" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Mon profil</span>
            </a>

            @can('admin')
            <a href="{{ route('admin.dashboard') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group {{ request()->routeIs('admin.*') ? 'bg-boulanger-light text-purple-600' : '' }}">
                <i data-lucide="shield" class="w-5 h-5 text-purple-500 group-hover:text-purple-600 transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Administration</span>
            </a>
            @endcan

            <hr class="my-2 border-gray-100">

            {{-- * Besoin d'aide --}}
            <button @click="$dispatch('open-help-modal')"
                    class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-blue-50 transition-colors group text-left">
                <i data-lucide="help-circle" class="w-5 h-5 text-boulanger-gray group-hover:text-blue-500 transition"></i>
                <span class="font-medium text-boulanger-dark group-hover:text-blue-500 text-sm transition">Besoin d'aide ?</span>
            </button>

            <hr class="my-2 border-gray-100">

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-red-50 transition-colors group text-left">
                    <i data-lucide="log-out" class="w-5 h-5 text-boulanger-gray group-hover:text-red-500 transition"></i>
                    <span class="font-medium text-boulanger-dark group-hover:text-red-500 text-sm transition">Déconnexion</span>
                </button>
            </form>
        </nav>
    </div>

    {{-- Mobile : menu dropdown classique --}}
    <div x-show="showUserMenu"
         @click.away="showUserMenu = false"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="md:hidden absolute top-full right-2 w-72 max-h-[calc(100vh-5rem)] bg-white shadow-2xl rounded-xl border border-gray-100 overflow-y-auto z-50 mt-2"
         style="display: none;">

        {{-- En-tête utilisateur --}}
        <div class="bg-gradient-to-br from-boulanger-orange to-orange-600 p-4 text-white">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-white/20 backdrop-blur rounded-full flex items-center justify-center font-bold text-lg">
                    {{ $initials }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-display font-bold truncate">{{ $user->first_name }} {{ $user->last_name }}</p>
                    <p class="text-xs text-white/80 truncate">{{ $user->email }}</p>
                    <p class="text-xs text-white/90 font-medium mt-1 flex items-center gap-1">
                        <i data-lucide="store" class="w-3 h-3"></i>
                        {{ $user->store->name ?? 'Siège' }}
                    </p>
                </div>
            </div>
        </div>

        {{-- * Sélecteur de Magasin (Mobile uniquement) --}}
        <div class="md:hidden p-3 border-b border-gray-100 bg-gray-50">
            @include('layouts.partials.store-selector-mobile')
        </div>

        {{-- Menu navigation --}}
        <nav class="p-2">
            <a href="{{ route('home') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="home" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Fil d'actualité</span>
            </a>

            <a href="{{ route('tools.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="briefcase" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Boîte à outils</span>
            </a>

            <a href="{{ route('tools.infinity') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="infinity" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Simulateur Infinity</span>
            </a>

            <a href="{{ route('tools.index') }}#zimms"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group"
               @click="$dispatch('open-zimms-tab')">
                <i data-lucide="tag" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Codes Zimms</span>
            </a>

            {{-- * Suivi Hebdo : Tous les rôles (vendeur = form, autres = validation) --}}
            <a href="{{ route('checklists.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="clipboard-check" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Suivi hebdo</span>
            </a>

            {{-- * Gestion Magasin : Manager/Animateur/Directeur/Admin → Rayons + Outils Store --}}
            @if(auth()->user()->canSuperviseTeam())
            <a href="{{ route('gestion.magasin') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="settings" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Gestion Magasin</span>
            </a>
            @endif

            <a href="{{ route('store.show') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="users" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Mon équipe</span>
            </a>

            <hr class="my-2 border-gray-100">

            <a href="{{ route('dashboard') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="user-circle" class="w-5 h-5 text-boulanger-gray group-hover:text-boulanger-orange transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Mon profil</span>
            </a>

            @can('admin')
            <a href="{{ route('admin.dashboard') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-boulanger-light transition-colors group">
                <i data-lucide="shield" class="w-5 h-5 text-purple-500 group-hover:text-purple-600 transition"></i>
                <span class="font-medium text-boulanger-dark text-sm">Administration</span>
            </a>
            @endcan

            <hr class="my-2 border-gray-100">

            {{-- * Besoin d'aide --}}
            <button @click="$dispatch('open-help-modal'); showUserMenu = false"
                    class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-blue-50 transition-colors group text-left">
                <i data-lucide="help-circle" class="w-5 h-5 text-boulanger-gray group-hover:text-blue-500 transition"></i>
                <span class="font-medium text-boulanger-dark group-hover:text-blue-500 text-sm transition">Besoin d'aide ?</span>
            </button>

            <hr class="my-2 border-gray-100">

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-red-50 transition-colors group text-left">
                    <i data-lucide="log-out" class="w-5 h-5 text-boulanger-gray group-hover:text-red-500 transition"></i>
                    <span class="font-medium text-boulanger-dark group-hover:text-red-500 text-sm transition">Déconnexion</span>
                </button>
            </form>
        </nav>
    </div>
</header>