@extends('layouts.app')

@section('title', 'Magasins')
@section('page-title', 'Magasins')

@section('content')
<script>
    window.__magasinsData = @json($magasins);
    window.magasinManager = function(paginator) {
        const p = paginator && typeof paginator === 'object' && 'data' in paginator ? paginator : { data: [] };
        return {
            showModal: false
            , showDeleteModal: false
            , showDisableModal: false
            , deleteIndex: null
            , deleteLabel: ''
            , disableIndex: null
            , disableLabel: ''
            , editingIndex: null
            , magasins: p.data || []
            , form: {
                nom: ''
                , adresse: ''
                , telephone: ''
            }
            , openModal() {
                this.editingIndex = null;
                this.form = {
                    nom: ''
                    , adresse: ''
                    , telephone: ''
                };
                this.showModal = true;
            }
            , editMagasin(i) {
                this.editingIndex = i;
                this.form = {
                    ...this.magasins[i]
                };
                this.showModal = true;
            }
            , openDeleteModal(i) {
                this.deleteIndex = i;
                this.deleteLabel = this.magasins[i].nom;
                this.showDeleteModal = true;
            }
            , openDisableModal(i) {
                this.disableIndex = i;
                this.disableLabel = this.magasins[i].nom;
                this.showDisableModal = true;
            }
            , confirmDisable() {
                if (this.disableIndex === null) return;
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ url('magasins') }}/' + this.magasins[this.disableIndex].id + '/disabled';
                const token = document.querySelector('meta[name="csrf-token"]')?.content || '';
                form.innerHTML = '<input type="hidden" name="_token" value="' + token + '"><input type="hidden" name="_method" value="PUT">';
                document.body.appendChild(form);
                form.submit();
            }
            , confirmDelete() {
                if (this.deleteIndex === null) return;
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ url('magasins') }}/' + this.magasins[this.deleteIndex].id;
                const token = document.querySelector('meta[name="csrf-token"]')?.content || '';
                form.innerHTML = '<input type="hidden" name="_token" value="' + token + '"><input type="hidden" name="_method" value="DELETE">';
                document.body.appendChild(form);
                form.submit();
            }
        };
    };

</script>
<div x-data="magasinManager(__magasinsData)">
    <x-page-card title="Liste des magasins" action="openModal()" actionLabel="Nouveau magasin">
        <div class="overflow-x-auto -mx-4 sm:mx-0">
            <table class="min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Référence</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Nom</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Adresse</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Téléphone</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider w-28">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <template x-for="(magasin, i) in magasins" :key="magasin.id">
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-4 py-3 font-medium text-slate-800" x-text="magasin.reference"></td>
                            <td class="px-4 py-3 font-medium text-slate-800" x-text="magasin.nom"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="magasin.adresse || '-'"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="magasin.telephone || '-'"></td>
                            <td class="px-4 py-3">
                                <span x-show="magasin.disabled" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-slate-100 text-slate-600">
                                    <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                    Désactivé
                                </span>
                                <span x-show="!magasin.disabled" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-emerald-100 text-emerald-700">
                                    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    Actif
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-end gap-1">
                                    <div x-show="!magasin.disabled" class="inline">
                                        <button type="button" @click="openDisableModal(i)" class="p-2 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors" title="Désactiver">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                        </button>
                                    </div>
                                    <button type="button" @click="editMagasin(i)" class="p-2 rounded-lg text-amber-600 hover:text-amber-700 hover:bg-amber-50 transition-colors" title="Modifier">
                                        <svg class="w-4 h-4" 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"/></svg>
                                    </button>
                                    <button type="button" @click="openDeleteModal(i)" class="p-2 rounded-lg text-red-600 hover:text-red-700 hover:bg-red-50 transition-colors" title="Supprimer">
                                        <svg class="w-4 h-4" 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"/></svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="!magasins || magasins.length === 0" x-transition>
                        <td colspan="6" class="px-4 py-8 text-center text-slate-500">Aucun magasin.</td>
                    </tr>
                </tbody>
            </table>
        </div>
        @if($magasins->total() > 0)
        <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-3 border-t border-slate-200 pt-4">
            <p class="text-sm text-slate-500">
                Affichage de <span class="font-medium">{{ $magasins->firstItem() }}</span> à <span class="font-medium">{{ $magasins->lastItem() }}</span> sur <span class="font-medium">{{ $magasins->total() }}</span> magasins
            </p>
            @if($magasins->hasPages())
            <div class="flex gap-3">
                @if($magasins->onFirstPage())
                    <span class="px-4 py-2 text-slate-400 text-sm cursor-not-allowed">Précédent</span>
                @else
                    <a href="{{ $magasins->previousPageUrl() }}" class="px-4 py-2 text-blue-600 hover:text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-50 transition-colors">Précédent</a>
                @endif
                <span class="px-2 py-2 text-slate-600 text-sm">Page {{ $magasins->currentPage() }} / {{ $magasins->lastPage() }}</span>
                @if($magasins->hasMorePages())
                    <a href="{{ $magasins->nextPageUrl() }}" class="px-4 py-2 text-blue-600 hover:text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-50 transition-colors">Suivant</a>
                @else
                    <span class="px-4 py-2 text-slate-400 text-sm cursor-not-allowed">Suivant</span>
                @endif
            </div>
            @endif
        </div>
        @endif
    </x-page-card>

    {{-- Modal création / modification --}}
    <div x-show="showModal" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="showModal" @click="showModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm" x-transition.opacity></div>
            <div x-show="showModal" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" @click.stop class="relative bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100">
                    <h3 class="text-lg font-semibold text-slate-800" x-text="editingIndex === null ? 'Nouveau magasin' : 'Modifier le magasin'"></h3>
                </div>
                <form :action="editingIndex !== null ? '{{ url('magasins') }}/' + magasins[editingIndex].id : '{{ route('magasins.store') }}'" method="POST" class="p-6 space-y-5">
                    @csrf
                    <template x-if="editingIndex !== null">
                        <input type="hidden" name="_method" value="PUT">
                    </template>
                    @if($errors->any())
                    <div class="p-3 rounded-lg bg-red-50 text-red-700 text-sm">
                        @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                        @endforeach
                    </div>
                    @endif
                    <x-form-group label="Nom" :required="true">
                        <input type="text" name="nom" x-model="form.nom" required class="form-input" placeholder="Ex: Magasin Central">
                    </x-form-group>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Adresse">
                            <input type="text" name="adresse" x-model="form.adresse" class="form-input" placeholder="Ex: 123 Avenue principale">
                        </x-form-group>
                        <x-form-group label="Téléphone">
                            <input type="tel" name="telephone" x-model="form.telephone" class="form-input" placeholder="+225 07 00 00 00 00">
                        </x-form-group>
                    </div>
                    <div class="flex gap-3 pt-2">
                        <button type="submit" class="form-btn-primary flex-1">Enregistrer</button>
                        <button type="button" @click="showModal = false" class="form-btn-secondary">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal suppression --}}
    <x-delete-modal>
        Êtes-vous sûr de vouloir supprimer « <span x-text="deleteLabel"></span> » ? Cette action est irréversible.
    </x-delete-modal>

    {{-- Modal désactivation --}}
    <div x-show="showDisableModal" x-cloak class="fixed inset-0 z-[60] overflow-y-auto" aria-labelledby="disable-modal-title">
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="showDisableModal" @click="showDisableModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
            <div x-show="showDisableModal" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
                <div class="p-6">
                    <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-4">
                        <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-800 text-center mb-2" id="disable-modal-title">Confirmer la désactivation</h3>
                    <p class="text-slate-600 text-center mb-6">
                        Êtes-vous sûr de vouloir désactiver « <span x-text="disableLabel"></span> » ?
                    </p>
                    <div class="flex gap-3">
                        <button type="button" @click="confirmDisable()" class="flex-1 px-4 py-2.5 bg-slate-600 hover:bg-slate-700 text-white font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                            Désactiver
                        </button>
                        <button type="button" @click="showDisableModal = false" class="px-4 py-2.5 border border-slate-300 hover:bg-slate-50 font-medium rounded-lg transition-colors">
                            Annuler
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection