@extends('layouts.app')
@section('title','Buy Service')
@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">{{ ucfirst($serviceType) }}</h1></header>
<main class="px-5 py-5"><form id="purchase-form" class="vtu-card space-y-4"><div><label class="vtu-label">Network / Product</label><select id="product" class="vtu-input" required></select></div><div><label class="vtu-label">Recipient phone</label><input id="recipient" class="vtu-input" required placeholder="080..."></div><div><label class="vtu-label">Transaction PIN</label><input id="transaction_pin" type="password" inputmode="numeric" maxlength="6" class="vtu-input" required></div><div id="purchase-price" class="rounded-2xl bg-slate-50 p-4 text-sm text-slate-600"></div><div id="purchase-message" class="hidden rounded-2xl px-4 py-3 text-sm"></div><button class="vtu-btn-primary w-full">Confirm Purchase</button></form></main></div>
<script>

const serviceType=@json($serviceType),s=document.getElementById('product'); let products=[];
async function load(){const r=await axios.get('/api/products',{params:{service_type:serviceType}});products=r.data.data||[];s.innerHTML=products.map(p=>`<option value="${p.id}">${p.network?p.network+' • ':''}${p.name} — ₦${(p.price_minor/100).toLocaleString('en-NG')}</option>`).join('');price();}
function price(){const p=products.find(p=>String(p.id)===s.value);document.getElementById('purchase-price').textContent=p?`You will pay ₦${(p.price_minor/100).toLocaleString('en-NG',{minimumFractionDigits:2})}`:'';}
s.addEventListener('change',price);
document.getElementById('purchase-form').addEventListener('submit',async e=>{e.preventDefault();const m=document.getElementById('purchase-message');try{const r=await axios.post('/api/purchase',{product_id:Number(s.value),recipient:document.getElementById('recipient').value,transaction_pin:document.getElementById('transaction_pin').value,idempotency_key:crypto.randomUUID()});m.className='rounded-2xl bg-emerald-50 px-4 py-3 text-sm text-emerald-700';m.textContent=`Transaction ${r.data.reference}: ${r.data.status}`;}catch(x){m.className='rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700';m.textContent=x.response?.data?.message||'Purchase failed.';}m.classList.remove('hidden');});load();
</script>
@endsection