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

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

@section('content')
    <div class="mx-auto max-w-2xl">
        <x-ui.card title="Cancel Appointment" description="Please confirm cancellation. The business may apply its cancellation policy.">
            <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Appointment</p>
                <p class="mt-2 text-sm font-extrabold text-booklio-dark">{{ $selected['service'] }} with {{ $selected['staff'] }}</p>
                <p class="mt-1 text-sm font-semibold text-booklio-muted">{{ $selected['date'] }} at {{ $selected['time'] }} - Booking {{ $selected['booking_id'] }}</p>
            </div>

            <form method="POST" action="{{ route('public.booking.cancel.store', ['business_slug' => $businessSlug, 'token' => $token]) }}">
                @csrf
                <div class="mt-5">
                    <label class="mb-1.5 block text-sm font-bold text-slate-700">Cancellation reason</label>
                    <select name="cancel_reason" class="h-11 w-full rounded-lg border border-booklio-border bg-white px-3.5 text-sm font-medium text-booklio-dark shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                        <option>Schedule conflict</option>
                        <option>Booked by mistake</option>
                        <option>Need another service</option>
                        <option>Other</option>
                    </select>
                </div>
                <x-form.textarea class="mt-4" name="cancel_note" label="Notes optional" placeholder="Add a short note..." rows="4" />
                <div class="mt-5 rounded-lg border border-amber-100 bg-amber-50 p-4">
                    <p class="text-sm font-extrabold text-amber-700">Cancellation policy</p>
                    <p class="mt-1 text-sm leading-6 text-amber-700">Appointments cancelled inside 6 hours may require business approval.</p>
                </div>
                <div class="mt-6 grid gap-3 sm:grid-cols-2">
                    <x-ui.button type="submit" variant="danger">Cancel appointment</x-ui.button>
                    <x-ui.button variant="secondary" href="{{ route('public.booking.confirmation', ['business_slug' => $businessSlug, 'token' => $appointment->reschedule_token]) }}">Keep booking</x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>
@endsection