@extends('layouts.dashboard')

@section('title', 'Notifikasi')

@section('content')
<section class="grid gap-3">
    @forelse($notifications as $notification)
        <article class="grid gap-4 rounded-lg border border-slate-200 bg-white p-4 shadow-sm sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
            <div class="min-w-0">
                <div class="flex items-center gap-2">
                    <span class="{{ $notification->is_read ? 'bg-slate-200' : 'bg-sky-500' }} h-2.5 w-2.5 rounded-full"></span>
                    <p class="truncate font-black text-slate-950">{{ $notification->title }}</p>
                </div>
                <p class="mt-2 text-sm leading-6 text-slate-600">{{ $notification->message }}</p>
                <p class="mt-2 text-xs font-semibold text-slate-400">{{ $notification->created_at->diffForHumans() }}</p>
            </div>
            @unless($notification->is_read)
                <form method="POST" action="{{ route(auth()->user()->role.'.notifications.read', $notification) }}">
                    @csrf
                    @method('PATCH')
                    <button class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-slate-950 px-3 py-2.5 text-sm font-black text-white hover:bg-sky-700 sm:w-auto">
                        <i data-lucide="check" class="h-4 w-4"></i>
                        Tandai Dibaca
                    </button>
                </form>
            @endunless
        </article>
    @empty
        <p class="rounded-lg border border-slate-200 bg-white p-5 text-sm font-semibold text-slate-500 shadow-sm">Belum ada notifikasi.</p>
    @endforelse
</section>

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