@extends('layouts.public-booking', ['title' => 'Select Date and Time - Booklio'])

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

@section('content')
    <div class="grid min-w-0 gap-5 lg:grid-cols-[minmax(0,1fr)_340px]">
        <div class="min-w-0 space-y-5">
            @include('public.booking.partials.steps', ['current' => 3])
            <x-ui.card title="Select Date & Time" description="Pick an available slot. Times are shown in the business timezone.">
                <div class="overflow-x-auto pb-2 booklio-scrollbar">
                    <div class="flex min-w-max gap-3">
                        @foreach ($dateOptions as $dateOption)
                            <a href="{{ route('public.booking.date-time', ['business_slug' => $businessSlug, 'service_id' => $service->id, 'staff_profile_id' => $staffMember->id, 'date' => $dateOption['value']]) }}" class="w-20 rounded-lg border {{ $dateOption['value'] === $selectedDate->toDateString() ? 'border-booklio-primary bg-blue-50 text-booklio-primary' : 'border-booklio-border bg-white text-booklio-dark' }} p-3 text-center shadow-soft">
                                <span class="block text-xs font-bold">{{ $dateOption['date']->format('D') }}</span>
                                <span class="mt-1 block text-2xl font-extrabold">{{ $dateOption['date']->format('d') }}</span>
                                <span class="block text-xs font-semibold">{{ $dateOption['date']->format('M') }}</span>
                                <span class="mt-1 block text-[11px] font-bold text-booklio-muted">{{ $dateOption['slots_count'] }} slots</span>
                            </a>
                        @endforeach
                    </div>
                </div>

                <div class="mt-5 space-y-5">
                    @forelse ($slotGroups as $group => $slots)
                        <div>
                            <h3 class="text-sm font-extrabold text-booklio-dark">{{ $group }}</h3>
                            <div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
                                @foreach ($slots as $slotValue => $slotLabel)
                                    <a href="{{ route('public.booking.details', ['business_slug' => $businessSlug, 'service_id' => $service->id, 'staff_profile_id' => $staffMember->id, 'date' => $selectedDate->toDateString(), 'time' => $slotValue]) }}" class="rounded-lg border border-booklio-border bg-white px-4 py-3 text-center text-sm font-extrabold text-booklio-dark shadow-soft transition hover:border-blue-200 hover:bg-blue-50">{{ $slotLabel }}</a>
                                @endforeach
                            </div>
                        </div>
                    @empty
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4">
                            <p class="text-sm font-extrabold text-booklio-dark">No slots available</p>
                            <p class="mt-1 text-sm leading-6 text-booklio-muted">This date is full or outside working hours. Please choose another date.</p>
                        </div>
                    @endforelse
                </div>
            </x-ui.card>
        </div>

        @include('public.booking.partials.summary-card')
    </div>
@endsection