@extends('layouts.app')
@section('title', 'CSV ↔ JSON Konverter – Tabellen umwandeln | kotsch.tech')
@section('meta_description', 'CSV zu JSON und JSON zu CSV umwandeln: Trennzeichen wählen, Headerzeile, kompakt oder formatiert – kostenlos und lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="CSV JSON Konverter, CSV zu JSON, JSON zu CSV, CSV umwandeln, Tabelle JSON, CSV Parser">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.mode-tab { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.mode-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
.preview-table { width:100%; border-collapse:collapse; font-size:0.82rem; overflow-x:auto; }
.preview-table th { background:var(--accent-soft); color:var(--accent); font-weight:700; padding:8px 10px; border:1px solid var(--line); text-align:left; white-space:nowrap; }
.preview-table td { padding:7px 10px; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; }
.preview-table tr:nth-child(even) td { background:var(--bg); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-table"></i> Developer</span>
        <h1 class="tool-h1">CSV ↔ <span>JSON.</span></h1>
        <p class="tool-sub">Tabellen in beide Richtungen konvertieren – mit Trennzeichen-Wahl, Vorschau und Download.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px">
            <button class="mode-tab active" onclick="setMode('csv2json',this)">CSV → JSON</button>
            <button class="mode-tab" onclick="setMode('json2csv',this)">JSON → CSV</button>
        </div>

        <div class="t-grid-3" style="gap:10px;margin-bottom:14px" id="csv-options">
            <div class="t-field">
                <label class="t-label">Trennzeichen</label>
                <select class="t-select" id="delimiter" onchange="convert()">
                    <option value=",">Komma (,)</option>
                    <option value=";">Semikolon (;)</option>
                    <option value="\t">Tab (\t)</option>
                    <option value="|">Pipe (|)</option>
                </select>
            </div>
            <div class="t-field">
                <label class="t-label">JSON-Format</label>
                <select class="t-select" id="json-fmt" onchange="convert()">
                    <option value="pretty">Formatiert</option>
                    <option value="compact">Kompakt</option>
                    <option value="lines">Zeilenweise (NDJSON)</option>
                </select>
            </div>
            <div class="t-field">
                <label class="t-label">Optionen</label>
                <div style="display:flex;gap:6px;flex-direction:column;margin-top:6px">
                    <label style="display:flex;align-items:center;gap:6px;font-size:0.82rem;cursor:pointer">
                        <input type="checkbox" id="opt-header" checked onchange="convert()" class="t-check"> Headerzeile
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;font-size:0.82rem;cursor:pointer">
                        <input type="checkbox" id="opt-types" onchange="convert()" class="t-check"> Typen erkennen
                    </label>
                </div>
            </div>
        </div>

        <div class="t-field">
            <label class="t-label" id="inp-label">CSV-Eingabe</label>
            <textarea class="t-textarea" id="conv-inp" oninput="convert()" style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;min-height:140px"></textarea>
        </div>

        <div class="t-error" id="conv-err" style="display:none;margin-bottom:10px"></div>

        <div class="t-field">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
                <label class="t-label" id="out-label" style="margin:0">JSON-Ausgabe</label>
                <span id="conv-stats" style="font-size:0.78rem;color:var(--muted)"></span>
            </div>
            <div class="t-copy-wrap">
                <textarea class="t-textarea" id="conv-out" readonly style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;min-height:140px"></textarea>
                <button class="t-copy-btn" onclick="copyOutput()"><i class="fas fa-copy"></i></button>
            </div>
        </div>

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

    <div class="t-panel" id="preview-panel" style="display:none">
        <div class="t-panel-title"><i class="fas fa-eye"></i> Tabellenvorschau</div>
        <div style="overflow-x:auto">
            <table class="preview-table" id="preview-table"></table>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let currentMode = 'csv2json';

function setMode(mode, btn) {
    currentMode = mode;
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const isCsv = mode === 'csv2json';
    document.getElementById('inp-label').textContent = isCsv ? 'CSV-Eingabe' : 'JSON-Eingabe';
    document.getElementById('out-label').textContent = isCsv ? 'JSON-Ausgabe' : 'CSV-Ausgabe';
    document.getElementById('csv-options').style.display = isCsv ? '' : 'none';
    document.getElementById('conv-inp').value = '';
    document.getElementById('conv-out').value = '';
    document.getElementById('preview-panel').style.display = 'none';
    document.getElementById('conv-stats').textContent = '';
    document.getElementById('conv-err').style.display = 'none';
    if (!isCsv) loadJsonExample();
    else loadExample();
}

function getDelimiter() {
    const v = document.getElementById('delimiter').value;
    return v === '\\t' ? '\t' : v;
}

function parseCsv(text, delim) {
    const lines = text.trim().split(/\r?\n/);
    return lines.map(line => {
        const result = [];
        let cur = '', inQ = false;
        for (let i = 0; i < line.length; i++) {
            const c = line[i];
            if (c === '"') { if (inQ && line[i+1]==='"') { cur+='"'; i++; } else inQ=!inQ; }
            else if (c === delim && !inQ) { result.push(cur); cur=''; }
            else cur += c;
        }
        result.push(cur);
        return result;
    });
}

function smartType(v) {
    if (v === '') return null;
    if (v === 'true') return true;
    if (v === 'false') return false;
    const n = Number(v);
    if (!isNaN(n) && v.trim() !== '') return n;
    return v;
}

function convert() {
    const inp = document.getElementById('conv-inp').value.trim();
    const err = document.getElementById('conv-err');
    err.style.display = 'none';
    document.getElementById('preview-panel').style.display = 'none';
    if (!inp) { document.getElementById('conv-out').value=''; document.getElementById('conv-stats').textContent=''; return; }

    if (currentMode === 'csv2json') {
        try {
            const delim = getDelimiter();
            const rows = parseCsv(inp, delim);
            const hasHeader = document.getElementById('opt-header').checked;
            const types = document.getElementById('opt-types').checked;
            let result;
            if (hasHeader) {
                const headers = rows[0];
                result = rows.slice(1).filter(r => r.some(c=>c)).map(row =>
                    Object.fromEntries(headers.map((h,i) => [h, types ? smartType(row[i]||'') : (row[i]||'')]))
                );
            } else {
                result = rows.map(r => types ? r.map(smartType) : r);
            }
            const fmt = document.getElementById('json-fmt').value;
            let out;
            if (fmt === 'compact') out = JSON.stringify(result);
            else if (fmt === 'lines') out = result.map(r => JSON.stringify(r)).join('\n');
            else out = JSON.stringify(result, null, 2);
            document.getElementById('conv-out').value = out;
            document.getElementById('conv-stats').textContent = result.length + ' Zeilen · ' + (hasHeader ? rows[0].length : (rows[0]||[]).length) + ' Spalten';
            buildPreview(hasHeader ? rows[0] : null, hasHeader ? rows.slice(1) : rows);
        } catch(e) {
            err.textContent = 'CSV-Fehler: ' + e.message; err.style.display='block';
        }
    } else {
        try {
            const data = JSON.parse(inp);
            const arr = Array.isArray(data) ? data : [data];
            if (!arr.length) { document.getElementById('conv-out').value=''; return; }
            const delim = getDelimiter();
            const keys = [...new Set(arr.flatMap(o => Object.keys(o)))];
            const lines = [keys.join(delim)];
            arr.forEach(row => {
                lines.push(keys.map(k => {
                    const v = row[k] ?? '';
                    const s = String(v);
                    return s.includes(delim)||s.includes('"')||s.includes('\n') ? '"'+s.replace(/"/g,'""')+'"' : s;
                }).join(delim));
            });
            document.getElementById('conv-out').value = lines.join('\n');
            document.getElementById('conv-stats').textContent = arr.length + ' Zeilen · ' + keys.length + ' Spalten';
        } catch(e) {
            err.textContent = 'JSON-Fehler: ' + e.message; err.style.display='block';
        }
    }
}

function buildPreview(headers, rows) {
    const table = document.getElementById('preview-table');
    const shown = rows.slice(0,10);
    let html = '';
    if (headers) html += '<thead><tr>'+headers.map(h=>`<th>${escH(h)}</th>`).join('')+'</tr></thead>';
    html += '<tbody>'+shown.map(r=>`<tr>${r.map(c=>`<td>${escH(c)}</td>`).join('')}</tr>`).join('')+'</tbody>';
    table.innerHTML = html;
    document.getElementById('preview-panel').style.display = '';
}

function copyOutput() {
    const val = document.getElementById('conv-out').value;
    if (val) navigator.clipboard.writeText(val);
}

function downloadOutput() {
    const val = document.getElementById('conv-out').value;
    if (!val) return;
    const ext = currentMode === 'csv2json' ? 'json' : 'csv';
    const mime = currentMode === 'csv2json' ? 'application/json' : 'text/csv';
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([val],{type:mime+';charset=utf-8'}));
    a.download = 'konvertiert.'+ext;
    a.click(); URL.revokeObjectURL(a.href);
}

function clearAll() {
    document.getElementById('conv-inp').value = '';
    document.getElementById('conv-out').value = '';
    document.getElementById('preview-panel').style.display = 'none';
    document.getElementById('conv-stats').textContent = '';
    document.getElementById('conv-err').style.display = 'none';
}

function loadExample() {
    document.getElementById('conv-inp').value = 'Name,Alter,Stadt,Score\nMax Müller,28,Berlin,9.5\nAnna Schmidt,34,Hamburg,8.2\nLena Wagner,22,München,9.9\nTom Becker,45,Frankfurt,7.1';
    convert();
}

function loadJsonExample() {
    document.getElementById('conv-inp').value = JSON.stringify([{Name:'Max Müller',Alter:28,Stadt:'Berlin'},{Name:'Anna Schmidt',Alter:34,Stadt:'Hamburg'}],null,2);
}

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

loadExample();
</script>

@include('tools._seo_content', ['toolSlug' => 'csv-json-konverter', 'toolName' => 'CSV zu JSON'])

@endsection