strprfcrm/resources/views/notifications/index.blade.php

@extends('layouts.app')

@section('content')

    @include('partials.table', [
        'id'      => $id,
        'header'  => $header,
        'strings' => $notifications,
    ])

    @include('partials.pagination', ['items' => $notifications])

@endsection

@push('scripts')
    <script type="module">
        function updateNotificationBadge(count) {
            const badge = document.getElementById('notification-badge');
            if (!badge) return;
            const safeCount = Math.max(0, parseInt(count || 0, 10));
            badge.dataset.count = String(safeCount);
            badge.classList.toggle('d-none', safeCount === 0);
        }

        async function markNotificationRead(id, $row) {
            const response = await fetch(`/notifications/${id}/read`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                },
            });

            if (response.ok) {
                const data = await response.json();
                if (typeof data.unread !== 'undefined') {
                    updateNotificationBadge(data.unread);
                }
                if ($row) {
                    $row.removeClass('notification-unread');
                    const typeClass = $row.data('read-class');
                    if (typeClass) $row.addClass(typeClass);
                    $row.data('notification-read', '1');
                }
            }
        }

        $(document).on('click', '#tbl tbody tr[data-notification-id]', function (e) {
            const $row = $(this);
            const id = $row.data('notification-id');
            const isRead = $row.data('notification-read') === '1' || $row.data('notification-read') === 1;

            if (!isRead && id) {
                const link = $(e.target).closest('a');
                if (link.length && link.attr('href')) {
                    e.preventDefault();
                    markNotificationRead(id, $row).then(() => {
                        window.location.href = link.attr('href');
                    });
                    return;
                }
                markNotificationRead(id, $row);
            }
        });
    </script>
@endpush