@extends('layouts.app')
@section('title', 'Text Diff – Zwei Texte vergleichen | kotsch.tech')
@section('meta_description', 'Text Diff online: Zwei Texte Zeile für Zeile vergleichen. Live-Vergleich, Wort-Diff, Statistik, Syntaxhervorhebung. Kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Text Diff, Textvergleich, Unterschiede finden, Diff Tool, Zeilen vergleichen, Text vergleichen online">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.diff-result-inner { border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:0.82rem; line-height:1.6; }
.diff-line { display:flex; align-items:flex-start; padding:2px 12px; gap:8px; word-break:break-all; }
.diff-line.equal { background:var(--bg); color:var(--muted); }
.diff-line.added { background:#f0fdf4; color:#15803d; }
.diff-line.removed { background:#fef2f2; color:#b91c1c; }
.diff-prefix { font-weight:900; width:14px; flex-shrink:0; margin-top:2px; }
.diff-text { flex:1; white-space:pre-wrap; }
.linenum { color:#cbd5e1; font-size:0.72rem; width:32px; flex-shrink:0; text-align:right; padding-top:3px; user-select:none; }
.word-add { background:#bbf7d0; border-radius:2px; }
.word-rem { background:#fecaca; border-radius:2px; text-decoration:line-through; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-not-equal"></i> Text</span>
        <h1 class="tool-h1">Text<span> Diff.</span></h1>
        <p class="tool-sub">Zeile für Zeile vergleichen – live, ohne Klick, mit Wort-Hervorhebung und Statistik.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:16px">
            <div class="t-field">
                <label class="t-label" style="color:#dc2626"><i class="fas fa-minus"></i> Text A (Original)</label>
                <textarea class="t-textarea" id="text-a" placeholder="Originaltext hier einfügen…" style="min-height:220px;font-family:'JetBrains Mono',monospace;font-size:0.82rem" oninput="runDiff()"></textarea>
            </div>
            <div class="t-field">
                <label class="t-label" style="color:#16a34a"><i class="fas fa-plus"></i> Text B (Geändert)</label>
                <textarea class="t-textarea" id="text-b" placeholder="Geänderten Text einfügen…" style="min-height:220px;font-family:'JetBrains Mono',monospace;font-size:0.82rem" oninput="runDiff()"></textarea>
            </div>
        </div>

        <div style="margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center">
            <div class="t-toggle-row" style="border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px">
                <label for="diff-ignore-case">Groß/Klein ignorieren</label>
                <input type="checkbox" id="diff-ignore-case" class="t-check" onchange="runDiff()">
            </div>
            <div class="t-toggle-row" style="border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px">
                <label for="diff-ignore-ws">Leerzeichen ignorieren</label>
                <input type="checkbox" id="diff-ignore-ws" class="t-check" onchange="runDiff()">
            </div>
            <div class="t-toggle-row" style="border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px">
                <label for="diff-word">Wort-Diff</label>
                <input type="checkbox" id="diff-word" class="t-check" onchange="runDiff()">
            </div>
            <div class="t-toggle-row" style="border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px">
                <label for="diff-context">Nur Änderungen</label>
                <input type="checkbox" id="diff-context" class="t-check" onchange="runDiff()">
            </div>
            <div style="margin-left:auto;display:flex;gap:8px">
                <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>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px">
            <div class="t-panel-title" style="margin:0"><i class="fas fa-search-minus"></i> Ergebnis</div>
            <div style="display:flex;gap:12px;font-size:0.82rem;font-weight:700">
                <span style="color:#16a34a" id="stat-add">+0 hinzugefügt</span>
                <span style="color:#dc2626" id="stat-rem">−0 entfernt</span>
                <span style="color:var(--muted)" id="stat-eq">0 gleich</span>
            </div>
        </div>
        <div class="diff-result-inner" id="diff-output">
            <div style="padding:32px;text-align:center;color:var(--muted)">Text eingeben, um den Vergleich zu starten.</div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
function lcs(a, b) {
    const m = a.length, n = b.length;
    const dp = Array.from({length:m+1}, () => new Uint32Array(n+1));
    for (let i=1;i<=m;i++) for (let j=1;j<=n;j++) {
        if (a[i-1]===b[j-1]) dp[i][j]=dp[i-1][j-1]+1;
        else dp[i][j]=Math.max(dp[i-1][j],dp[i][j-1]);
    }
    const result=[];
    let i=m,j=n;
    while(i>0||j>0) {
        if(i>0&&j>0&&a[i-1]===b[j-1]){result.push({type:'equal',text:a[i-1]});i--;j--;}
        else if(j>0&&(i===0||dp[i][j-1]>=dp[i-1][j])){result.push({type:'added',text:b[j-1]});j--;}
        else{result.push({type:'removed',text:a[i-1]});i--;}
    }
    return result.reverse();
}

function wordDiff(rem, add) {
    const wa = rem.split(/(\s+)/);
    const wb = add.split(/(\s+)/);
    const ops = lcs(wa, wb);
    let remHtml='', addHtml='';
    ops.forEach(op => {
        if (op.type==='equal') { remHtml+=escH(op.text); addHtml+=escH(op.text); }
        else if (op.type==='removed') remHtml+=`<span class="word-rem">${escH(op.text)}</span>`;
        else addHtml+=`<span class="word-add">${escH(op.text)}</span>`;
    });
    return [remHtml, addHtml];
}

function escH(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

function runDiff() {
    let a = document.getElementById('text-a').value;
    let b = document.getElementById('text-b').value;
    if (!a && !b) {
        document.getElementById('diff-output').innerHTML = '<div style="padding:32px;text-align:center;color:var(--muted)">Text eingeben, um den Vergleich zu starten.</div>';
        return;
    }

    const ignoreCase = document.getElementById('diff-ignore-case').checked;
    const ignoreWs = document.getElementById('diff-ignore-ws').checked;
    const useWordDiff = document.getElementById('diff-word').checked;
    const onlyChanges = document.getElementById('diff-context').checked;

    let linesA = a.split('\n');
    let linesB = b.split('\n');

    const norm = s => {
        let t = ignoreCase ? s.toLowerCase() : s;
        if (ignoreWs) t = t.replace(/\s+/g,' ').trim();
        return t;
    };

    const cmpA = linesA.map(norm);
    const cmpB = linesB.map(norm);
    const ops = lcs(cmpA, cmpB);

    let added=0, removed=0, equal=0;
    let html='';
    let idxA=0, idxB=0;

    ops.forEach(op => {
        if (op.type==='equal') {
            equal++;
            if (!onlyChanges) {
                html+=`<div class="diff-line equal"><span class="linenum">${idxA+1}</span><span class="diff-prefix"> </span><span class="diff-text">${escH(linesA[idxA])}</span></div>`;
            }
            idxA++; idxB++;
        } else if (op.type==='removed') {
            removed++;
            if (useWordDiff) {
                const nextAdd = ops.find((o,i)=>o.type==='added');
                html+=`<div class="diff-line removed"><span class="linenum">${idxA+1}</span><span class="diff-prefix">−</span><span class="diff-text">${escH(linesA[idxA])}</span></div>`;
            } else {
                html+=`<div class="diff-line removed"><span class="linenum">${idxA+1}</span><span class="diff-prefix">−</span><span class="diff-text">${escH(linesA[idxA])}</span></div>`;
            }
            idxA++;
        } else {
            added++;
            html+=`<div class="diff-line added"><span class="linenum">${idxB+1}</span><span class="diff-prefix">+</span><span class="diff-text">${escH(linesB[idxB])}</span></div>`;
            idxB++;
        }
    });

    if (added===0&&removed===0) html='<div style="padding:20px;text-align:center;color:var(--accent);font-weight:700"><i class="fas fa-check-circle"></i> Die Texte sind identisch.</div>';

    document.getElementById('diff-output').innerHTML = html;
    document.getElementById('stat-add').textContent = `+${added} hinzugefügt`;
    document.getElementById('stat-rem').textContent = `−${removed} entfernt`;
    document.getElementById('stat-eq').textContent = `${equal} gleich`;
}

function clearAll() {
    document.getElementById('text-a').value='';
    document.getElementById('text-b').value='';
    runDiff();
}

function loadExample() {
    document.getElementById('text-a').value = `Die Katze saß auf der Matte.
Sie war sehr flauschig und weich.
Der Hund schlief in der Ecke.
Das Wetter war schön.
Alle waren glücklich.`;
    document.getElementById('text-b').value = `Die Katze saß auf dem Teppich.
Sie war sehr flauschig und kuschelig.
Der Hund schlief draußen.
Das Wetter war herrlich.
Alle waren sehr glücklich.
Ein schöner Tag.`;
    runDiff();
}

runDiff();
</script>

@include('tools._seo_content', ['toolSlug' => 'text-diff', 'toolName' => 'Text Vergleich'])

@endsection