@extends('layouts.app')

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

@section('content')
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
    <div class="px-4 sm:px-6 py-4 border-b border-slate-200">
        <h2 class="font-semibold text-slate-800 text-lg">État des stocks par magasin</h2>
        <p class="text-sm text-slate-500 mt-1">Vue d'ensemble des quantités disponibles</p>
    </div>
    <div class="overflow-x-auto">
        <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">Magasin</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">Seuil alerte</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($stocks as $stock)
                <tr class="hover:bg-slate-50/50">
                    <td class="px-4 py-3 font-medium text-slate-800">{{ $stock->magasin?->nom ?? '-' }}</td>
                    <td class="px-4 py-3 text-slate-600">{{ $stock->produit?->designation ?? '-' }}</td>
                    <td class="px-4 py-3 font-semibold text-slate-800">{{ $stock->quantite ?? 0 }}</td>
                    <td class="px-4 py-3 text-slate-600">{{ $stock->seuil_alerte ?? 0 }}</td>

                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-4 py-8 text-center text-slate-500">Aucun stock.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($stocks->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">{{ $stocks->firstItem() }}</span> à <span class="font-medium">{{ $stocks->lastItem() }}</span> sur <span class="font-medium">{{ $stocks->total() }}</span> stocks
        </p>
        @if($stocks->hasPages())
        <div class="flex gap-3">
            @if($stocks->onFirstPage())
            <span class="px-4 py-2 text-slate-400 text-sm cursor-not-allowed">Précédent</span>
            @else
            <a href="{{ $stocks->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 {{ $stocks->currentPage() }} / {{ $stocks->lastPage() }}</span>
            @if($stocks->hasMorePages())
            <a href="{{ $stocks->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
</div>
@endsection
