<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Gestión de Reservas') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            
            <!-- Filters -->
            <div class="mb-6 flex gap-4">
                <a href="{{ route('reservations.index', ['status' => 'all']) }}" class="px-4 py-2 rounded-lg text-sm font-bold {{ request('status', 'all') == 'all' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600 border' }}">Todas</a>
                <a href="{{ route('reservations.index', ['status' => 'pending']) }}" class="px-4 py-2 rounded-lg text-sm font-bold {{ request('status') == 'pending' ? 'bg-amber-500 text-white' : 'bg-white text-gray-600 border' }}">Pendientes</a>
                <a href="{{ route('reservations.index', ['status' => 'confirmed']) }}" class="px-4 py-2 rounded-lg text-sm font-bold {{ request('status') == 'confirmed' ? 'bg-emerald-500 text-white' : 'bg-white text-gray-600 border' }}">Confirmadas</a>
            </div>



            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha / Expira</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Producto</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cant / Total</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse($reservations as $reservation)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="block font-bold">{{ $reservation->created_at->format('d/m/Y H:i') }}</span>
                                        <span class="text-xs text-rose-500 font-medium">Exp: {{ $reservation->expires_at ? $reservation->expires_at->format('H:i') : 'N/A' }}</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-bold text-gray-900 dark:text-white">{{ $reservation->client->name }}</div>
                                        <div class="text-xs text-gray-500">{{ $reservation->client->document_number }} - {{ $reservation->client->phone }}</div>
                                    </td>
                                    <td class="px-6 py-4 text-sm">
                                        @foreach($reservation->items as $item)
                                            <div class="flex justify-between gap-4 border-b border-gray-50 last:border-0 py-0.5">
                                                <span class="text-gray-700 dark:text-gray-300">{{ $item->product?->name ?? 'Producto no encontrado' }}</span>
                                                <span class="font-bold text-gray-500 text-xs">x{{ $item->quantity }}</span>
                                            </div>
                                        @endforeach
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-black text-indigo-600">S/ {{ number_format($reservation->total_price, 2) }}</div>
                                        <div class="text-[10px] text-gray-400 font-bold uppercase tracking-tighter">{{ $reservation->items->count() }} items</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($reservation->status == 'pending')
                                            <span class="px-2 py-1 text-[10px] font-black uppercase rounded-full bg-amber-100 text-amber-700">Pendiente</span>
                                        @elseif($reservation->status == 'confirmed')
                                            <span class="px-2 py-1 text-[10px] font-black uppercase rounded-full bg-emerald-100 text-emerald-700">Confirmada</span>
                                        @else
                                            <span class="px-2 py-1 text-[10px] font-black uppercase rounded-full bg-slate-100 text-slate-700">{{ $reservation->status }}</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
                                        @if($reservation->status == 'pending')
                                            <form action="{{ route('reservations.confirm', $reservation) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" class="text-emerald-600 hover:text-emerald-900 bg-emerald-50 px-3 py-1 rounded-lg border border-emerald-200">Confirmar</button>
                                            </form>
                                            <form id="cancel-reservation-{{ $reservation->id }}" action="{{ route('reservations.cancel', $reservation) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="button" onclick="swalConfirm('cancel-reservation-{{ $reservation->id }}', '\u00bfCancelar esta reserva?', 'Si cancelas, el stock reservado se liberar\u00e1.', 'warning')" class="text-rose-600 hover:text-rose-900 bg-rose-50 px-3 py-1 rounded-lg border border-rose-200">Cancelar</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-10 text-center text-gray-500">No hay reservas que mostrar.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    
                    <div class="mt-4">
                        {{ $reservations->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
