@php
    use App\Support\NotificationCategory;

    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('me.notifications_title')],
    ];
    $tabs = array_merge(['all'], NotificationCategory::all());
@endphp

<x-ui.layout.page
    :title="__('me.notifications_title')"
    :subtitle="__('me.notifications_subtitle')"
    page-icon="fe fe-bell"
    :breadcrumbs="$breadcrumbs"
>
    <div class="d-flex flex-wrap gap-2 mb-4">
        @foreach ($tabs as $tab)
            @php($q = $tab === 'all' ? [] : ['type' => $tab])
            <a href="{{ route('me.notifications.index', $q) }}"
                @class([
                    'btn btn-sm',
                    'btn-outline-secondary' => $activeType !== $tab,
                    'text-white' => $activeType === $tab,
                ])
                @if ($activeType === $tab)
                    style="background: {{ config('theme.colors.primary') }};"
                @endif
            >
                {{ __('notifications.category.'.$tab) }}
            </a>
        @endforeach
    </div>

    <div class="card border-0 shadow-sm">
        <div class="list-group list-group-flush">
            @forelse ($paginator as $n)
                <x-ui.dashboard.notification-item
                    :title="$n->data['title'] ?? ''"
                    :body="$n->data['body'] ?? ''"
                    :created-at="$n->created_at"
                    :read="(bool) $n->read_at"
                    :category="$n->data['category'] ?? null"
                    :mark-read-url="route('me.notifications.read', $n->id)"
                />
            @empty
                <div class="p-5 text-center text-muted">{{ __('notifications.empty') }}</div>
            @endforelse
        </div>
    </div>

    <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
        {{ $paginator->links() }}
        @if ($paginator->total() > 0)
            <form method="POST" action="{{ route('me.notifications.read-all') }}">
                @csrf
                <button type="submit" class="btn btn-outline-secondary btn-sm">{{ __('notifications.mark_all') }}</button>
            </form>
        @endif
    </div>
</x-ui.layout.page>
