@extends('layouts.app')
@section('title','Virtual Account')
@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">Virtual Account</h1></header><main class="px-5 py-5"><section class="vtu-card"><h2 class="font-black">Dedicated bank account</h2><p class="mt-2 text-sm text-slate-500">Transfer here and your wallet can be credited after Paystack confirmation.</p><div id="va-result" class="mt-5"><p class="text-sm text-slate-500">No account loaded yet.</p></div><button id="request-va" class="vtu-btn-primary mt-5 w-full">Request Virtual Account</button></section></main></div>
<script>

document.getElementById('request-va').addEventListener('click',async()=>{const r=await axios.post('/api/virtual-account/paystack',{consent:true});const b=document.getElementById('va-result');if(r.data.existing&&r.data.account){const a=r.data.account;b.innerHTML=`<div class="rounded-2xl bg-slate-50 p-4"><div class="text-xs text-slate-500">Bank</div><div class="font-bold">${a.bank_name||'-'}</div><div class="mt-3 text-xs text-slate-500">Account number</div><div class="text-2xl font-black">${a.account_number||'-'}</div><div class="mt-3 text-xs text-slate-500">Account name</div><div class="font-semibold">${a.account_name||'-'}</div></div>`;}else{b.innerHTML='<div class="rounded-2xl bg-amber-50 p-4 text-sm text-amber-800">Request submitted. Assignment may complete asynchronously.</div>';}}); 
</script>
@endsection