@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>
                <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>

        <a href="{{ route('landing') }}" class="btn-brand mt-6 inline-block no-underline">{{ __('booking.back_to_home') }}</a>
    </div>
</div>
@endsection