@extends('layouts.app')

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

@section('content')
@php
$magasinsOptions = $magasins->map(fn($m) => ['value' => $m->id, 'label' => $m->nom])->values()->all();
$produitsOptions = $produits->map(fn($p) => ['value' => $p->id, 'label' => $p->designation . ($p->reference ? ' (' . $p->reference . ')' : '')])->values()->all();
@endphp

<script>
    window.__transfertsUpdateUrl = @json(rtrim(url('transferts'), '/'));

</script>
<div x-data="transfertManager(@js($magasinsOptions), @js($produitsOptions), @js(session('_old_input', [])))" id="transfert-form" x-init="if (Object.keys(oldInput || {}).length > 0) { Object.assign(form, { magasin_origine_id: oldInput.magasin_origine_id ?? '', magasin_destination_id: oldInput.magasin_destination_id ?? '', produit_id: oldInput.produit_id ?? '', quantite: oldInput.quantite || 1, date_transfert: oldInput.date_transfert || form.date_transfert }); showModal = true; }">
    <x-page-card title="Historique des transferts" :action="$roleAllowsCreateEdit ? 'openModal()' : null" :actionLabel="$roleAllowsCreateEdit ? 'Nouveau transfert' : null">
        {{-- Filtres --}}
        <div x-data="{
            produitSearch: '',
            produitDropdownOpen: false,
            selectedProduitId: @js(request('produit_id')),
            produitsFiltre: @js($produits->map(fn($p) => ['id' => $p->id, 'designation' => $p->designation, 'reference' => $p->reference ?? ''])->values()->all()),
            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" class="mb-4 p-5 rounded-xl bg-slate-50 border border-slate-200">
            <form id="transferts-filter-form" method="GET" action="{{ route('transferts.index') }}">
                <div class="space-y-4">
                    {{-- Ligne 1 : Champs de filtre --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 items-end">
                        <div class="sm:col-span-2 lg:col-span-1">
                            <label for="date_from" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Date du</label>
                            <input type="date" id="date_from" name="date_from" value="{{ request('date_from') }}" class="form-input w-full text-sm">
                        </div>
                        <div class="sm:col-span-2 lg:col-span-1">
                            <label for="date_to" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Date au</label>
                            <input type="date" id="date_to" name="date_to" value="{{ request('date_to') }}" class="form-input w-full text-sm">
                        </div>
                        <div class="sm:col-span-2 lg:col-span-1">
                            <label for="magasin_origine_id" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Magasin origine</label>
                            <select id="magasin_origine_id" name="magasin_origine_id" class="form-input w-full text-sm">
                                <option value="">Tous</option>
                                @foreach($magasins as $m)
                                <option value="{{ $m->id }}" {{ request('magasin_origine_id') == $m->id ? 'selected' : '' }}>{{ $m->nom }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="sm:col-span-2 lg:col-span-1">
                            <label for="magasin_destination_id" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Magasin destination</label>
                            <select id="magasin_destination_id" name="magasin_destination_id" class="form-input w-full text-sm">
                                <option value="">Tous</option>
                                @foreach($magasins as $m)
                                <option value="{{ $m->id }}" {{ request('magasin_destination_id') == $m->id ? 'selected' : '' }}>{{ $m->nom }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="sm:col-span-2 lg:col-span-1 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..." class="form-input w-full text-sm pr-9" autocomplete="off">
                                <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                                    <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-52 min-w-[12rem]">
                                <div class="p-2 border-b border-slate-100 bg-slate-50/50 sticky top-0">
                                    <input type="text" x-model="produitSearch" @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-40 overflow-y-auto py-1">
                                    <button type="button" @click="clearProduit()" class="w-full px-3 py-2 text-left text-sm hover:bg-slate-50 text-slate-600 flex items-center gap-2">
                                        <span>Tous les produits</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-3 py-2 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-3 py-2 text-sm text-slate-500">Aucun produit trouvé</p>
                                </div>
                            </div>
                        </div>
                        <div class="sm:col-span-2 lg:col-span-1">
                            <label for="statut" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Statut</label>
                            <select id="statut" name="statut" class="form-input w-full text-sm">
                                <option value="">Tous</option>
                                <option value="expédié" {{ request('statut') === 'expédié' ? 'selected' : '' }}>Expédié</option>
                                <option value="annulé" {{ request('statut') === 'annulé' ? 'selected' : '' }}>Annulé</option>
                            </select>
                        </div>
                    </div>
                    {{-- Ligne 2 : Actions --}}
                    <div class="flex flex-wrap items-center gap-2 pt-1 border-t border-slate-200/80">
                        <button type="submit" form="transferts-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('transferts.index') }}" class="px-4 py-2.5 border border-slate-300 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                            Réinitialiser
                        </a>
                        <a href="{{ route('transferts.export', request()->only(['date_from', 'date_to', 'magasin_origine_id', 'magasin_destination_id', 'produit_id', 'statut'])) }}" 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>
                    </div>
                </div>
            </form>
        </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">Origine</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Destination</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Produit</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Quantité</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</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-24">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($transferts as $t)
                    <tr class="hover:bg-slate-50/50 transition-colors">
                        <td class="px-4 py-3 font-mono text-sm text-slate-600">{{ $t->reference }}</td>
                        <td class="px-4 py-3 text-slate-800">{{ $t->magasinOrigine->nom }}</td>
                        <td class="px-4 py-3 text-slate-800">{{ $t->magasinDestination->nom }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $t->produit->designation }}</td>
                        <td class="px-4 py-3 font-medium text-slate-800">{{ $t->quantite }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $t->date_transfert->format('d/m/Y') }}</td>
                        <td class="px-4 py-3">
                            <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium {{ $t->statut === 'annulé' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700' }}">
                                {{ $t->statut }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center justify-end gap-1">
                                <button type="button" @click="viewTransfert('{{ $t->reference }}', '{{ addslashes($t->magasinOrigine->nom) }}', '{{ addslashes($t->magasinDestination->nom) }}', '{{ addslashes($t->produit->designation) }}', {{ $t->quantite }}, '{{ $t->date_transfert->format('d/m/Y') }}', {{ $t->stock_actuel_origine ?? 0 }}, '{{ $t->statut }}')" class="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-colors" title="Voir">
                                    <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                                </button>
                                @if($t->statut !== 'annulé' && (!$isVendeur || auth()->id() == $t->user_id))
                                <button type="button" @click="openAnnuleModal('{{ $t->hash_id }}', '{{ $t->reference }}')" class="p-2 rounded-lg text-amber-600 hover:text-amber-700 hover:bg-amber-50 transition-colors" title="Annuler le transfert">
                                    <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="M6 18L18 6M6 6l12 12" /></svg>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-slate-500">Aucun transfert enregistré</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($transferts->hasPages())
        <div class="mt-4 px-4">
            {{ $transferts->links() }}
        </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-xl 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">Nouveau transfert</h3>
                    <p class="text-sm text-slate-500 mt-1">Transférer des produits entre magasins</p>
                </div>
                <form action="{{ route('transferts.store') }}" method="POST" class="p-6 space-y-5" @submit="if(!$el.checkValidity()){ $el.reportValidity(); $event.preventDefault(); }">
                    @csrf
                    <input type="hidden" name="magasin_origine_id" :value="form.magasin_origine_id">
                    <input type="hidden" name="magasin_destination_id" :value="form.magasin_destination_id">
                    <input type="hidden" name="produit_id" :value="form.produit_id">
                    <x-form-group label="Magasin d'origine" :required="true">
                        <x-searchable-select form-id="transfert-form" model="magasin_origine_id" required placeholder="Sélectionner un magasin" :options="$magasinsOptions" />
                    </x-form-group>
                    <x-form-group label="Magasin destination" :required="true">
                        <x-searchable-select form-id="transfert-form" model="magasin_destination_id" required placeholder="Sélectionner un magasin" :options="$magasinsOptions" />
                    </x-form-group>
                    <x-form-group label="Produit" :required="true">
                        <x-searchable-select form-id="transfert-form" model="produit_id" required placeholder="Sélectionner un produit" :options="$produitsOptions" />
                    </x-form-group>
                    <x-form-group label="Quantité" :required="true">
                        <input type="number" name="quantite" x-model="form.quantite" min="1" required class="form-input">
                    </x-form-group>
                    <x-form-group label="Date du transfert" :required="true">
                        <input type="date" name="date_transfert" x-model="form.date_transfert" required class="form-input">
                    </x-form-group>
                    @if($errors->any())
                    <div class="p-3 rounded-lg bg-red-50 border border-red-100 text-red-700 text-sm">
                        @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                        @endforeach
                    </div>
                    @endif
                    <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>

    <x-detail-modal showVar="showDetailModal" title="Détails du transfert" subtitleVar="detailReference">
        <template x-if="selectedItem">
            <div class="space-y-1">
                <div class="flex items-center gap-3 p-4 rounded-xl bg-blue-50 border border-blue-100 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center shrink-0">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>
                    </div>
                    <div>
                        <p class="font-mono font-semibold text-blue-800" x-text="selectedItem.reference"></p>
                        <p class="text-sm text-blue-600" x-text="selectedItem.produit + ' • ' + selectedItem.quantite + ' unités'"></p>
                    </div>
                </div>
                <dl class="divide-y divide-slate-100">
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Référence</dt>
                        <dd class="font-mono font-semibold text-slate-800" x-text="selectedItem.reference"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Magasin d'origine</dt>
                        <dd class="font-semibold text-slate-800" x-text="selectedItem.origine"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Quantité de départ (avant transfert)</dt>
                        <dd class="font-semibold text-slate-800" x-text="(selectedItem.quantiteDeDepart ?? 0) + ' unités'"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Restant après transfert</dt>
                        <dd class="font-semibold text-slate-800" x-text="(selectedItem.restantApres ?? 0) + ' unités'"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Magasin destination</dt>
                        <dd class="font-semibold text-slate-800" x-text="selectedItem.destination"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Produit</dt>
                        <dd class="font-semibold text-slate-800" x-text="selectedItem.produit"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Quantité transférée</dt>
                        <dd class="font-semibold text-slate-800" x-text="selectedItem.quantite + ' unités'"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 border-b border-slate-100 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Date</dt>
                        <dd class="font-semibold text-slate-800" x-text="selectedItem.date"></dd>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center py-3 gap-1 sm:gap-4">
                        <dt class="text-sm font-medium text-slate-500 shrink-0 sm:w-40">Statut</dt>
                        <dd>
                            <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium" :class="(selectedItem.statut || 'expédié') === 'annulé' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'" x-text="selectedItem.statut || 'expédié'"></span>
                        </dd>
                    </div>
                </dl>
            </div>
        </template>
    </x-detail-modal>

    <x-delete-modal showVar="showAnnuleModal" title="Confirmer l'annulation" confirmText="Annuler le transfert" confirmAction="confirmAnnule">
        Êtes-vous sûr de vouloir annuler le transfert « <span x-text="annuleLabel"></span> » ? Les stocks seront remis à jour.
    </x-delete-modal>
</div>

<script src="{{ asset('js/transfert.js') }}"></script>
@endsection