@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Notifications'],
    ]" />

    <x-page-header title="Notifications" :subtitle="$unreadCount . ' unread'">
        @if ($unreadCount > 0)
            <form action="{{ route('notifications.read-all') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-sm btn-outline-primary">Mark all read</button>
            </form>
        @endif
    </x-page-header>

    <x-card>
        @if ($notifications->isEmpty())
            <x-empty-state icon="bell" title="No notifications" description="Operational alerts will appear here." />
        @else
            <div class="list-group list-group-flush">
                @foreach ($notifications as $notification)
                    <div class="list-group-item {{ $notification->isRead() ? '' : 'bg-light' }}">
                        <div class="d-flex justify-content-between align-items-start gap-3">
                            <div>
                                <strong>{{ $notification->title }}</strong>
                                @unless ($notification->isRead())
                                    <span class="badge bg-primary ms-1">New</span>
                                @endunless
                                <p class="mb-1 small">{{ $notification->body }}</p>
                                <span class="text-muted small"><x-datetime :value="$notification->created_at" datetime /></span>
                            </div>
                            @unless ($notification->isRead())
                                <form action="{{ route('notifications.read', $notification) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-outline-secondary">Mark read</button>
                                </form>
                            @endunless
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-3">{{ $notifications->links() }}</div>
        @endif
    </x-card>
@endsection
