@php
    use App\Support\NotificationCategory;

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

<x-ui.layout.page
    :title="__('notifications.title')"
    :subtitle="__('notifications.filter')"
    page-icon="fe fe-bell"
    :breadcrumbs="$breadcrumbs"
>
    <form id="notif-bulk-form" method="post" class="visually-hidden erp-bulk-form">
        @csrf
    </form>

    <x-ui.operational.index-shell>
        <x-slot:toolbar>
            <x-ui.operational.action-bar>
                <x-slot:filters>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach ($tabs as $tab)
                            @php($q = $tab === 'all' ? [] : ['type' => $tab])
                            <a href="{{ route('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') }}; border-color: {{ config('theme.colors.primary') }};"
                                @endif
                            >
                                {{ __('notifications.category.'.$tab) }}
                            </a>
                        @endforeach
                    </div>
                </x-slot:filters>
                <x-slot:primary>
                    @if ($paginator->total() > 0)
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-erp-select-page="#notif-bulk-form">
                            {{ __('procurement.bulk.select_all') }}
                        </button>
                        <button
                            type="submit"
                            form="notif-bulk-form"
                            formaction="{{ route('notifications.bulk-read') }}"
                            class="btn btn-sm btn-primary"
                            data-bulk-confirm="{{ __('notifications.bulk_confirm', ['count' => '__COUNT__']) }}"
                        >{{ __('notifications.bulk_mark_selected') }}</button>
                    @endif
                </x-slot:primary>
            </x-ui.operational.action-bar>
        </x-slot:toolbar>

        <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('notifications.read', $n->id)"
                        :notification-id="$n->id"
                        :bulk-select="true"
                    />
                @empty
                    <x-ui.operational.empty-state :title="__('notifications.empty')" />
                @endforelse
            </div>
        </div>

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