@extends('layouts.public-booking', ['title' => 'Customer Details - 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' => 4])
            <x-ui.card title="Customer Details" description="Enter your contact details so the business can confirm your appointment.">
                <form method="POST" action="{{ route('public.booking.details.store', $businessSlug) }}" class="space-y-4">
                    @csrf
                    <input type="hidden" name="service_id" value="{{ $selection['service_id'] }}">
                    <input type="hidden" name="staff_profile_id" value="{{ $selection['staff_profile_id'] }}">
                    <input type="hidden" name="appointment_date" value="{{ $selection['appointment_date'] }}">
                    <input type="hidden" name="appointment_time" value="{{ $selection['appointment_time'] }}">

                    <x-form.input name="customer_name" label="Name" :value="$customerDetails['customer_name'] ?? ''" placeholder="Your full name" />
                    <x-form.input name="customer_phone" label="Phone" :value="$customerDetails['customer_phone'] ?? ''" placeholder="+1 555 000 0000" />
                    <x-form.input name="customer_email" type="email" label="Email optional" :value="$customerDetails['customer_email'] ?? ''" placeholder="you@example.com" />
                    <x-form.textarea name="notes" label="Notes optional" :value="$customerDetails['notes'] ?? ''" placeholder="Add anything the business should know..." rows="4" />
                    <x-ui.button type="submit" class="w-full">Continue to summary</x-ui.button>
                </form>
            </x-ui.card>
        </div>

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