@extends('layouts.app')
@section('title','Earnings')
@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">Earnings</h1></header><main class="space-y-4 px-5 py-5"><section class="rounded-3xl bg-slate-950 p-5 text-white"><p class="text-sm text-slate-300">Earnings balance</p><p id="earnings-balance" class="mt-2 text-3xl font-black">₦0.00</p></section><form id="transfer-form" class="vtu-card space-y-3"><h2 class="font-black">Move to main wallet</h2><input id="amount" type="number" min="1" class="vtu-input" placeholder="Amount in Naira" required><button class="vtu-btn-primary w-full">Transfer</button></form><section class="vtu-card"><h2 class="font-black">Recent earnings</h2><div id="ledger" class="mt-4 space-y-2 text-sm"></div></section></main></div>
<script>async function load(){const r=await axios.get('/api/earnings');document.getElementById('earnings-balance').textContent=new Intl.NumberFormat('en-NG',{style:'currency',currency:'NGN'}).format((r.data.balance_minor||0)/100);document.getElementById('ledger').innerHTML=(r.data.ledger||[]).map(x=>`<div class="flex justify-between rounded-xl border p-3"><span>${x.reason}</span><strong>${x.direction==='credit'?'+':'-'}₦${(x.amount_minor/100).toLocaleString('en-NG')}</strong></div>`).join('')||'<p class="text-slate-500">No earnings yet.</p>';}document.getElementById('transfer-form').addEventListener('submit',async e=>{e.preventDefault();await axios.post('/api/earnings/transfer',{amount_minor:Math.round(Number(document.getElementById('amount').value)*100)});await load();});load();</script>
@endsection