@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6 pb-32">
    <div x-data="{
        activeTab: localStorage.getItem('gestionMagasinActiveTab') || 'categories',

        // * Sauvegarder l'onglet actif dans localStorage
        setActiveTab(tab) {
            this.activeTab = tab;
            localStorage.setItem('gestionMagasinActiveTab', tab);
        }
    }">
        {{-- * Header --}}
        <div class="mb-6">
            <h1 class="text-3xl font-display font-bold text-boulanger-dark mb-2">
                🏪 Gestion Magasin
            </h1>
            <p class="text-boulanger-gray">
                Configuration de votre magasin : rayons et outils personnalisés
            </p>
        </div>

        {{-- * Tabs navigation --}}
        <div class="border-b border-gray-200 mb-6 overflow-x-auto">
            <nav class="-mb-px flex space-x-8 min-w-max">
                <button
                    @click="setActiveTab('categories')"
                    :class="activeTab === 'categories' ? 'border-boulanger-orange text-boulanger-orange' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                >
                    📁 Catégories de Posts
                </button>
                <button
                    @click="setActiveTab('rayons')"
                    :class="activeTab === 'rayons' ? 'border-boulanger-orange text-boulanger-orange' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                >
                    📦 Gestion des Rayons
                </button>
                <button
                    @click="setActiveTab('outils')"
                    :class="activeTab === 'outils' ? 'border-boulanger-orange text-boulanger-orange' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                >
                    🧰 Ressources
                </button>
                <button
                    @click="setActiveTab('zimms')"
                    :class="activeTab === 'zimms' ? 'border-boulanger-orange text-boulanger-orange' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
                >
                    🛠️ Codes Zimms
                </button>
            </nav>
        </div>
        {{-- * Tab 1 : Catégories de Posts --}}
        <div x-show="activeTab === 'categories'" x-cloak>
            <div class="bg-white rounded-2xl shadow-sm p-6">
                <div x-data="categoriesManagement(@json(auth()->user()->isAdmin()), {{ auth()->user()->store_id }})" x-init="loadPostCategories()">
                    {{-- Le composant categoriesManagement gère tout --}}
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-semibold text-boulanger-dark">
                                Catégories de Posts
                            </h2>
                            <button
                                @click="openPostCategoryModal()"
                                class="bg-boulanger-orange text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors flex items-center gap-2"
                            >
                                <i data-lucide="plus" class="w-5 h-5"></i>
                                Nouvelle Catégorie
                            </button>
                        </div>
                        <p class="text-sm text-gray-600">
                            Gérez les catégories des publications (Prime, Zimm, Nouveauté, Vie Mag).
                        </p>
                    </div>

                    {{-- Liste des catégories --}}
                    <div x-show="!isLoading && postCategories.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <template x-for="cat in postCategories" :key="cat.id">
                            <div class="border border-gray-200 rounded-lg p-4 hover:border-boulanger-orange transition-colors">
                                <div class="flex items-start justify-between mb-2">
                                    <div class="flex items-center gap-2">
                                        <span x-text="cat.emoji" class="text-2xl"></span>
                                        <div>
                                            <h3 class="font-semibold text-boulanger-dark" x-text="cat.name"></h3>
                                            {{-- * Badge scope : National (admin) ou Magasin (manager) --}}
                                            <span x-show="!cat.store_id"
                                                  class="inline-block text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full font-medium">
                                                🌐 National
                                            </span>
                                            <span x-show="cat.store_id"
                                                  class="inline-block text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full font-medium">
                                                🏪 Magasin
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex gap-1">
                                        {{-- ! Seules les catégories du magasin peuvent être modifiées/supprimées par le manager --}}
                                        <template x-if="cat.store_id">
                                            <button
                                                @click="editPostCategory(cat)"
                                                class="text-gray-500 hover:text-boulanger-orange transition-colors p-1"
                                            >
                                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                                            </button>
                                        </template>
                                        <template x-if="cat.store_id">
                                            <button
                                                @click="deletePostCategory(cat.id)"
                                                class="text-gray-500 hover:text-red-500 transition-colors p-1"
                                            >
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                        </template>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600" x-text="cat.description"></p>
                            </div>
                        </template>
                    </div>

                    {{-- Loading state --}}
                    <div x-show="isLoading" class="flex justify-center py-8">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-boulanger-orange"></div>
                    </div>

                    {{-- Empty state --}}
                    <div x-show="!isLoading && postCategories.length === 0" class="text-center py-12">
                        <div class="text-gray-400 mb-4">
                            <i data-lucide="folder-open" class="w-16 h-16 mx-auto"></i>
                        </div>
                        <p class="text-gray-500 font-medium mb-2">Aucune catégorie créée</p>
                        <p class="text-sm text-gray-400">Commencez par créer une catégorie de posts</p>
                    </div>

                    {{-- Modal Création/Édition Catégorie --}}
                    <div x-show="showPostCategoryModal"
                         x-cloak
                         @click.self="closePostCategoryModal()"
                         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                        <div class="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                            <div class="p-6">
                                <div class="flex items-center justify-between mb-6">
                                    <h3 class="text-xl font-bold text-boulanger-dark" x-text="editingPostCategory ? 'Modifier la Catégorie' : 'Nouvelle Catégorie'"></h3>
                                    <button @click="closePostCategoryModal()" class="text-gray-400 hover:text-gray-600">
                                        <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"></path>
                                        </svg>
                                    </button>
                                </div>

                                <form @submit.prevent="savePostCategory()" class="space-y-4">
                                    {{-- Nom --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
                                        <input type="text"
                                               x-model="postCategoryForm.name"
                                               required
                                               placeholder="Ex: Prime, Nouveauté, Info..."
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                    </div>

                                    {{-- Emoji --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Emoji</label>
                                        <div class="space-y-2">
                                            <input type="text"
                                                   x-model="postCategoryForm.emoji"
                                                   placeholder="Ex: 🔥, 🆕, ℹ️..."
                                                   maxlength="10"
                                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                            <div class="flex flex-wrap gap-2 p-3 bg-gray-50 rounded-lg border border-gray-200 max-h-32 overflow-y-auto">
                                                <template x-for="emoji in ['🔥', '🛠️', '✨', '🏪', '📢', '💡', '🎯', '⚡', '🎉', '📌', '🆕', 'ℹ️', '💰', '🎁', '📱', '💻', '📺', '🏠', '🚀', '⭐', '🔔', '📊', '📈', '🎓', '💼']" :key="emoji">
                                                    <button type="button"
                                                            @click="postCategoryForm.emoji = emoji"
                                                            :class="postCategoryForm.emoji === emoji ? 'ring-2 ring-boulanger-orange bg-orange-50' : 'hover:bg-gray-100'"
                                                            class="text-2xl p-2 rounded-lg transition-all hover:scale-110"
                                                            x-text="emoji">
                                                    </button>
                                                </template>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Scope (National/Magasin) - Admin uniquement --}}
                                    <div x-show="isAdmin">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Portée *</label>
                                        <div class="space-y-2">
                                            {{-- Option National --}}
                                            <button type="button"
                                                    @click="postCategoryForm.store_id = null"
                                                    :class="postCategoryForm.store_id === null ? 'bg-blue-50 border-blue-500 ring-2 ring-blue-200' : 'bg-white border-gray-300'"
                                                    class="w-full px-4 py-3 rounded-lg border-2 text-left transition-all hover:border-blue-400">
                                                <div class="flex items-center">
                                                    <span class="text-2xl mr-3">🌐</span>
                                                    <div>
                                                        <div class="font-semibold text-gray-900">National</div>
                                                        <div class="text-xs text-gray-500">Visible par tous les magasins</div>
                                                    </div>
                                                </div>
                                            </button>

                                            {{-- Liste des magasins --}}
                                            <details class="group">
                                                <summary class="cursor-pointer px-4 py-3 bg-white border-2 border-gray-300 rounded-lg hover:border-blue-400 transition-all">
                                                    <span class="font-medium text-gray-700">Ou choisir un magasin spécifique</span>
                                                </summary>
                                                <div class="mt-2 max-h-60 overflow-y-auto border-2 border-gray-200 rounded-lg">
                                                    <template x-for="store in stores" :key="store.id">
                                                        <button type="button"
                                                                @click="postCategoryForm.store_id = store.id"
                                                                :class="postCategoryForm.store_id === store.id ? 'bg-orange-50 border-l-4 border-boulanger-orange' : 'bg-white hover:bg-gray-50'"
                                                                class="w-full px-4 py-3 text-left border-b border-gray-100 transition-colors">
                                                            <div class="flex items-center justify-between">
                                                                <div>
                                                                    <div class="font-medium text-gray-900" x-text="store.name"></div>
                                                                    <div class="text-xs text-gray-500" x-text="store.city"></div>
                                                                </div>
                                                                <svg x-show="postCategoryForm.store_id === store.id"
                                                                     class="w-5 h-5 text-boulanger-orange" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                                                </svg>
                                                            </div>
                                                        </button>
                                                    </template>
                                                </div>
                                            </details>
                                        </div>
                                        <p class="mt-1 text-xs text-gray-500">
                                            💡 Les catégories nationales sont visibles par tous les magasins. Les catégories de magasin ne sont visibles que dans ce magasin.
                                        </p>
                                    </div>

                                    {{-- Couleur --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Couleur *</label>
                                        <div class="grid grid-cols-4 gap-2">
                                            <template x-for="color in availableColors" :key="color.value">
                                                <button type="button"
                                                        @click="postCategoryForm.color = color.value"
                                                        :class="[color.class, postCategoryForm.color === color.value ? 'ring-2 ring-boulanger-orange' : '']"
                                                        class="px-3 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105"
                                                        x-text="color.name">
                                                </button>
                                            </template>
                                        </div>
                                    </div>

                                    {{-- Description --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                                        <textarea
                                            x-model="postCategoryForm.description"
                                            rows="3"
                                            placeholder="Description de la catégorie..."
                                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100"></textarea>
                                    </div>

                                    {{-- Actif --}}
                                    <div class="flex items-center gap-2">
                                        <input type="checkbox"
                                               x-model="postCategoryForm.is_active"
                                               id="category-active"
                                               class="w-4 h-4 text-boulanger-orange border-gray-300 rounded focus:ring-boulanger-orange">
                                        <label for="category-active" class="text-sm text-gray-700">Catégorie active</label>
                                    </div>

                                    {{-- Boutons --}}
                                    <div class="flex gap-3 pt-4">
                                        <button type="button"
                                                @click="closePostCategoryModal()"
                                                class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                                            Annuler
                                        </button>
                                        <button type="submit"
                                                class="flex-1 px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition-colors">
                                            <span x-text="editingPostCategory ? 'Modifier' : 'Créer'"></span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Notification Toast --}}
                    <div class="fixed bottom-24 right-6 z-50 space-y-2">
                        <template x-for="notif in notifications" :key="notif.id">
                            <div
                                x-show="true"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0 transform translate-y-2"
                                x-transition:enter-end="opacity-100 transform translate-y-0"
                                x-transition:leave="transition ease-in duration-100"
                                x-transition:leave-start="opacity-100 transform translate-y-0"
                                x-transition:leave-end="opacity-0 transform translate-y-2"
                                :class="notif.type === 'success' ? 'bg-green-500' : 'bg-red-500'"
                                class="text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3"
                            >
                                <i data-lucide="check" class="w-5 h-5"></i>
                                <span x-text="notif.message"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        {{-- * Tab 2 : Gestion Rayons/Départements --}}
        <div x-show="activeTab === 'rayons'" x-cloak>
            <div x-data="departmentsManager({ storeId: {{ $activeStoreId ?? auth()->user()->store_id }}, userId: {{ auth()->id() }}, canModerate: true })" x-init="init()">
                @include('checklists.partials.manager-departments-tab')

                {{-- Notification Toast --}}
                <div class="fixed bottom-24 right-6 z-50 space-y-2">
                    <template x-for="notif in notifications" :key="notif.id">
                        <div
                            x-show="true"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            x-transition:leave="transition ease-in duration-100"
                            x-transition:leave-start="opacity-100 transform translate-y-0"
                            x-transition:leave-end="opacity-0 transform translate-y-2"
                            :class="notif.type === 'success' ? 'bg-green-500' : 'bg-red-500'"
                            class="text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3"
                        >
                            <i data-lucide="check" class="w-5 h-5"></i>
                            <span x-text="notif.message"></span>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        {{-- * Tab 3 : Outils Personnalisés (scope=store) --}}
        <div x-show="activeTab === 'outils'" x-cloak>
            <div class="bg-white rounded-2xl shadow-sm p-6">
                <div
                    x-data="toolsManager({
                        scope: 'store',
                        storeId: {{ $activeStoreId ?? auth()->user()->store_id }},
                        canManage: true,
                        isAdmin: {{ auth()->user()->isAdmin() ? 'true' : 'false' }}
                    })"
                    x-init="init()"
                >
                    {{-- Header --}}
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-semibold text-boulanger-dark">
                                Gestion des Ressources
                            </h2>
                            <button
                                @click="openTabModal()"
                                class="bg-boulanger-orange text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors flex items-center gap-2"
                            >
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                </svg>
                                Nouvel Onglet
                            </button>
                        </div>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div class="flex items-start gap-3">
                                <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5"></i>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-blue-900 mb-1">Double couche : National + Magasin</h4>
                                    <p class="text-sm text-blue-700">
                                        Chaque ressource contient une <strong>partie globale</strong> (définie au niveau national,
                                        {{ auth()->user()->isAdmin() ? 'éditable par vous' : 'lecture seule' }})
                                        et une <strong>partie magasin</strong> (personnalisable par votre équipe).
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Liste des onglets et cartes --}}
                    <div x-show="!loading && tabs.length > 0" class="space-y-6">
                        <template x-for="tab in tabs" :key="tab.id">
                            <div class="border-2 border-gray-200 rounded-xl overflow-hidden hover:border-boulanger-orange/50 transition-colors">
                                {{-- Header onglet --}}
                                <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-5 py-4 border-b border-gray-200">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <div class="w-8 h-8 flex items-center justify-center text-boulanger-dark">
                                                <i :data-lucide="getIcon(tab.emoji)" class="w-6 h-6"></i>
                                            </div>
                                            <div>
                                                <h3 class="text-lg font-bold text-boulanger-dark" x-text="tab.title"></h3>
                                                <p class="text-sm text-gray-600" x-text="tab.summary"></p>
                                            </div>
                                        </div>
                                        <div class="flex gap-2">
                                            <button
                                                @click="openCardModal(tab)"
                                                class="px-3 py-1.5 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-1.5 text-sm"
                                            >
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <i data-lucide="plus" class="w-4 h-4"></i>
                                                Ajouter une carte
                                            </button>
                                            <button
                                                @click="openTabModal(tab)"
                                                class="p-2 text-gray-500 hover:text-boulanger-orange transition-colors"
                                                title="Éditer l'onglet"
                                            >
                                                    <i data-lucide="edit-2" class="w-5 h-5"></i>
                                            </button>
                                            <button
                                                @click="deleteTab(tab.id)"
                                                class="p-2 text-gray-500 hover:text-red-600 transition-colors"
                                                title="Supprimer l'onglet"
                                            >
                                                    <i data-lucide="trash-2" class="w-5 h-5"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                {{-- Cartes de l'onglet --}}
                                <div class="p-5 space-y-4">
                                    <template x-if="tab.cards && tab.cards.length > 0">
                                        <div class="space-y-4">
                                            <template x-for="card in tab.cards" :key="card.id">
                                                <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                                                    {{-- Header carte --}}
                                                    <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                                                        <h4 class="font-semibold text-gray-900" x-text="card.title"></h4>
                                                        <div class="flex gap-2">
                                                            <button
                                                                @click="openItemModal(card)"
                                                                class="text-xs px-2 py-1 bg-white border border-gray-300 text-gray-600 rounded hover:bg-gray-50 transition-colors"
                                                            >
                                                                + Item
                                                            </button>
                                                            <button
                                                                @click="openCardModal(tab, card)"
                                                                class="p-1.5 text-gray-500 hover:text-boulanger-orange transition-colors"
                                                            >
                                                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                                                            </button>
                                                            <button
                                                                @click="deleteCard(card.id)"
                                                                class="p-1.5 text-gray-500 hover:text-red-600 transition-colors"
                                                            >
                                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                            </button>
                                                        </div>
                                                    </div>

                                                    {{-- Contenu carte : 2 colonnes (global + store) --}}
                                                    <div class="grid md:grid-cols-2 divide-x divide-gray-200">
                                                        {{-- Colonne Global --}}
                                                        <div class="p-4 bg-blue-50/20">
                                                            <div class="flex items-center gap-2 mb-2">
                                                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                                </svg>
                                                                <span class="text-xs font-semibold text-blue-900 uppercase">Global (National)</span>
                                                                <span x-show="!isAdmin" class="text-xs px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded">🔒</span>
                                                            </div>
                                                            <div class="text-sm text-gray-700 prose prose-sm max-w-none" x-html="card.global_body || '<em class=\'text-gray-400\'>Non défini</em>'"></div>
                                                        </div>

                                                        {{-- Colonne Store --}}
                                                        <div class="p-4 bg-green-50/20">
                                                            <div class="flex items-center gap-2 mb-2">
                                                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                                                </svg>
                                                                <span class="text-xs font-semibold text-green-900 uppercase">Bloc Magasin (À vous de jouer)</span>
                                                            </div>
                                                            {{-- Pour les cartes Globales, le body store n'est pas utilisé (car unique), on utilise les ITEMS --}}
                                                            <template x-if="card.scope === 'store'">
                                                                <div class="text-sm text-gray-700 prose prose-sm max-w-none" x-html="card.store_body || '<em class=\'text-gray-400\'>Description magasin...</em>'"></div>
                                                            </template>
                                                            <template x-if="card.scope === 'global'">
                                                                <div class="text-sm text-gray-500 italic">
                                                                    Ajoutez ici vos liens, fichiers ou textes spécifiques à votre magasin.
                                                                    <br>
                                                                    <button @click="openItemModal(card)" class="text-boulanger-orange hover:underline font-medium mt-1">+ Ajouter un élément</button>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </div>

                                                    {{-- Items de la carte --}}
                                                    <template x-if="card.items && card.items.length > 0">
                                                        <div class="border-t border-gray-200 bg-white">
                                                            {{-- LISTE DES ITEMS (GLOBAL vs STORE mélangés ou séparés ?) --}}
                                                            {{-- Le plus simple est de lister tous les items, mais d'afficher les contrôles uniquement si user a le droit --}}

                                                            <div class="divide-y divide-gray-200">
                                                                <template x-for="item in card.items" :key="item.id">
                                                                    <div class="p-3 hover:bg-gray-50 transition-colors flex items-start gap-3">
                                                                        {{-- Icone Type --}}
                                                                        <div class="mt-1">
                                                                            <span
                                                                                class="text-xs px-1.5 py-0.5 rounded"
                                                                                :class="{
                                                                                    'bg-purple-100 text-purple-700': item.type === 'code',
                                                                                    'bg-blue-100 text-blue-700': item.type === 'link',
                                                                                    'bg-gray-100 text-gray-700': item.type === 'text'
                                                                                }"
                                                                                x-text="item.type === 'code' ? '💻' : (item.type === 'link' ? '🔗' : '📝')"
                                                                            ></span>
                                                                        </div>

                                                                        {{-- Contenu --}}
                                                                        <div class="flex-1">
                                                                             <div class="flex items-center gap-2">
                                                                                 <span class="text-sm font-medium text-gray-900" x-text="item.label"></span>
                                                                                 {{-- Badge Scope --}}
                                                                                 <template x-if="item.scope === 'global'">
                                                                                     <span class="text-[10px] px-1 py-0.5 bg-blue-50 text-blue-600 rounded border border-blue-100 uppercase tracking-wide">National</span>
                                                                                 </template>
                                                                                 <template x-if="item.scope === 'store'">
                                                                                     <span class="text-[10px] px-1 py-0.5 bg-green-50 text-green-600 rounded border border-green-100 uppercase tracking-wide">Magasin</span>
                                                                                 </template>
                                                                             </div>

                                                                             <div class="text-sm text-gray-600 mt-0.5 break-all">
                                                                                 <template x-if="item.type === 'link'">
                                                                                     <a :href="item.content" target="_blank" class="text-blue-600 hover:underline" x-text="item.content"></a>
                                                                                 </template>
                                                                                 <template x-if="item.type !== 'link'">
                                                                                     <span x-text="item.content"></span>
                                                                                 </template>
                                                                             </div>
                                                                        </div>

                                                                        {{-- Actions --}}
                                                                        <div class="flex gap-1">
                                                                            {{-- Édition : Admin (tout) OU Manager (si scope=store) --}}
                                                                            <template x-if="isAdmin || item.scope === 'store'">
                                                                                <button
                                                                                    @click="openItemModal(card, item)"
                                                                                    class="p-1 text-gray-400 hover:text-boulanger-orange transition-colors"
                                                                                >
                                                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                                                                    </svg>
                                                                                </button>
                                                                            </template>

                                                                            {{-- Suppression : Idem --}}
                                                                            <template x-if="isAdmin || item.scope === 'store'">
                                                                                <button
                                                                                    @click="deleteItem(item.id)"
                                                                                    class="p-1 text-gray-400 hover:text-red-600 transition-colors"
                                                                                >
                                                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                                                                    </svg>
                                                                                </button>
                                                                            </template>

                                                                            {{-- Verrouillé pour Manager sur Global --}}
                                                                            <template x-if="!isAdmin && item.scope === 'global'">
                                                                                <span class="p-1 text-gray-300" title="Verrouillé (National)">
                                                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                                                                                </span>
                                                                            </template>
                                                                        </div>
                                                                    </div>
                                                                </template>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                        </div>
                                    </template>

                                    {{-- Empty state cartes --}}
                                    <template x-if="!tab.cards || tab.cards.length === 0">
                                        <div class="text-center py-8 text-gray-500">
                                            <p class="mb-2">Aucune carte dans cet onglet</p>
                                            <button
                                                @click="openCardModal(tab)"
                                                class="text-boulanger-orange hover:text-orange-600 text-sm"
                                            >
                                                + Créer une carte
                                            </button>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>

                    {{-- Loading --}}
                    <div x-show="loading" class="flex justify-center py-12">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange"></div>
                    </div>

                    {{-- Empty state onglets --}}
                    <div x-show="!loading && tabs.length === 0" class="text-center py-12">
                        <svg class="mx-auto h-16 w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                        </svg>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">Aucun onglet personnalisé</h3>
                        <p class="text-sm text-gray-500 mb-4">
                            Créez vos propres catégories d'outils spécifiques à votre magasin
                        </p>
                        <button
                            @click="openTabModal()"
                            class="inline-flex items-center gap-2 text-boulanger-orange hover:text-orange-600 font-medium"
                        >
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                            Créer le premier onglet
                        </button>
                    </div>

                    {{-- Modals (inclus via components) --}}
                    @include('components.tools.tab-modal')
                    @include('components.tools.card-modal')
                    @include('components.tools.item-modal')

                    {{-- Notification Toast --}}
                    {{-- Notification Toast --}}
                    <div class="fixed bottom-6 right-6 z-50 space-y-2">
                        <template x-for="notif in notifications" :key="notif.id">
                            <div
                                x-show="true"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0 transform translate-y-2"
                                x-transition:enter-end="opacity-100 transform translate-y-0"
                                x-transition:leave="transition ease-in duration-100"
                                x-transition:leave-start="opacity-100 transform translate-y-0"
                                x-transition:leave-end="opacity-0 transform translate-y-2"
                                :class="notif.type === 'success' ? 'bg-green-500' : 'bg-red-500'"
                                class="text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3"
                            >
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span x-text="notif.message"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        {{-- * Tab 4 : Gestion des Codes Zimms --}}
        <div x-show="activeTab === 'zimms'" x-cloak>
            <div class="bg-white rounded-2xl shadow-sm p-6">
                <div x-data="zimmsManagement()" x-init="loadZimms()">
                    {{-- Header --}}
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-semibold text-boulanger-dark">
                                Codes Zimms
                            </h2>
                            <button
                                @click="openZimmModal()"
                                class="bg-boulanger-orange text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors flex items-center gap-2"
                            >
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                </svg>
                                Nouveau Code Zimm
                            </button>
                        </div>
                        <p class="text-sm text-gray-600">
                            Gérez les codes promotionnels Zimms (ajout, modification, suppression).
                        </p>
                    </div>

                    {{-- Barre de recherche --}}
                    <div class="mb-4">
                        <input type="text"
                               x-model="searchQuery"
                               @input="filterZimms()"
                               placeholder="Rechercher un code, un libellé ou une famille..."
                               class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100 transition">
                    </div>

                    {{-- Liste des Zimms --}}
                    <div x-show="!isLoading && filteredZimms.length > 0" class="space-y-3">
                        <template x-for="zimm in filteredZimms" :key="zimm.code">
                            <div class="border border-gray-200 rounded-lg p-4 hover:border-boulanger-orange transition-colors">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-3 mb-2">
                                            <span class="font-mono font-bold text-boulanger-orange text-lg" x-text="zimm.code"></span>
                                            <span x-show="zimm.is_active" class="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded">Actif</span>
                                            <span x-show="!zimm.is_active" class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs font-semibold rounded">Expiré</span>
                                        </div>
                                        <h3 class="font-semibold text-boulanger-dark mb-1" x-text="zimm.label"></h3>
                                        <div class="flex gap-4 text-sm text-gray-600">
                                            <span x-show="zimm.family">📁 <span x-text="zimm.family"></span></span>
                                            <span x-show="zimm.value">💰 <span x-text="zimm.value + '€'"></span></span>
                                            <span x-show="zimm.starting_date">📅 Du <span x-text="formatDate(zimm.starting_date)"></span></span>
                                            <span x-show="zimm.finishing_date">au <span x-text="formatDate(zimm.finishing_date)"></span></span>
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <button
                                            @click="editZimm(zimm)"
                                            class="text-gray-500 hover:text-boulanger-orange transition-colors p-2"
                                            title="Modifier"
                                        >
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                            </svg>
                                        </button>
                                        <button
                                            @click="deleteZimm(zimm.code)"
                                            class="text-gray-500 hover:text-red-500 transition-colors p-2"
                                            title="Supprimer"
                                        >
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    {{-- Loading state --}}
                    <div x-show="isLoading" class="flex justify-center py-8">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-boulanger-orange"></div>
                    </div>

                    {{-- Empty state --}}
                    <div x-show="!isLoading && filteredZimms.length === 0" class="text-center py-12">
                        <div class="text-gray-400 mb-4">
                            <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                            </svg>
                        </div>
                        <p class="text-gray-500 font-medium mb-2">Aucun code Zimm</p>
                        <p class="text-sm text-gray-400">Commencez par créer un code Zimm</p>
                    </div>

                    {{-- Modal Zimm --}}
                    <div x-show="showZimmModal"
                         x-cloak
                         @click.self="closeZimmModal()"
                         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                        <div class="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                            <div class="p-6">
                                <div class="flex items-center justify-between mb-6">
                                    <h3 class="text-xl font-bold text-boulanger-dark" x-text="editingZimm ? 'Modifier le Code Zimm' : 'Nouveau Code Zimm'"></h3>
                                    <button @click="closeZimmModal()" class="text-gray-400 hover:text-gray-600">
                                        <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"></path>
                                        </svg>
                                    </button>
                                </div>

                                <form @submit.prevent="saveZimm()" class="space-y-4">
                                    {{-- Code --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Code Zimm *</label>
                                        <input type="text"
                                               x-model="zimmForm.code"
                                               :disabled="editingZimm !== null"
                                               required
                                               placeholder="Ex: 1196263"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                    </div>

                                    {{-- Libellé --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Libellé *</label>
                                        <input type="text"
                                               x-model="zimmForm.label"
                                               required
                                               placeholder="Ex: Gap Rachat Smartphone"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                    </div>

                                    {{-- Valeur --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Valeur (€)</label>
                                        <input type="number"
                                               x-model="zimmForm.value"
                                               step="0.01"
                                               min="0"
                                               placeholder="Ex: 50.00"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                    </div>

                                    {{-- Famille --}}
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Famille</label>
                                        <input type="text"
                                               x-model="zimmForm.family"
                                               placeholder="Ex: Téléphonie, TV, Électroménager..."
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                    </div>

                                    {{-- Dates --}}
                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Date de début</label>
                                            <input type="date"
                                                   x-model="zimmForm.starting_date"
                                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Date de fin</label>
                                            <input type="date"
                                                   x-model="zimmForm.finishing_date"
                                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100">
                                        </div>
                                    </div>

                                    {{-- Boutons --}}
                                    <div class="flex gap-3 pt-4">
                                        <button type="button"
                                                @click="closeZimmModal()"
                                                class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                                            Annuler
                                        </button>
                                        <button type="submit"
                                                :disabled="isSaving"
                                                class="flex-1 px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition-colors disabled:opacity-50">
                                            <span x-show="!isSaving" x-text="editingZimm ? 'Modifier' : 'Créer'"></span>
                                            <span x-show="isSaving">Enregistrement...</span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Notification Toast --}}
                    <div class="fixed bottom-6 right-6 z-50 space-y-2">
                        <template x-for="notif in notifications" :key="notif.id">
                            <div
                                x-show="true"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0 transform translate-y-2"
                                x-transition:enter-end="opacity-100 transform translate-y-0"
                                x-transition:leave="transition ease-in duration-100"
                                x-transition:leave-start="opacity-100 transform translate-y-0"
                                x-transition:leave-end="opacity-0 transform translate-y-2"
                                :class="notif.type === 'success' ? 'bg-green-500' : 'bg-red-500'"
                                class="text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3"
                            >
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span x-text="notif.message"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection