@extends('layouts.base')

@section('title', 'Boîte à Outils - Animation Vendeurs')

@section('x-data', 'toolsComponent()')

@section('content')
{{-- * Preload : Injection des données serveur --}}
<script>
    window.preloadedToolTabs = @json($tabs ?? []);
    window.canManageReturns = {{ auth()->check() && auth()->user()->canSuperviseTeam() ? 'true' : 'false' }};
</script>

<div class="container mx-auto px-4 py-6 max-w-7xl pb-32" data-store-id="{{ $activeStoreId ?? '' }}">
    {{-- * Header avec logo Boulanger --}}
    <header class="mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-14 h-14 flex items-center justify-center">
                    <img src="{{ asset('images/logos/Bbloc_Seul_Orange_RVB.svg') }}" alt="Boulanger" class="w-full h-full">
                </div>
                <div>
                    <h1 class="text-3xl font-display font-bold text-boulanger-dark">Boîte à Outils</h1>
                    <p class="text-sm text-boulanger-gray">Ressources et outils pour votre quotidien</p>
                </div>
            </div>
            @can('manage-tools')
            <a href="{{ route('gestion.magasin') }}"
               class="px-4 py-2 bg-boulanger-orange hover:bg-boulanger-orange/90 text-white rounded-lg transition-colors flex items-center gap-2">
                <i data-lucide="settings" class="w-5 h-5"></i>
                <span>Gérer</span>
            </a>
            @endcan
        </div>
    </header>

    {{-- * Navigation principale à 3 onglets --}}
    <div class="mb-6">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex overflow-x-auto scrollbar-hide">
                {{-- Ressources Utiles --}}
                <button @click="mainTab = 'resources'; saveActiveTab()"
                        :class="mainTab === 'resources' ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="flex-1 min-w-[160px] px-6 py-4 font-semibold text-sm transition-all duration-200 flex items-center justify-center gap-2 border-r border-gray-100">
                    <i data-lucide="book-open"
                         class="w-5 h-5 transition-all duration-200" :class="mainTab === 'resources' ? 'text-white' : 'text-boulanger-orange'"></i>
                    <span>Ressources</span>
                </button>

                {{-- Outils Pratiques --}}
                <button @click="mainTab = 'tools'; saveActiveTab()"
                        :class="mainTab === 'tools' ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="flex-1 min-w-[160px] px-6 py-4 font-semibold text-sm transition-all duration-200 flex items-center justify-center gap-2 border-r border-gray-100">
                    <i data-lucide="wrench"
                         class="w-5 h-5 transition-all duration-200" :class="mainTab === 'tools' ? 'text-white' : 'text-boulanger-orange'"></i>
                    <span>Outils</span>
                </button>

                {{-- Codes Zimms --}}
                <button @click="mainTab = 'zimms'; saveActiveTab()"
                        :class="mainTab === 'zimms' ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="flex-1 min-w-[160px] px-6 py-4 font-semibold text-sm transition-all duration-200 flex items-center justify-center gap-2 border-r border-gray-100">
                    <i data-lucide="key-round" class="w-5 h-5 transition-all duration-200" :class="mainTab === 'zimms' ? 'text-white' : 'text-boulanger-orange'"></i>
                    <span>Codes Zimms</span>
                </button>

                {{-- Mes Favoris --}}
                <button @click="mainTab = 'favorites'; saveActiveTab()"
                        :class="mainTab === 'favorites' ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="flex-1 min-w-[160px] px-6 py-4 font-semibold text-sm transition-all duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="star"
                       :class="mainTab === 'favorites' ? 'fill-current' : ''"
                       class="w-5 h-5 transition-all duration-200"></i>
                    <span>Favoris</span>
                    <span x-show="favoriteCount > 0"
                          x-text="favoriteCount"
                          class="px-1.5 py-0.5 text-xs font-bold rounded-full"
                          :class="mainTab === 'favorites' ? 'bg-white/20' : 'bg-boulanger-orange/10 text-boulanger-orange'"></span>
                </button>
            </div>
        </div>
    </div>

    {{-- * Lien discret vers Récents --}}
    <div class="mb-4 flex justify-end" x-show="recentCards.length > 0">
        <button @click="showRecentsModal = true"
                class="text-sm text-boulanger-gray hover:text-boulanger-orange transition-colors duration-200 flex items-center gap-2">
            <i data-lucide="history" class="w-4 h-4"></i>
            <span>Consulter mes récents (<span x-text="recentCards.length"></span>)</span>
        </button>
    </div>

    {{-- * ONGLET: Ressources Utiles --}}
    <div x-show="mainTab === 'resources'"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         class="space-y-4">

        <template x-for="tab in tabs" :key="tab.id">
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-200">
                {{-- Header accordéon --}}
                <button type="button"
                        @click="toggleAccordion(tab.id)"
                        class="w-full px-6 py-4 flex items-center gap-4 hover:bg-gradient-to-r hover:from-gray-50 hover:to-white transition-all text-left group">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow p-2"
                         :class="isActive(tab.id) ? 'from-boulanger-orange to-orange-600' : 'from-gray-100 to-gray-200'">
                        <div class="w-8 h-8 flex items-center justify-center transition-transform group-hover:scale-110">
                            <i :data-lucide="getIcon(tab.emoji)"
                               class="w-8 h-8 transition-colors duration-200"
                               :class="isActive(tab.id) ? 'text-boulanger-orange' : 'text-gray-600'"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h2 class="text-xl font-display font-bold text-boulanger-dark" x-text="tab.title"></h2>
                        <p class="text-sm text-boulanger-gray leading-snug mt-0.5" x-text="tab.summary"></p>
                    </div>
                    <button @click.stop="toggleFavoriteSection(tab.id)"
                            :class="isFavoriteSection(tab.id) ? 'text-yellow-500' : 'text-gray-300 hover:text-yellow-400'"
                            class="transition-colors duration-200">
                        <i data-lucide="star" class="w-5 h-5" :class="isFavoriteSection(tab.id) ? 'fill-current' : ''"></i>
                    </button>
                    <i data-lucide="chevron-down"
                       class="w-5 h-5 text-boulanger-gray transition-transform duration-200"
                       :class="isActive(tab.id) ? 'rotate-180' : ''"></i>
                </button>

                {{-- Contenu accordéon --}}
                <div x-show="isActive(tab.id)" x-collapse class="px-6 pb-6 pt-2 border-t border-gray-100 bg-gradient-to-b from-gray-50/50 to-white">
                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <template x-for="card in tab.cards" :key="card.id">
                            <div class="group relative bg-white p-5 border border-gray-200 rounded-xl hover:border-boulanger-orange/50 hover:shadow-md transition-all duration-200">
                                <button @click="toggleFavoriteCard(card.id)"
                                        :class="isFavoriteCard(card.id) ? 'text-yellow-500' : 'text-gray-300 group-hover:text-yellow-400'"
                                        class="absolute top-3 right-3 transition-colors duration-200 z-10">
                                    <i data-lucide="star" class="w-4 h-4" :class="isFavoriteCard(card.id) ? 'fill-current' : ''"></i>
                                </button>

                                <h3 class="font-bold text-boulanger-dark pr-8" x-text="card.title"></h3>
                                <p class="text-sm text-boulanger-gray mt-2 leading-relaxed" x-text="card.body"></p>

                                {{-- 1. BLOC NATIONAL (Infos de base) --}}
                                <div class="mb-4">
                                     <div class="flex items-center gap-2 mb-2">
                                         <span class="text-[10px] font-bold uppercase tracking-wider text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100">National</span>
                                     </div>
                                     <div class="text-sm text-gray-700 prose prose-sm max-w-none mb-3" x-html="card.global_body || '<em class=\'text-gray-400\'>Information B.O.L</em>'"></div>

                                     {{-- Items Nationaux --}}
                                     <template x-if="hasItemsOfType(card, ['text', 'code', 'link']) && getItemsByScope(card.items, 'global').length > 0">
                                        <div class="space-y-2 pl-3 border-l-2 border-blue-100">
                                            <template x-for="item in getItemsByScope(card.items, 'global')" :key="item.id">
                                                <div>
                                                    {{-- Link --}}
                                                    <template x-if="item.type === 'link'">
                                                        <a :href="item.content" target="_blank" class="flex items-center gap-2 text-sm text-blue-600 hover:underline font-medium">
                                                            <i data-lucide="link" class="w-3 h-3"></i>
                                                            <span x-text="item.label || item.content"></span>
                                                        </a>
                                                    </template>
                                                    {{-- Text / Code --}}
                                                    <template x-if="item.type !== 'link'">
                                                        <div class="text-sm">
                                                            <span x-show="item.label" class="font-semibold text-gray-900" x-text="item.label + ' : '"></span>
                                                            <span x-text="item.content" :class="item.type === 'code' ? 'font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded text-gray-800' : 'text-gray-600'"></span>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                        </div>
                                     </template>
                                </div>

                                {{-- 2. BLOC LOCAL (Magasin) --}}
                                <div class="mt-4 pt-4 border-t border-dashed border-gray-200 bg-green-50/30 -mx-5 px-5 pb-2">
                                     <div class="flex items-center gap-2 mb-2 mt-2">
                                         <span class="text-[10px] font-bold uppercase tracking-wider text-green-700 bg-green-100 px-2 py-0.5 rounded border border-green-200">Mon Magasin</span>
                                     </div>

                                     {{-- Items Locaux (Bloc Libre) --}}
                                     <template x-if="getItemsByScope(card.items, 'store').length > 0">
                                        <div class="space-y-2">
                                            <template x-for="item in getItemsByScope(card.items, 'store')" :key="item.id">
                                                <div class="bg-white border border-green-100 rounded p-2 shadow-sm hover:shadow transition-shadow">
                                                     <template x-if="item.type === 'link'">
                                                         <a :href="item.content" target="_blank" class="flex items-center gap-2 text-sm text-green-700 hover:text-green-800 font-medium group-link">
                                                             <span class="bg-green-100 p-1 rounded-full text-green-600 group-link-hover:bg-green-200 transition-colors">
                                                                 <i data-lucide="external-link" class="w-3 h-3"></i>
                                                             </span>
                                                             <span x-text="item.label || 'Lien magasin'"></span>
                                                         </a>
                                                     </template>
                                                     <template x-if="item.type !== 'link'">
                                                        <div class="text-sm flex items-start gap-2">
                                                            <span class="mt-1 text-green-500">•</span>
                                                            <div>
                                                                <span x-show="item.label" class="font-semibold text-gray-900" x-text="item.label + ' : '"></span>
                                                                <span x-text="item.content" :class="item.type === 'code' ? 'font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded border border-gray-200' : 'text-gray-700'"></span>
                                                            </div>
                                                        </div>
                                                     </template>
                                                </div>
                                            </template>
                                        </div>
                                     </template>

                                     <template x-if="getItemsByScope(card.items, 'store').length === 0">
                                         <p class="text-xs text-gray-400 italic">Aucune donnée magasin pour l'instant.</p>
                                     </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </section>
        </template>
    </div>

    {{-- * ONGLET: Outils Pratiques --}}
    <div x-show="mainTab === 'tools'"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {{-- Générateur de code-barres --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-200">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4 flex items-center gap-3">
                <i data-lucide="barcode" class="w-8 h-8 text-white"></i>
                <div>
                    <h3 class="text-xl font-bold text-white">Générateur Code-Barres</h3>
                    <p class="text-sm text-blue-100">Créez des codes-barres rapidement</p>
                </div>
            </div>
            <div class="p-6">
                <p class="text-boulanger-gray mb-4">Générez des codes-barres pour vos produits en quelques clics.</p>
                <button @click="openBarcodeTool"
                        class="w-full px-4 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold hover:shadow-lg hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="barcode" class="w-5 h-5"></i>
                    <span>Ouvrir le générateur</span>
                </button>
            </div>
        </div>

        {{-- Produits retours client --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-200">
            <div class="bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-4 flex items-center gap-3">
                <i data-lucide="package-minus" class="w-8 h-8 text-white"></i>
                <div>
                    <h3 class="text-xl font-bold text-white">Produits Retours</h3>
                    <p class="text-sm text-amber-100">Gérez les retours clients</p>
                </div>
            </div>
            <div class="p-6">
                <p class="text-boulanger-gray mb-4">Liste des produits retournés, boîtes ouvertes et déstockage.</p>
                <button @click="openReturnsTool"
                        class="w-full px-4 py-3 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 text-white font-semibold hover:shadow-lg hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="package-minus" class="w-5 h-5"></i>
                    <span>Voir les produits</span>
                </button>
            </div>
        </div>

        {{-- Simulateur Infinity --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-200">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center text-white font-bold text-2xl">
                    ∞
                </div>
                <div>
                    <h3 class="text-xl font-bold text-white">Simulateur Infinity</h3>
                    <p class="text-sm text-purple-100">Aide à la vente Club Infinity</p>
                </div>
            </div>
            <div class="p-6">
                <p class="text-boulanger-gray mb-4">Simulez les besoins client et calculez la formule Infinity adaptée avec cagnottage.</p>
                <a href="{{ route('tools.infinity') }}"
                   class="w-full px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-purple-600 text-white font-semibold hover:shadow-lg hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="calculator" class="w-5 h-5"></i>
                    <span>Ouvrir le simulateur</span>
                </a>
            </div>
        </div>

        {{-- Fiche de Liaison Financement --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-200">
            <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-6 py-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center text-white font-bold text-2xl">
                    💳
                </div>
                <div>
                    <h3 class="text-xl font-bold text-white">Fiche de Liaison Financement</h3>
                    <p class="text-sm text-orange-100">Dossier de financement client</p>
                </div>
            </div>
            <div class="p-6">
                <p class="text-boulanger-gray mb-4">Créez et envoyez une fiche de liaison pour un dossier de financement avec génération PDF automatique.</p>
                <a href="{{ route('tools.financing') }}"
                   class="w-full px-4 py-3 rounded-xl bg-gradient-to-r from-boulanger-orange to-orange-500 text-white font-semibold hover:shadow-lg hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5"></i>
                    <span>Generer une fiche</span>
                </a>
            </div>
        </div>
    </div>
    {{-- * ONGLET: Codes Zimms --}}
    <div x-show="mainTab === 'zimms'"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         class="space-y-4">

        {{-- Barre de recherche Zimms --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-boulanger-orange">
                    <i data-lucide="file-key" class="w-6 h-6"></i>
                </div>
                <div>
                    <h2 class="text-xl font-display font-bold text-boulanger-dark">Codes Zimms</h2>
                    <p class="text-sm text-boulanger-gray">Recherchez et copiez rapidement vos codes promo</p>
                </div>
            </div>
            <input type="text"
                   x-model="zimmSearchQuery"
                   @input="searchZimms()"
                   placeholder="Rechercher un code, un libellé ou une famille..."
                   class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100 transition">
        </div>

        {{-- Loading State --}}
        <template x-if="zimmsLoading">
            <div class="text-center py-12 bg-white rounded-2xl shadow-sm border border-gray-100">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange mx-auto"></div>
            </div>
        </template>

        {{-- Liste des Zimms --}}
        <div class="space-y-3" x-show="!zimmsLoading">
            <template x-for="zimm in filteredZimms" :key="zimm.code">
                <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:border-orange-100 hover:shadow-md transition cursor-pointer"
                     @click="copyZimmCode(zimm.code)">
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <p class="font-display font-bold text-lg text-boulanger-dark" x-text="zimm.label"></p>
                            <p class="text-sm text-boulanger-gray mt-1">
                                <span class="font-mono font-bold text-boulanger-orange" x-text="zimm.code"></span>
                                <span x-show="zimm.family"> • <span x-text="zimm.family"></span></span>
                                <span x-show="zimm.value"> • <span x-text="zimm.value + '€'"></span></span>
                            </p>
                        </div>

                        {{-- Icône copier --}}
                        <div class="ml-4">
                            <i x-show="copiedZimmCode !== zimm.code" data-lucide="copy" class="w-5 h-5 text-gray-400 hover:text-boulanger-orange transition-colors"></i>
                            <i x-show="copiedZimmCode === zimm.code" data-lucide="check" class="w-5 h-5 text-green-500"></i>
                        </div>
                    </div>
                </div>
            </template>

            {{-- Aucun résultat --}}
            <template x-if="filteredZimms.length === 0 && !zimmsLoading">
                <div class="text-center py-12 bg-white rounded-2xl shadow-sm border border-gray-100">
                    <p class="text-gray-400">Aucun code Zimm trouvé</p>
                </div>
            </template>
        </div>

        {{-- Toast de confirmation --}}
        <div x-show="copiedZimmCode"
             x-transition
             class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg z-50">
            ✓ Code copié !
        </div>
    </div>
    {{-- * ONGLET: Favoris --}}
    <div x-show="mainTab === 'favorites'"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0">

        <template x-if="getFavoriteCards().length === 0 && favoriteSections.length === 0">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-16 text-center">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-yellow-50 rounded-full mb-4">
                    <i data-lucide="star" class="w-12 h-12 text-yellow-400"></i>
                </div>
                <h3 class="text-xl font-bold text-boulanger-dark mb-2">Aucun favori</h3>
                <p class="text-boulanger-gray">Cliquez sur ⭐ pour ajouter vos ressources préférées</p>
            </div>
        </template>

        {{-- Sections favorites --}}
        <template x-if="favoriteSections.length > 0">
            <div class="space-y-4 mb-6">
                <h2 class="text-lg font-display font-bold text-boulanger-dark flex items-center gap-2">
                    <i data-lucide="layers" class="w-5 h-5 text-boulanger-orange"></i>
                    Catégories favorites
                </h2>
                <template x-for="tabId in favoriteSections" :key="`fav-tab-${tabId}`">
                    <template x-for="tab in tabs.filter(t => t.id === tabId)" :key="`tab-${tab.id}`">
                        <section class="bg-white rounded-2xl shadow-sm border-2 border-yellow-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
                            <div class="px-6 py-4 flex items-center gap-4 bg-gradient-to-r from-yellow-50 to-white">
                                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-500 flex items-center justify-center shadow-sm p-2">
                                    <i :data-lucide="getIcon(tab.emoji)" class="w-8 h-8 text-yellow-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-xl font-display font-bold text-boulanger-dark" x-text="tab.title"></h3>
                                    <p class="text-sm text-boulanger-gray leading-snug mt-0.5" x-text="tab.summary"></p>
                                </div>
                                <button @click="toggleFavoriteSection(tab.id)"
                                        class="text-yellow-500 hover:text-yellow-600 transition-colors duration-200">
                                    <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                                </button>
                            </div>
                            <div class="px-6 pb-6 pt-2 border-t border-yellow-100">
                                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    <template x-for="card in tab.cards" :key="card.id">
                                        <div class="bg-white p-4 border border-gray-200 rounded-xl hover:border-boulanger-orange/50 hover:shadow-md transition-all duration-200">
                                            <h4 class="font-bold text-boulanger-dark text-sm" x-text="card.title"></h4>
                                            <p class="text-xs text-boulanger-gray mt-1 leading-relaxed" x-text="card.body"></p>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </section>
                    </template>
                </template>
            </div>
        </template>

        {{-- Cartes favorites individuelles --}}
        <template x-if="getFavoriteCards().length > 0">
            <div>
                <h2 x-show="favoriteSections.length > 0" class="text-lg font-display font-bold text-boulanger-dark flex items-center gap-2 mb-4">
                    <i data-lucide="bookmark" class="w-5 h-5 text-boulanger-orange"></i>
                    Cartes favorites
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <template x-for="favCard in getFavoriteCards()" :key="favCard.id">
                    <div class="group relative bg-white p-5 border-2 border-yellow-200 rounded-xl hover:border-yellow-400 hover:shadow-lg transition-all duration-200">
                        <button @click="toggleFavoriteCard(favCard.id)"
                                class="absolute top-3 right-3 text-yellow-500 hover:text-yellow-600 transition-colors duration-200 z-10">
                            <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                        </button>

                        <h3 class="font-bold text-boulanger-dark pr-8" x-text="favCard.title"></h3>
                        <p class="text-sm text-boulanger-gray mt-2 leading-relaxed" x-text="favCard.body"></p>

                        <template x-if="hasItemsOfType(favCard, ['link'])">
                            <div class="mt-4 flex flex-wrap gap-2">
                                <template x-for="item in getItemsByType(favCard.items, ['link'])" :key="item.id">
                                    <a :href="item.content" target="_blank" rel="noopener noreferrer"
                                       @click="trackRecentCard(favCard.id, favCard.title)"
                                       class="inline-flex items-center gap-2 text-sm px-4 py-2 rounded-full bg-gradient-to-r from-boulanger-orange to-orange-600 text-white hover:shadow-lg hover:scale-105 transition-all duration-200 font-medium">
                                        <span x-text="item.label"></span>
                                        <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                                    </a>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </template>
    </div>

    {{-- * Modal Récents --}}
    <div x-show="showRecentsModal"
         x-cloak
         @click.self="showRecentsModal = false"
         class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
        <div @click.stop class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
            <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-white border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-bold text-boulanger-dark flex items-center gap-2">
                    <i data-lucide="history" class="w-5 h-5 text-boulanger-orange"></i>
                    Historique récent
                </h3>
                <button @click="showRecentsModal = false" class="text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            <div class="p-6 overflow-y-auto max-h-[60vh]">
                <div class="space-y-2">
                    <template x-for="recent in recentCards" :key="recent.id + '-' + recent.timestamp">
                        <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200">
                            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="book-open" class="w-5 h-5 text-blue-500"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-boulanger-dark text-sm" x-text="recent.title"></p>
                                <p class="text-xs text-boulanger-gray" x-text="formatRecentTime(recent.timestamp)"></p>
                            </div>
                            <button @click="removeFromRecents(recent.id)"
                                    class="text-gray-400 hover:text-red-500 transition-colors duration-200">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    {{-- * Empty State / Loading / Erreur --}}
    <template x-if="!loading && tabs.length === 0 && mainTab === 'resources'">
        <div class="text-center py-16">
            <i data-lucide="book-open" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
            <p class="text-boulanger-gray">Aucune ressource disponible</p>
        </div>
    </template>

    <template x-if="error">
        <div class="mt-4 p-4 rounded-xl bg-red-50 border border-red-200 text-red-700">
            <p x-text="error"></p>
        </div>
    </template>

    <template x-if="loading">
        <div class="space-y-2">
            <div class="h-6 w-1/2 bg-gray-100 animate-pulse rounded"></div>
            <div class="h-32 w-full bg-gray-50 animate-pulse rounded-xl"></div>
        </div>
    </template>

    {{-- * MODAL: Générateur de Code-Barres --}}
    <div x-show="showBarcodeModal"
         x-cloak
         @click.self="closeBarcodeModal()"
         class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">

        <div @click.stop
             class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-95">

            {{-- Header --}}
            <div class="sticky top-0 bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4 flex items-center justify-between border-b border-blue-400">
                <div class="flex items-center gap-3">
                    <i data-lucide="barcode" class="w-8 h-8 text-white"></i>
                    <div>
                        <h3 class="text-xl font-bold text-white">Générateur de Code-Barres</h3>
                        <p class="text-sm text-blue-100">Créez et téléchargez vos code-barres</p>
                    </div>
                </div>
                <button @click="closeBarcodeModal()"
                        class="w-8 h-8 rounded-lg bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            {{-- Body --}}
            <div class="p-6 space-y-6">
                {{-- Instructions --}}
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 flex gap-3">
                    <i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                    <div class="text-sm text-blue-900">
                        <p class="font-semibold mb-2">Comment utiliser :</p>
                        <ul class="list-disc list-inside space-y-1 text-blue-800">
                            <li>Saisissez un code EAN-13 (13 chiffres) ou un code Boulanger</li>
                            <li>Cliquez sur "Auto" pour rechercher automatiquement le produit</li>
                            <li>Le code-barres s'affiche automatiquement</li>
                            <li>Téléchargez individuellement ou tous en une fois</li>
                        </ul>
                        <p class="font-semibold mt-3 mb-1">Exemples :</p>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                            <div class="bg-white/50 px-2 py-1 rounded">
                                <strong>EAN-13 :</strong> 3770014985842
                            </div>
                            <div class="bg-white/50 px-2 py-1 rounded">
                                <strong>Code Boul. :</strong> 1233742
                            </div>
                            <div class="bg-white/50 px-2 py-1 rounded">
                                <strong>EAN-13 :</strong> 5449000000996
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Liste des champs de saisie --}}
                <div class="space-y-4">
                    <template x-for="input in barcodeInputs" :key="input.id">
                        <div class="bg-gray-50 rounded-xl p-4 space-y-4 border border-gray-200">
                            {{-- Champ de saisie --}}
                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                                        Code EAN-13 ou Code Boulanger
                                    </label>
                                    <div class="flex gap-2">
                                        <input type="text"
                                               x-model="input.value"
                                               @input="generateBarcode(input.id)"
                                               placeholder="Ex: 3770014985842 ou 1233742"
                                               class="flex-1 px-4 py-2.5 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition font-mono">
                                        <button @click="lookupForBarcode(input.id)"
                                                class="px-3 py-2 bg-amber-100 text-amber-700 rounded-lg text-sm font-semibold hover:bg-amber-200 transition">
                                            Auto
                                        </button>
                                        <button @click="removeBarcodeInput(input.id)"
                                                x-show="barcodeInputs.length > 1"
                                                class="px-4 py-2.5 rounded-lg bg-red-500 hover:bg-red-600 text-white transition flex items-center gap-2">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                    {{-- Messages lookup --}}
                                    <div class="text-xs mt-1">
                                        <span x-show="barcodeLookup[input.id]?.loading" class="text-gray-500">Recherche en cours...</span>
                                        <span x-show="barcodeLookup[input.id]?.error" class="text-red-600" x-text="barcodeLookup[input.id]?.error"></span>
                                        <span x-show="barcodeLookup[input.id]?.source === 'remote'" class="text-green-600">✓ Données récupérées en ligne</span>
                                        <span x-show="barcodeLookup[input.id]?.source === 'cache'" class="text-green-600">✓ Données trouvées en base</span>
                                    </div>
                                    {{-- Infos produit --}}
                                    <div x-show="input.productInfo" class="mt-2 bg-green-50 border border-green-200 rounded-lg p-3">
                                        <p class="text-xs font-semibold text-green-900 mb-1">📦 Produit trouvé :</p>
                                        <p class="text-sm text-green-800" x-text="input.productInfo?.brand + ' - ' + input.productInfo?.label"></p>
                                        <p class="text-xs text-green-700 mt-1" x-show="input.productInfo?.price">Prix : <span x-text="input.productInfo?.price"></span> €</p>
                                    </div>
                                </div>
                            </div>

                            {{-- Message d'erreur --}}
                            <div x-show="barcodeError[input.id]"
                                 class="bg-red-50 border border-red-200 rounded-lg p-3 flex items-start gap-2">
                                <i data-lucide="alert-circle" class="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5"></i>
                                <p class="text-sm text-red-800" x-text="barcodeError[input.id]"></p>
                            </div>

                            {{-- Affichage du code-barres --}}
                            <div x-show="input.value && !barcodeError[input.id]"
                                 class="bg-white rounded-lg p-6 border-2 border-dashed border-gray-300">
                                <div class="flex flex-col items-center gap-4">
                                    <canvas :id="'barcode-' + input.id" class="max-w-full"></canvas>
                                    <div class="flex gap-3">
                                        <button @click="copyBarcodeToClipboard(input.id)"
                                                class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-purple-500 to-purple-600 hover:shadow-lg hover:scale-105 text-white font-semibold transition-all flex items-center gap-2">
                                            <i data-lucide="clipboard" class="w-4 h-4"></i>
                                            <span>Copier</span>
                                        </button>
                                        <button @click="downloadBarcode(input.id)"
                                                class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-green-500 to-green-600 hover:shadow-lg hover:scale-105 text-white font-semibold transition-all flex items-center gap-2">
                                            <i data-lucide="download" class="w-4 h-4"></i>
                                            <span>Télécharger</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Message si pas de valeur --}}
                            <div x-show="!input.value"
                                 class="text-center py-8 text-gray-400">
                                <i data-lucide="barcode" class="w-12 h-12 mx-auto mb-2 opacity-30"></i>
                                <p class="text-sm">Saisissez un code pour générer le code-barres</p>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Boutons d'action --}}
                <div class="flex flex-wrap gap-3">
                    <button @click="addBarcodeInput()"
                            class="px-6 py-3 rounded-xl bg-blue-500 hover:bg-blue-600 text-white font-semibold transition-all flex items-center gap-2">
                        <i data-lucide="plus-circle" class="w-5 h-5"></i>
                        <span>Ajouter un code</span>
                    </button>
                    <button @click="downloadAllBarcodes()"
                            :disabled="barcodeInputs.filter(i => i.value).length === 0"
                            :class="barcodeInputs.filter(i => i.value).length === 0 ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg hover:scale-105'"
                            class="px-6 py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold transition-all flex items-center gap-2">
                        <i data-lucide="download-cloud" class="w-5 h-5"></i>
                        <span>Télécharger tout</span>
                    </button>
                    <button @click="resetBarcodeGenerator()"
                            class="px-6 py-3 rounded-xl bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold transition-all flex items-center gap-2">
                        <i data-lucide="rotate-ccw" class="w-5 h-5"></i>
                        <span>Réinitialiser</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- * MODAL: Produits Retours --}}
<div x-show="showReturnsModal"
     x-cloak
     @keydown.escape.window="closeReturnsModal()"
     class="fixed inset-0 z-50 overflow-y-auto"
     style="display: none;">
    {{-- Overlay --}}
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
         @click="closeReturnsModal()"></div>

    {{-- Modal --}}
    <div class="flex items-start justify-center min-h-screen px-4 pt-6 pb-20">
        <div @click.stop
             class="relative bg-white rounded-2xl shadow-2xl max-w-7xl w-full my-8 transform transition-all">

            {{-- Header --}}
            <div class="sticky top-0 z-10 bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-5 flex items-center justify-between rounded-t-2xl">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                        <i data-lucide="package-minus" class="w-6 h-6 text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-white">Produits Retours</h3>
                        <p class="text-sm text-white/80">Gestion des retours clients, SAV et fins de rayon</p>
                    </div>
                </div>
                <button @click="closeReturnsModal()"
                        class="text-white/80 hover:text-white hover:bg-white/20 rounded-xl p-2 transition-all">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>

            {{-- Filtres --}}
            <div class="px-6 py-4 bg-gray-50 border-b flex flex-wrap gap-4">
                <select x-model="returnsFilters.status" @change="filterReturnProducts()"
                        class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                    <option value="all">Tous les statuts</option>
                    <option value="available">Disponibles</option>
                    <option value="sold">Vendus</option>
                    <option value="archived">Archivés</option>
                </select>

                <input type="text" x-model="returnsFilters.search" @input.debounce.500ms="filterReturnProducts()"
                       placeholder="🔍 Rechercher (marque, modèle, code...)"
                       class="flex-1 min-w-[200px] px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">

                <button x-show="canManageReturns" @click="openAddProductModal()"
                        class="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-semibold transition-colors flex items-center gap-2">
                    <i data-lucide="plus" class="w-5 h-5"></i>
                    Ajouter
                </button>
            </div>

            {{-- Liste des produits --}}
            <div class="p-6 max-h-[60vh] overflow-y-auto">
                {{-- Loading --}}
                <div x-show="returnsLoading" class="text-center py-12">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-amber-500"></div>
                    <p class="text-gray-500 mt-2">Chargement...</p>
                </div>

                {{-- Grille produits --}}
                <div x-show="!returnsLoading && returnProducts.length > 0"
                     class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <template x-for="product in returnProducts" :key="product.id">
                        <div class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all">
                            {{-- Status badge --}}
                            <div class="px-4 py-2 flex items-center justify-between border-b">
                                <span :class="getStatusBadge(product.status).class"
                                      class="px-2 py-1 rounded-full text-xs font-semibold"
                                      x-text="getStatusBadge(product.status).text"></span>
                                <span class="text-xs text-gray-500" x-text="getReturnTypeLabel(product.return_type)"></span>
                            </div>

                            {{-- Contenu --}}
                            <div class="p-4 space-y-2">
                                <h4 class="font-bold text-lg text-gray-900" x-text="product.brand + ' ' + product.model"></h4>
                                <p class="text-sm text-gray-600">
                                    <span class="font-semibold">Rayon:</span> <span x-text="product.department"></span>
                                </p>
                                <p class="text-sm text-gray-600">
                                    <span class="font-semibold">Code:</span> <span x-text="product.product_code"></span>
                                </p>
                                <p x-show="product.suggested_price" class="text-lg font-bold text-amber-600">
                                    <span x-text="product.suggested_price + '€'"></span>
                                </p>
                                <p x-show="product.comment" class="text-sm text-gray-500 italic line-clamp-2" x-text="product.comment"></p>

                                {{-- Actions --}}
                                <div class="pt-3 border-t space-y-2">
                                    {{-- Marquer vendu (tous si open) --}}
                                    <button x-show="product.status === 'open'" @click="openMarkSoldModal(product)"
                                            class="w-full px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-semibold transition-colors flex items-center justify-center gap-2">
                                        <i data-lucide="check" class="w-5 h-5"></i>
                                        Marquer vendu
                                    </button>

                                    {{-- Modifier/Archiver/Supprimer (Manager/Animateur si open) --}}
                                    <div x-show="canManageReturns && product.status === 'open'" class="flex gap-2">
                                        <button @click="openEditProductModal(product)"
                                                class="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-semibold transition-colors">
                                            ✏️ Modifier
                                        </button>
                                        <button @click="archiveProduct(product)"
                                                class="flex-1 px-3 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg text-sm font-semibold transition-colors">
                                            📦 Archiver
                                        </button>
                                        <button @click="deleteProduct(product)"
                                                class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-semibold transition-colors">
                                            🗑️
                                        </button>
                                    </div>
                                </div>

                                {{-- Info vente --}}
                                <div x-show="product.status === 'sold'" class="pt-3 border-t text-xs text-gray-500 space-y-1">
                                    <p>✅ Vendu le <span x-text="product.sold_date"></span></p>
                                    <p>📄 Facture: <span class="font-mono font-semibold" x-text="product.invoice_number"></span></p>
                                    <p x-show="product.seller">👤 Par: <span x-text="product.seller?.name"></span></p>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Empty state --}}
                <div x-show="!returnsLoading && returnProducts.length === 0"
                     class="text-center py-12">
                    <div class="text-6xl mb-4">📦</div>
                    <p class="text-xl font-semibold text-gray-700">Aucun produit trouvé</p>
                    <p class="text-gray-500 mt-2">Modifiez vos filtres ou ajoutez un nouveau produit</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- * MODAL: Marquer vendu --}}
<div x-show="showMarkSoldModal"
     x-cloak
     @keydown.escape.window="closeMarkSoldModal()"
     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
     style="display: none;">
    <div class="fixed inset-0 bg-black/50" @click="closeMarkSoldModal()"></div>
    <div @click.stop class="relative bg-white rounded-2xl shadow-2xl max-w-md w-full p-6">
        <h3 class="text-xl font-bold text-gray-900 mb-4">Marquer comme vendu</h3>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Numéro de facture <span class="text-red-500">*</span>
                </label>
                <input type="text" x-model="markSoldForm.invoice_number"
                       placeholder="F123456"
                       class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500">
                <p class="text-xs text-gray-500 mt-1">Format: F suivi de chiffres (ex: F123456)</p>
            </div>

            <div class="flex gap-3">
                <button @click="closeMarkSoldModal()"
                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
                    Annuler
                </button>
                <button @click="markProductAsSold()"
                        :disabled="!markSoldForm.invoice_number"
                        class="flex-1 px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
                    Confirmer
                </button>
            </div>
        </div>
    </div>
</div>

{{-- * MODAL: Formulaire ajout/modification produit --}}
<div x-show="showReturnFormModal"
     x-cloak
     @keydown.escape.window="closeReturnFormModal()"
     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
     style="display: none;">
    <div class="fixed inset-0 bg-black/50" @click="closeReturnFormModal()"></div>
    <div @click.stop class="relative bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
        {{-- Header --}}
        <div class="sticky top-0 bg-gradient-to-r from-amber-500 to-orange-500 text-white px-6 py-4 flex items-center justify-between rounded-t-2xl">
            <h3 class="text-2xl font-bold">
                <span x-text="selectedProduct ? 'Modifier le produit' : 'Ajouter un produit'"></span>
            </h3>
            <button @click="closeReturnFormModal()" class="hover:bg-white/20 rounded-full p-2">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Form --}}
        <form @submit.prevent="submitReturnForm()" class="p-6 space-y-6">
            {{-- Informations générales --}}
            <div class="space-y-4">
                <h4 class="font-bold text-lg text-gray-900 border-b pb-2">📦 Informations générales</h4>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Univers <span class="text-red-500">*</span></label>
                        <select x-model="returnForm.universe" required
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 bg-white">
                            <option value="">-- Sélectionner un univers --</option>
                            <option value="Communication">Communication</option>
                            <option value="Micro">Micro</option>
                            <option value="Image">Image</option>
                            <option value="Son">Son</option>
                            <option value="PAM">PAM</option>
                            <option value="GAM">GAM</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Rayon <span class="text-red-500">*</span></label>
                        <input type="text" x-model="returnForm.department" required
                               placeholder="Ex: TV, Smartphone, Lave-linge..."
                               class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Code Article <span class="text-red-500">*</span></label>
                        <div class="flex items-center gap-2">
                            <input type="text" x-model="returnForm.product_code" required inputmode="numeric" pattern="[0-9]+"
                                   @blur="lookupProductByCode()"
                                   @input.debounce.600ms="lookupProductByCode()"
                                   placeholder="Ex: 1211548"
                                   class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                            <button type="button"
                                    @click="lookupProductByCode(true)"
                                    class="px-3 py-2 bg-amber-100 text-amber-700 rounded-lg text-sm font-semibold hover:bg-amber-200">
                                Auto
                            </button>
                        </div>
                        <div class="text-xs mt-1">
                            <span x-show="returnProductLookup.loading" class="text-gray-500">Recherche en cours...</span>
                            <span x-show="returnProductLookup.error" class="text-red-600" x-text="returnProductLookup.error"></span>
                            <span x-show="returnProductLookup.source === 'remote'" class="text-green-600">Données récupérées en ligne</span>
                            <span x-show="returnProductLookup.source === 'cache'" class="text-green-600">Données trouvées en base</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Code-barres EAN</label>
                        <input type="text" x-model="returnForm.ean" maxlength="13" pattern="[0-9]{13}"
                               placeholder="13 chiffres (optionnel)"
                               class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                        <p class="text-xs text-gray-500 mt-1">Exactement 13 chiffres si renseigné</p>
                    </div>
                </div>
            </div>

            {{-- Détails produit --}}
            <div class="space-y-4">
                <h4 class="font-bold text-lg text-gray-900 border-b pb-2">🏷️ Détails produit</h4>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Marque <span class="text-red-500">*</span></label>
                        <input type="text" x-model="returnForm.brand" required
                               placeholder="Ex: Samsung, LG, Apple..."
                               class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Modèle <span class="text-red-500">*</span></label>
                        <input type="text" x-model="returnForm.model" required
                               placeholder="Ex: UE55TU7125, iPhone 13..."
                               class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Type de retour <span class="text-red-500">*</span></label>
                        <select x-model="returnForm.return_type" required
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 bg-white">
                            <option value="retour_client">Retour client</option>
                            <option value="expo">Exposition</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Cycle de vie <span class="text-red-500">*</span></label>
                        <select x-model="returnForm.life_cycle" required
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 bg-white">
                            <option value="">-- Sélectionner --</option>
                            <option value="AC">AC</option>
                            <option value="FI">FI</option>
                            <option value="FR">FR</option>
                            <option value="FF">FF</option>
                            <option value="NN">NN</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Prix (€)</label>
                        <input type="number" x-model="returnForm.suggested_price" min="0" step="0.01"
                               placeholder="Ex: 399.99"
                               class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500">
                    </div>
                    <div></div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Commentaire / État du produit</label>
                    <textarea x-model="returnForm.comment" rows="3"
                              placeholder="Ex: Écran remplacé, garantie 6 mois, bon état général..."
                              class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500"></textarea>
                </div>
            </div>

            {{-- Photos --}}
            <div class="space-y-4">
                <h4 class="font-bold text-lg text-gray-900 border-b pb-2">📸 Photos (5 max, 2 Mo chacune)</h4>
                <p class="text-sm text-blue-600">
                    ℹ️ Compression automatique des images > 1.5 Mo (qualité optimisée)
                </p>

                <div class="flex items-center gap-4 flex-wrap">
                    <label class="cursor-pointer px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-semibold transition-colors">
                        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        Ajouter photos
                        <input type="file" @change="handlePhotoUpload" accept="image/*" multiple class="hidden">
                    </label>

                    <button type="button" @click="openCamera()"
                            class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-semibold transition-colors">
                        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        Caméra
                    </button>

                    <span class="text-sm text-gray-500">
                        <span x-text="returnForm.photos.length"></span> / 5 photos
                    </span>
                </div>

                {{-- Preview photos --}}
                <div x-show="returnForm.photos.length > 0" class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <template x-for="(photo, index) in returnForm.photos" :key="index">
                        <div class="relative group">
                            <img :src="URL.createObjectURL(photo)" :alt="'Photo ' + (index + 1)"
                                 class="w-full h-32 object-cover rounded-lg border">
                            <button type="button" @click="removePhoto(index)"
                                    class="absolute top-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                            <div class="absolute bottom-1 left-1 bg-black/70 text-white text-xs px-2 py-1 rounded">
                                <span x-text="getFileSize(photo) + ' Mo'"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Publication sur le fil --}}
            <div class="space-y-4">
                <h4 class="font-bold text-lg text-gray-900 border-b pb-2">📢 Publication (optionnelle)</h4>

                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" x-model="returnForm.publish_on_feed"
                           class="w-5 h-5 text-amber-500 rounded focus:ring-2 focus:ring-amber-500">
                    <span class="font-semibold">Publier une annonce sur le fil d'actualité</span>
                </label>

                <div x-show="returnForm.publish_on_feed" class="pl-7">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Contenu du post</label>
                    <textarea x-model="returnForm.post_content" rows="3" maxlength="500"
                              placeholder="Ex: TV 55\" Samsung SAV dispo en rayon multimédia 📺"
                              class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500"></textarea>
                    <p class="text-xs text-gray-500 mt-1">500 caractères max • Expiration: 30 jours</p>
                </div>
            </div>

            {{-- Boutons --}}
            <div class="flex gap-3 pt-4 border-t">
                <button type="button" @click="closeReturnFormModal()"
                        class="flex-1 px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 font-semibold">
                    Annuler
                </button>
                <button type="submit"
                        class="flex-1 px-4 py-3 bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-semibold transition-colors">
                    <span x-text="selectedProduct ? 'Modifier' : 'Ajouter'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

{{-- * MODAL: Capture photo caméra --}}
<div x-show="showCameraModal"
     x-cloak
     @keydown.escape.window="closeCamera()"
     class="fixed inset-0 z-[70] flex items-center justify-center p-4"
     style="display: none;">
    <div class="fixed inset-0 bg-black/80" @click="closeCamera()"></div>
    <div @click.stop class="relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full overflow-hidden">
        {{-- Header --}}
        <div class="bg-purple-500 text-white px-6 py-4 flex items-center justify-between">
            <h3 class="text-xl font-bold">📸 Capture photo</h3>
            <button @click="closeCamera()" class="hover:bg-white/20 rounded-full p-2">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Vidéo caméra --}}
        <div class="relative bg-black">
            <video x-ref="cameraVideoReturn" autoplay playsinline muted
                   class="w-full h-auto max-h-[60vh] object-contain"></video>

            {{-- Overlay capture --}}
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                <div class="flex justify-center gap-4">
                    <button @click="closeCamera()"
                            class="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-full font-semibold transition-colors">
                        Annuler
                    </button>
                    <button @click="capturePhoto()"
                            :disabled="isCapturing"
                            class="px-8 py-3 bg-white hover:bg-gray-100 text-purple-600 rounded-full font-bold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <span x-text="isCapturing ? 'Capture...' : 'Capturer'"></span>
                    </button>
                </div>
            </div>
        </div>

        {{-- Instructions --}}
        <div class="p-4 bg-purple-50 text-sm text-purple-800">
            <p class="font-semibold">💡 Conseils :</p>
            <ul class="list-disc list-inside mt-2 space-y-1">
                <li>Assurez-vous d'avoir un bon éclairage</li>
                <li>Cadrez bien le produit</li>
                <li>Compression automatique si > 1.5 Mo</li>
            </ul>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // * Activer l'onglet Zimms si le hash #zimms est présent dans l'URL
    document.addEventListener('alpine:init', () => {
        // Fonction pour activer l'onglet Zimms
        const activateZimmsTab = () => {
            const dataElement = document.querySelector('[x-data="toolsComponent()"]');
            if (dataElement) {
                const component = Alpine.$data(dataElement);
                if (component) {
                    component.mainTab = 'zimms';
                }
            }
        };

        // Si hash #zimms dans l'URL
        if (window.location.hash === '#zimms') {
            setTimeout(activateZimmsTab, 100);
        }

        // Écouter les changements de hash
        window.addEventListener('hashchange', () => {
            if (window.location.hash === '#zimms') {
                activateZimmsTab();
            }
        });
    });
</script>
@endpush

@endsection