@extends('layouts.app')

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

@section('content')
<div x-data="inventaireManager(@js($errors->any()))" id="inventaire-form">
    @if($errors->any())
    <div class="mb-4 p-4 rounded-xl bg-red-50 border border-red-200 text-red-700 text-sm">
        <p class="font-medium">Erreur lors de la création de l'inventaire :</p>
        <ul class="list-disc list-inside mt-1">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <x-page-card title="Inventaires physiques" action="openModal()" actionLabel="Nouvel inventaire">
        <div class="space-y-4">
            <div class="rounded-lg border border-blue-200 bg-blue-50/50 p-4 flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center shrink-0">
                    <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-blue-800">Inventaire physique</p>
                    <p class="text-sm text-blue-700 mt-1">Comparez les quantités réelles en magasin avec les quantités système pour détecter les écarts.</p>
                </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">Magasin</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-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Écarts</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($inventaires as $inv)
                        <tr class="hover:bg-slate-50/50">
                            <td class="px-4 py-3 font-mono text-sm text-slate-600">{{ $inv->reference }}</td>
                            <td class="px-4 py-3 font-medium text-slate-800">{{ $inv->magasin?->nom ?? '—' }}</td>
                            <td class="px-4 py-3 text-slate-600">{{ $inv->date_inventaire->format('d/m/Y') }}</td>
                            <td>
                                @if($inv->statut === \App\Models\Inventaire::STATUT_TERMINE)
                                <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full bg-emerald-100 text-emerald-700">Terminé</span>
                                @else
                                <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full bg-amber-100 text-amber-700">En cours</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-slate-600">{{ $inv->nb_ecarts ?? 0 }} écart(s)</td>
                            <td class="px-4 py-3 text-right">
                                <a href="{{ route('inventaire.show', $inv) }}" class="p-2 rounded-lg text-slate-500 hover:text-blue-600 hover:bg-blue-50 transition-colors inline-flex" title="Voir / Saisir">
                                    <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>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-slate-500">Aucun inventaire. Cliquez sur « Nouvel inventaire » pour en créer un.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($inventaires->hasPages())
            <div class="mt-4 px-4">
                {{ $inventaires->links() }}
            </div>
            @endif
        </div>
    </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" @click.stop 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">Nouvel inventaire</h3>
                    <p class="text-sm text-slate-500 mt-1">Lancer un inventaire physique pour un magasin</p>
                </div>
                <form action="{{ route('inventaire.store') }}" method="POST" class="p-6 space-y-5">
                    @csrf
                    <x-form-group label="Magasin" :required="true">
                        <select name="magasin_id" required class="form-input w-full">
                            <option value="">Sélectionner un magasin</option>
                            @foreach($magasins as $m)
                            <option value="{{ $m->id }}" {{ old('magasin_id') == $m->id ? 'selected' : '' }}>{{ $m->nom }}</option>
                            @endforeach
                        </select>
                    </x-form-group>
                    <x-form-group label="Date" :required="true">
                        <input type="date" name="date_inventaire" value="{{ old('date_inventaire', date('Y-m-d')) }}" required class="form-input">
                    </x-form-group>
                    <div class="flex gap-3 pt-2">
                        <button type="submit" class="form-btn-primary flex-1">
                            <svg class="w-4 h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                            Démarrer l'inventaire
                        </button>
                        <button type="button" @click="showModal = false" class="form-btn-secondary">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function inventaireManager(openModalFromErrors = false) {
    return {
        showModal: openModalFromErrors,
        openModal() {
            this.showModal = true;
        }
    };
}
</script>
@endsection