{{-- Onglet: Mes Rayons (Vendeur) --}}
<div x-show="activeTab === 'departments'"
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0 transform translate-y-4"
     x-transition:enter-end="opacity-100 transform translate-y-0"
     class="space-y-6">

    {{-- En-tête --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-indigo-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">Mes Rayons Attribués</h2>
                <p class="text-sm text-gray-600">Les rayons dont je suis responsable</p>
            </div>
        </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 de vos rayons...</p>
    </div>

    {{-- Message si aucun rayon --}}
    <div x-show="!loadingDepartments && myDepartments.length === 0"
         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="layout-grid" class="w-8 h-8 text-gray-400"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Aucun rayon attribué</h3>
        <p class="text-gray-600 text-sm">Vous n'êtes actuellement assigné à aucun rayon.<br>Contactez votre manager pour plus d'informations.</p>
    </div>

    {{-- Liste des rayons --}}
    <div x-show="!loadingDepartments && myDepartments.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <template x-for="department in myDepartments" :key="department.id">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition-shadow duration-200">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-lg font-bold text-indigo-600" x-text="department.code || department.name.charAt(0)"></span>
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-gray-900" x-text="department.name"></h3>
                            <p class="text-xs text-gray-500" x-show="department.code">
                                Code: <span x-text="department.code"></span>
                            </p>
                        </div>
                    </div>
                    <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>
                </div>

                <p x-show="department.description"
                   class="text-sm text-gray-600 mb-3"
                   x-text="department.description"></p>

                <div class="pt-3 border-t border-gray-100">
                    <p class="text-xs text-gray-500">
                        <i data-lucide="calendar" class="w-3 h-3 inline"></i>
                        Assigné le <span x-text="formatDate(department.assigned_at)"></span>
                    </p>
                </div>
            </div>
        </template>
    </div>
</div>