@extends('layouts.shell')
@section('title', 'Notifikasi')

@section('content')
<h1 class="mb-4 text-2xl font-extrabold">Notifikasi</h1>

<div class="space-y-3">
    @forelse($notifications as $n)
    <a href="{{ $n->link ?? '#' }}" class="card block p-4">
        <div class="flex items-start gap-3">
            <div class="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-full bg-qr-accent/15 text-qr-accent-light">
                <x-icon name="{{ $n->type === 'payment' ? 'cash' : 'bell' }}" class="w-5 h-5"/>
            </div>
            <div class="flex-1">
                <p class="text-sm font-semibold">{{ $n->title }}</p>
                @if($n->body)<p class="text-sm text-qr-muted">{{ $n->body }}</p>@endif
                <p class="mt-1 text-xs text-qr-muted">{{ $n->created_at->diffForHumans() }}</p>
            </div>
        </div>
    </a>
    @empty
    <x-empty-state icon="bell" title="Belum ada notifikasi"
        message="Update pembayaran, akses event, dan info terbaru akan muncul di sini." />
    @endforelse
</div>

<div class="mt-5">{{ $notifications->links() }}</div>
@endsection