@extends('layouts.admin')

@section('title', 'Gestion des magasins - Admin')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="adminStoresComponent(@js(\App\Models\Region::all()))" x-cloak>
    <!-- En-tête -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-display font-bold text-boulanger-dark">Gestion des magasins</h1>
            <p class="mt-2 text-gray-600">Créer, modifier et gérer les magasins Boulanger</p>
        </div>
        <button
            x-on:click="openCreate"
            class="inline-flex items-center px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition-colors">
            <i data-lucide="plus" class="w-5 h-5 mr-2"></i>
            Nouveau magasin
        </button>
    </div>

    <!-- Filtres -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <input
                type="text"
                placeholder="Rechercher par code ou nom..."
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.search">

            <select
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.region">
                <option value="">Toutes les régions</option>
                <template x-for="region in regionsData" :key="region.code">
                    <option :value="region.code" x-text="`${region.code} - ${region.libelle}`"></option>
                </template>
            </select>

            <select
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.status">
                <option value="">Tous les statuts</option>
                <option value="1">Actifs</option>
                <option value="0">Inactifs</option>
            </select>
        </div>
    </div>

    <!-- Liste des magasins -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <template x-if="isLoading">
            <div class="col-span-full text-center py-8 text-gray-500">Chargement des magasins...</div>
        </template>

        <template x-if="!isLoading && filteredStores.length === 0">
            <div class="col-span-full text-center py-8 text-gray-500">Aucun magasin trouvé</div>
        </template>

        <template x-for="store in filteredStores" :key="store.id">
            <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow border-l-4"
                 :class="store.is_active ? 'border-green-500' : 'border-red-500'">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900" x-text="store.name"></h3>
                        <p class="text-sm text-gray-600 font-mono" x-text="store.code"></p>
                    </div>
                    <span class="px-2 py-1 text-xs font-semibold rounded-full"
                          :class="store.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
                          x-text="store.is_active ? 'Actif' : 'Inactif'"></span>
                </div>

                <div class="space-y-2 mb-4">
                    <div class="flex items-center text-sm text-gray-600">
                        <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
                        <span x-text="store.region || 'Région non renseignée'"></span>
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <i data-lucide="users" class="w-4 h-4 mr-2"></i>
                        <span x-text="store.employees || 0"></span> employé(s)
                    </div>
                </div>

                <div class="flex gap-2">
                    <button x-on:click="openEdit(store)" class="flex-1 px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm">
                        Modifier
                    </button>
                    <a :href="`/admin/stores/${store.id}`" class="flex-1 px-3 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition-colors text-sm text-center">
                        Détails
                    </a>
                </div>
            </div>
        </template>
    </div>

    <!-- Stats -->
    <div class="mt-8 bg-white rounded-lg shadow-sm p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Statistiques</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="text-center">
                <div class="text-3xl font-bold text-boulanger-orange" x-text="stores.length">0</div>
                <div class="text-sm text-gray-600">Total magasins</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-green-600" x-text="stores.filter(s => s.is_active).length">0</div>
                <div class="text-sm text-gray-600">Actifs</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-600" x-text="regions.length">0</div>
                <div class="text-sm text-gray-600">Régions</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-purple-600" x-text="totalEmployees">0</div>
                <div class="text-sm text-gray-600">Employés total</div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div x-show="modal.open" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50" x-transition>
        <div class="bg-white rounded-lg shadow-lg w-full max-w-xl p-6 relative">
            <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600" x-on:click="modal.open = false"><i data-lucide="x" class="w-6 h-6"></i></button>
            <h3 class="text-xl font-semibold text-boulanger-dark mb-4" x-text="modal.mode === 'create' ? 'Créer un magasin' : 'Modifier le magasin'"></h3>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Code</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2 font-mono" x-model="modal.form.code">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Région</label>
                    <select class="w-full border rounded-lg px-3 py-2" x-model="modal.form.region">
                        <option value="">-- Sans région --</option>
                        <template x-for="region in regionsData" :key="region.code">
                            <option :value="region.code" x-text="`${region.code} - ${region.libelle}`" :selected="modal.form.region === region.code"></option>
                        </template>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Photo (URL)</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.photo_url" placeholder="https://...">
                </div>
                <div class="flex items-center space-x-2">
                    <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange" id="storeActive" x-model="modal.form.is_active">
                    <label for="storeActive" class="text-sm text-gray-700">Magasin actif</label>
                </div>
            </div>



            <div class="mt-6 flex justify-end space-x-3">
                <button class="px-4 py-2 text-gray-600 hover:text-gray-800" x-on:click="modal.open = false">Annuler</button>
                <button
                    class="px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 disabled:opacity-50"
                    x-bind:disabled="isSaving"
                    x-on:click="saveStore()">
                    <span x-show="!isSaving">Enregistrer</span>
                    <span x-show="isSaving">Sauvegarde...</span>
                </button>
            </div>
        </div>
    </div>

    <template x-if="error">
        <div class="bg-red-50 text-red-700 px-4 py-3 rounded mt-4" x-text="error"></div>
    </template>

    {{-- Toast Notification --}}
    <div x-cloak
         x-show="toast && toast.show"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-2"
         class="fixed bottom-4 right-4 z-50 max-w-sm">
        <div class="rounded-lg shadow-lg p-4 border-l-4"
             :class="{
                 'bg-green-50 border-green-500': toast && toast.type === 'success',
                 'bg-red-50 border-red-500': toast && toast.type === 'error'
             }">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <i x-show="toast && toast.type === 'success'" data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                    <i x-show="toast && toast.type === 'error'" data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
                </div>
                <p class="text-sm font-medium"
                   :class="{
                       'text-green-800': toast && toast.type === 'success',
                       'text-red-800': toast && toast.type === 'error'
                   }"
                   x-text="toast ? toast.message : ''"></p>
            </div>
        </div>
    </div>
</div>
@endsection