@extends('layouts.public')

@section('title', __('booking.confirmed_title') . ' — ' . config('app.name'))

@section('content')
<div class="container mx-auto max-w-2xl px-4 py-10 md:py-16">
    <div class="card-sc text-center">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-3xl">✓</div>
        <h1 class="mt-4 text-2xl font-extrabold text-ink-900">{{ __('booking.confirmed_title') }}</h1>
        <p class="mt-2 text-ink-500">{{ __('booking.confirmed_subtitle') }}</p>

        <div class="mt-6 rounded-2xl bg-ink-50 p-5 text-start">
            <h2 class="mb-3 text-sm font-bold uppercase tracking-wide text-ink-500">{{ __('booking.details_title') }}</h2>
            <dl class="grid gap-3 sm:grid-cols-2">
                <div>
                    <dt class="text-xs text-ink-400">{{ __('appointments.patient_name') }}</dt>
                    <dd class="font-semibold text-ink-900">{{ $appointment->patient_name }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-ink-400">{{ __('appointments.appointment_date') }}</dt>
                    <dd class="font-semibold text-ink-900">{{ $appointment->appointment_date->translatedFormat('d M, Y') }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-ink-400">{{ __('appointments.appointment_time') }}</dt>
                    <dd class="font-semibold text-ink-900 numeric">{{ \Carbon\Carbon::parse($appointment->appointment_time)->format('h:i A') }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-ink-400">{{ __('time_slots.consultation_type') }}</dt>
                    <dd class="font-semibold text-ink-900">{{ __('appointments.types.' . $appointment->type) }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-ink-400">{{ __('patients.consultant') }}</dt>
                    <dd class="font-semibold text-ink-900">{{ $appointment->consultant->name }}</dd>
                </div>
                @if ($appointment->purpose_label)
                    <div>
                        <dt class="text-xs text-ink-400">{{ __('appointments.purpose') }}</dt>
                        <dd class="font-semibold text-ink-900">{{ $appointment->purpose_label }}</dd>
                    </div>
                @endif
                <div class="sm:col-span-2">
                    <dt class="text-xs text-ink-400">{{ __('appointments.consultation_topic') }}</dt>
                    <dd class="font-semibold text-ink-900">{{ $appointment->consultation_topic }}</dd>
                </div>
            </dl>

            @if ($appointment->isOnline() && $appointment->zoom_join_url)
                <div class="mt-4 border-t border-ink-200 pt-4">
                    <p class="text-xs text-ink-400">{{ __('booking.zoom_link_label') }}</p>
                    <a href="{{ $appointment->zoom_join_url }}" target="_blank" class="break-all font-semibold text-brand-700 no-underline hover:underline">
                        {{ $appointment->zoom_join_url }}
                    </a>
                </div>
            @elseif (! $appointment->isOnline() && $appointment->consultant->clinicMapUrl())
                <div class="mt-4 border-t border-ink-200 pt-4">
                    <p class="text-xs text-ink-400">{{ __('booking.clinic_location_label') }}</p>
                    @if ($appointment->consultant->clinic_address)
                        <p class="font-semibold text-ink-900">{{ $appointment->consultant->clinic_address }}</p>
                    @endif
                    <a href="{{ $appointment->consultant->clinicMapUrl() }}" target="_blank" class="font-semibold text-brand-700 no-underline hover:underline">
                        {{ __('booking.clinic_location_label') }} <span class="rtl-flip">↗</span>
                    </a>
                </div>
            @endif
        </div>

        @if ($appointment->fee_amount > 0)
            <div class="mt-5 rounded-2xl bg-ink-50 p-4 text-start text-sm">
                <p class="flex items-center justify-between font-semibold text-ink-800">
                    <span>{{ __('booking.reservation_fee_title') }}</span>
                    <span class="numeric">{{ number_format((float) $appointment->fee_amount, 2) }} {{ $appointment->fee_currency }}</span>
                </p>
                <p class="mt-1 text-ink-500">{{ __('booking.reservation_fee_non_refundable') }}</p>
                <p class="mt-1 text-ink-500">
                    {{ __('booking.reservation_fee_reschedule_notice', [
                        'max' => \App\Models\Appointment::MAX_RESCHEDULES,
                        'hours' => \App\Models\Appointment::RESCHEDULE_CUTOFF_HOURS,
                    ]) }}
                </p>
            </div>
        @endif

        <div class="mt-6 flex flex-wrap justify-center gap-3">
            @if ($appointment->canSelfReschedule())
                <a href="{{ route('booking.reschedule.edit', $appointment->qr_token) }}" class="btn-soft inline-block no-underline">
                    {{ __('appointments.reschedule') }}
                </a>
            @endif
            <a href="{{ route('landing') }}" class="btn-brand inline-block no-underline">{{ __('booking.back_to_home') }}</a>
        </div>
    </div>
</div>
@endsection