@extends('layouts.public')

@section('title', __('booking.reservation_fee_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">
        <h1 class="text-2xl font-extrabold text-ink-900">{{ __('booking.reservation_fee_title') }}</h1>

        <p class="mt-3 text-ink-600">
            {{ __($appointment->isOnline() ? 'booking.reservation_fee_online_notice' : 'booking.reservation_fee_onsite_notice', [
                'amount' => number_format((float) $appointment->fee_amount, 2),
                'currency' => $appointment->fee_currency,
            ]) }}
        </p>

        <div class="mt-4 rounded-2xl bg-amber-50 p-4 text-sm text-amber-800">
            <p class="font-semibold">{{ __('booking.reservation_fee_non_refundable') }}</p>
            <p class="mt-1">
                {{ __('booking.reservation_fee_reschedule_notice', [
                    'max' => \App\Models\Appointment::MAX_RESCHEDULES,
                    'hours' => \App\Models\Appointment::RESCHEDULE_CUTOFF_HOURS,
                ]) }}
            </p>
        </div>

        <div class="mt-6 rounded-2xl bg-ink-50 p-5">
            <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="numeric font-semibold text-ink-900">{{ \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>
            </dl>
        </div>

        @if ($errors->any())
            <div class="mt-4 rounded-2xl bg-red-50 p-4 text-sm text-red-700">
                {{ $errors->first() }}
            </div>
        @endif

        <h2 class="mt-6 text-sm font-bold uppercase tracking-wide text-ink-500">{{ __('booking.choose_payment_method') }}</h2>

        @if ($brands->isEmpty())
            <p class="mt-3 rounded-2xl bg-ink-50 p-4 text-sm text-ink-500">{{ __('booking.payment_not_configured') }}</p>
        @else
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                @foreach ($brands as $brand)
                    <a href="{{ route('booking.pay.checkout', ['appointment' => $appointment->qr_token, 'brand' => $brand]) }}"
                       class="btn-brand block text-center no-underline">
                        {{ __('booking.pay_with', ['brand' => __('booking.brand_' . $brand)]) }}
                    </a>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endsection