@extends('layouts.admin')

@section('title', 'Notifications')
@section('page-title', 'Notifications')
@section('page-subtitle', 'Mission, fleet and sea trial alerts')

@section('content')
<div class="panel">
    <div class="panel-header">
        <div class="btn-group btn-group-sm">
            <a href="{{ route('admin.notifications.index') }}" class="btn btn-outline-secondary {{ !request('filter') ? 'active' : '' }}">All</a>
            <a href="{{ route('admin.notifications.index', ['filter' => 'unread']) }}" class="btn btn-outline-secondary {{ request('filter')==='unread' ? 'active' : '' }}">Unread</a>
        </div>
        @can('notifications.manage')
        <form action="{{ route('admin.notifications.mark-all-read') }}" method="POST">
            @csrf
            <button class="btn btn-sm btn-outline-primary">Mark all as read</button>
        </form>
        @endcan
    </div>
    <ul class="list-group list-group-flush">
        @forelse ($notifications as $notification)
            <li class="list-group-item bg-transparent border-navy d-flex justify-content-between align-items-start {{ $notification->read_at ? '' : 'bg-navy-800' }}">
                <div>
                    <div class="text-heading small fw-semibold">{{ $notification->data['title'] ?? 'Notification' }}</div>
                    <div class="text-navy-300 small">{{ $notification->data['message'] ?? '' }}</div>
                    <div class="text-navy-300" style="font-size:.7rem;">{{ $notification->created_at->diffForHumans() }}</div>
                </div>
                @if (!$notification->read_at)
                @can('notifications.manage')
                <form action="{{ route('admin.notifications.mark-read', $notification->id) }}" method="POST">
                    @csrf
                    <button class="btn btn-sm btn-outline-secondary">Mark read</button>
                </form>
                @endcan
                @endif
            </li>
        @empty
            <li class="list-group-item bg-transparent border-navy text-center text-navy-300 py-4">No notifications.</li>
        @endforelse
    </ul>
    <div class="p-3">{{ $notifications->links() }}</div>
</div>
@endsection