@extends('layouts.app')
@section('title','Transaction Receipt')
@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/transactions" class="text-sm font-semibold text-slate-500">← Transactions</a><h1 class="mt-2 text-2xl font-black">Receipt</h1></header><main class="px-5 py-5"><section id="receipt" class="vtu-card"><p class="text-sm text-slate-500">Loading receipt...</p></section></main></div>
<script>
const reference=@json($reference);
axios.get(`/api/transactions/${encodeURIComponent(reference)}`).then(r=>{const t=r.data;document.getElementById('receipt').innerHTML=`<div class="text-center"><div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 text-2xl">✓</div><h2 class="mt-4 text-xl font-black">${t.status}</h2><p class="mt-1 text-sm text-slate-500">${t.reference}</p></div><div class="mt-6 space-y-3 text-sm"><div class="flex justify-between"><span class="text-slate-500">Service</span><strong>${t.service_type}</strong></div><div class="flex justify-between"><span class="text-slate-500">Recipient</span><strong>${t.recipient}</strong></div><div class="flex justify-between"><span class="text-slate-500">Amount</span><strong>₦${(t.amount_minor/100).toLocaleString('en-NG',{minimumFractionDigits:2})}</strong></div><div class="flex justify-between"><span class="text-slate-500">Provider ref</span><strong>${t.provider_reference||'-'}</strong></div></div>`;});
</script>
@endsection