@extends('layouts.app')

@section('title', 'Notification Center')

@section('content')
<div class="space-y-5">
    <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div><p class="text-xs font-bold uppercase tracking-[.18em] text-emerald-600">Workspace alerts</p><h1 class="mt-1 text-3xl font-bold text-slate-950">Notification center</h1><p class="mt-1 text-sm text-slate-500">Applications, renewals, employee documents, attendance, payroll, finance, approvals and system notices.</p></div>
        <form method="POST" action="{{ route('app.notifications.read_all') }}">@csrf<button class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700">Mark all read</button></form>
    </header>

    <nav class="flex flex-wrap gap-2">
        @foreach([''=>'All','applications'=>'Applications','renewals'=>'Renewals','employee_documents'=>'Employee documents','attendance'=>'Attendance','payroll'=>'Payroll','finance'=>'Finance','approvals'=>'Approvals','system'=>'System'] as $key=>$label)
            <a href="{{ route('app.notifications.index', array_filter(['category'=>$key])) }}" class="rounded-xl px-3 py-2 text-xs font-bold {{ (string)$category===(string)$key ? 'bg-emerald-600 text-white' : 'border border-slate-200 bg-white text-slate-600' }}">{{ $label }}</a>
        @endforeach
    </nav>

    <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div class="divide-y divide-slate-100">
            @forelse($notifications as $notification)
                <form method="POST" action="{{ route('app.notifications.read',$notification->id) }}" class="flex items-start gap-4 p-5 {{ $notification->read_at ? 'bg-white' : 'bg-emerald-50/50' }}">@csrf
                    <span class="mt-1 h-2.5 w-2.5 shrink-0 rounded-full {{ $notification->read_at ? 'bg-slate-200' : 'bg-emerald-500' }}"></span>
                    <button class="min-w-0 flex-1 text-left"><span class="text-[10px] font-bold uppercase tracking-wide text-emerald-700">{{ str($notification->data['category'] ?? 'system')->replace('_',' ') }}</span><strong class="mt-1 block text-sm text-slate-950">{{ $notification->data['title'] ?? class_basename($notification->type) }}</strong><span class="mt-1 block text-xs leading-5 text-slate-500">{{ $notification->data['message'] ?? '' }}</span><small class="mt-2 block text-[10px] text-slate-400">{{ $notification->created_at->diffForHumans() }}</small></button>
                </form>
            @empty
                <div class="p-14 text-center"><strong class="text-slate-900">No notifications in this view</strong><p class="mt-1 text-sm text-slate-500">New workflow alerts will appear here.</p></div>
            @endforelse
        </div>
        <div class="border-t border-slate-200 p-4">{{ $notifications->links() }}</div>
    </section>
</div>
@endsection