{{-- Onglet: Gestion des Rayons (Manager/Animateur) --}}
<div class="space-y-6">

    {{-- En-tête avec bouton ajouter --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center">
                    <i data-lucide="layout-grid" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-boulanger-dark">Gestion des Rayons</h2>
                    <p class="text-sm text-gray-600">
                        @if(auth()->user()->isAdmin() && !auth()->user()->store_id)
                            Vue globale de tous les rayons (tous magasins)
                        @else
                            Créer des rayons et assigner des vendeurs
                        @endif
                    </p>
                </div>
            </div>
            @if(auth()->user()->isAdmin() && !auth()->user()->store_id)
                {{-- Admin sans magasin : afficher info --}}
                <div class="px-4 py-2 bg-blue-50 text-blue-700 rounded-lg text-sm">
                    <i data-lucide="info" class="w-4 h-4 inline-block mr-1"></i>
                    Vue tous magasins
                </div>
            @else
                <button @click="showCreateDepartmentModal = true"
                        class="px-4 py-2 bg-boulanger-orange text-white rounded-lg font-semibold hover:bg-orange-600 transition flex items-center gap-2">
                    <i data-lucide="plus" class="w-5 h-5"></i>
                    <span>Nouveau Rayon</span>
                </button>
            @endif
        </div>
    </div>

    {{-- État de chargement --}}
    <div x-show="loadingDepartments" class="text-center py-12">
        <i data-lucide="loader-2" class="w-12 h-12 text-boulanger-orange animate-spin mx-auto mb-4"></i>
        <p class="text-gray-600">Chargement des rayons...</p>
    </div>

    {{-- Liste des rayons --}}
    <div x-show="!loadingDepartments" class="space-y-4">
        <template x-if="storeDepartments.length === 0">
            <div class="bg-white rounded-xl shadow-sm p-8 text-center border border-gray-100">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
                    <i data-lucide="layers" class="w-8 h-8 text-gray-400"></i>
                </div>
                @if(auth()->user()->isAdmin() && !auth()->user()->store_id)
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Aucun rayon dans la base</h3>
                    <p class="text-gray-600 text-sm mb-4">
                        Aucun rayon n'a encore été créé dans aucun magasin.<br>
                        Les managers peuvent créer des rayons depuis leur interface respective.
                    </p>
                @else
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Aucun rayon créé</h3>
                    <p class="text-gray-600 text-sm mb-4">Commencez par créer votre premier rayon pour organiser votre magasin.</p>
                    <button @click="showCreateDepartmentModal = true"
                            class="px-4 py-2 bg-boulanger-orange text-white rounded-lg font-semibold hover:bg-orange-600 transition">
                        Créer un rayon
                    </button>
                @endif
            </div>
        </template>

        <template x-for="department in storeDepartments" :key="department.id">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-200">
                {{-- En-tête du rayon --}}
                <div class="p-5 bg-gradient-to-r from-gray-50 to-white">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                <span class="text-lg font-bold text-purple-600" x-text="department.code || department.name.charAt(0)"></span>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900" x-text="department.name"></h3>
                                <div class="flex items-center gap-2 text-xs text-gray-500">
                                    <span x-show="department.code">
                                        Code: <span x-text="department.code"></span>
                                    </span>
                                    @if(auth()->user()->isAdmin() && !auth()->user()->store_id)
                                        {{-- Admin: afficher le nom du magasin --}}
                                        <span x-show="department.store" class="px-2 py-0.5 bg-blue-50 text-blue-700 rounded">
                                            <i data-lucide="store" class="w-3 h-3 inline-block mr-1"></i>
                                            <span x-text="department.store?.name"></span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold"
                                  :class="department.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'">
                                <span x-text="department.is_active ? 'Actif' : 'Inactif'"></span>
                            </span>
                            <button @click="editDepartment(department)"
                                    class="p-2 text-gray-600 hover:text-boulanger-orange hover:bg-orange-50 rounded-lg transition">
                                <i data-lucide="pencil" class="w-4 h-4"></i>
                            </button>
                            <button @click="deleteDepartment(department.id)"
                                    class="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                    <p x-show="department.description"
                       class="text-sm text-gray-600 mt-2"
                       x-text="department.description"></p>
                </div>

                {{-- Vendeurs assignés --}}
                <div class="p-5 border-t border-gray-100">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                            <i data-lucide="users" class="w-4 h-4"></i>
                            Vendeurs assignés (<span x-text="department.users?.length || 0"></span>)
                        </h4>
                        <button @click="openAssignVendorModal(department)"
                                class="text-xs px-3 py-1 bg-boulanger-orange text-white rounded-lg font-semibold hover:bg-orange-600 transition">
                            + Assigner
                        </button>
                    </div>

                    <div x-show="!department.users || department.users.length === 0" class="text-sm text-gray-500 italic">
                        Aucun vendeur assigné
                    </div>

                    <div x-show="department.users && department.users.length > 0" class="flex flex-wrap gap-2">
                        <template x-for="user in department.users" :key="user.id">
                            <div class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-lg border border-gray-200">
                                <span class="text-sm font-medium" x-text="user.first_name + ' ' + user.last_name"></span>
                                <button @click="unassignVendor(department.id, user.id)"
                                        class="text-red-500 hover:text-red-700">
                                    <i data-lucide="x" class="w-3 h-3"></i>
                                </button>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- Modal: Créer/Modifier un rayon --}}
    <div x-show="showCreateDepartmentModal"
         x-transition.opacity
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
         x-cloak>
        <div @click.away="showCreateDepartmentModal = false"
             class="bg-white rounded-2xl shadow-xl max-w-lg w-full p-6 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">
                    <span x-text="editingDepartment ? 'Modifier le rayon' : 'Créer un rayon'"></span>
                </h3>
                <button @click="showCreateDepartmentModal = false" class="text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form @submit.prevent="saveDepartment()" class="space-y-4">
                @if(auth()->user()->isAdmin() && !auth()->user()->store_id)
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Magasin *</label>
                    <select x-model="departmentForm.store_id"
                            required
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                        <option value="">Sélectionner un magasin</option>
                        <template x-for="store in availableStores" :key="store.id">
                            <option :value="store.id" x-text="store.name + ' (' + store.code + ')'" :selected="departmentForm.store_id == store.id"></option>
                        </template>
                    </select>
                </div>
                @endif

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Nom du rayon *</label>
                    <input type="text"
                           x-model="departmentForm.name"
                           required
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                           placeholder="Ex: Multimédia">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Code (optionnel)</label>
                    <input type="text"
                           x-model="departmentForm.code"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                           placeholder="Ex: MM">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                    <textarea x-model="departmentForm.description"
                              rows="3"
                              class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                              placeholder="Description du rayon..."></textarea>
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox"
                           x-model="departmentForm.is_active"
                           id="dept-active"
                           class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                    <label for="dept-active" class="text-sm text-gray-700">Rayon actif</label>
                </div>

                <div x-show="departmentError" class="text-sm text-red-600" x-text="departmentError"></div>

                <div class="flex items-center gap-3 pt-4">
                    <button type="submit"
                            :disabled="departmentLoading"
                            class="flex-1 px-4 py-2 bg-boulanger-orange text-white rounded-lg font-semibold hover:bg-orange-600 disabled:opacity-60">
                        <span x-show="!departmentLoading" x-text="editingDepartment ? 'Modifier' : 'Créer'"></span>
                        <span x-show="departmentLoading">Enregistrement...</span>
                    </button>
                    <button type="button"
                            @click="showCreateDepartmentModal = false"
                            class="px-4 py-2 text-gray-600 hover:text-gray-800">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal: Assigner un vendeur --}}
    <div x-show="showAssignVendorModal"
         x-transition.opacity
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
         x-cloak>
        <div @click.away="showAssignVendorModal = false"
             class="bg-white rounded-2xl shadow-xl max-w-md w-full p-6 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">Assigner un vendeur</h3>
                <button @click="showAssignVendorModal = false" class="text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div>
                <p class="text-sm text-gray-600 mb-4">
                    Rayon: <span class="font-semibold" x-text="selectedDepartment?.name"></span>
                </p>

                <label class="block text-sm font-semibold text-gray-700 mb-2">Sélectionner un vendeur</label>
                <select x-model="selectedVendorId"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                    <option value="">-- Choisir un vendeur --</option>
                    <template x-for="vendor in availableVendors" :key="vendor.id">
                        <option :value="vendor.id" x-text="vendor.first_name + ' ' + vendor.last_name"></option>
                    </template>
                </select>
            </div>

            <div x-show="assignError" class="text-sm text-red-600" x-text="assignError"></div>

            <div class="flex items-center gap-3 pt-4">
                <button @click="assignVendorToDepartment()"
                        :disabled="!selectedVendorId || assignLoading"
                        class="flex-1 px-4 py-2 bg-boulanger-orange text-white rounded-lg font-semibold hover:bg-orange-600 disabled:opacity-60">
                    <span x-show="!assignLoading">Assigner</span>
                    <span x-show="assignLoading">Assignation...</span>
                </button>
                <button @click="showAssignVendorModal = false"
                        class="px-4 py-2 text-gray-600 hover:text-gray-800">
                    Annuler
                </button>
            </div>
        </div>
    </div>
</div>