<x-portal-layout title="Notifikasi">
    <section class="rounded-lg bg-white p-5 shadow-sm">
        <div class="text-sm text-slate-500">Pusat notifikasi</div>
        <h1 class="text-2xl font-semibold">{{ $customer->name }}</h1>
    </section>

    <section class="mt-4 rounded-lg bg-white p-5 shadow-sm">
        <h2 class="font-semibold">Update Terbaru</h2>
        <div class="mt-3 divide-y text-sm">
            @forelse ($notifications as $notification)
                <form method="post" action="{{ route('portal.notifications.read', $notification) }}" class="py-3">
                    @csrf
                    <button class="block w-full text-left">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="font-medium {{ $notification->read_at ? 'text-slate-600' : 'text-slate-950' }}">{{ $notification->title }}</div>
                                <div class="mt-1 text-slate-500">{{ $notification->body }}</div>
                            </div>
                            @unless ($notification->read_at)
                                <span class="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-red-500"></span>
                            @endunless
                        </div>
                        <div class="mt-2 text-xs text-slate-400">{{ $notification->created_at->diffForHumans() }}</div>
                    </button>
                </form>
            @empty
                <div class="py-3 text-slate-500">Belum ada notifikasi.</div>
            @endforelse
        </div>
    </section>
</x-portal-layout>
