{{-- * ADMIN NAVIGATION BAR --}}
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm" x-data="{ mobileMenuOpen: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            {{-- Logo + Titre Admin --}}
            <div class="flex items-center gap-4">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2 hover:opacity-80 transition group">
                    {{-- Logo B-Bloc Boulanger --}}
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-600 to-purple-700 rounded-xl flex items-center justify-center text-white font-display font-bold text-2xl shadow-md">
                        B
                    </div>
                    <div>
                        <h1 class="font-display font-bold text-lg tracking-tight leading-none">
                            <span class="text-purple-600">Admin</span><span class="text-boulanger-orange">Panel</span>
                        </h1>
                        <p class="text-[10px] text-gray-500 font-medium">Gestion & Configuration</p>
                    </div>
                </a>

                {{-- Navigation principale admin --}}
                <div class="hidden md:flex items-center gap-1 ml-8">
                    <a href="{{ route('admin.dashboard') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.dashboard') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="layout-dashboard" class="w-4 h-4 inline-block mr-2"></i>
                        Dashboard
                    </a>
                    <a href="{{ route('admin.users.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.users.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="users" class="w-4 h-4 inline-block mr-2"></i>
                        Utilisateurs
                    </a>
                    <a href="{{ route('admin.stores.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.stores.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="store" class="w-4 h-4 inline-block mr-2"></i>
                        Magasins
                    </a>
                    <a href="{{ route('admin.posts.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.posts.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="file-text" class="w-4 h-4 inline-block mr-2"></i>
                        Posts
                    </a>
                    <a href="{{ route('admin.categories.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.categories.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="folder" class="w-4 h-4 inline-block mr-2"></i>
                        Catégories
                    </a>
                    <a href="{{ route('admin.tools.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.tools.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="wrench" class="w-4 h-4 inline-block mr-2"></i>
                        Outils
                    </a>
                    <a href="{{ route('admin.infinity.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.infinity.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="infinity" class="w-4 h-4 inline-block mr-2"></i>
                        Infinity
                    </a>
                    <a href="{{ route('admin.products.view') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.products.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="package" class="w-4 h-4 inline-block mr-2"></i>
                        Produits
                    </a>
                    <a href="{{ route('admin.checklists.index') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.checklists.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="clipboard-list" class="w-4 h-4 inline-block mr-2"></i>
                        Checklists
                    </a>
                    <a href="{{ route('admin.feedbacks.index') }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ request()->routeIs('admin.feedbacks.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                        <i data-lucide="message-circle-question" class="w-4 h-4 inline-block mr-2"></i>
                        Feedbacks
                    </a>
                </div>
            </div>

            {{-- Actions rapides + Profil --}}
            <div class="flex items-center gap-3">
                {{-- Menu hamburger mobile --}}
                <button @click="mobileMenuOpen = !mobileMenuOpen; $nextTick(() => window.lucide && lucide.createIcons())"
                        class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition">
                    <i :data-lucide="mobileMenuOpen ? 'x' : 'menu'" class="w-6 h-6 text-gray-600"></i>
                </button>

                {{-- Retour au site --}}
                <a href="{{ route('home') }}"
                   class="hidden md:flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-600 hover:text-boulanger-orange transition rounded-lg hover:bg-gray-50">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    Retour au site
                </a>

                {{-- Menu utilisateur mobile --}}
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open"
                            class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition">
                        @php
                            $user = auth()->user();
                            $initials = strtoupper(substr($user->first_name, 0, 1) . substr($user->last_name, 0, 1));
                        @endphp
                        <div class="w-8 h-8 bg-gradient-to-br from-purple-600 to-purple-700 rounded-full flex items-center justify-center text-white font-semibold text-xs">
                            {{ $initials }}
                        </div>
                        <span class="hidden md:block text-sm font-medium text-gray-700">{{ $user->first_name }}</span>
                        <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400"></i>
                    </button>

                    {{-- Dropdown Menu --}}
                    <div x-show="open"
                         @click.away="open = 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 right-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-100 py-2 z-50"
                         style="display: none;">

                        <div class="px-4 py-3 border-b border-gray-100">
                            <p class="text-sm font-medium text-gray-900">{{ $user->first_name }} {{ $user->last_name }}</p>
                            <p class="text-xs text-gray-500 truncate">{{ $user->email }}</p>
                        </div>

                        <a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                            <i data-lucide="user-circle" class="w-4 h-4"></i>
                            Mon profil
                        </a>

                        <a href="{{ route('home') }}" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                            <i data-lucide="home" class="w-4 h-4"></i>
                            Retour au site
                        </a>

                        <div class="border-t border-gray-100 my-2"></div>

                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                <i data-lucide="log-out" class="w-4 h-4"></i>
                                Déconnexion
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Navigation mobile (Burger Menu) --}}
        <div x-show="mobileMenuOpen"
             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"
             @click.away="mobileMenuOpen = false"
             class="md:hidden border-t border-gray-200 py-3 space-y-1"
             style="display: none;">
            <a href="{{ route('admin.dashboard') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.dashboard') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
                Dashboard
            </a>
            <a href="{{ route('admin.users.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.users.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="users" class="w-5 h-5"></i>
                Utilisateurs
            </a>
            <a href="{{ route('admin.stores.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.stores.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="store" class="w-5 h-5"></i>
                Magasins
            </a>
            <a href="{{ route('admin.posts.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.posts.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="file-text" class="w-5 h-5"></i>
                Posts
            </a>
            <a href="{{ route('admin.categories.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.categories.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="folder" class="w-5 h-5"></i>
                Catégories
            </a>
            <a href="{{ route('admin.tools.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.tools.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="wrench" class="w-5 h-5"></i>
                Outils
            </a>
            <a href="{{ route('admin.infinity.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.infinity.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="infinity" class="w-5 h-5"></i>
                Infinity
            </a>
            <a href="{{ route('admin.products.view') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.products.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="package" class="w-5 h-5"></i>
                Produits
            </a>
            <a href="{{ route('admin.checklists.index') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.checklists.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="clipboard-list" class="w-5 h-5"></i>
                Checklists
            </a>
            <a href="{{ route('admin.feedbacks.index') }}"
               @click="mobileMenuOpen = false"
               class="flex items-center gap-3 px-4 py-3 text-sm font-medium {{ request()->routeIs('admin.feedbacks.*') ? 'bg-purple-50 text-purple-700 border-l-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50' }}">
                <i data-lucide="message-circle-question" class="w-5 h-5"></i>
                Feedbacks
            </a>
        </div>
    </div>
</nav>