{{-- Sortier- und Suchverhalten für einfache Tabellen ohne Serverpaging.

     Erwartet:
       $tableId   id der <table>
       $searchId  id eines optionalen Suchfeldes (leer lassen, wenn keins da ist)
       $minWidth  optionale Mindestbreite der Tabelle (Default 980px)

     Sortierbare Spalten bekommen `data-sortable="true"` und optional
     `data-sort-type="number|date"`. Für große Listen ist das nicht gedacht —
     dort gehört Yajra-Datatables hin.

     Sortierwerte (A14): Zellen mit Zahlen, Datum oder mehrzeiligem Inhalt tragen
     `data-sort-value` mit dem UNFORMATIERTEN Wert — Zahl mit Punkt als
     Dezimaltrenner, Datum als `Y-m-d`. Der Zellentext ist lokalisiert
     (`Util::_thousands_separator()` und `formatDate()` schalten bei `en` auf
     `1,000.00` und `Y-m-d` um) und taugt deshalb nicht als Sortiergrundlage:
     der Datumsparser erkennt nur `dd.mm.yyyy`, und der Zahlenparser macht aus
     `1,000.00` eine 1. Ohne Attribut wird weiterhin der Text gelesen — das
     stimmt nur im deutschen Format. --}}
@php
    $sortableMinWidth = $minWidth ?? '980px';
    $sortableSearchId = $searchId ?? null;
@endphp

<style>
    #{{ $tableId }} {
        min-width: {{ $sortableMinWidth }};
    }

    #{{ $tableId }} th,
    #{{ $tableId }} td {
        vertical-align: middle;
    }

    #{{ $tableId }} th[data-sortable="true"] {
        white-space: nowrap;
    }

    #{{ $tableId }} .sortable-label {
        align-items: center;
        display: inline-flex;
        gap: .25rem;
        white-space: nowrap;
        width: 100%;
    }

    #{{ $tableId }} .sort-icon {
        color: #adb5bd;
        flex: 0 0 auto;
        font-size: .875rem;
        line-height: 1;
    }

    #{{ $tableId }} th[data-sort-direction="asc"] .sort-icon,
    #{{ $tableId }} th[data-sort-direction="desc"] .sort-icon {
        color: #4e73df;
    }
</style>

<script>
    $(document).ready(function() {
        var tableSelector = '#{{ $tableId }}';
        var searchSelector = @json($sortableSearchId ? '#'.$sortableSearchId : null);

        if (searchSelector) {
            $(searchSelector).on('keyup search', function() {
                var search = $(this).val().toLowerCase();

                $(tableSelector + ' tbody tr').each(function() {
                    var rowText = $(this).text().toLowerCase();
                    $(this).toggle(rowText.indexOf(search) !== -1);
                });
            });
        }

        $(tableSelector + ' th[data-sortable="true"]').css('cursor', 'pointer').on('click', function() {
            var $header = $(this);
            var columnIndex = $header.index();
            var sortType = $header.data('sort-type') || 'text';
            var direction = $header.data('sort-direction') === 'asc' ? 'desc' : 'asc';
            var rows = $(tableSelector + ' tbody tr').get();

            rows.sort(function(a, b) {
                var aValue = getSortValue($(a).children('td').eq(columnIndex), sortType);
                var bValue = getSortValue($(b).children('td').eq(columnIndex), sortType);
                var result;

                if (sortType === 'number' || sortType === 'date') {
                    result = aValue < bValue ? -1 : (aValue > bValue ? 1 : 0);
                } else {
                    // Umlaute und Akzente gehören alphabetisch einsortiert, nicht
                    // hinter das Z — das leistet nur ein Sprachvergleich.
                    result = aValue.localeCompare(bValue, undefined, {
                        numeric: true,
                        sensitivity: 'base'
                    });
                }

                return direction === 'asc' ? result : -result;
            });

            $(tableSelector + ' th[data-sortable="true"]')
                .removeData('sort-direction')
                .removeAttr('data-sort-direction');
            $header.data('sort-direction', direction).attr('data-sort-direction', direction);
            $.each(rows, function(index, row) {
                $(tableSelector + ' tbody').append(row);
            });
        });

        function getSortValue($cell, sortType) {
            var raw = $cell.attr('data-sort-value');
            var hasRaw = typeof raw !== 'undefined';
            var value = $.trim(hasRaw ? raw : $cell.text());

            if (sortType === 'number') {
                // Leer heißt "kein Wert" und gehört ans Ende, nicht zwischen die
                // Stornos: eine 0 stünde sonst mitten in negativen Punkteständen.
                if (value === '') {
                    return Number.NEGATIVE_INFINITY;
                }

                return hasRaw
                    ? (parseFloat(value) || 0)
                    : (parseFloat(value.replace(/\./g, '').replace(',', '.').replace(/[^\d.-]/g, '')) || 0);
            }

            if (sortType === 'date') {
                if (hasRaw) {
                    var iso = value.match(/^(\d{4})-(\d{2})-(\d{2})/);

                    return iso ? new Date(iso[1], iso[2] - 1, iso[3]).getTime() : Number.NEGATIVE_INFINITY;
                }

                var parts = value.match(/(\d{2})\.(\d{2})\.(\d{4})/);

                return parts ? new Date(parts[3], parts[2] - 1, parts[1]).getTime() : Number.NEGATIVE_INFINITY;
            }

            return value.toLowerCase();
        }
    });
</script>