@extends('layouts.app')

@section('title', 'Notifications')
@section('header', 'Notifications')
@section('subheader', $unreadCount . ' unread')

@section('header-actions')
    @if ($unreadCount > 0)
        <form method="POST" action="{{ route('notifications.read-all') }}">
            @csrf
            @method('PATCH')
            <button class="btn btn-outline-primary"><i class="bi bi-check2-all me-1"></i>Mark all read</button>
        </form>
    @endif
@endsection

@section('content')
    <div class="card table-wrapper">
        <ul class="list-group list-group-flush">
            @forelse ($notifications as $notification)
                @php
                    $data = $notification->data;
                    $isUnread = $notification->read_at === null;
                @endphp
                <li class="list-group-item d-flex align-items-start gap-3 {{ $isUnread ? 'bg-light' : '' }}">
                    <div class="rounded-circle bg-primary bg-opacity-10 p-2 lh-1">
                        <i class="bi {{ $data['icon'] ?? 'bi-bell' }} text-primary"></i>
                    </div>

                    <div class="flex-grow-1">
                        <form method="POST" action="{{ route('notifications.read', $notification->id) }}" class="d-inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-link p-0 text-decoration-none fw-semibold text-body">
                                {{ $data['title'] ?? 'Notification' }}
                            </button>
                        </form>
                        @if ($isUnread)
                            <span class="badge text-bg-primary ms-1">New</span>
                        @endif
                        <div class="text-muted small">{{ $data['message'] ?? '' }}</div>
                        <div class="text-muted small">{{ $notification->created_at->diffForHumans() }}</div>
                    </div>

                    <form method="POST" action="{{ route('notifications.destroy', $notification->id) }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-secondary" aria-label="Delete notification">
                            <i class="bi bi-trash"></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>You have no notifications.
                </li>
            @endforelse
        </ul>
    </div>

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