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

<aside class="min-w-0 rounded-lg border border-booklio-border bg-white p-5 shadow-card lg:sticky lg:top-6">
    <div class="mb-4">
        <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Booking Summary</p>
        <h2 class="mt-2 text-lg font-extrabold text-booklio-dark">{{ $business['name'] }}</h2>
    </div>
    <div class="space-y-3 text-sm">
        @foreach ([['Service', $selected['service']], ['Staff', $selected['staff']], ['Date', $selected['date']], ['Time', $selected['time']], ['Duration', $selected['duration']]] as $row)
            <div class="flex items-center justify-between gap-3 border-b border-booklio-border pb-3">
                <span class="font-bold text-booklio-muted">{{ $row[0] }}</span>
                <span class="text-right font-extrabold text-booklio-dark">{{ $row[1] }}</span>
            </div>
        @endforeach
        <div class="flex items-center justify-between gap-3 pt-1">
            <span class="font-bold text-booklio-muted">Total</span>
            <span class="text-xl font-extrabold text-booklio-primary">{{ $selected['price'] }}</span>
        </div>
    </div>
    <div class="mt-5 rounded-lg bg-blue-50 p-4">
        <p class="text-sm font-extrabold text-booklio-primary">Instant confirmation</p>
        <p class="mt-1 text-xs leading-5 text-slate-600">You will receive email and WhatsApp updates after booking.</p>
    </div>
</aside>