@props([
    'id',
    'columns' => [],
    'tableClass' => '',
    'storageKey' => null,
    'minWidth' => null,
    'resizable' => true,
    'resizableColumnKeys' => [],
    'columnTools' => true,
])

@php
    $resolvedStorageKey = $storageKey ?: $id . '-columns';
    $tableClasses = trim('table align-middle table-nowrap dashboard-resizable-table ' . $tableClass);
    $resolvedMinWidth = $minWidth ? (is_numeric($minWidth) ? $minWidth . 'px' : $minWidth) : null;
    $resolvedResizableColumnKeys = collect($resizableColumnKeys)
        ->map(fn ($key) => (string) $key)
        ->filter(fn ($key) => $key !== '')
        ->values();
@endphp

<div {{ $attributes->class(['table-responsive', 'table-card', 'mt-2', 'mb-1', 'dashboard-data-table']) }}>
    <table
        class="{{ $tableClasses }}"
        id="{{ $id }}"
        @if($resizable || $resolvedResizableColumnKeys->isNotEmpty()) data-resizable-columns="1" @endif
        @if($resolvedResizableColumnKeys->isNotEmpty()) data-resizable-column-keys="{{ $resolvedResizableColumnKeys->implode(',') }}" @endif
        @if($columnTools) data-sort-icon-only="1" @endif
        data-resizable-storage-key="{{ $resolvedStorageKey }}"
        @if($resolvedMinWidth) data-default-min-width="{{ $resolvedMinWidth }}" style="min-width: {{ $resolvedMinWidth }};" @endif>
        @if(count($columns))
            <colgroup>
                @foreach($columns as $key => $width)
                    <col data-column-key="{{ is_string($key) ? $key : $loop->index }}" style="width: {{ is_numeric($width) ? $width . 'px' : $width }};">
                @endforeach
            </colgroup>
        @endif

        {{ $slot }}
    </table>
</div>

@once
    <style>
        .dashboard-data-table {
            width: 100%;
            overflow-x: auto;
            overflow-y: visible;
        }

        .dashboard-data-table .dashboard-resizable-table {
            table-layout: fixed;
            width: 100%;
            min-width: 100%;
            margin-bottom: 0;
        }

        .dashboard-data-table .dashboard-resizable-table th,
        .dashboard-data-table .dashboard-resizable-table td {
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }

        .dashboard-data-table .dashboard-resizable-table th {
            position: relative;
            padding-right: 1.35rem;
            user-select: none;
            white-space: nowrap;
        }

        .dashboard-data-table .dashboard-resizable-table th.sort {
            cursor: pointer;
            padding-right: 2rem;
        }

        .dashboard-data-table .dashboard-resizable-table th.text-end {
            padding-left: .75rem;
            padding-right: 1.35rem;
        }

        .dashboard-data-table .dashboard-resizable-table th.text-end.sort {
            padding-left: 2rem;
            padding-right: .75rem;
        }

        .dashboard-data-table .dashboard-column-resizer {
            position: absolute;
            inset: 0 -3px 0 auto;
            z-index: 3;
            width: 8px;
            cursor: col-resize;
            touch-action: none;
        }

        .dashboard-data-table .dashboard-column-resizer::after {
            position: absolute;
            top: 22%;
            right: 3px;
            width: 1px;
            height: 56%;
            background: rgba(108, 117, 125, .35);
            content: '';
        }

        .dashboard-data-table .dashboard-column-resizer:hover::after,
        .dashboard-data-table th.is-column-resizing .dashboard-column-resizer::after {
            width: 2px;
            background: var(--vz-primary);
        }

        body.dashboard-column-resize-active {
            cursor: col-resize !important;
            user-select: none;
        }
    </style>

    <script>
        (function initializeDashboardDataTables() {
            function numericPx(value) {
                var number = parseInt(String(value || '').replace('px', ''), 10);
                return Number.isFinite(number) ? number : 0;
            }

            function columnKey(table, headers, columns, index) {
                var column = columns[index];
                var header = headers[index];

                return (column && column.dataset.columnKey)
                    || (header && header.dataset.sort)
                    || String(index);
            }

            function tableStorageKey(table) {
                return (table.dataset.resizableStorageKey || table.id || 'dashboard-table') + ':' + window.location.pathname;
            }

            function syncTableMinWidth(table, columns) {
                if (!columns.length) {
                    return;
                }

                var sum = columns.reduce(function (total, column) {
                    return total + Math.max(0, numericPx(column.style.width) || Math.floor(column.getBoundingClientRect().width || 0));
                }, 0);
                var declaredMin = numericPx(table.dataset.defaultMinWidth || table.style.minWidth || 0);
                var nextMinWidth = Math.max(sum, declaredMin);

                table.style.width = '100%';

                if (nextMinWidth > 0) {
                    table.style.minWidth = nextMinWidth + 'px';
                }
            }

            function setColumnWidth(table, headers, columns, index, width) {
                var minimumWidth = 80;
                width = Math.max(minimumWidth, Math.round(width || 0));

                if (columns[index]) {
                    columns[index].style.width = width + 'px';
                }

                if (headers[index]) {
                    headers[index].style.width = width + 'px';
                    headers[index].style.minWidth = width + 'px';
                }

                syncTableMinWidth(table, columns);
            }

            function readStoredWidths(storageKey) {
                try {
                    return JSON.parse(localStorage.getItem(storageKey) || '{}') || {};
                } catch (error) {
                    return {};
                }
            }

            function saveWidths(table, headers, columns) {
                var widths = {};
                var storageKey = tableStorageKey(table);

                columns.forEach(function (column, index) {
                    widths[columnKey(table, headers, columns, index)] = numericPx(column.style.width) || Math.round(column.getBoundingClientRect().width || 0);
                });

                try {
                    localStorage.setItem(storageKey, JSON.stringify(widths));
                } catch (error) {
                    // Browser storage may be unavailable; resizing still works for this page view.
                }
            }

            function restoreDefaultWidths(table, headers, columns, index) {
                var defaultWidth = numericPx(columns[index].dataset.defaultWidth || columns[index].getAttribute('data-default-width'));
                if (!defaultWidth) {
                    defaultWidth = numericPx(columns[index].style.width) || Math.round(headers[index].getBoundingClientRect().width || 0);
                }

                setColumnWidth(table, headers, columns, index, defaultWidth);
                saveWidths(table, headers, columns);
            }

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

            function cellSortValue(row, columnIndex) {
                var cell = row.cells[columnIndex];
                if (!cell) {
                    return '';
                }

                var timestampSource = cell.matches('[data-timestamp]') ? cell : cell.querySelector('[data-timestamp]');
                if (timestampSource && timestampSource.dataset.timestamp) {
                    var timestamp = Number(timestampSource.dataset.timestamp);
                    if (!Number.isNaN(timestamp)) {
                        return timestamp;
                    }
                }

                var text = normalizeText(cell.textContent || '');
                var number = Number(text.replace(/,/g, ''));

                if (text !== '' && !Number.isNaN(number) && /^-?\d+(?:[.,]\d+)?$/.test(text.replace(/,/g, ''))) {
                    return number;
                }

                return text.toLowerCase();
            }

            function compareValues(a, b, order) {
                var result;

                if (typeof a === 'number' && typeof b === 'number') {
                    result = a - b;
                } else {
                    result = String(a).localeCompare(String(b), undefined, {
                        numeric: true,
                        sensitivity: 'base'
                    });
                }

                return order === 'desc' ? result * -1 : result;
            }

            function sortTableRows(table, columnIndex, order) {
                var tbody = table.querySelector('tbody');
                if (!tbody) {
                    return;
                }

                var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr')).filter(function (row) {
                    return !(row.querySelector('td[colspan]') && row.cells.length === 1);
                });
                var emptyRows = Array.prototype.slice.call(tbody.querySelectorAll('tr')).filter(function (row) {
                    return row.querySelector('td[colspan]') && row.cells.length === 1;
                });

                rows.forEach(function (row, index) {
                    if (!row.dataset.dashboardOriginalIndex) {
                        row.dataset.dashboardOriginalIndex = String(index);
                    }
                });

                rows.sort(function (rowA, rowB) {
                    return compareValues(cellSortValue(rowA, columnIndex), cellSortValue(rowB, columnIndex), order);
                });

                rows.forEach(function (row) {
                    tbody.appendChild(row);
                });
                emptyRows.forEach(function (row) {
                    tbody.appendChild(row);
                });
            }

            function markActiveSort(table, columnIndex, order) {
                Array.prototype.slice.call(table.querySelectorAll('thead th')).forEach(function (header) {
                    header.classList.remove('asc', 'desc');
                    header.setAttribute('aria-sort', 'none');
                });

                var activeHeader = table.querySelectorAll('thead th')[columnIndex];
                if (!activeHeader) {
                    return;
                }

                activeHeader.classList.add(order === 'desc' ? 'desc' : 'asc');
                activeHeader.setAttribute('aria-sort', order === 'desc' ? 'descending' : 'ascending');
            }

            function applyColumnSort(table, columnIndex, order) {
                var headers = Array.prototype.slice.call(table.querySelectorAll('thead th'));
                var dataSort = headers[columnIndex] ? (headers[columnIndex].dataset.sort || '') : '';
                var event = new CustomEvent('dashboard-data-table:sort', {
                    cancelable: true,
                    detail: {
                        table: table,
                        columnIndex: columnIndex,
                        order: order,
                        dataSort: dataSort,
                        handled: false
                    }
                });

                document.dispatchEvent(event);

                if (!event.detail.handled && !event.defaultPrevented) {
                    if (table.id === 'customerTable' && window.dashboardCustomerList && dataSort) {
                        window.dashboardCustomerList.sort(dataSort, { order: order === 'desc' ? 'desc' : 'asc' });
                    } else {
                        sortTableRows(table, columnIndex, order);
                    }
                }

                markActiveSort(table, columnIndex, order);
                document.dispatchEvent(new CustomEvent('dashboard-data-table:sorted', {
                    detail: {
                        table: table,
                        columnIndex: columnIndex,
                        order: order,
                        dataSort: dataSort
                    }
                }));
            }

            function addSortIconOnlyHandlers(table, headers) {
                if (table.dataset.sortIconOnly !== '1') {
                    return;
                }

                headers.forEach(function (header, index) {
                    if (!header.classList.contains('sort') || header.dataset.sortIconReady === '1') {
                        return;
                    }

                    header.dataset.sortIconReady = '1';
                    header.setAttribute('role', 'button');
                    header.setAttribute('tabindex', '0');
                    header.setAttribute('aria-sort', 'none');
                    header.setAttribute('title', @json(__('Click to sort ascending or descending')));

                    function nextOrder() {
                        return header.classList.contains('asc') ? 'desc' : 'asc';
                    }

                    function handleSort(event) {
                        var resizeHandle = event.target && event.target.closest
                            ? event.target.closest('.dashboard-column-resizer')
                            : null;
                        var resizeGestureActive = table.__dashboardColumnResizeActive === true
                            || (table.__dashboardSuppressSortUntil || 0) > Date.now();

                        if (resizeHandle || resizeGestureActive) {
                            event.preventDefault();
                            event.stopPropagation();
                            if (typeof event.stopImmediatePropagation === 'function') {
                                event.stopImmediatePropagation();
                            }
                            return;
                        }

                        if (event.target && event.target.closest && event.target.closest('button, a, input, select, textarea, .dropdown-menu')) {
                            return;
                        }

                        event.preventDefault();
                        event.stopPropagation();
                        if (typeof event.stopImmediatePropagation === 'function') {
                            event.stopImmediatePropagation();
                        }

                        applyColumnSort(table, index, nextOrder());
                    }

                    header.addEventListener('click', handleSort, true);
                    header.addEventListener('keydown', function (event) {
                        if (event.key === 'Enter' || event.key === ' ') {
                            handleSort(event);
                        }
                    }, true);
                });
            }

            document.querySelectorAll('table[data-resizable-columns="1"], table[data-sort-icon-only="1"]').forEach(function (table) {
                var headers = Array.prototype.slice.call(table.querySelectorAll('thead th'));
                var columns = Array.prototype.slice.call(table.querySelectorAll('colgroup col'));

                if (!headers.length) {
                    return;
                }

                headers.forEach(function (header) {
                    if (!header.dataset.originalTitle) {
                        header.dataset.originalTitle = normalizeText(header.textContent || '');
                    }
                });

                addSortIconOnlyHandlers(table, headers);

                if (!columns.length || headers.length !== columns.length || table.dataset.resizableColumns !== '1') {
                    return;
                }

                var storageKey = tableStorageKey(table);
                var storedWidths = readStoredWidths(storageKey);
                var resizableColumnKeys = String(table.dataset.resizableColumnKeys || '')
                    .split(',')
                    .map(function (key) { return key.trim(); })
                    .filter(Boolean);

                columns.forEach(function (column, index) {
                    var defaultWidth = numericPx(column.style.width || column.getBoundingClientRect().width || 80);
                    column.dataset.defaultWidth = String(defaultWidth);
                    setColumnWidth(table, headers, columns, index, numericPx(storedWidths[columnKey(table, headers, columns, index)] || defaultWidth));

                    if (resizableColumnKeys.length && resizableColumnKeys.indexOf(columnKey(table, headers, columns, index)) === -1) {
                        return;
                    }

                    if (headers[index].querySelector('.dashboard-column-resizer')) {
                        return;
                    }

                    var resizer = document.createElement('span');
                    resizer.className = 'dashboard-column-resizer';
                    resizer.setAttribute('role', 'separator');
                    resizer.setAttribute('aria-orientation', 'vertical');
                    resizer.setAttribute('title', @json(__('Drag to resize column')));
                    headers[index].appendChild(resizer);

                    /*
                     * A pointer drag ends with a synthetic click. Block that click at
                     * the handle so List.js and the header sorter cannot interpret the
                     * completed resize as a request to sort the same column.
                     */
                    resizer.addEventListener('click', function (event) {
                        event.preventDefault();
                        event.stopPropagation();
                        if (typeof event.stopImmediatePropagation === 'function') {
                            event.stopImmediatePropagation();
                        }
                    }, true);

                    resizer.addEventListener('dblclick', function (event) {
                        event.preventDefault();
                        event.stopPropagation();
                        if (typeof event.stopImmediatePropagation === 'function') {
                            event.stopImmediatePropagation();
                        }
                        restoreDefaultWidths(table, headers, columns, index);
                    });

                    resizer.addEventListener('pointerdown', function (event) {
                        event.preventDefault();
                        event.stopPropagation();
                        if (typeof event.stopImmediatePropagation === 'function') {
                            event.stopImmediatePropagation();
                        }

                        var renderedWidths = columns.map(function (renderedColumn) {
                            return Math.round(renderedColumn.getBoundingClientRect().width || numericPx(renderedColumn.style.width) || 80);
                        });
                        renderedWidths.forEach(function (renderedWidth, renderedIndex) {
                            setColumnWidth(table, headers, columns, renderedIndex, renderedWidth);
                        });

                        var startX = event.clientX;
                        var startWidth = renderedWidths[index];
                        table.__dashboardColumnResizeActive = true;
                        table.__dashboardSuppressSortUntil = Date.now() + 500;
                        headers[index].classList.add('is-column-resizing');
                        document.body.classList.add('dashboard-column-resize-active');

                        function move(moveEvent) {
                            setColumnWidth(table, headers, columns, index, startWidth + moveEvent.clientX - startX);
                        }

                        function stop() {
                            table.__dashboardColumnResizeActive = false;
                            table.__dashboardSuppressSortUntil = Date.now() + 250;
                            headers[index].classList.remove('is-column-resizing');
                            document.body.classList.remove('dashboard-column-resize-active');
                            document.removeEventListener('pointermove', move);
                            document.removeEventListener('pointerup', stop);
                            document.removeEventListener('pointercancel', stop);
                            saveWidths(table, headers, columns);
                        }

                        document.addEventListener('pointermove', move);
                        document.addEventListener('pointerup', stop);
                        document.addEventListener('pointercancel', stop);
                    });
                });

                syncTableMinWidth(table, columns);
                window.addEventListener('resize', function () {
                    syncTableMinWidth(table, columns);
                });
            });
        })();
    </script>
@endonce