@include('partials.flash')
<x-app-layout>
    <div class="container mx-auto my-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-2xl font-semibold">My bookings</h2>
            <a href="{{ route('student.calendar') }}" class="text-blue-600 hover:underline">← Back to calendar</a>
        </div>

        @if ($bookings->isEmpty())
            <div class="border rounded p-4 bg-white shadow-sm text-gray-700">
                You don’t have any upcoming bookings yet.
            </div>
        @else
            <div class="space-y-3">
                @foreach ($bookings as $b)
                    <div class="border rounded p-4 bg-white shadow-sm flex items-center justify-between">
                        <div>
                            <div class="font-semibold">{{ $b['weekday'] }} {{ $b['prettyDate'] }} at {{ $b['prettyTime'] }}</div>
                            <div class="text-sm text-gray-600">Status: {{ ucfirst($b['status']) }}</div>
                        </div>
                        {{-- Cancel action will be added in the next step --}}
						<a href="{{ route('student.bookings.cancel.confirm', ['booking' => $b['id']]) }}"
						   class="px-3 py-2 rounded bg-red-600 text-white hover:bg-red-700">
							Cancel
						</a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</x-app-layout>