@extends('layouts.app')
@section('content')
<div class="max-w-4xl mx-auto p-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-semibold">Notifications</h1>
        <form method="POST" action="{{ route('notifications.readAll') }}">
            @csrf
            <button class="px-4 py-2 bg-[var(--primary)] text-white rounded">Mark all read</button>
        </form>
    </div>
    @if(session('success'))<div class="mb-4 p-3 bg-green-100 text-green-800 rounded">{{ session('success') }}</div>@endif
    <div class="bg-white rounded shadow divide-y">
        @forelse($notifications as $n)
            <div class="p-4 {{ $n->read_at ? '' : 'bg-amber-50' }}">
                <div class="flex items-start justify-between">
                    <div>
                        <div class="font-medium">{{ $n->data['title'] ?? 'Notification' }}</div>
                        <div class="text-sm text-gray-600">{{ $n->data['message'] ?? '' }}</div>
                    </div>
                    <form method="POST" action="{{ route('notifications.read', $n->id) }}">
                        @csrf
                        <button class="text-sm text-[var(--primary)] underline">Mark read</button>
                    </form>
                </div>
                <div class="text-xs text-gray-500 mt-1">{{ $n->created_at->diffForHumans() }}</div>
            </div>
        @empty
            <div class="p-6 text-gray-500">No notifications</div>
        @endforelse
    </div>
    <div class="mt-4">{{ $notifications->links() }}</div>
    <div class="mt-2 text-sm text-gray-500">Unread: {{ $unreadCount }}</div>
    </div>
</div>
@endsection