@extends('layouts.public-booking', ['title' => 'Select Service - 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' => 1])
            <x-ui.card title="Select Service" description="Choose the service you want to book. Pricing and duration are shown before confirmation.">
                <div class="space-y-4">
                    @foreach ($services as $index => $service)
                        <article class="overflow-hidden rounded-lg border {{ $index === 0 ? 'border-booklio-primary ring-4 ring-blue-50' : 'border-booklio-border' }} bg-white shadow-soft">
                            <div class="grid gap-0 sm:grid-cols-[160px_minmax(0,1fr)]">
                                <img src="{{ $service['image'] }}" alt="{{ $service['name'] }}" class="h-40 w-full object-cover sm:h-full">
                                <div class="p-4">
                                    <div class="flex items-start justify-between gap-3">
                                        <div>
                                            <h2 class="text-lg font-extrabold text-booklio-dark">{{ $service['name'] }}</h2>
                                            <p class="mt-2 text-sm leading-6 text-booklio-muted">{{ $service['description'] }}</p>
                                        </div>
                                        <p class="shrink-0 text-xl font-extrabold text-booklio-primary">{{ $service['price'] }}</p>
                                    </div>
                                    <div class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                        <span class="text-sm font-bold text-booklio-muted">{{ $service['duration'] }}</span>
                                        <x-ui.button class="w-full sm:w-auto" href="{{ route('public.booking.staff', ['business_slug' => $businessSlug, 'service_id' => $service['id']]) }}">Select</x-ui.button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </x-ui.card>
        </div>

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