@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

<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="openModal()" actionLabel="Nouveau transfert">
        <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-slate-100 text-slate-600' : 'bg-emerald-50 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') }}')" 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é')
                                <form action="{{ route('transferts.update', $t->hash_id) }}" method="POST" class="inline" onsubmit="return confirm('Annuler ce transfert ? Les stocks seront remis à jour.');">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" 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>
                                </form>
                                @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">
                    @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" 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" 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" 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">
                            <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="M5 13l4 4L19 7" /></svg>
                            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">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 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>
                </dl>
            </div>
        </template>
    </x-detail-modal>
</div>

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