@extends('layouts.app')
@section('title','Profile')
@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">Profile</h1></header><main class="space-y-4 px-5 py-5 pb-24"><section class="vtu-card"><div id="profile-data"><p class="text-sm text-slate-500">Loading...</p></div></section><section class="vtu-card"><h2 class="font-black">Security</h2><a href="/app/transaction-pin" class="vtu-btn-secondary mt-4 w-full">Set / Change Transaction PIN</a></section><button id="logout" class="vtu-btn-secondary w-full">Logout</button></main>@include('mobile.partials.bottom-nav')</div>
<script>

axios.get('/api/dashboard').then(r=>{const u=r.data.user;document.getElementById('profile-data').innerHTML=`<div class="text-xl font-black">${u.name}</div><div class="text-slate-500">${u.account_type}</div><div class="mt-3 rounded-xl bg-slate-50 px-3 py-2 text-sm">Status: <strong>${u.status}</strong></div>`;});
document.getElementById('logout').addEventListener('click',async()=>{try{await axios.post('/api/auth/logout')}catch(_){}window.location.href='/login';});
</script>
@endsection