@extends('layouts.app')
@section('title','Dashboard')
@section('content')
<div class="mx-auto min-h-screen max-w-md bg-white" data-vtu-realtime>
<header class="sticky top-0 z-20 border-b bg-white/95 px-5 py-4 backdrop-blur"><div class="flex items-center justify-between"><div><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Dashboard</p><h1 class="text-xl font-black" id="user-name">Welcome</h1></div><a href="/app/notifications" class="relative rounded-full border p-3">🔔<span data-notification-count hidden class="absolute -right-1 -top-1 min-w-5 rounded-full bg-slate-950 px-1 text-center text-xs font-bold text-white">0</span></a></div></header>
<main class="space-y-5 px-5 py-5 pb-28">
<section class="rounded-3xl bg-slate-950 p-5 text-white"><p class="text-sm text-slate-300">Available balance</p><p class="mt-2 text-3xl font-black" data-wallet-balance-minor>₦0.00</p><div class="mt-5 grid grid-cols-2 gap-3"><a href="/app/fund-wallet" class="rounded-2xl bg-white px-4 py-3 text-center text-sm font-bold text-slate-950">Fund wallet</a><a href="/app/virtual-account" class="rounded-2xl border border-white/20 px-4 py-3 text-center text-sm font-bold">Virtual account</a></div></section>
<section><div class="mb-3 flex items-center justify-between"><h2 class="font-black">Quick services</h2><a href="/app/transactions" class="text-sm font-semibold text-slate-500">History</a></div><div class="grid grid-cols-2 gap-3">
<a href="/app/buy/data" class="vtu-card"><div class="text-2xl">📶</div><div class="mt-3 font-bold">Buy Data</div><div class="mt-1 text-xs text-slate-500">MTN, Airtel, Glo, 9mobile</div></a>
<a href="/app/buy/airtime" class="vtu-card"><div class="text-2xl">📱</div><div class="mt-3 font-bold">Airtime</div><div class="mt-1 text-xs text-slate-500">Instant recharge</div></a>
<a href="/app/airtime-to-cash" class="vtu-card"><div class="text-2xl">💱</div><div class="mt-3 font-bold">Airtime to Cash</div><div class="mt-1 text-xs text-slate-500">Submit conversion request</div></a>
<a href="/app/earnings" class="vtu-card"><div class="text-2xl">💰</div><div class="mt-3 font-bold">Earnings</div><div class="mt-1 text-xs text-slate-500">Referral & commission earnings</div></a>
</div></section>
<section id="banner-area" class="space-y-3"></section>
<section class="vtu-card"><div class="flex items-center justify-between"><div><h2 class="font-black">Recent transactions</h2><p class="text-sm text-slate-500">Latest activity</p></div><a href="/app/transactions" class="text-sm font-semibold">See all</a></div><div id="recent-transactions" class="mt-4 space-y-3"><p class="text-sm text-slate-500">Loading...</p></div></section>
</main>@include('mobile.partials.bottom-nav')</div>
<script>

Promise.all([axios.get('/api/dashboard'),axios.get('/api/transactions'),axios.get('/api/banners')]).then(([d,t,b])=>{
 document.getElementById('user-name').textContent=d.data.user.name;
 const rows=t.data.data||[]; document.getElementById('recent-transactions').innerHTML=rows.slice(0,5).map(r=>`<a href="/app/transactions/${r.reference}" class="flex items-center justify-between rounded-2xl border p-3"><div><div class="font-semibold">${r.service_type}</div><div class="text-xs text-slate-500">${r.recipient}</div></div><div class="text-right"><div class="font-bold">₦${(r.amount_minor/100).toLocaleString('en-NG',{minimumFractionDigits:2})}</div><div class="text-xs text-slate-500">${r.status}</div></div></a>`).join('')||'<p class="text-sm text-slate-500">No transactions yet.</p>';
 document.getElementById('banner-area').innerHTML=(b.data.data||[]).map(x=>`<a href="${x.action_url||'#'}" class="block overflow-hidden rounded-3xl border bg-slate-100"><img src="${x.image_url}" alt="${x.title}" class="h-36 w-full object-cover"><div class="p-4 font-bold">${x.title}</div></a>`).join('');
}).catch(()=>{});
</script>
@endsection