@extends('layouts.app')
@section('title','Fund Wallet')
@section('content')
<div class="mx-auto min-h-screen max-w-md bg-white"><header class="border-b px-5 py-4"><a href="/app/dashboard" class="text-sm font-semibold text-slate-500">← Back</a><h1 class="mt-2 text-2xl font-black">Fund Wallet</h1></header><main class="space-y-5 px-5 py-5">
<form id="fund-form" class="vtu-card space-y-4"><div><label class="vtu-label">Amount</label><input id="amount" type="number" min="100" class="vtu-input" placeholder="5000" required></div><button class="vtu-btn-primary w-full">Continue with Paystack</button></form>
<section class="vtu-card"><h2 class="font-black">Prefer bank transfer?</h2><p class="mt-2 text-sm text-slate-500">Use your dedicated virtual account for automatic wallet funding.</p><a href="/app/virtual-account" class="vtu-btn-secondary mt-4 w-full">View virtual account</a></section>
</main></div>
<script>

document.getElementById('fund-form').addEventListener('submit',async e=>{e.preventDefault();const r=await axios.post('/api/wallet/fund/paystack',{amount_minor:Math.round(Number(document.getElementById('amount').value)*100),callback_url:window.location.origin+'/app/dashboard'});if(r.data.authorization_url)window.location.href=r.data.authorization_url;});
</script>
@endsection