@extends('layouts.dashboard')
@section('title', __('Notifications'))
@section('page_title', __('Notifications'))

@section('content')
    @include('partials.how-it-works', ['key' => 'notifications.index'])

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">{{ __('All Notifications') }}</h5>
        @if(auth()->user()->unreadNotifications()->count())
            <form action="{{ route('notifications.readAll') }}" method="POST">@csrf
                <button class="btn btn-sm btn-outline-primary">{{ __('Mark all as read') }}</button>
            </form>
        @endif
    </div>

    <div class="card shadow-sm">
        <ul class="list-group list-group-flush">
            @forelse($notifications as $n)
                <li class="list-group-item d-flex align-items-start gap-3 {{ $n->read_at ? '' : 'bg-light' }}">
                    <i class="bi {{ $n->data['icon'] ?? 'bi-bell' }} fs-5 text-primary mt-1"></i>
                    <div class="flex-grow-1">
                        <a href="{{ route('notifications.open', $n->id) }}" class="text-decoration-none text-dark fw-{{ $n->read_at ? 'normal' : 'semibold' }}">
                            {{ $n->data['message'] ?? __('Notification') }}
                        </a>
                        <div class="text-muted small">{{ $n->created_at->diffForHumans() }}</div>
                    </div>
                    @unless($n->read_at)<span class="badge bg-primary rounded-pill align-self-center">{{ __('New') }}</span>@endunless
                    <form action="{{ route('notifications.destroy', $n->id) }}" method="POST" class="align-self-center">@csrf @method('DELETE')
                        <button class="btn btn-sm btn-link text-muted p-0"><i class="bi bi-x-lg"></i></button>
                    </form>
                </li>
            @empty
                <li class="list-group-item text-center text-muted py-5">
                    <i class="bi bi-bell-slash fs-3 d-block mb-2"></i> {{ __('No notifications yet.') }}
                </li>
            @endforelse
        </ul>
    </div>
    <div class="mt-3">{{ $notifications->links() }}</div>
@endsection