@extends('layouts.applicant')

@section('title', 'Pay application fee')

@section('content')

    <div class="mb-6">
        <a href="{{ route('applicant.applications.show', $application) }}"
           class="inline-flex items-center gap-1.5 text-sm text-slate-500 transition hover:text-slate-900">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path fill-rule="evenodd" d="M17 10a1 1 0 0 1-1 1H6.4l3.3 3.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 1.4L6.4 9H16a1 1 0 0 1 1 1Z" clip-rule="evenodd"/>
            </svg>
            Back to application
        </a>
        <h1 class="mt-2 font-display text-3xl tracking-tight text-slate-900">Application fee</h1>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2">

            @if ($payment->isPaid())
                <x-card class="border-emerald-200 bg-emerald-50">
                    <div class="flex items-start gap-4">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white">
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                <path fill-rule="evenodd" d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0Zm-3.7-2.3a1 1 0 0 0-1.4-1.4L9 10.2 7.1 8.3a1 1 0 0 0-1.4 1.4l2.6 2.6a1 1 0 0 0 1.4 0l4.6-4.6Z" clip-rule="evenodd"/>
                            </svg>
                        </span>

                        <div>
                            <h2 class="text-lg font-semibold text-slate-900">Payment received</h2>
                            <p class="mt-1 text-sm text-slate-700">
                                We received {{ $payment->formattedAmount() }} on
                                {{ $payment->paid_at?->format('j F Y') }}.
                            </p>
                            <p class="mt-3 font-mono text-sm text-slate-600">{{ $payment->reference }}</p>

                            <div class="mt-5 flex flex-wrap gap-3">
                                <x-button :href="route('applicant.payments.receipt', $payment)" variant="outline">
                                    View receipt
                                </x-button>
                                <x-button :href="route('applicant.applications.wizard', [$application, 'review'])">
                                    Continue to review
                                </x-button>
                            </div>
                        </div>
                    </div>
                </x-card>
            @else
                @if ($errors->any())
                    <x-alert type="danger" class="mb-5">{{ $errors->first() }}</x-alert>
                @endif

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

                    <p class="mt-3 font-display text-4xl text-brand-700">
                        {{ money($application->applicationFee()) }}
                    </p>

                    <dl class="mt-5 space-y-2 border-t border-slate-100 pt-5 text-sm">
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-600">Application number</dt>
                            <dd class="font-mono text-slate-900">{{ $application->application_number }}</dd>
                        </div>
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-600">Payment reference</dt>
                            <dd class="font-mono text-slate-900">{{ $payment->reference }}</dd>
                        </div>
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-600">Status</dt>
                            <dd><x-status-badge :status="$payment->status" /></dd>
                        </div>
                    </dl>
                </x-card>

                @if ($instructions)
                    <x-card class="mt-5">
                        <h2 class="text-base font-semibold text-slate-900">How to pay</h2>
                        <pre class="mt-4 whitespace-pre-wrap rounded-lg border border-slate-200 bg-slate-50 p-5 font-sans text-sm leading-relaxed text-slate-700">{{ $instructions }}</pre>
                    </x-card>
                @endif

                <x-card class="mt-5">
                    <h2 class="text-base font-semibold text-slate-900">Choose a payment method</h2>

                    <form method="POST" action="{{ route('applicant.payments.initialize', $application) }}" class="mt-5">
                        @csrf

                        <fieldset class="space-y-3">
                            <legend class="sr-only">Payment method</legend>

                            @foreach ($providers as $value => $label)
                                <label class="flex cursor-pointer items-center gap-3 rounded-lg border border-slate-200 p-4 transition hover:bg-slate-50 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50">
                                    <input type="radio" name="provider" value="{{ $value }}"
                                           @checked($value === $payment->provider)
                                           class="h-4 w-4 border-slate-300 text-brand-700 focus:ring-brand-700">
                                    <span class="text-sm font-medium text-slate-800">{{ $label }}</span>
                                </label>
                            @endforeach
                        </fieldset>

                        <x-button type="submit" size="lg" class="mt-6 w-full sm:w-auto">Continue to pay</x-button>
                    </form>
                </x-card>
            @endif
        </div>

        <aside class="space-y-5">
            <x-card class="text-sm">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Important</h2>
                <ul class="mt-3 space-y-2 text-slate-600">
                    <li>Always quote your payment reference so we can match your payment.</li>
                    <li>Bank deposits are confirmed by our Finance Office within 1–2 working days.</li>
                    <li>The application fee is non-refundable.</li>
                </ul>
            </x-card>

            <x-card class="text-sm">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Payment queries</h2>
                <p class="mt-3 text-slate-600">
                    <a href="mailto:{{ setting('university_email') }}" class="text-brand-700 hover:underline">
                        {{ setting('university_email') }}
                    </a><br>
                    {{ setting('university_phone') }}
                </p>
            </x-card>
        </aside>
    </div>

@endsection
