@extends('layouts.app')

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

@section('content')
<script>
    window.__produitsData = @json($produits);
    window.__fournisseursData = @json($fournisseurs);
    window.__magasinsData = @json($magasins);
    window.__produitsBaseUrl = @json(url('produits'));
</script>
<script src="{{ asset('js/produit.js') }}"></script>

<div x-data="produitManager(__produitsData, __fournisseursData, __magasinsData)">
    <x-page-card title="Liste des produits" :action="$roleAllowsCreateEdit ? 'openModal()' : null" :actionLabel="$roleAllowsCreateEdit ? 'Nouveau produit' : null">
        {{-- Filtres et export --}}
        <div x-data="{
            produitSearch: '',
            produitDropdownOpen: false,
            selectedProduitId: @js(request('produit_id')),
            produitsFiltre: @js($produitsFiltre->map(fn($p) => ['id' => $p->id, 'designation' => $p->designation, 'reference' => $p->reference ?? ''])->values()->all()),
            fournisseurSearch: '',
            fournisseurDropdownOpen: false,
            selectedFournisseurId: @js(request('fournisseur_id')),
            fournisseursFiltre: @js($fournisseurs->map(fn($f) => ['id' => $f->id, 'nom' => $f->nom])->values()->all()),
            get filteredFournisseurs() {
                if (!this.fournisseurSearch.trim()) return this.fournisseursFiltre;
                const q = this.fournisseurSearch.toLowerCase();
                return this.fournisseursFiltre.filter(f => (f.nom || '').toLowerCase().includes(q));
            },
            get selectedFournisseurLabel() {
                if (!this.selectedFournisseurId) return null;
                const f = this.fournisseursFiltre.find(f => f.id == this.selectedFournisseurId);
                return f ? f.nom : null;
            },
            selectFournisseur(f) {
                this.selectedFournisseurId = f.id;
                this.fournisseurSearch = '';
                this.fournisseurDropdownOpen = false;
                document.getElementById('fournisseur_filter_id').value = f.id;
            },
            clearFournisseur() {
                this.selectedFournisseurId = null;
                document.getElementById('fournisseur_filter_id').value = '';
                this.fournisseurDropdownOpen = false;
            },
            get filteredProduits() {
                if (!this.produitSearch.trim()) return this.produitsFiltre;
                const q = this.produitSearch.toLowerCase();
                return this.produitsFiltre.filter(p =>
                    (p.designation || '').toLowerCase().includes(q) ||
                    (p.reference || '').toLowerCase().includes(q)
                );
            },
            get selectedProduitLabel() {
                if (!this.selectedProduitId) return null;
                const p = this.produitsFiltre.find(p => p.id == this.selectedProduitId);
                return p ? (p.designation + (p.reference ? ' (' + p.reference + ')' : '')) : null;
            },
            selectProduit(p) {
                this.selectedProduitId = p.id;
                this.produitSearch = '';
                this.produitDropdownOpen = false;
                document.getElementById('produit_filter_id').value = p.id;
            },
            clearProduit() {
                this.selectedProduitId = null;
                document.getElementById('produit_filter_id').value = '';
                this.produitDropdownOpen = false;
            }
        }" @click.outside="produitDropdownOpen = false; fournisseurDropdownOpen = false" class="mb-4">
            <div class="p-4 rounded-xl bg-slate-50 border border-slate-200">
                <form id="produits-filter-form" method="GET" action="{{ route('produits.index') }}">
                    <div class="flex flex-col sm:flex-row sm:items-end gap-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 flex-1">
                            <div class="relative">
                                <label for="fournisseur_filter_search" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Fournisseur</label>
                                <input type="hidden" name="fournisseur_id" id="fournisseur_filter_id" value="{{ request('fournisseur_id') }}">
                                <div class="relative">
                                    <input type="text"
                                           id="fournisseur_filter_search"
                                           :value="fournisseurDropdownOpen ? fournisseurSearch : (selectedFournisseurLabel || fournisseurSearch)"
                                           @input="fournisseurSearch = $event.target.value"
                                           @focus="fournisseurDropdownOpen = true"
                                           placeholder="Rechercher un fournisseur..."
                                           class="form-input w-full text-sm pr-10"
                                           autocomplete="off">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                    </span>
                                </div>
                                <div x-show="fournisseurDropdownOpen" x-cloak x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0" class="absolute z-20 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg overflow-hidden max-h-56">
                                    <div class="p-2 border-b border-slate-100 bg-slate-50/50 sticky top-0">
                                        <input type="text"
                                               x-model="fournisseurSearch"
                                               @click.stop
                                               placeholder="Rechercher..."
                                               class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:outline-none">
                                    </div>
                                    <div class="max-h-44 overflow-y-auto py-1">
                                        <button type="button" @click="clearFournisseur()" class="w-full px-4 py-2.5 text-left text-sm hover:bg-slate-50 text-slate-600 flex items-center gap-2">
                                            <span>Tous les fournisseurs</span>
                                            <span x-show="selectedFournisseurId" class="text-blue-600 text-xs">(effacer)</span>
                                        </button>
                                        <template x-for="f in filteredFournisseurs" :key="f.id">
                                            <button type="button" @click="selectFournisseur(f)" class="w-full px-4 py-2.5 text-left text-sm hover:bg-blue-50 transition-colors" :class="{ 'bg-blue-50 text-blue-700 font-medium': selectedFournisseurId == f.id }" x-text="f.nom"></button>
                                        </template>
                                        <p x-show="filteredFournisseurs.length === 0" class="px-4 py-3 text-sm text-slate-500">Aucun résultat</p>
                                    </div>
                                </div>
                            </div>
                            <div class="relative">
                                <label for="produit_filter_search" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Produit</label>
                                <input type="hidden" name="produit_id" id="produit_filter_id" value="{{ request('produit_id') }}">
                                <div class="relative">
                                    <input type="text" id="produit_filter_search" :value="produitDropdownOpen ? produitSearch : (selectedProduitLabel || produitSearch)" @input="produitSearch = $event.target.value" @focus="produitDropdownOpen = true" placeholder="Rechercher un produit..." class="form-input w-full text-sm pr-10" autocomplete="off">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                                    </span>
                                </div>
                                <div x-show="produitDropdownOpen" x-cloak x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0" class="absolute z-20 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg overflow-hidden max-h-56">
                                    <div class="p-2 border-b border-slate-100 bg-slate-50/50 sticky top-0">
                                        <p class="text-xs text-slate-500 font-medium">Sélectionnez un produit</p>
                                    </div>
                                    <div class="max-h-44 overflow-y-auto py-1">
                                        <button type="button" @click="clearProduit()" class="w-full px-4 py-2.5 text-left text-sm hover:bg-slate-50 text-slate-600 flex items-center gap-2">
                                            <span>Aucun filtre produit</span>
                                            <span x-show="selectedProduitId" class="text-blue-600 text-xs">(effacer)</span>
                                        </button>
                                        <template x-for="p in filteredProduits" :key="p.id">
                                            <button type="button" @click="selectProduit(p)" class="w-full px-4 py-2.5 text-left text-sm hover:bg-blue-50 transition-colors" :class="{ 'bg-blue-50 text-blue-700 font-medium': selectedProduitId == p.id }">
                                                <span x-text="p.designation"></span>
                                                <span x-show="p.reference" class="text-slate-400 text-xs ml-1" x-text="'(' + p.reference + ')'"></span>
                                            </button>
                                        </template>
                                        <p x-show="filteredProduits.length === 0" class="px-4 py-3 text-sm text-slate-500">Aucun produit trouvé</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col sm:flex-row gap-2 sm:shrink-0">
                            <button type="submit" form="produits-filter-form" class="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
                                Filtrer
                            </button>
                            <a href="{{ route('produits.export', request()->only(['fournisseur_id', 'produit_id'])) }}" class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm 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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                                Exporter
                            </a>
                            @if(request()->hasAny(['fournisseur_id', 'produit_id']))
                            <a href="{{ route('produits.index') }}" class="px-4 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 text-sm 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                                Réinitialiser
                            </a>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <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.</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Désignation</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Fournisseur</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Prix achat</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Prix vente</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Unité</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Qté / Seuil alerte</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider w-24">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($produits as $index => $produit)
                    <tr class="hover:bg-slate-50/50 transition-colors">
                        <td class="px-4 py-3 font-mono text-sm text-slate-600">{{ $produit->reference }}</td>
                        <td class="px-4 py-3 font-medium text-slate-800">{{ $produit->designation }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $produit->fournisseur?->nom ?? '-' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ number_format($produit->prix, 0, ',', ' ') }} FCFA</td>
                        <td class="px-4 py-3 font-semibold text-emerald-600">{{ number_format($produit->prix_vente ?? 0, 0, ',', ' ') }} FCFA</td>
                        <td class="px-4 py-3 text-slate-600">{{ $produit->unite ?? '-' }}</td>
                        <td class="px-4 py-3 text-slate-600">
                            @php $s = $produit->stock->first(); @endphp
                            {{ $s ? $s->quantite . ' / ' . $s->seuil_alerte : '-' }}
                        </td>
                        <td class="px-4 py-3">
                            @php $canEditThis = $roleAllowsCreateEdit && (!$isVendeur || (auth()->id() == $produit->user_id)); $canDeleteThis = !$isVendeur || (auth()->id() == $produit->user_id); @endphp
                            <x-action-buttons :editAction="$canEditThis ? 'editProduit(' . $index . ')' : null" :deleteAction="$canDeleteThis ? 'openDeleteModal(' . $index . ')' : null" />
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-slate-500">Aucun produit.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($produits->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">{{ $produits->firstItem() }}</span> à <span class="font-medium">{{ $produits->lastItem() }}</span> sur <span class="font-medium">{{ $produits->total() }}</span> produits
            </p>
            @if($produits->hasPages())
            <div class="flex gap-3">
                @if($produits->onFirstPage())
                <span class="px-4 py-2 text-slate-400 text-sm cursor-not-allowed">Précédent</span>
                @else
                <a href="{{ $produits->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 {{ $produits->currentPage() }} / {{ $produits->lastPage() }}</span>
                @if($produits->hasMorePages())
                <a href="{{ $produits->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>

    <div x-show="showModal" x-cloak 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"></div>
            <div x-show="showModal" 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-3xl w-full overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-b from-slate-50 to-white">
                    <h3 class="text-lg font-semibold text-slate-800" x-text="editingIndex === null ? 'Nouveau produit' : 'Modifier le produit'"></h3>
                </div>
                <form :action="editingIndex !== null ? '{{ url('produits') }}/' + (produits[editingIndex].hash_id || produits[editingIndex].id) : '{{ route('produits.store') }}'" method="POST" class="p-6 space-y-4">
                    @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

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <x-form-group label="Désignation" :required="true">
                            <input type="text" name="designation" x-model="form.designation" required class="form-input" placeholder="Ex: Riz 5kg">
                        </x-form-group>
                        <x-form-group label="Fournisseur">
                            <div class="relative" @click.outside="fournisseurDropdownOpen = false">
                                <input type="hidden" name="fournisseur_id" :value="form.fournisseur_id">
                                <input type="text" class="form-input w-full" placeholder="Rechercher un fournisseur..." x-model="fournisseurSearch" @focus="fournisseurDropdownOpen = true" @blur="setTimeout(() => fournisseurDropdownOpen = false, 200)" @keydown.escape="fournisseurDropdownOpen = false" @keydown.arrow-down.prevent="fournisseurDropdownOpen = true" autocomplete="off">
                                <div x-show="fournisseurDropdownOpen" x-cloak class="absolute z-10 mt-1 w-full max-h-48 overflow-y-auto bg-white border border-slate-200 rounded-lg shadow-lg" x-transition>
                                    <button type="button" @click="form.fournisseur_id = ''; fournisseurSearch = ''; fournisseurDropdownOpen = false" class="block w-full px-4 py-2.5 text-left text-sm hover:bg-slate-50 first:rounded-t-lg">
                                        Aucun fournisseur
                                    </button>
                                    <template x-for="f in fournisseurs.filter(f => !fournisseurSearch || f.nom.toLowerCase().includes(fournisseurSearch.toLowerCase()))" :key="f.id">
                                        <button type="button" @click="form.fournisseur_id = f.id; fournisseurSearch = f.nom; fournisseurDropdownOpen = false" class="block w-full px-4 py-2.5 text-left text-sm hover:bg-slate-50" :class="{ 'bg-blue-50': form.fournisseur_id == f.id }" x-text="f.nom"></button>
                                    </template>
                                    <p x-show="fournisseurs.filter(f => !fournisseurSearch || f.nom.toLowerCase().includes(fournisseurSearch.toLowerCase())).length === 0" class="px-4 py-3 text-sm text-slate-500">
                                        Aucun résultat
                                    </p>
                                </div>
                            </div>
                        </x-form-group>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <x-form-group label="Prix d'achat (FCFA)" :required="true">
                            <input type="number" name="prix" x-model="form.prix" min="0" step="1" required class="form-input" placeholder="0">
                        </x-form-group>
                        <x-form-group label="Prix de vente (FCFA)" :required="true">
                            <input type="number" name="prix_vente" x-model="form.prix_vente" min="0" step="1" required class="form-input" placeholder="0">
                        </x-form-group>
                        <x-form-group label="Unité">
                            <select name="unite" x-model="form.unite" class="form-input">
                                <option value="">—</option>
                                <option value="pièce">Pièce</option>
                                <option value="kg">Kg</option>
                                <option value="L">L</option>
                                <option value="carton">Carton</option>
                                <option value="sachet">Sachet</option>
                            </select>
                        </x-form-group>
                    </div>

                    <div class="rounded-lg border border-slate-200 bg-slate-50/50 p-4">
                        <p class="text-sm font-medium text-slate-700 mb-3">Stock initial</p>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <x-form-group label="Magasin" :required="true">
                                <select name="magasin_id" x-model="form.magasin_id" :required="editingIndex === null" class="form-input">
                                    <option value="">Sélectionner un magasin</option>
                                    @foreach($magasins as $m)
                                    <option value="{{ $m->id }}">{{ $m->nom }}</option>
                                    @endforeach
                                </select>
                            </x-form-group>
                            <x-form-group label="Quantité" :required="true">
                                <input type="number" name="quantite" x-model="form.quantite" min="0" required class="form-input">
                            </x-form-group>
                            <x-form-group label="Seuil d'alerte" :required="true">
                                <input type="number" name="seuil_alerte" x-model="form.seuil_alerte" min="0" required class="form-input" placeholder="0">
                            </x-form-group>
                        </div>
                    </div>

                    <div class="flex gap-3 pt-1">
                        <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>

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