@once('dashboard-filter-summary-script')
<script>
window.initializeDashboardFilterSummary = function () {
    var listContainer = document.getElementById('customerList');
    var table = document.getElementById('customerTable');

    if (!listContainer || !table || listContainer.dataset.dashboardSummaryInitialized === 'true') {
        return;
    }

    listContainer.dataset.dashboardSummaryInitialized = 'true';

    var searchInput = listContainer.querySelector('.search');
    var dateInput = document.getElementById('dateRangeFilter');
    var statusFilter = document.getElementById('statusFilter');
    var documentTypeFilter = document.getElementById('documentTypeFilter');
    var resetButton = document.getElementById('resetTableFilters');
    var summaryTimer = null;

    function normalize(value) {
        return String(value || '')
            .replace(/\s+/g, ' ')
            .trim()
            .toLowerCase();
    }

    function text(value) {
        return String(value || '')
            .replace(/\s+/g, ' ')
            .trim();
    }

    function slug(value) {
        return normalize(value)
            .replace(/[^a-z0-9\u1780-\u17ff]+/gi, '-')
            .replace(/^-+|-+$/g, '');
    }

    function currentList() {
        if (window.dashboardCustomerList && Array.isArray(window.dashboardCustomerList.items)) {
            return window.dashboardCustomerList;
        }

        return null;
    }

    function listMatchingRows() {
        var list = currentList();

        if (!list || !Array.isArray(list.matchingItems)) {
            return [];
        }

        return list.matchingItems
            .map(function (item) {
                return item && item.elm ? item.elm : null;
            })
            .filter(function (row) {
                return row && row.matches && row.matches('tr[data-dashboard-row]');
            });
    }

    function allDomRows() {
        return Array.prototype.slice.call(table.querySelectorAll('tbody tr[data-dashboard-row]'));
    }

    function allListRows() {
        var list = currentList();

        if (!list || !Array.isArray(list.items)) {
            return [];
        }

        return list.items
            .map(function (item) {
                return item && item.elm ? item.elm : null;
            })
            .filter(function (row) {
                return row && row.matches && row.matches('tr[data-dashboard-row]');
            });
    }

    function endOfDay(date) {
        var copy = new Date(date.getTime());
        copy.setHours(23, 59, 59, 999);
        return copy;
    }

    function selectedStatusKeys() {
        if (!statusFilter || statusFilter.selectedIndex <= 0) {
            return [];
        }

        var option = statusFilter.options[statusFilter.selectedIndex];

        if (!option) {
            return [];
        }

        if (option.dataset.statusKeys) {
            return option.dataset.statusKeys.split('|').filter(Boolean);
        }

        return [slug(option.textContent || option.value)];
    }

    function selectedDateRange() {
        if (dateInput && dateInput.dataset.rangePending === '1') {
            return { from: null, to: null };
        }

        if (!dateInput || !dateInput._flatpickr || dateInput._flatpickr.selectedDates.length === 0) {
            return { from: null, to: null };
        }

        var selectedDates = dateInput._flatpickr.selectedDates;
        var from = new Date(selectedDates[0].getTime());
        var to = new Date((selectedDates[1] || selectedDates[0]).getTime());

        from.setHours(0, 0, 0, 0);

        return {
            from: from,
            to: endOfDay(to)
        };
    }

    function rowStatusKey(row) {
        if (row.dataset.statusKey) {
            return row.dataset.statusKey;
        }

        var statusCell = row.querySelector('.status');
        return statusCell ? slug(statusCell.textContent) : '';
    }

    function rowDocumentTypeKey(row) {
        if (row.dataset.documentTypeKey) {
            return row.dataset.documentTypeKey;
        }

        var typeCell = row.querySelector('.email');
        return typeCell ? slug(typeCell.textContent) : '';
    }

    function rowDocumentTypeLabel(row) {
        if (row.dataset.documentType) {
            return row.dataset.documentType;
        }

        var typeCell = row.querySelector('.email');
        var label = typeCell ? text(typeCell.textContent) : '';

        return label || 'N/A';
    }

    function rowUpdatedDate(row) {
        var dateCell = row.querySelector('.date');
        var timestamp = dateCell ? Number(dateCell.dataset.timestamp || 0) : 0;

        if (timestamp > 0) {
            return new Date(timestamp * 1000);
        }

        return null;
    }

    function rowMatchesFiltersFallback(row) {
        var query = normalize(searchInput ? searchInput.value : '');
        var statusKeys = selectedStatusKeys();
        var range = selectedDateRange();

        if (query && normalize(row.textContent).indexOf(query) === -1) {
            return false;
        }

        if (statusKeys.length > 0 && statusKeys.indexOf(rowStatusKey(row)) === -1) {
            return false;
        }

        if (range.from || range.to) {
            var rowDate = rowUpdatedDate(row);

            if (!rowDate) {
                return false;
            }

            if (range.from && rowDate < range.from) {
                return false;
            }

            if (range.to && rowDate > range.to) {
                return false;
            }
        }

        return true;
    }

    function rowsForCurrentSummary() {
        var matchingRows = listMatchingRows();

        if (matchingRows.length > 0 || currentList()) {
            return matchingRows;
        }

        return allDomRows().filter(rowMatchesFiltersFallback);
    }

    function rowsForDocumentTypeChart() {
        // Keep every document type visible while one type is selected. This applies
        // search, status, and date filters, but intentionally ignores the type filter.
        // List.js removes rows outside the active pagination page from the DOM, so
        // read its complete item collection before falling back to attached rows.
        var listRows = allListRows();
        var rows = listRows.length > 0 ? listRows : allDomRows();

        return rows.filter(rowMatchesFiltersFallback);
    }

    function updateKpiCards(statusCounts, totalMatches) {
        var aliases = {
            'total-documents': ['__total__'],
            'submitted': ['__total__'],
            'total-submitted': ['__total__'],

            'in-progress': ['in-progress'],
            'forwarded': ['forwarded'],
            'approved': ['approved'],
            'overdue-sla': ['overdue-sla'],
            'completed': ['completed'],
            'rejected': ['rejected'],

            'needs-your-review': ['needs-your-review', 'need-your-decision'],
            'need-your-decision': ['need-your-decision', 'needs-your-review'],

            'sent-back-to-me': ['sent-back-to-me', 'sent-back-to-you'],
            'sent-back-to-you': ['sent-back-to-you', 'sent-back-to-me'],
            'sent-back-by-you': ['sent-back-by-you'],
            'sent-back-to-my-organization': ['sent-back-to-my-organization'],
            'returned-back': ['returned-back'],

            'under-reviews': [
                'in-progress',
                'needs-your-review',
                'need-your-decision',
                'sent-back-to-my-organization',
                'returned-back',
                'sent-back-to-you',
                'overdue-sla'
            ],

            'pending-approval': [
                'in-progress',
                'needs-your-review',
                'need-your-decision',
                'sent-back-to-my-organization',
                'returned-back',
                'overdue-sla'
            ]
        };

        // KPI totals are server-calculated dashboard totals. Filters may update the
        // table and chart, but must not rewrite the other cards' reference totals.
    }

    function createChartRow(chart, key, labelText) {
        var chartRow = document.createElement('div');
        chartRow.className = 'dashboard-bar-row';
        chartRow.setAttribute('data-chart-row', '');
        chartRow.dataset.documentTypeKey = key;
        chartRow.dataset.baseCount = '0';
        chartRow.style.setProperty('--bar-index', chart.children.length);
        chartRow.setAttribute('role', 'button');
        chartRow.setAttribute('tabindex', '0');
        chartRow.setAttribute('aria-pressed', 'false');
        chartRow.title = @json(__('Filter table by')) + ' ' + (labelText || 'N/A');

        var label = document.createElement('div');
        label.className = 'dashboard-bar-label';
        label.title = labelText || 'N/A';
        label.textContent = labelText || 'N/A';

        var track = document.createElement('div');
        track.className = 'dashboard-bar-track';
        track.title = (labelText || 'N/A') + ': 0';
        track.setAttribute('aria-label', track.title);

        var fill = document.createElement('div');
        fill.className = 'dashboard-bar-fill bg-primary';
        fill.style.width = '0%';
        fill.style.setProperty('--bar-height', '0%');

        var value = document.createElement('div');
        value.className = 'dashboard-bar-value';
        value.setAttribute('data-chart-value', '');
        value.textContent = '0';

        track.appendChild(fill);
        chartRow.appendChild(label);
        chartRow.appendChild(track);
        chartRow.appendChild(value);
        chart.appendChild(chartRow);
    }

    function hasActiveChartSummaryFilters() {
        var hasSearch = searchInput && normalize(searchInput.value) !== '';
        var hasStatus = statusFilter && statusFilter.selectedIndex > 0;
        var hasDate = false;

        if (dateInput) {
            hasDate = dateInput._flatpickr
                ? dateInput.dataset.rangePending !== '1' && dateInput._flatpickr.selectedDates.length > 0
                : text(dateInput.value) !== '';
        }

        return Boolean(hasSearch || hasStatus || hasDate);
    }

    function restoreDocumentTypeChart() {
        var chartRows = Array.prototype.slice.call(document.querySelectorAll('[data-chart-row]'));
        var maxCount = chartRows.reduce(function (maximum, row) {
            return Math.max(maximum, Number(row.dataset.baseCount || 0));
        }, 0);

        chartRows.forEach(function (row, index) {
            var count = Number(row.dataset.baseCount || 0);
            var width = count > 0 && maxCount > 0
                ? Math.max(3, Math.round((count / maxCount) * 100))
                : 0;
            var fill = row.querySelector('.dashboard-bar-fill');
            var value = row.querySelector('[data-chart-value]');
            var track = row.querySelector('.dashboard-bar-track');
            var label = row.querySelector('.dashboard-bar-label');

            row.style.setProperty('--bar-index', index);
            row.style.display = count > 0 ? '' : 'none';

            if (fill) {
                fill.style.width = width + '%';
                fill.style.setProperty('--bar-height', width + '%');
            }

            if (value) {
                value.textContent = count.toLocaleString();
            }

            if (track) {
                var tooltip = ((label && label.textContent.trim()) || 'N/A') + ': ' + count.toLocaleString();
                track.title = tooltip;
                track.setAttribute('aria-label', tooltip);
            }
        });

        document.querySelectorAll('[data-chart-total]').forEach(function (total) {
            total.textContent = Number(total.dataset.baseTotal || 0).toLocaleString();
        });

        syncChartFilterState();
    }

    function updateDocumentTypeChart(typeCounts, typeLabels, totalMatches) {
        var chart = document.querySelector('.dashboard-bar-chart');

        if (!chart) {
            return;
        }

        // A chart click filters the table, but the chart must retain its full
        // document-type context so the unselected bars can remain visible.
        if (documentTypeFilter && documentTypeFilter.value !== '') {
            syncChartFilterState();
            return;
        }

        /*
         * The server rendered this chart from the complete request collection.
         * During List.js startup only the first pagination page may temporarily
         * be attached, so never replace the correct baseline with that partial
         * ten-row snapshot.
         */
        if (!hasActiveChartSummaryFilters()) {
            restoreDocumentTypeChart();
            return;
        }

        Object.keys(typeCounts).forEach(function (key) {
            var existingRow = chart.querySelector('[data-chart-row][data-document-type-key="' + key + '"]');

            if (!existingRow) {
                createChartRow(chart, key, typeLabels[key] || 'N/A');
            }
        });

        var chartRows = Array.prototype.slice.call(document.querySelectorAll('[data-chart-row]'));
        var maxCount = 0;

        chartRows.forEach(function (row, index) {
            var key = row.dataset.documentTypeKey || '';
            var count = typeCounts[key] || 0;
            row.style.setProperty('--bar-index', index);
            row.dataset.filteredCount = count;
            maxCount = Math.max(maxCount, count);
        });

        chartRows.forEach(function (row) {
            var count = Number(row.dataset.filteredCount || 0);
            var width = count > 0 && maxCount > 0 ? Math.max(3, Math.round((count / maxCount) * 100)) : 0;
            var fill = row.querySelector('.dashboard-bar-fill');
            var value = row.querySelector('[data-chart-value]');

            row.style.display = count > 0 ? '' : 'none';

            if (fill) {
                fill.style.width = width + '%';
                fill.style.setProperty('--bar-height', width + '%');
            }

            if (value) {
                value.textContent = count.toLocaleString();
            }

            var track = row.querySelector('.dashboard-bar-track');
            var label = row.querySelector('.dashboard-bar-label');
            if (track) {
                var tooltip = ((label && label.textContent.trim()) || 'N/A') + ': ' + count.toLocaleString();
                track.title = tooltip;
                track.setAttribute('aria-label', tooltip);
            }
        });

        document.querySelectorAll('[data-chart-total]').forEach(function (total) {
            total.textContent = totalMatches.toLocaleString();
        });

        syncChartFilterState();
    }

    function syncChartFilterState() {
        var selectedKey = documentTypeFilter ? documentTypeFilter.value : '';

        document.querySelectorAll('[data-chart-row]').forEach(function (row) {
            var isActive = selectedKey !== '' && row.dataset.documentTypeKey === selectedKey;
            var isDisabled = selectedKey !== '' && !isActive;
            row.classList.toggle('is-filter-active', isActive);
            row.classList.toggle('is-filter-disabled', isDisabled);
            row.setAttribute('aria-pressed', isActive ? 'true' : 'false');
            row.setAttribute('aria-disabled', 'false');
            row.setAttribute('tabindex', '0');
        });
    }

    function syncKpiFilterState() {
        var hasStatusFilter = statusFilter && statusFilter.selectedIndex > 0;
        var selectedStatus = hasStatusFilter ? statusFilter.value : '';

        document.querySelectorAll('[data-dashboard-kpi-card]').forEach(function (card) {
            var title = card.querySelector('.fw-medium');
            var label = title ? title.textContent.trim() : '';
            var isActive = selectedStatus !== '' && label === selectedStatus;

            card.classList.toggle('is-filter-active', isActive);
            card.setAttribute('aria-pressed', isActive ? 'true' : 'false');
        });
    }

    function filterTableFromChart(row) {
        if (!row || !documentTypeFilter) {
            return;
        }

        var key = row.dataset.documentTypeKey || '';
        var selectedKey = documentTypeFilter.value || '';

        var hasOption = Array.prototype.some.call(documentTypeFilter.options, function (option) {
            return option.value === key;
        });

        if (!hasOption) {
            return;
        }

        documentTypeFilter.value = selectedKey === key ? '' : key;
        syncChartFilterState();
        documentTypeFilter.dispatchEvent(new Event('change', { bubbles: true }));
    }

    function updateDashboardSummaries() {
        var statusCounts = {};
        var typeCounts = {};
        var typeLabels = {};
        var totalMatches = 0;
        var chartTotalMatches = 0;

        rowsForCurrentSummary().forEach(function (row) {
            var statusKey = rowStatusKey(row);

            totalMatches += 1;

            if (statusKey) {
                statusCounts[statusKey] = (statusCounts[statusKey] || 0) + 1;
            }
        });

        rowsForDocumentTypeChart().forEach(function (row) {
            var typeKey = rowDocumentTypeKey(row);

            chartTotalMatches += 1;

            if (typeKey) {
                typeCounts[typeKey] = (typeCounts[typeKey] || 0) + 1;
                typeLabels[typeKey] = rowDocumentTypeLabel(row);
            }
        });

        updateKpiCards(statusCounts, totalMatches);
        updateDocumentTypeChart(typeCounts, typeLabels, chartTotalMatches);
        syncKpiFilterState();
    }

    function scheduleSummaryUpdate() {
        window.clearTimeout(summaryTimer);
        summaryTimer = window.setTimeout(updateDashboardSummaries, 120);
    }

    window.dispatchDashboardSummaryUpdate = scheduleSummaryUpdate;

    var dashboardRefreshInFlight = false;

    window.refreshDashboardData = function () {
        if (dashboardRefreshInFlight) {
            return Promise.resolve(false);
        }

        dashboardRefreshInFlight = true;
        listContainer.classList.add('dashboard-data-refreshing');

        return fetch(window.location.href, {
            method: 'GET',
            headers: {
                'Accept': 'text/html',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            cache: 'no-store'
        }).then(function (response) {
            if (!response.ok) {
                throw new Error('Dashboard refresh failed.');
            }

            return response.text();
        }).then(function (html) {
            var refreshedDocument = new DOMParser().parseFromString(html, 'text/html');
            var refreshedBody = refreshedDocument.querySelector('#customerTable tbody');
            var currentBody = table.querySelector('tbody');

            if (!refreshedBody || !currentBody) {
                throw new Error('Dashboard table was not found.');
            }

            var list = currentList();
            var previousStart = list ? Number(list.i || 1) : 1;

            currentBody.innerHTML = refreshedBody.innerHTML;

            var currentChart = document.querySelector('.dashboard-bar-chart');
            var refreshedChart = refreshedDocument.querySelector('.dashboard-bar-chart');
            var currentChartTotal = document.querySelector('[data-chart-total]');
            var refreshedChartTotal = refreshedDocument.querySelector('[data-chart-total]');

            if (currentChart && refreshedChart) {
                currentChart.innerHTML = refreshedChart.innerHTML;

                if (typeof window.animateDocumentTypeBars === 'function') {
                    window.animateDocumentTypeBars(true);
                }
            }

            if (currentChartTotal && refreshedChartTotal) {
                var refreshedBaseTotal = refreshedChartTotal.getAttribute('data-base-total')
                    || refreshedChartTotal.textContent.replace(/[^0-9.-]/g, '')
                    || '0';

                currentChartTotal.dataset.baseTotal = refreshedBaseTotal;
                currentChartTotal.textContent = Number(refreshedBaseTotal).toLocaleString();
            }

            document.querySelectorAll('[data-dashboard-kpi-card][data-kpi-key]').forEach(function (card) {
                var key = card.getAttribute('data-kpi-key');
                var refreshedCard = Array.prototype.find.call(
                    refreshedDocument.querySelectorAll('[data-dashboard-kpi-card][data-kpi-key]'),
                    function (candidate) {
                        return candidate.getAttribute('data-kpi-key') === key;
                    }
                );
                var value = card.querySelector('[data-kpi-value], .counter-value');
                var refreshedValue = refreshedCard
                    ? refreshedCard.querySelector('[data-kpi-value], .counter-value')
                    : null;

                if (!value || !refreshedValue) {
                    return;
                }

                var target = refreshedValue.getAttribute('data-target') || refreshedValue.textContent.trim() || '0';
                value.setAttribute('data-target', target);

                if (typeof window.animateDashboardCounters !== 'function') {
                    value.textContent = target;
                }
            });

            if (typeof window.animateDashboardCounters === 'function') {
                window.animateDashboardCounters();
            }

            if (list && typeof list.reIndex === 'function') {
                list.reIndex();
                list.update();

                if (searchInput && searchInput.value) {
                    list.search(searchInput.value);
                }

                // Existing dashboard handlers rebuild the combined status, document
                // type, and date filter without replacing the controls themselves.
                if (statusFilter) {
                    statusFilter.dispatchEvent(new Event('change', { bubbles: true }));
                } else if (documentTypeFilter) {
                    documentTypeFilter.dispatchEvent(new Event('change', { bubbles: true }));
                }

                var lastStart = Math.max(1, list.matchingItems.length - list.page + 1);
                list.show(Math.min(previousStart, lastStart), list.page);
            }

            scheduleSummaryUpdate();
            window.dispatchEvent(new CustomEvent('dashboard:data-refreshed'));

            return true;
        }).catch(function () {
            return false;
        }).finally(function () {
            dashboardRefreshInFlight = false;
            listContainer.classList.remove('dashboard-data-refreshing');
        });
    };

    if (searchInput) {
        searchInput.addEventListener('input', scheduleSummaryUpdate);
    }

    if (statusFilter) {
        statusFilter.addEventListener('change', function () {
            syncKpiFilterState();
            scheduleSummaryUpdate();
        });
    }

    if (documentTypeFilter) {
        documentTypeFilter.addEventListener('change', function () {
            syncChartFilterState();
            scheduleSummaryUpdate();
        });
    }

    document.querySelectorAll('.dashboard-bar-chart').forEach(function (chart) {
        chart.addEventListener('click', function (event) {
            filterTableFromChart(event.target.closest('[data-chart-row]'));
        });

        chart.addEventListener('keydown', function (event) {
            if (event.key !== 'Enter' && event.key !== ' ') {
                return;
            }

            var row = event.target.closest('[data-chart-row]');

            if (row) {
                event.preventDefault();
                filterTableFromChart(row);
            }
        });
    });

    if (dateInput) {
        dateInput.addEventListener('change', scheduleSummaryUpdate);
    }

    if (resetButton) {
        resetButton.addEventListener('click', function () {
            window.setTimeout(function () {
                syncKpiFilterState();
                scheduleSummaryUpdate();
            }, 160);
        });
    }

    document.querySelectorAll('[data-dashboard-kpi-card]').forEach(function (card) {
        card.addEventListener('click', function () {
            window.setTimeout(scheduleSummaryUpdate, 160);
        });
    });

    if (typeof window.dashboardFilterSummaryUpdateListener === 'function') {
        window.removeEventListener('dashboard:filters-updated', window.dashboardFilterSummaryUpdateListener);
    }
    window.dashboardFilterSummaryUpdateListener = scheduleSummaryUpdate;
    window.addEventListener('dashboard:filters-updated', window.dashboardFilterSummaryUpdateListener);

    scheduleSummaryUpdate();
    window.setTimeout(scheduleSummaryUpdate, 300);
    window.setTimeout(scheduleSummaryUpdate, 800);
};

if (!window.dashboardFilterSummaryLifecycleBound) {
    window.dashboardFilterSummaryLifecycleBound = true;
    document.addEventListener('DOMContentLoaded', function () {
        window.initializeDashboardFilterSummary();
    });
    document.addEventListener('turbo:load', function () {
        window.initializeDashboardFilterSummary();
    });
}
</script>
@endonce