@extends('layouts.site')
@section('title', 'Secure Payment')

@section('content')
    <section class="bg-slate-950 py-12 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Secure checkout</p>
        <h1 class="mt-2 font-serif text-3xl font-bold">Pay for {{ $description }}</h1>
    </section>

    <section class="mx-auto max-w-lg px-4 py-12 sm:px-6">
        <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
            <dl class="space-y-2.5 text-sm">
                <div class="flex justify-between"><dt class="text-slate-400">Reference</dt><dd class="font-mono font-bold text-slate-800">{{ $code }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">Guest</dt><dd class="font-bold text-slate-800">{{ $entity->customer->name ?? 'Guest' }}</dd></div>
                <div class="flex justify-between border-t border-slate-100 pt-2.5"><dt class="font-bold text-slate-800">Outstanding balance</dt>
                    <dd class="font-extrabold {{ $balance > 0 ? 'text-rose-600' : 'text-emerald-600' }}">@money(max($balance, 0))</dd></div>
            </dl>

            @if ($balance <= 0)
                <p class="mt-6 rounded-2xl bg-emerald-50 py-4 text-center text-sm font-bold text-emerald-700">✓ Fully paid — nothing left to pay. Thank you!</p>
            @elseif (empty($gateways))
                <p class="mt-6 rounded-2xl bg-amber-50 p-4 text-center text-sm font-semibold text-amber-800">
                    Online payment is not yet activated. Please pay at the front desk or by bank transfer — contact us on {{ \App\Models\Setting::get('phone') }}.
                </p>
            @else
                <form method="POST" action="{{ route('pay.init', ['type' => $type, 'code' => $code]) }}" class="mt-6 space-y-4">
                    @csrf
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Amount to pay ({{ $CUR }})</span>
                        <input type="number" step="0.01" min="100" max="{{ $balance }}" name="amount" value="{{ $balance }}" required class="w-full rounded-xl border-slate-200"></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Email for your receipt</span>
                        <input type="email" name="email" value="{{ $entity->customer->email ?? (auth()->user()->email ?? '') }}" required class="w-full rounded-xl border-slate-200"></label>

                    <div class="space-y-2.5">
                        @if (in_array('paystack', $gateways))
                            <button name="gateway" value="paystack" class="flex w-full items-center justify-center gap-2 rounded-xl bg-[#0aa5c2] py-4 text-sm font-extrabold text-white hover:brightness-110">
                                Pay with Paystack →
                            </button>
                        @endif
                        @if (in_array('flutterwave', $gateways))
                            <button name="gateway" value="flutterwave" class="flex w-full items-center justify-center gap-2 rounded-xl bg-[#f5a623] py-4 text-sm font-extrabold text-slate-950 hover:brightness-110">
                                Pay with Flutterwave →
                            </button>
                        @endif
                    </div>
                    <p class="text-center text-xs text-slate-400">🔒 Payments are processed securely by the gateway. We never see your card details.</p>
                </form>
            @endif
        </div>
    </section>
@endsection
