@php
    $count = (int) ($navNotificationUnreadCount ?? 0);
    $preview = $navNotificationPreview ?? collect();
@endphp

<div class="dropdown topnav-dropdown-item erp-toolbar-action">
    <button type="button" class="topnav-icon-btn position-relative" data-bs-toggle="dropdown"
        aria-expanded="false" title="{{ __('notifications.title') }}"
        aria-label="{{ __('notifications.title') }}"
        data-bs-auto-close="outside">
        <i class="fe fe-bell" aria-hidden="true"></i>
        @if ($count > 0)
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill erp-notify-badge">
                {{ $count > 99 ? '99+' : $count }}
            </span>
        @endif
    </button>
    <div class="dropdown-menu dropdown-menu-end shadow-lg p-0 mt-2 erp-notify-menu">
        <div class="px-3 py-2 border-bottom d-flex align-items-center justify-content-between">
            <span class="fw-semibold">{{ __('notifications.title') }}</span>
            @if (Route::has('notifications.index'))
                <a href="{{ route('notifications.index') }}" class="small">{{ __('notifications.view_all') }}</a>
            @endif
        </div>
        <div class="list-group list-group-flush erp-notify-list">
            @forelse ($preview 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::has('notifications.read') ? route('notifications.read', $n->id) : null"
                    compact="true"
                />
            @empty
                <div class="px-3 py-4 text-muted small text-center">{{ __('notifications.empty') }}</div>
            @endforelse
        </div>
        @if (Route::has('notifications.read-all') && $count > 0)
            <div class="border-top px-3 py-2 text-center">
                <form method="POST" action="{{ route('notifications.read-all') }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-link btn-sm p-0">{{ __('notifications.mark_all') }}</button>
                </form>
            </div>
        @endif
    </div>
</div>
