@extends('layouts.app')
@section('title','Notifications')
@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">Notifications</h1></header><main class="px-5 py-5"><div id="notifications" class="space-y-3"></div></main></div>
<script>

axios.get('/api/notifications').then(r=>{const rows=r.data.data||[];document.getElementById('notifications').innerHTML=rows.map(n=>`<button onclick="markRead(${n.id},this)" class="w-full rounded-2xl border p-4 text-left ${n.is_read?'opacity-70':''}"><div class="font-bold">${n.title}</div><div class="mt-1 text-sm text-slate-600">${n.message}</div></button>`).join('')||'<p class="text-sm text-slate-500">No notifications.</p>';});
async function markRead(id,el){await axios.post(`/api/notifications/${id}/read`);el.classList.add('opacity-70');}
</script>
@endsection