@extends('layouts.dashboard')

@section('content')
@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush
<div x-data="shopsPage()">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold flex items-center gap-2">
            <i class="bi bi-shop mr-2"></i>
            Magasins
        </h1>
        <button type="button"
            class="px-5 py-2 bg-gray-900 text-white rounded-lg font-semibold shadow hover:bg-black transition"
            @click="openModal()"
            x-show="tab==='active'"
        >
            <i class="bi bi-plus-lg mr-2"></i>
            Nouveau magasin
        </button>
    </div>

    <div class="flex gap-2 px-8" x-cloak>
        <template x-for="(label, state) in { active: 'Actifs', history: 'Historique', trash: 'Corbeille' }" :key="state">
            <button type="button"
                class="px-6 py-3 rounded-t-lg font-semibold text-sm focus:outline-none transition border-b-2 flex items-center gap-2"
                :class="tab === state
                    ? 'border-gray-900 bg-white text-gray-900 shadow'
                    : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200'"
                @click="tab = state; filter='';">
                <i x-show="state === 'trash'" class="bi bi-trash3"></i>
                <i x-show="state === 'history'" class="bi bi-clock-history"></i>
                <span x-text="label"></span>
                <template x-if="state !== 'history' && shops[state] && shops[state].length > 0">
                    <span class="ml-2 px-2 py-1 rounded-full text-xs font-bold"
                        :class="state === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-gray-100 text-gray-600'"
                        x-text="shops[state].length">
                    </span>
                </template>
            </button>
        </template>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 p-8" x-cloak>
        <!-- Tab Actifs/Corbeille -->
        <template x-for="(items, state) in shops" :key="state">
            <div x-show="tab === state && state !== 'history'" x-cloak x-transition.opacity>
                <div x-show="items.length > 0">
                    <div class="mb-4">
                        <input type="text"
                            class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0"
                            placeholder="Filtrer par nom, identifiant..."
                            x-model="filter"
                        >
                    </div>
                </div>
                <div class="grid md:grid-cols-2 gap-5">
                    <template x-for="shop in items.filter(s => 
                        filter === '' ||
                        s.name.toLowerCase().includes(filter.toLowerCase()) ||
                        s.identifier.toLowerCase().includes(filter.toLowerCase())
                    )" :key="shop.id">
                        <button type="button"
                            class="rounded-lg border border-gray-200 hover:bg-gray-200/30 p-6 flex justify-between gap-4 transition w-full text-left"
                            @click="openDetail(shop)">
                            <div class="flex items-center gap-5">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-lg">
                                    <i class="bi bi-shop"></i>
                                </div>
                                <div>
                                    <div class="font-semibold text-lg" x-text="shop.name"></div>
                                    <span class="text-xs text-gray-500">Identifiant: <span x-text="shop.identifier"></span></span>
                                </div>
                            </div>
                        </button>
                    </template>
                    <template x-if="items.length === 0">
                        <div class="col-span-full text-gray-400 py-16 text-center text-lg">Aucun magasin dans cet état.</div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Tab Historique -->
        <div x-show="tab === 'history'" x-cloak x-transition.opacity>
            <div class="space-y-3">
                <template x-for="log in history" :key="log.id">
                    <div class="border border-gray-200 rounded-lg p-4 text-sm">
                        <div class="flex items-start justify-between mb-2">
                            <div class="font-semibold" x-text="log.action"></div>
                            <div class="text-xs text-gray-400" x-text="log.created_at"></div>
                        </div>
                        <div class="text-gray-600" x-text="log.description"></div>
                    </div>
                </template>
                <template x-if="history.length === 0">
                    <div class="text-gray-400 py-16 text-center text-lg">Aucun historique.</div>
                </template>
            </div>
        </div>
    </div>


    <!-- Modale détail / édition -->
    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="closeModal()" @keydown.escape.window="closeModal()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-xl w-full relative max-h-[95vh] flex flex-col overflow-y-scroll">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeModal()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <template x-if="modalShop">
                <div>
                    <div class="flex flex-col items-center bg-gradient-to-br from-amber-50 via-white to-gray-100 px-8 pt-10 pb-6">
                        <div class="w-20 h-20 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-3xl mb-3 shadow">
                            <i class="bi bi-shop"></i>
                        </div>
                        <div class="text-xl font-bold mb-1" x-text="modalShop.id ? 'Modifier le magasin' : 'Nouveau magasin'"></div>
                    </div>
                    <form @submit.prevent="submitShop()" class="px-8 pb-8 pt-4 flex flex-col gap-4">
                        <div>
                            <label class="font-semibold mb-2 block">Nom du magasin <span class="text-red-600">*</span></label>
                            <input type="text" x-model="modalShop.name"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                :class="errors.name ? 'border-red-500' : ''"
                                placeholder="Ex: Cimatti Rabat (min. 3 caractères)">
                            <p class="text-xs text-red-600 mt-1" x-text="errors.name" x-show="errors.name"></p>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Identifiant <span class="text-red-600">*</span></label>
                            <input type="text" x-model="modalShop.identifier"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                :class="errors.identifier ? 'border-red-500' : ''"
                                placeholder="Ex: rabat_shop (min. 3 caractères, unique)">
                            <p class="text-xs text-red-600 mt-1" x-text="errors.identifier" x-show="errors.identifier"></p>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Mot de passe <span class="text-red-600" x-show="!modalShop.id">*</span></label>
                            <div class="relative">
                                <input :type="showPassword ? 'text' : 'password'" x-model="modalShop.password"
                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0 pr-12"
                                    :class="errors.password ? 'border-red-500' : ''"
                                    :placeholder="modalShop.id ? 'Laisser vide pour ne pas changer (min. 5 caractères)' : 'Mot de passe (min. 5 caractères)'">
                                <button type="button" @click="showPassword = !showPassword"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
                                    <i :class="showPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
                                </button>
                            </div>
                            <p class="text-xs text-red-600 mt-1" x-text="errors.password" x-show="errors.password"></p>
                        </div>
                        <div class="flex justify-between mt-4 gap-3">
                            <template x-if="modalShop.id && !modalShop.deleted_at">
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
                                    @click="softDeleteShop(modalShop.id)">
                                    <i class="bi bi-trash3"></i>
                                    Supprimer
                                </button>
                            </template>
                            <template x-if="modalShop.id && modalShop.deleted_at">
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition"
                                    @click="restoreShop(modalShop.id)">
                                    <i class="bi bi-arrow-counterclockwise"></i>
                                    Restaurer
                                </button>
                            </template>
                            <button type="submit"
                                class="ml-auto flex items-center gap-2 px-6 py-2 bg-gray-900 text-white rounded-lg hover:bg-black transition font-semibold">
                                <i class="bi bi-check-lg"></i>
                                Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </template>
        </div>
    </div>
</div>
<script>
window.shopsPage = function() {
    return {
        shops: {
            active: @json($shops->filter(fn($s) => !$s->deleted_at)->values()),
            trash: @json($shops->filter(fn($s) => $s->deleted_at)->values())
        },
        history: @json($history ?? []),
        tab: 'active',
        filter: '',
        showModal: false,
        modalShop: null,
        showPassword: false,
        errors: {},
        openModal(shop = null) {
            this.errors = {};
            this.showPassword = false;
            this.modalShop = shop ? { ...shop } : {
                id: null,
                name: '',
                identifier: '',
                password: '',
                deleted_at: null
            };
            this.showModal = true;
        },
        openDetail(shop) {
            this.openModal(shop);
        },
        closeModal() {
            this.showModal = false;
            this.modalShop = null;
        },
        async submitShop() {
            this.errors = {};
            const url = this.modalShop.id 
                ? `/dashboard/maintenance/shops/${this.modalShop.id}`
                : '{{ route('dashboard.maintenance.shops.store') }}';
            const method = this.modalShop.id ? 'PUT' : 'POST';
            
            const body = {
                name: this.modalShop.name,
                identifier: this.modalShop.identifier,
            };
            if (this.modalShop.password) {
                body.password = this.modalShop.password;
            }

            const res = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(body)
            });

            const data = await res.json();
            if (res.status === 422) {
                this.errors = data.errors || {};
                return;
            }
            if (res.ok) {
                window.location.reload();
            }
        },
        async softDeleteShop(id) {
            if (!confirm('Déplacer ce magasin vers la corbeille ?')) return;
            const res = await fetch(`/dashboard/maintenance/shops/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            if (res.ok) {
                window.location.reload();
            }
        },
        async restoreShop(id) {
            const res = await fetch(`/dashboard/maintenance/shops/${id}/restore`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            if (res.ok) {
                window.location.reload();
            }
        }
    }
}
</script>
@endsection