@extends('layouts.user')

@section('title', 'My Bookings')

@section('content')
<div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    @include('user.sidebar')

    <!-- Main Content -->
    <main class="flex-1 overflow-auto">
        <!-- Top Header -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="px-8 py-4 flex items-center justify-between">
                <h1 class="text-2xl font-bold text-gray-900">📋 My Bookings</h1>
                <a href="{{ route('home') }}" target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg bg-white border border-gray-200 hover:border-emerald-300 hover:bg-emerald-50 text-gray-600 hover:text-emerald-700 transition-all">
                    <span>View Website</span>
                    <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                </a>
            </div>
        </header>

        <!-- Bookings Content -->
        <div class="p-8">
            <!-- Filters -->
            <div class="mb-6 flex gap-4">
                <a href="?status=" class="px-4 py-2 rounded-lg {{ !request('status') ? 'bg-blue-600 text-white' : 'bg-white text-gray-900' }} font-medium">All</a>
                <a href="?status=confirmed" class="px-4 py-2 rounded-lg {{ request('status') === 'confirmed' ? 'bg-green-600 text-white' : 'bg-white text-gray-900' }} font-medium">Confirmed</a>
                <a href="?status=pending" class="px-4 py-2 rounded-lg {{ request('status') === 'pending' ? 'bg-yellow-600 text-white' : 'bg-white text-gray-900' }} font-medium">Pending</a>
                <a href="?status=cancelled" class="px-4 py-2 rounded-lg {{ request('status') === 'cancelled' ? 'bg-red-600 text-white' : 'bg-white text-gray-900' }} font-medium">Cancelled</a>
            </div>

            <!-- Bookings Table -->
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Package</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Reference</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Travel Date</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">People</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Amount</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Status</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse ($bookings as $booking)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4">
                                        <p class="font-medium text-gray-900">{{ $booking->package->title }}</p>
                                    </td>
                                    <td class="px-6 py-4">
                                        <code class="bg-gray-100 px-2 py-1 rounded text-sm text-gray-600">{{ $booking->booking_reference }}</code>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500">
                                        {{ $booking->travel_date->format('M d, Y') }}
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500">
                                        {{ $booking->number_of_people }}
                                    </td>
                                    <td class="px-6 py-4 text-sm font-medium text-gray-900">
                                        ${{ number_format($booking->total_price, 2) }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex px-3 py-1 rounded-full text-sm font-medium
                                            {{ $booking->status === 'confirmed' ? 'bg-green-100 text-green-800' : ($booking->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ ucfirst($booking->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-3 text-sm">
                                            <a href="{{ route('user.booking.detail', $booking->booking_reference) }}" 
                                               class="text-blue-600 hover:text-blue-800 font-medium">View</a>

                                            @if($booking->payment_status === 'paid')
                                                <a href="{{ route('user.booking.invoice', $booking->booking_reference) }}" 
                                                   class="text-emerald-600 hover:text-emerald-800 font-medium">Invoice</a>
                                                
                                                @if($booking->status === 'confirmed')
                                                    <a href="{{ route('user.booking.ticket', $booking->booking_reference) }}" 
                                                       class="text-purple-600 hover:text-purple-800 font-medium">Ticket</a>
                                                @endif
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-6 py-12 text-center">
                                        <div class="text-gray-500">
                                            <p class="text-lg mb-2">No bookings yet</p>
                                            <a href="{{ route('packages.index') }}" class="text-blue-600 hover:text-blue-900 font-medium">Browse packages and book now</a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pagination -->
            <div class="mt-6">
                {{ $bookings->links() }}
            </div>
        </div>
    </main>
</div>
@endsection