@extends('layouts.app')
@section('title', 'Zeilen Sortieren – Text alphabetisch sortieren | kotsch.tech')
@section('meta_description', 'Zeilen alphabetisch, numerisch oder nach Länge sortieren. Duplikate entfernen, umkehren, mischen – kostenlos und lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="Zeilen sortieren, Text sortieren, alphabetisch sortieren, Liste sortieren, Zeilensortierung online">
@endsection
@section('content')
@include('tools._tool_base')

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-sort-alpha-down"></i> Text</span>
        <h1 class="tool-h1">Zeilen<span>sortieren.</span></h1>
        <p class="tool-sub">Alphabetisch, numerisch, nach Länge – plus Mischen, Umkehren, Duplikate entfernen.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:16px">
            <div class="t-field">
                <label class="t-label">Eingabe</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="zs-inp" placeholder="Zeilen eingeben oder einfügen…" style="min-height:260px;font-family:'JetBrains Mono',monospace;font-size:0.85rem" oninput="applySort()"></textarea>
                    <button class="t-copy-btn" onclick="navigator.clipboard.readText().then(t=>{document.getElementById('zs-inp').value=t;applySort()})"><i class="fas fa-paste"></i></button>
                </div>
            </div>
            <div class="t-field">
                <label class="t-label">Ergebnis <span id="zs-count" style="color:var(--muted);font-weight:400"></span></label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="zs-out" readonly style="min-height:260px;font-family:'JetBrains Mono',monospace;font-size:0.85rem"></textarea>
                    <button class="t-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('zs-out').value)"><i class="fas fa-copy"></i></button>
                </div>
            </div>
        </div>

        <div style="border-top:1px solid var(--line);padding-top:14px;margin-top:8px">
            <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px">
                <button class="t-btn ghost sm" onclick="doSort('az')"><i class="fas fa-sort-alpha-down"></i> A → Z</button>
                <button class="t-btn ghost sm" onclick="doSort('za')"><i class="fas fa-sort-alpha-up"></i> Z → A</button>
                <button class="t-btn ghost sm" onclick="doSort('num-asc')"><i class="fas fa-sort-numeric-down"></i> 0 → 9</button>
                <button class="t-btn ghost sm" onclick="doSort('num-desc')"><i class="fas fa-sort-numeric-up"></i> 9 → 0</button>
                <button class="t-btn ghost sm" onclick="doSort('len-asc')"><i class="fas fa-text-width"></i> Kurz → Lang</button>
                <button class="t-btn ghost sm" onclick="doSort('len-desc')"><i class="fas fa-text-width"></i> Lang → Kurz</button>
                <button class="t-btn ghost sm" onclick="doSort('shuffle')"><i class="fas fa-random"></i> Mischen</button>
                <button class="t-btn ghost sm" onclick="doSort('reverse')"><i class="fas fa-arrows-alt-v"></i> Umkehren</button>
            </div>

            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="zs-dedup">Duplikate entfernen</label>
                <input type="checkbox" id="zs-dedup" class="t-check" onchange="applySort()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="zs-trim">Leerzeichen trimmen</label>
                <input type="checkbox" id="zs-trim" class="t-check" checked onchange="applySort()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="zs-empty">Leerzeilen entfernen</label>
                <input type="checkbox" id="zs-empty" class="t-check" checked onchange="applySort()">
            </div>
            <div class="t-toggle-row">
                <label for="zs-case">Groß-/Kleinschreibung ignorieren</label>
                <input type="checkbox" id="zs-case" class="t-check" checked onchange="applySort()">
            </div>
        </div>

        <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">
            <div class="t-field" style="flex:1;min-width:160px">
                <label class="t-label">Trennzeichen (Ausgabe)</label>
                <select class="t-select" id="zs-sep" onchange="applySort()">
                    <option value="newline">Zeilenumbruch</option>
                    <option value=", ">Komma</option>
                    <option value="; ">Semikolon</option>
                    <option value=" | ">Pipe</option>
                    <option value=" ">Leerzeichen</option>
                </select>
            </div>
            <div class="t-field" style="flex:1;min-width:160px">
                <label class="t-label">Nummerieren</label>
                <select class="t-select" id="zs-num" onchange="applySort()">
                    <option value="">Kein</option>
                    <option value="1">1. 2. 3.</option>
                    <option value="-">- Strich</option>
                    <option value="•">• Punkt</option>
                </select>
            </div>
        </div>

        <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap">
            <button class="t-btn ghost sm" onclick="loadExample()"><i class="fas fa-file-alt"></i> Beispiel</button>
            <button class="t-btn ghost sm" onclick="clearAll()"><i class="fas fa-trash"></i> Leeren</button>
            <button class="t-btn ghost sm" onclick="downloadOut()"><i class="fas fa-download"></i> Herunterladen</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-chart-bar"></i> Statistiken</div>
        <div class="t-grid-4" style="gap:10px">
            <div class="t-stat-card"><div class="t-stat-val" id="st-in">0</div><div class="t-stat-label">Eingabe-Zeilen</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="st-out">0</div><div class="t-stat-label">Ausgabe-Zeilen</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="st-dup">0</div><div class="t-stat-label">Duplikate</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="st-avg">0</div><div class="t-stat-label">Ø Zeichenlänge</div></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let lastMode = 'az';

function getLines() {
    let lines = document.getElementById('zs-inp').value.split('\n');
    if (document.getElementById('zs-trim').checked) lines = lines.map(l => l.trim());
    if (document.getElementById('zs-empty').checked) lines = lines.filter(l => l.length > 0);
    return lines;
}

function doSort(mode) { lastMode = mode; applySort(); }

function applySort() {
    const lines = getLines();
    const icase = document.getElementById('zs-case').checked;
    const dedup = document.getElementById('zs-dedup').checked;
    const numMode = document.getElementById('zs-num').value;

    const key = l => icase ? l.toLowerCase() : l;
    let result = [...lines];

    switch(lastMode) {
        case 'az': result.sort((a,b) => key(a).localeCompare(key(b),'de')); break;
        case 'za': result.sort((a,b) => key(b).localeCompare(key(a),'de')); break;
        case 'num-asc': result.sort((a,b) => (parseFloat(a)||0) - (parseFloat(b)||0)); break;
        case 'num-desc': result.sort((a,b) => (parseFloat(b)||0) - (parseFloat(a)||0)); break;
        case 'len-asc': result.sort((a,b) => a.length - b.length); break;
        case 'len-desc': result.sort((a,b) => b.length - a.length); break;
        case 'shuffle': for(let i=result.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[result[i],result[j]]=[result[j],result[i]];} break;
        case 'reverse': result.reverse(); break;
    }

    const before = result.length;
    if (dedup) {
        const seen = new Set();
        result = result.filter(l => { const k = key(l); if(seen.has(k)) return false; seen.add(k); return true; });
    }
    const dupCount = lines.length - result.length;

    let numbered = result;
    if (numMode === '1') numbered = result.map((l,i) => `${i+1}. ${l}`);
    else if (numMode === '-') numbered = result.map(l => `- ${l}`);
    else if (numMode === '•') numbered = result.map(l => `• ${l}`);

    const sepVal = document.getElementById('zs-sep').value;
    const sep = sepVal === 'newline' ? '\n' : sepVal;
    document.getElementById('zs-out').value = numbered.join(sep);

    document.getElementById('st-in').textContent = lines.length;
    document.getElementById('st-out').textContent = result.length;
    document.getElementById('st-dup').textContent = Math.max(0, dupCount);
    const avg = result.length ? Math.round(result.reduce((s,l)=>s+l.length,0)/result.length) : 0;
    document.getElementById('st-avg').textContent = avg;
    document.getElementById('zs-count').textContent = `(${result.length} Zeilen)`;
}

function downloadOut() {
    const val = document.getElementById('zs-out').value;
    if (!val) return;
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([val],{type:'text/plain;charset=utf-8'}));
    a.download = 'sortiert.txt'; a.click(); URL.revokeObjectURL(a.href);
}

function clearAll() {
    document.getElementById('zs-inp').value = '';
    document.getElementById('zs-out').value = '';
    ['st-in','st-out','st-dup','st-avg'].forEach(id => document.getElementById(id).textContent = '0');
    document.getElementById('zs-count').textContent = '';
}

function loadExample() {
    document.getElementById('zs-inp').value = 'Banane\nApfel\nKirsche\nZitrone\nMango\nAnanas\nBirne\nApfel\nKiwi\nMelone\nPfirsich\nErdbeer\nBanane\nHimbeere';
    applySort();
}

loadExample();
</script>

@include('tools._seo_content', ['toolSlug' => 'zeilen-sortierer', 'toolName' => 'Zeilen Sortieren'])

@endsection