@extends('layouts.public-booking', ['title' => 'Booking Confirmed - Booklio'])

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

@section('content')
    <section class="mx-auto max-w-2xl rounded-lg border border-booklio-border bg-white p-6 text-center shadow-card sm:p-8">
        @if (session('status'))
            <div class="mb-5 rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif
        <span class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
            <x-ui.icon name="check" class="h-8 w-8" />
        </span>
        <h1 class="mt-5 text-3xl font-extrabold tracking-tight text-booklio-dark">{{ $appointment?->status_value === 'cancelled' ? 'Booking Cancelled' : 'Booking Confirmed' }}</h1>
        <p class="mt-2 text-sm leading-6 text-booklio-muted">Your appointment has been scheduled. A WhatsApp confirmation note and email reminder will be sent shortly.</p>

        <div class="mt-6 rounded-lg border border-booklio-border bg-slate-50 p-4 text-left">
            <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Booking ID</p>
            <p class="mt-1 text-xl font-extrabold text-booklio-primary">{{ $selected['booking_id'] }}</p>
            <div class="mt-4 grid gap-3 sm:grid-cols-2">
                @foreach ([['Service', $selected['service']], ['Staff', $selected['staff']], ['Date/time', $selected['date'] . ' - ' . $selected['time']], ['Customer', $selected['customer']]] as $row)
                    <div>
                        <p class="text-xs font-bold text-booklio-muted">{{ $row[0] }}</p>
                        <p class="mt-1 text-sm font-extrabold text-booklio-dark">{{ $row[1] }}</p>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="mt-6 grid gap-3 sm:grid-cols-2">
            <x-ui.button data-booklio-placeholder="Calendar file generation will be connected to the booking confirmation backend.">Add to calendar</x-ui.button>
            <x-ui.button variant="secondary" href="{{ route('public.booking.profile', $businessSlug) }}">Back to business page</x-ui.button>
        </div>
        @if ($appointment)
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                <x-ui.button variant="secondary" href="{{ route('public.booking.reschedule', ['business_slug' => $businessSlug, 'token' => $appointment->reschedule_token]) }}">Reschedule</x-ui.button>
                <x-ui.button variant="danger" href="{{ route('public.booking.cancel', ['business_slug' => $businessSlug, 'token' => $appointment->cancel_token]) }}">Cancel</x-ui.button>
            </div>
        @endif
    </section>
@endsection