@extends('account.layout')

@section('account_content')
<div class="space-y-8">
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Booking History</h2>
        <p class="mt-2 text-base text-gray-500">View your past bookings</p>
    </div>
    <hr class="border-t border-gray-200">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-4 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Booking #</th>
                    <th scope="col" class="px-6 py-4 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    <th scope="col" class="px-6 py-4 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th scope="col" class="px-6 py-4 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Total</th>
                    <th scope="col" class="px-6 py-4 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($bookings as $booking)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-base font-medium text-gray-900">#{{ $booking->confirmation_code }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-base text-gray-500">{{ $booking->booking_date?->format('M d, Y') }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                {{ ucfirst($booking->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-base text-gray-500">₹{{ number_format($booking->total_amount, 2) }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-base text-gray-500">
                            <a href="{{ route('account.invoice', $booking->id) }}" class="text-[#E0115F] hover:text-[#C01050]">View Invoice</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-6 text-center text-base text-gray-500">No bookings found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection