@php
    $unreadNotifications = auth()->user()->unreadNotifications()->latest()->limit(8)->get();
    $unreadNotificationsCount = auth()->user()->unreadNotifications()->count();
@endphp

<div
    class="shrink-0 relative z-[130]"
    data-kt-dropdown="true"
    data-kt-dropdown-offset="10px, 10px"
    data-kt-dropdown-offset-rtl="-20px, 10px"
    data-kt-dropdown-placement="bottom-end"
    data-kt-dropdown-placement-rtl="bottom-start"
    data-kt-dropdown-trigger="click"
>
    <button
        class="kt-btn kt-btn-icon kt-btn-ghost relative"
        data-general-notification-toggle="true"
        data-general-notifications-read-url="{{ route('system.users.notifications.read-all') }}"
        data-kt-dropdown-toggle="true"
        type="button"
    >
        <i class="ki-filled ki-notification-status text-xl"></i>
        <span
            class="absolute -top-1 -end-1 min-w-5 h-5 px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center {{ $unreadNotificationsCount > 0 ? '' : 'hidden' }}"
            id="general-notification-count"
        >
            {{ $unreadNotificationsCount }}
        </span>
    </button>

    <div class="kt-dropdown-menu w-[320px]" data-kt-dropdown-menu="true">
        <div class="px-3 py-2 border-b border-input">
            <h4 class="text-sm font-semibold text-foreground">{{ __('messages.notifications') }}</h4>
        </div>

        <div class="max-h-[360px] overflow-y-auto p-3">
            <div class="flex flex-col gap-2" id="general-notification-list">
                @forelse($unreadNotifications as $notification)
                    <a class="flex flex-col gap-1 rounded-lg border border-input px-3 py-2 hover:bg-muted/60 transition" href="{{ data_get($notification->data, 'url', '/') }}">
                        <span class="text-sm font-semibold text-foreground">{{ data_get($notification->data, 'title') }}</span>
                        <span class="text-xs text-secondary-foreground">{{ data_get($notification->data, 'message') }}</span>
                    </a>
                @empty
                    <div class="rounded-lg border border-dashed border-input px-3 py-4 text-center text-sm text-secondary-foreground" id="general-notification-empty-state">
                        {{ __('messages.no_unread_notifications') }}
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>