<li class="nav-item dropdown" id="append-new-admin-notification">
    @include('backend.layouts.partials._notification_dropdown',['notifications' => auth()->user()->getRecentNotifications()])
</li>

@push('script')
    <script>
        // Attach click event to mark notification as read
        $(document).on('click', '.read-notification', function() {
            const notificationId = $(this).data('id');
            const url = "{{ route('admin.notifications.markAsRead', ':id') }}".replace(':id', notificationId);

            // Make AJAX request to mark notification as read
            $.get(url)
                .done(function(response) {
                    console.log('Notification marked as read:', response);
                    // Optionally remove notification from the UI or update its status
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    console.error('Error marking notification as read:', textStatus, errorThrown);
                    // Optionally display an error message to the user
                });
        });
    </script>
@endpush
