@extends('layouts.public')

@section('title', ($succeeded ? __('booking.payment_success_title') : __('booking.payment_failed_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">
        @if ($succeeded)
            <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.payment_success_title') }}</h1>
            <p class="mt-2 text-ink-500">{{ __('booking.payment_success_subtitle') }}</p>

            <a href="{{ route('booking.confirmation', $appointment->qr_token) }}" class="btn-brand mt-6 inline-block no-underline">
                {{ __('booking.details_title') }}
            </a>
        @else
            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100 text-3xl">✕</div>
            <h1 class="mt-4 text-2xl font-extrabold text-ink-900">{{ __('booking.payment_failed_title') }}</h1>
            <p class="mt-2 text-ink-500">{{ __('booking.payment_failed_subtitle') }}</p>

            <a href="{{ route('booking.pay', $appointment->qr_token) }}" class="btn-brand mt-6 inline-block no-underline">
                {{ __('booking.payment_try_again') }}
            </a>
        @endif
    </div>
</div>
@endsection