@extends('layouts.app')
@section('title', 'Notifications')
@section('page-title', 'Notifications')

@section('content')
<div class="mt-4 space-y-4 max-w-2xl">

    <div class="flex items-center justify-between">
        <div class="flex gap-2">
            <a href="{{ route('notifications.index') }}"
               class="px-3 py-1.5 text-xs rounded-lg {{ !request('filter') ? 'bg-npp-blue text-white' : 'border border-gray-300 text-gray-600 hover:bg-gray-50' }}">
                All ({{ $notifications->total() }})
            </a>
            <a href="{{ route('notifications.index', ['filter'=>'unread']) }}"
               class="px-3 py-1.5 text-xs rounded-lg {{ request('filter') === 'unread' ? 'bg-npp-blue text-white' : 'border border-gray-300 text-gray-600 hover:bg-gray-50' }}">
                Unread ({{ $unreadCount }})
            </a>
        </div>
        @if($unreadCount > 0)
        <form method="POST" action="{{ route('notifications.markAllRead') }}">
            @csrf
            <button type="submit" class="text-xs text-blue-600 hover:underline">Mark all as read</button>
        </form>
        @endif
    </div>

    @forelse($notifications as $n)
    <div class="bg-white rounded-xl border {{ $n->read_at ? 'border-gray-200' : 'border-blue-200 bg-blue-50/30' }} shadow-sm p-4 flex items-start gap-4">
        <div class="w-2.5 h-2.5 rounded-full mt-1.5 shrink-0 {{ $n->read_at ? 'bg-gray-300' : 'bg-blue-500' }}"></div>
        <div class="flex-1 min-w-0">
            <div class="font-semibold text-gray-900 text-sm">{{ $n->title }}</div>
            <div class="text-sm text-gray-600 mt-0.5">{{ $n->body }}</div>
            <div class="text-xs text-gray-400 mt-1.5">{{ $n->created_at->diffForHumans() }}</div>
        </div>
        <div class="flex gap-2 shrink-0">
            @if(! $n->read_at)
            <form method="POST" action="{{ route('notifications.markRead', $n) }}">
                @csrf
                <button type="submit" class="text-xs text-blue-600 hover:underline">Mark read</button>
            </form>
            @endif
            <form method="POST" action="{{ route('notifications.destroy', $n) }}">
                @csrf @method('DELETE')
                <button type="submit" class="text-xs text-gray-400 hover:text-red-500">Delete</button>
            </form>
        </div>
    </div>
    @empty
    <div class="bg-white rounded-xl border border-gray-200 py-12 text-center text-gray-400">
        No notifications yet.
    </div>
    @endforelse

    @if($notifications->hasPages())
    <div>{{ $notifications->links() }}</div>
    @endif
</div>
@endsection