<x-app-layout>
    <div class="container mx-auto my-6">
        <h2 class="text-2xl font-semibold mb-4">Create Booking</h2>

        <div class="mb-4">
            <a href="{{ route('admin.calendar') }}" class="text-blue-600 hover:underline">← Back to calendar</a>
        </div>

        {{-- No Carbon here; everything is preformatted in the controller --}}
        <div class="border rounded p-4 bg-white shadow-sm">
            <p class="mb-1"><span class="font-semibold">When:</span> {{ $weekdayName }} {{ $prettyDate }} at {{ $prettyTime }}</p>
            <p class="mb-1"><span class="font-semibold">Date (value to save):</span> {{ $date }}</p>
            <p class="mb-1"><span class="font-semibold">Slot ID:</span> {{ $slot->id }}</p>
        </div>

        {{-- Next step we'll add a real form. For now, just show the prefilled info. --}}
        <div class="mt-6 text-sm text-gray-600">
            This page is prefilled from the calendar selection. Next step: add a simple form to collect
            the student's name and (optionally) a message, then save the booking.
        </div>
		
		<form action="{{ route('admin.bookings.store') }}" method="POST" class="mt-6 border rounded p-4 bg-white shadow-sm space-y-4">
			@csrf

			{{-- Keep the selected date/slot --}}
			<input type="hidden" name="date" value="{{ $date }}">
			<input type="hidden" name="slot_id" value="{{ $slot->id }}">

			{{-- Validation summary (optional) --}}
			@if ($errors->any())
				<div class="p-3 rounded bg-red-50 text-red-700 text-sm">
					<ul class="list-disc pl-5">
						@foreach ($errors->all() as $err)
							<li>{{ $err }}</li>
						@endforeach
					</ul>
				</div>
			@endif

			<div>
				<label class="block text-sm font-medium mb-1" for="student_name">Student name</label>
				<input id="student_name" name="student_name" type="text" required
					   value="{{ old('student_name') }}"
					   class="w-full border rounded px-3 py-2" />
				@error('student_name') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
			</div>

			<div>
				<label class="block text-sm font-medium mb-1" for="booked_from_page">Booked from page (optional)</label>
				<input id="booked_from_page" name="booked_from_page" type="text"
					   value="{{ old('booked_from_page') }}"
					   class="w-full border rounded px-3 py-2" />
				@error('booked_from_page') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
			</div>

			<div>
				<label class="block text-sm font-medium mb-1" for="message">Message (optional)</label>
				<textarea id="message" name="message" rows="4"
						  class="w-full border rounded px-3 py-2">{{ old('message') }}</textarea>
				@error('message') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
			</div>

			<div class="flex items-center gap-3">
				<button type="submit" class="px-4 py-2 rounded bg-indigo-600 text-black hover:bg-indigo-700">
					Confirm booking
				</button>
				<a href="{{ route('admin.calendar') }}" class="text-blue-600 hover:underline">Cancel</a>
			</div>
		</form>		
		
		
    </div>
</x-app-layout>