@props(['openOnLoad' => false, 'suggested' => 10, 'min' => 1, 'returnUrl' => null])

<x-modal name="wallet-topup" :show="$openOnLoad" maxWidth="md">
    <div class="border-b border-slate-100 px-5 py-4 pr-12 sm:px-6 sm:pr-14">
        <h2 class="text-lg font-semibold text-slate-900">Top up your wallet</h2>
        <p class="mt-1 text-sm text-slate-500">Add funds to your Ladill wallet to continue.</p>
    </div>

    <form action="{{ route('qms.wallet') }}" method="GET" class="p-5 sm:p-6">
        @csrf
        <input type="hidden" name="return_url" value="{{ $returnUrl ?? url()->current() }}">

        <label for="topup_amount" class="text-sm font-medium text-slate-700">Amount (GHS)</label>
        <input type="number" id="topup_amount" name="amount" min="{{ $min }}" max="5000" step="0.01" value="{{ $suggested }}" required
               class="mt-1.5 block w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400">
        <p class="mt-1.5 text-xs text-slate-500">You'll be taken to Paystack to pay securely; funds land in your Ladill wallet.</p>

        <div class="mt-6 flex flex-col gap-2 sm:flex-row sm:justify-end">
            <button type="button" @click="$dispatch('close-modal', 'wallet-topup')"
                    class="hidden rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 sm:inline-flex">Cancel</button>
            <button type="submit" class="btn-primary w-full sm:w-auto">Add funds</button>
        </div>
    </form>
</x-modal>