{{-- * Onglet Gestion des Catégories (Posts + Boîte à Outils) --}}
<div class="space-y-6">

    {{-- Sous-onglets --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex border-b border-gray-200">
            <button @click="categoryTab = 'posts'; loadPostCategories()"
                    :class="categoryTab === 'posts' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                    class="flex-1 px-4 py-3 font-semibold text-sm transition-colors duration-200 flex items-center justify-center gap-2"
                    x-bind:class="{ 'opacity-50': isLoading }">
                <i data-lucide="message-square" class="w-4 h-4"></i>
                <span>Catégories Posts</span>
            </button>
            <button @click="categoryTab = 'tools'; loadToolCategories()"
                    :class="categoryTab === 'tools' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                    class="flex-1 px-4 py-3 font-semibold text-sm transition-colors duration-200 flex items-center justify-center gap-2"
                    x-bind:class="{ 'opacity-50': isLoading }">
                <i data-lucide="wrench" class="w-4 h-4"></i>
                <span>Boîte à Outils</span>
            </button>
        </div>
    </div>

    {{-- ========================================
         CATÉGORIES POSTS
    ======================================== --}}
    <div x-show="categoryTab === 'posts'">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            {{-- En-tête --}}
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-boulanger-dark">Catégories de Posts</h2>
                    <p class="text-sm text-gray-600 mt-1">Gérez les catégories disponibles pour les publications</p>
                </div>
                <button @click="openPostCategoryModal()"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-boulanger-orange-dark transition-colors font-semibold">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>Nouvelle catégorie</span>
                </button>
            </div>

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

            {{-- Liste des catégories --}}
            <template x-if="!isLoading">
                <div class="space-y-3">
                    <template x-if="postCategories.length === 0">
                        <div class="text-center py-12 text-gray-500">
                            <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-400"></i>
                            <p>Aucune catégorie définie</p>
                            <button @click="openPostCategoryModal()"
                                    class="mt-4 text-boulanger-orange hover:underline font-semibold">
                                Créer la première catégorie
                            </button>
                        </div>
                    </template>

                    <template x-for="category in postCategories" :key="category.id">
                        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-boulanger-orange transition-colors">
                            <div class="flex items-center gap-4 flex-1">
                                {{-- Emoji & Nom --}}
                                <div class="flex items-center gap-3">
                                    <span class="text-2xl" x-text="category.emoji || '📌'"></span>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <h3 class="font-semibold text-boulanger-dark" x-text="category.name"></h3>
                                            {{-- * Badge scope : Global (admin) ou Magasin (manager) --}}
                                            <span x-show="!category.store_id"
                                                  class="inline-block text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full font-medium">
                                                🌐 Global
                                            </span>
                                            <span x-show="category.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>
                                        <p class="text-sm text-gray-600" x-text="category.description || 'Pas de description'"></p>
                                    </div>
                                </div>

                                {{-- Badge couleur --}}
                                <div>
                                    <span :class="getColorClass(category.color)"
                                          class="px-3 py-1 rounded-full text-xs font-semibold"
                                          x-text="category.color.charAt(0).toUpperCase() + category.color.slice(1)"></span>
                                </div>

                                {{-- Ordre --}}
                                <div class="text-sm text-gray-500">
                                    <span class="font-medium">Ordre:</span> <span x-text="category.order"></span>
                                </div>

                                {{-- Statut actif --}}
                                <div>
                                    {{-- ! Seules les catégories du magasin peuvent être désactivées par le manager --}}
                                    <button @click="category.store_id && togglePostCategoryActive(category)"
                                            :disabled="!category.store_id"
                                            :class="category.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
                                            class="px-3 py-1 rounded-full text-xs font-semibold transition-opacity"
                                            :class="category.store_id ? 'hover:opacity-80 cursor-pointer' : 'opacity-60 cursor-not-allowed'">
                                        <span x-text="category.is_active ? '✓ Active' : '✗ Inactive'"></span>
                                    </button>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="flex items-center gap-2">
                                {{-- ! Seules les catégories du magasin peuvent être modifiées/supprimées --}}
                                <template x-if="category.store_id">
                                    <button @click="openPostCategoryModal(category)"
                                            class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                                            title="Modifier">
                                        <i data-lucide="edit" class="w-4 h-4"></i>
                                    </button>
                                </template>
                                <template x-if="category.store_id">
                                    <button @click="deletePostCategory(category)"
                                            class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                                            title="Supprimer">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </template>
                                {{-- * Badge "Non modifiable" pour catégories globales --}}
                                <template x-if="!category.store_id">
                                    <span class="text-xs text-gray-500 italic px-2">
                                        🔒 Non modifiable
                                    </span>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>

    {{-- ========================================
         CATÉGORIES BOÎTE À OUTILS
    ======================================== --}}
    <div x-show="categoryTab === 'tools'">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            {{-- En-tête --}}
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-boulanger-dark">Catégories Boîte à Outils</h2>
                    <p class="text-sm text-gray-600 mt-1">Gérez les onglets de la boîte à outils</p>
                    @if(Auth::user()->role !== 'admin')
                        <p class="text-xs text-amber-600 mt-2">⚠️ Vous ne pouvez gérer que les catégories de votre magasin</p>
                    @endif
                </div>
                <button @click="openToolCategoryModal()"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-boulanger-orange-dark transition-colors font-semibold">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>Nouvelle catégorie</span>
                </button>
            </div>

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

            {{-- Liste des catégories --}}
            <template x-if="!isLoading">
                <div class="space-y-3">
                    <template x-if="toolCategories.length === 0">
                        <div class="text-center py-12 text-gray-500">
                            <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-400"></i>
                            <p>Aucune catégorie définie</p>
                            <button @click="openToolCategoryModal()"
                                    class="mt-4 text-boulanger-orange hover:underline font-semibold">
                                Créer la première catégorie
                            </button>
                        </div>
                    </template>

                    <template x-for="category in toolCategories" :key="category.id">
                        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-boulanger-orange transition-colors">
                            <div class="flex items-center gap-4 flex-1">
                                {{-- Emoji & Titre --}}
                                <div class="flex items-center gap-3">
                                    <span class="text-2xl" x-text="category.emoji || '📁'"></span>
                                    <div>
                                        <h3 class="font-semibold text-boulanger-dark" x-text="category.title"></h3>
                                        <p class="text-sm text-gray-600" x-text="category.summary || 'Pas de description'"></p>
                                    </div>
                                </div>

                                {{-- Scope --}}
                                <div>
                                    <span :class="category.store_id ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700'"
                                          class="px-3 py-1 rounded-full text-xs font-semibold">
                                        <span x-text="category.store_id ? 'Magasin' : 'Global'"></span>
                                    </span>
                                </div>

                                {{-- Ordre --}}
                                <div class="text-sm text-gray-500">
                                    <span class="font-medium">Ordre:</span> <span x-text="category.order"></span>
                                </div>

                                {{-- Par défaut --}}
                                @if(Auth::user()->isAdmin())
                                    <template x-if="category.is_default_for_stores">
                                        <div>
                                            <span class="bg-amber-100 text-amber-700 px-3 py-1 rounded-full text-xs font-semibold">
                                                ⭐ Par défaut
                                            </span>
                                        </div>
                                    </template>
                                @endif

                                {{-- Statut visible --}}
                                <div>
                                    <button @click="toggleToolCategoryVisible(category)"
                                            :class="category.is_visible ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
                                            class="px-3 py-1 rounded-full text-xs font-semibold hover:opacity-80 transition-opacity">
                                        <span x-text="category.is_visible ? '👁️ Visible' : '🙈 Masqué'"></span>
                                    </button>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="flex items-center gap-2">
                                <button @click="openToolCategoryModal(category)"
                                        class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                                        title="Modifier">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button @click="deleteToolCategory(category)"
                                        class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                                        title="Supprimer">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>

</div>

{{-- ========================================
     MODALS
======================================== --}}

{{-- Modal Catégorie Post --}}
<div x-show="showPostCategoryModal"
     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"
     class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
     @click.self="closePostCategoryModal()">
    <div x-show="showPostCategoryModal"
         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"
         class="bg-white rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">

        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-bold text-boulanger-dark">
                    <span x-text="editingPostCategory ? 'Modifier la catégorie' : 'Nouvelle catégorie'"></span>
                </h3>
                <button @click="closePostCategoryModal()"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>

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

                {{-- Emoji --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Emoji</label>
                    <div class="space-y-2">
                        <input type="text"
                               x-model="postCategoryForm.emoji"
                               maxlength="10"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                               placeholder="🔥">
                        <div class="flex flex-wrap gap-2 p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <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>

                {{-- Couleur --}}
                <div>
                    <label class="block text-sm font-semibold 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-offset-2 ring-boulanger-orange' : '']"
                                    class="px-3 py-2 rounded-lg text-xs font-semibold transition-all hover:scale-105">
                                <span x-text="color.name"></span>
                            </button>
                        </template>
                    </div>
                </div>

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

                {{-- Ordre --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Ordre d'affichage *</label>
                    <input type="number"
                           x-model.number="postCategoryForm.order"
                           required
                           min="0"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                </div>

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

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

{{-- Modal Catégorie Boîte à Outils --}}
<div x-show="showToolCategoryModal"
     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"
     class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
     @click.self="closeToolCategoryModal()">
    <div x-show="showToolCategoryModal"
         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"
         class="bg-white rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">

        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-bold text-boulanger-dark">
                    <span x-text="editingToolCategory ? 'Modifier la catégorie' : 'Nouvelle catégorie'"></span>
                </h3>
                <button @click="closeToolCategoryModal()"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>

            <form @submit.prevent="saveToolCategory()" class="space-y-4">
                {{-- Titre --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Titre *</label>
                    <input type="text"
                           x-model="toolCategoryForm.title"
                           required
                           maxlength="255"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                           placeholder="Ex: Infinity, Oney & Financements...">
                </div>

                {{-- Emoji --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Emoji</label>
                    <input type="text"
                           x-model="toolCategoryForm.emoji"
                           maxlength="10"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                           placeholder="🧭">
                </div>

                {{-- Description --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                    <textarea x-model="toolCategoryForm.summary"
                              rows="3"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                              placeholder="Description de l'onglet..."></textarea>
                </div>

                {{-- Ordre --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Ordre d'affichage *</label>
                    <input type="number"
                           x-model.number="toolCategoryForm.order"
                           required
                           min="0"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                </div>

                {{-- Visible --}}
                <div class="flex items-center gap-2">
                    <input type="checkbox"
                           x-model="toolCategoryForm.is_visible"
                           id="toolCategoryVisible"
                           class="w-4 h-4 text-boulanger-orange border-gray-300 rounded focus:ring-boulanger-orange">
                    <label for="toolCategoryVisible" class="text-sm font-semibold text-gray-700">Catégorie visible</label>
                </div>

                {{-- Par défaut (Admin uniquement) --}}
                @if(Auth::user()->isAdmin())
                    <div class="flex items-center gap-2">
                        <input type="checkbox"
                               x-model="toolCategoryForm.is_default_for_stores"
                               id="toolCategoryDefault"
                               class="w-4 h-4 text-boulanger-orange border-gray-300 rounded focus:ring-boulanger-orange">
                        <label for="toolCategoryDefault" class="text-sm font-semibold text-gray-700">
                            Par défaut pour les nouveaux magasins
                        </label>
                    </div>
                @endif

                {{-- Boutons --}}
                <div class="flex items-center gap-3 pt-4">
                    <button type="submit"
                            class="flex-1 px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-boulanger-orange-dark transition-colors font-semibold">
                        <span x-text="editingToolCategory ? 'Enregistrer' : 'Créer'"></span>
                    </button>
                    <button type="button"
                            @click="closeToolCategoryModal()"
                            class="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>