@php
    $payment = app(\App\Services\Payments\PaymentService::class)->forApplication($application);
@endphp

<x-card>
    <h2 class="text-base font-semibold text-slate-900">Application fee</h2>

    @if ($payment->isPaid())
        <x-alert type="success" class="mt-5">
            <p class="font-medium">Payment received</p>
            <p class="mt-0.5">
                {{ $payment->formattedAmount() }} paid on {{ $payment->paid_at?->format('j F Y') }}.
                Reference {{ $payment->reference }}.
            </p>
        </x-alert>
    @else
        <p class="mt-2 text-sm text-slate-600">
            Your application can be submitted once the application fee has been received.
        </p>

        <div class="mt-5 rounded-lg border border-slate-200 bg-slate-50 p-5">
            <dl class="space-y-2 text-sm">
                <div class="flex items-baseline justify-between gap-4">
                    <dt class="text-slate-600">Amount due</dt>
                    <dd class="font-display text-2xl text-slate-900">{{ money($application->applicationFee()) }}</dd>
                </div>
                <div class="flex items-baseline justify-between gap-4">
                    <dt class="text-slate-600">Application number</dt>
                    <dd class="font-mono text-slate-900">{{ $application->application_number }}</dd>
                </div>
            </dl>
        </div>
    @endif

    <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
        <x-button :href="route('applicant.applications.wizard', [$application, 'declaration'])" variant="outline">
            Back
        </x-button>

        <div class="flex gap-3">
            @unless ($payment->isPaid())
                <x-button :href="route('applicant.payments.show', $application)" size="lg">Go to payment</x-button>
            @endunless

            <x-button :href="route('applicant.applications.wizard', [$application, 'review'])"
                      :variant="$payment->isPaid() ? 'primary' : 'outline'" size="lg">
                Continue to review
            </x-button>
        </div>
    </div>
</x-card>
