@extends('layouts.app')
@section('title','Transaction PIN')
@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/profile" class="text-sm font-semibold text-slate-500">← Profile</a><h1 class="mt-2 text-2xl font-black">Transaction PIN</h1></header><main class="px-5 py-5"><form id="pin-form" class="vtu-card space-y-4"><div><label class="vtu-label">New PIN</label><input id="pin" type="password" inputmode="numeric" maxlength="6" class="vtu-input" required></div><div><label class="vtu-label">Account password</label><input id="password" type="password" class="vtu-input" required></div><div id="pin-message" class="hidden rounded-2xl px-4 py-3 text-sm"></div><button class="vtu-btn-primary w-full">Save PIN</button></form></main></div>
<script>

document.getElementById('pin-form').addEventListener('submit',async e=>{e.preventDefault();const b=document.getElementById('pin-message');try{await axios.post('/api/transaction-pin',{pin:document.getElementById('pin').value,password:document.getElementById('password').value});b.className='rounded-2xl bg-emerald-50 px-4 py-3 text-sm text-emerald-700';b.textContent='Transaction PIN updated successfully.';}catch(x){b.className='rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700';b.textContent=x.response?.data?.message||'Unable to update PIN.';}b.classList.remove('hidden');});
</script>
@endsection