@extends('layouts.public-booking', ['title' => 'Select Staff - 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' => 2])
            <x-ui.card title="Select Staff" description="Choose a preferred professional, or continue with any available staff member.">
                <div class="grid gap-4 sm:grid-cols-2">
                    @forelse ($staff as $index => $member)
                        <article class="rounded-lg border {{ $index === 0 ? 'border-booklio-primary ring-4 ring-blue-50' : 'border-booklio-border' }} bg-white p-4 shadow-soft">
                            <div class="flex items-center gap-4">
                                <img src="{{ $member['image'] }}" alt="{{ $member['name'] }}" class="h-16 w-16 rounded-2xl object-cover">
                                <div class="min-w-0 flex-1">
                                    <h2 class="truncate text-base font-extrabold text-booklio-dark">{{ $member['name'] }}</h2>
                                    <p class="mt-1 text-sm font-semibold text-booklio-muted">{{ $member['role'] }}</p>
                                    <x-ui.badge class="mt-2" variant="success">{{ $member['status'] }}</x-ui.badge>
                                </div>
                            </div>
                            <x-ui.button class="mt-4 w-full" href="{{ route('public.booking.date-time', ['business_slug' => $businessSlug, 'service_id' => $service->id, 'staff_profile_id' => $member['id']]) }}">Select</x-ui.button>
                        </article>
                    @empty
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-sm font-semibold text-booklio-muted sm:col-span-2">No staff are available for this service yet.</div>
                    @endforelse
                    <article class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4">
                        <div class="flex h-full flex-col justify-between gap-4">
                            <div>
                                <h2 class="text-base font-extrabold text-booklio-dark">Any available staff</h2>
                                <p class="mt-2 text-sm leading-6 text-booklio-muted">Book the earliest available professional for this service.</p>
                            </div>
                            <x-ui.button variant="secondary" class="w-full" href="{{ route('public.booking.date-time', ['business_slug' => $businessSlug, 'service_id' => $service->id, 'staff_profile_id' => 'any']) }}">Choose fastest</x-ui.button>
                        </div>
                    </article>
                </div>
            </x-ui.card>
        </div>

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