@extends(auth()->user()?->isAdmin() ? 'layouts.admin' : 'layouts.app')

@section('title', 'Notifications')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold">Notifications</h1>
        <form action="{{ auth()->user()?->isAdmin() ? route('admin.notifications.read-all') : route('user.notifications.read-all') }}" method="post">
            @csrf
            <button class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm">Mark all as read</button>
        </form>
    </div>

    <div class="space-y-3">
        @forelse ($notifications as $notification)
            <article class="rounded-xl border border-slate-200 bg-white p-4 {{ $notification->read_at ? '' : 'ring-1 ring-cyan-200' }}">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <p class="font-semibold">{{ $notification->data['title'] ?? 'Notification' }}</p>
                        <p class="mt-1 text-sm text-slate-600">{{ $notification->data['message'] ?? '' }}</p>
                        @if (!empty($notification->data['approval_note']))
                            <p class="mt-1 text-xs text-rose-600">Note: {{ $notification->data['approval_note'] }}</p>
                        @endif
                        <p class="mt-1 text-xs text-slate-500">{{ $notification->created_at?->diffForHumans() }}</p>
                    </div>
                    @if (!empty($notification->data['url']))
                        <a href="{{ $notification->data['url'] }}" class="text-xs text-sky-700">Open</a>
                    @endif
                </div>
            </article>
        @empty
            <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">No notifications.</p>
        @endforelse
    </div>

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