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

@extends('layouts.app')

@section('content')

    <div class="d-flex justify-content-end mb-3">
        <button type="button"
                id="mark-all-notifications-read"
                class="btn btn-outline-primary"
                @disabled(auth()->user()->unreadUserNotifications()->count() === 0)>
            Прочитано все
        </button>
    </div>

    @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);

            const markAllButton = document.getElementById('mark-all-notifications-read');
            if (markAllButton) {
                markAllButton.disabled = safeCount === 0;
            }
        }

        function applyReadState($row, readAt) {
            if (!$row || !$row.length) {
                return;
            }

            $row.removeClass('notification-unread');
            const typeClass = $row.data('read-class');
            if (typeClass) $row.addClass(typeClass);
            $row.data('notification-read', '1');

            if (readAt) {
                $row.find('.column_read_at').text(readAt);
            }
        }

        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);
                }
                applyReadState($row, data.read_at);
            }
        }

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

            if (!response.ok) {
                return;
            }

            const data = await response.json();
            if (typeof data.unread !== 'undefined') {
                updateNotificationBadge(data.unread);
            }

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

                if (!isRead) {
                    applyReadState($row, data.read_at);
                }
            });
        }

        $(document).on('dblclick', '#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) {
                e.preventDefault();
                markNotificationRead(id, $row);
            }
        });

        $(document).on('click', '#mark-all-notifications-read', function () {
            if (this.disabled) {
                return;
            }

            markAllNotificationsRead();
        });
    </script>
@endpush