{{--
    Sortierbare Tabellen ohne Nachladen (Vorgabe 07.09.2026).

    Gedacht fuer server-erzeugte Tabellen. Der Sortimentsbaum sortiert dagegen
    ueber seinen eigenen Zustand - dort erzeugt Alpine die Zeilen, ein
    Umsortieren im DOM wuerde beim naechsten Neuzeichnen wieder verworfen.

    Verwendung:
        <table x-data="sortierbareTabelle()"> … </table>
        <th data-typ="zahl" @click="sortiere($el)">Menge</th>

    data-typ: text (Vorgabe) · zahl · datum
    Braucht eine Zelle einen anderen Sortierwert als ihren Text - etwa eine
    Statusspalte, die nach Rang und nicht alphabetisch sortieren soll -,
    bekommt sie data-wert="…".

    Zwei Regeln, die den Unterschied machen:
      * Deutsche Zahlen werden richtig gelesen: "1.234,50" ist ein Wert, keine
        Zeichenkette. Sonst sortiert "10" vor "9".
      * Leere Zellen ("–", "kein Absatz") stehen IMMER am Ende, in beide
        Richtungen. Als 0 behandelt wuerden sie beim Sortieren nach oben
        rutschen und genau die Zeilen verdecken, wegen derer man sortiert hat.
--}}
<script>
function sortierbareTabelle() {
    return {
        spalte: null,
        richtung: 'asc',

        wert(zelle, typ) {
            if (! zelle) return null;

            let roh = zelle.dataset.wert !== undefined
                ? zelle.dataset.wert
                : zelle.innerText.trim();

            if (roh === '' || roh === '–' || roh === '-') return null;

            if (typ === 'zahl') {
                // Deutsche Schreibweise: Punkt ist Tausender, Komma Dezimal.
                let z = roh.replace(/[^\d,.\-]/g, '').replace(/\./g, '').replace(',', '.');
                let n = parseFloat(z);
                return isNaN(n) ? null : n;
            }

            if (typ === 'datum') {
                let m = roh.match(/(\d{2})\.(\d{2})\.(\d{4})/);
                return m ? new Date(+m[3], +m[2] - 1, +m[1]).getTime() : null;
            }

            return roh.toLowerCase();
        },

        sortiere(kopf) {
            const tabelle   = kopf.closest('table');
            const kopfzeile = kopf.parentNode;
            const i         = Array.prototype.indexOf.call(kopfzeile.children, kopf);
            const typ       = kopf.dataset.typ || 'text';

            if (this.spalte === i) {
                this.richtung = this.richtung === 'asc' ? 'desc' : 'asc';
            } else {
                this.spalte   = i;
                this.richtung = typ === 'text' ? 'asc' : 'desc';
            }

            const v       = this.richtung === 'asc' ? 1 : -1;
            const koerper = tabelle.tBodies[0];

            if (! koerper) {
                return;
            }

            const zeilen = Array.prototype.slice.call(koerper.rows)
                // Platzhalterzeilen ("noch nichts vorhanden") haben ein
                // colspan und duerfen nicht mitsortiert werden.
                .filter(z => z.cells.length === kopfzeile.children.length);

            zeilen.sort((a, b) => {
                const x = this.wert(a.cells[i], typ);
                const y = this.wert(b.cells[i], typ);

                if (x === null && y === null) return 0;
                if (x === null) return 1;
                if (y === null) return -1;

                return typ === 'text'
                    ? v * String(x).localeCompare(String(y), 'de')
                    : v * (x - y);
            });

            zeilen.forEach(z => koerper.appendChild(z));

            Array.prototype.forEach.call(kopfzeile.children, (th, j) => {
                const alt = th.querySelector('[data-pfeil]');
                if (alt) {
                    alt.remove();
                }

                if (j === i) {
                    const pfeil = document.createElement('span');
                    pfeil.dataset.pfeil = '1';
                    pfeil.textContent = this.richtung === 'asc' ? ' ▲' : ' ▼';
                    th.appendChild(pfeil);
                }
            });
        },
    };
}
</script>