@extends('layouts.public-booking', ['title' => 'Reschedule Appointment - Booklio'])

@include('public.booking.partials.data')

@section('content')
    <div class="mx-auto max-w-4xl space-y-5">
        <x-ui.card title="Reschedule Appointment" description="Choose a new date and time for your existing booking.">
            @if ($errors->any())
                <div class="mb-5 rounded-lg border border-red-100 bg-red-50 px-4 py-3 text-sm font-bold text-red-700">
                    {{ $errors->first() }}
                </div>
            @endif

            <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Current appointment</p>
                <p class="mt-2 text-sm font-extrabold text-booklio-dark">{{ $selected['service'] }} with {{ $selected['staff'] }}</p>
                <p class="mt-1 text-sm font-semibold text-booklio-muted">{{ $selected['date'] }} at {{ $selected['time'] }} - Booking {{ $selected['booking_id'] }}</p>
            </div>

            <form method="POST" action="{{ route('public.booking.reschedule.update', ['business_slug' => $businessSlug, 'token' => $token]) }}" class="mt-5 grid gap-5 lg:grid-cols-2">
                @csrf
                <div>
                    <h3 class="text-sm font-extrabold text-booklio-dark">New date</h3>
                    <div class="mt-3 grid grid-cols-3 gap-3">
                        @foreach ($dateOptions->take(6) as $dateOption)
                            <label class="cursor-pointer rounded-lg border border-booklio-border bg-white px-4 py-3 text-center text-sm font-extrabold shadow-soft hover:border-blue-200 hover:bg-blue-50">
                                <input type="radio" name="appointment_date" value="{{ $dateOption['value'] }}" class="sr-only" @checked($loop->first)>
                                {{ $dateOption['date']->format('M d') }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-extrabold text-booklio-dark">New time</h3>
                    <div class="mt-3 grid grid-cols-2 gap-3">
                        @forelse ($slotGroups as $group => $slots)
                            @foreach ($slots as $slotValue => $slotLabel)
                                <label class="cursor-pointer rounded-lg border border-booklio-border bg-white px-4 py-3 text-center text-sm font-extrabold shadow-soft hover:border-blue-200 hover:bg-blue-50">
                                    <input type="radio" name="appointment_time" value="{{ $slotValue }}" class="sr-only" @checked($loop->parent->first && $loop->first)>
                                    {{ $slotLabel }}
                                </label>
                            @endforeach
                        @empty
                            <p class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4 text-sm font-semibold text-booklio-muted">No slots available today.</p>
                        @endforelse
                    </div>
                </div>
                <div class="grid gap-3 sm:grid-cols-2 lg:col-span-2">
                    <x-ui.button type="submit">Confirm reschedule</x-ui.button>
                    <x-ui.button variant="secondary" href="{{ route('public.booking.confirmation', ['business_slug' => $businessSlug, 'token' => $appointment->reschedule_token]) }}">Keep current booking</x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>
@endsection