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

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

        {{-- Prefilled details (no Carbon in Blade) --}}
        <div class="border rounded p-4 bg-white shadow-sm space-y-1 mb-6">
            <p><span class="font-semibold">When:</span> {{ $weekdayName }} {{ $prettyDate }} at {{ $prettyTime }}</p>
            <p><span class="font-semibold">Start date (value to save):</span> {{ $date }}</p>
            <p><span class="font-semibold">Slot ID:</span> {{ $slot->id }}</p>
        </div>

        {{-- Adjust weeks via GET so no new route is needed yet --}}
        <form action="{{ route('admin.bookings.series.create') }}" method="GET" class="border rounded p-4 bg-white shadow-sm space-y-4">
            <input type="hidden" name="date" value="{{ $date }}">
            <input type="hidden" name="slot_id" value="{{ $slot->id }}">

            <div>
                <label for="weeks" class="block text-sm font-medium mb-1">How many weeks?</label>
                <input id="weeks" name="weeks" type="number" min="1" max="52" value="{{ $weeks }}" class="w-32 border rounded px-3 py-2">
                <p class="text-xs text-gray-600 mt-1">We’ll repeat this weekday/time for the next N weeks.</p>
            </div>

            <div class="flex items-center gap-3">
                <button type="submit" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">
                    Update weeks
                </button>
                <a href="{{ route('admin.calendar') }}" class="text-blue-600 hover:underline">Cancel</a>
            </div>
        </form>
		
		<form action="{{ route('admin.bookings.series.store') }}" method="POST" class="mt-6 border rounded p-4 bg-white shadow-sm space-y-4">
			@csrf

			{{-- Prefilled from the page --}}
			<input type="hidden" name="date" value="{{ $date }}">
			<input type="hidden" name="slot_id" value="{{ $slot->id }}">
			<input type="hidden" name="weeks" value="{{ $weeks }}">

			@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

			<p class="text-sm text-gray-700">
				This will create <strong>{{ $weeks }}</strong> weekly bookings (status: <em>Booked</em>) starting
				{{ $weekdayName }} {{ $prettyDate }} at {{ $prettyTime }}.
			</p>

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

        <div class="mt-6 text-sm text-gray-600">
            Next step (coming up): we’ll add a <em>Confirm series</em> POST action that saves
            {{ $weeks }} weekly bookings as <strong>Booked</strong> (no student name) with
            <code>booked_from_page = 'admin:block-series'</code>.
            Later we can add a checkbox for “until end of academic year.”
        </div>
    </div>
</x-app-layout>