@extends('layouts.app')
@section('title', 'Online Notizblock – Notizen im Browser speichern | kotsch.tech')
@section('meta_description', 'Notizblock online: Notizen direkt im Browser schreiben und automatisch speichern. Mehrere Tabs, Markdown-Modus, Suchen & Ersetzen, Download – kein Konto nötig.')
@section('meta_extra')
<meta name="keywords" content="Online Notizblock, Notizen online, Notizen speichern, Notizblock Browser, Online Notepad, Text online schreiben, Notizen kostenlos">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.note-tabs { display:flex; gap:0; overflow-x:auto; border-bottom:2px solid var(--line); margin-bottom:0; }
.note-tab { padding:10px 16px; border:none; background:transparent; font:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all 0.15s; display:flex; align-items:center; gap:6px; }
.note-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.note-tab .tab-close { opacity:0; font-size:0.7rem; padding:1px 4px; border-radius:3px; }
.note-tab:hover .tab-close { opacity:1; }
.note-tab .tab-close:hover { background:var(--line); }
.note-new-tab { padding:10px 12px; border:none; background:transparent; cursor:pointer; color:var(--muted); font-size:0.9rem; }
.note-new-tab:hover { color:var(--accent); }
.note-editor { width:100%; box-sizing:border-box; border:none; outline:none; resize:none; padding:20px; font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; line-height:1.85; color:var(--ink); background:var(--card); min-height:420px; }
.note-editor.mono { font-family:'JetBrains Mono',monospace; font-size:0.88rem; }
.toolbar { display:flex; align-items:center; gap:4px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--bg); }
.tb-btn { padding:6px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); font:inherit; font-size:0.8rem; font-weight:700; cursor:pointer; color:var(--ink); transition:all 0.12s; }
.tb-btn:hover { border-color:var(--accent); color:var(--accent); }
.tb-sep { width:1px; height:20px; background:var(--line); margin:0 3px; flex-shrink:0; }
.save-dot { width:8px; height:8px; border-radius:50%; background:#16a34a; display:inline-block; opacity:0; transition:opacity 0.3s; }
.save-dot.show { opacity:1; }
.stat-bar { display:flex; gap:16px; padding:8px 14px; font-size:0.75rem; color:var(--muted); font-weight:600; border-top:1px solid var(--line); background:var(--bg); flex-wrap:wrap; }
.find-bar { display:none; padding:8px 14px; border-top:1px solid var(--line); background:var(--bg); }
.find-bar.open { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.find-inp { width:180px; }
.find-inp-replace { width:180px; }
.md-preview-pane { min-height:420px; padding:20px; overflow-y:auto; line-height:1.8; font-size:0.92rem; display:none; }
.md-preview-pane h1,.md-preview-pane h2,.md-preview-pane h3 { font-weight:900; margin:1em 0 0.4em; }
.md-preview-pane h1 { font-size:1.5rem; border-bottom:2px solid var(--line); padding-bottom:6px; }
.md-preview-pane h2 { font-size:1.2rem; border-bottom:1px solid var(--line); padding-bottom:4px; }
.md-preview-pane code { background:var(--bg); padding:2px 6px; border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:0.85em; border:1px solid var(--line); }
.md-preview-pane pre { background:#0f172a; color:#e2e8f0; padding:14px; border-radius:var(--radius-sm); overflow-x:auto; font-size:0.82rem; }
.md-preview-pane pre code { background:none; border:none; padding:0; color:inherit; }
.md-preview-pane blockquote { border-left:4px solid var(--accent); padding:6px 14px; margin:10px 0; background:var(--accent-soft); color:var(--muted); }
.md-preview-pane ul,.md-preview-pane ol { padding-left:1.4em; }
.md-split { display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media(max-width:700px){ .md-split { grid-template-columns:1fr; } }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-sticky-note"></i> Produktivität</span>
        <h1 class="tool-h1">Notiz<span>block.</span></h1>
        <p class="tool-sub">Mehrere Tabs, Markdown-Vorschau, Suchen & Ersetzen – alles lokal gespeichert, kein Konto.</p>
    </div>

    <div class="t-panel" style="padding:0;overflow:hidden">
        <div style="display:flex;align-items:center;border-bottom:2px solid var(--line)">
            <div class="note-tabs" id="note-tabs"></div>
            <button class="note-new-tab" onclick="addTab()" title="Neues Tab"><i class="fas fa-plus"></i></button>
        </div>

        <div class="toolbar">
            <button class="tb-btn" onclick="fmt('bold')" title="Fett (Ctrl+B)"><b>B</b></button>
            <button class="tb-btn" onclick="fmt('italic')" title="Kursiv (Ctrl+I)"><i>I</i></button>
            <button class="tb-btn" onclick="fmt('strike')" title="Durchgestrichen"><s>S</s></button>
            <button class="tb-btn" onclick="fmtLine('# ')" title="Überschrift">H1</button>
            <button class="tb-btn" onclick="fmtLine('## ')" title="Überschrift 2">H2</button>
            <button class="tb-btn" onclick="fmtLine('- ')" title="Liste"><i class="fas fa-list-ul"></i></button>
            <button class="tb-btn" onclick="fmtLine('> ')" title="Zitat"><i class="fas fa-quote-right"></i></button>
            <button class="tb-btn" onclick="fmt('code')" title="Code"><i class="fas fa-code"></i></button>
            <div class="tb-sep"></div>
            <button class="tb-btn" id="mono-btn" onclick="toggleMono()" title="Monospace-Schrift"><i class="fas fa-terminal"></i></button>
            <button class="tb-btn" id="md-btn" onclick="toggleMd()" title="Markdown-Vorschau"><i class="fab fa-markdown"></i></button>
            <div class="tb-sep"></div>
            <button class="tb-btn" onclick="toggleFind()" title="Suchen & Ersetzen (Ctrl+F)"><i class="fas fa-search"></i></button>
            <button class="tb-btn" onclick="downloadNote()" title=".txt herunterladen"><i class="fas fa-download"></i></button>
            <button class="tb-btn" onclick="copyAll()" title="Alles kopieren"><i class="fas fa-copy"></i></button>
            <button class="tb-btn" onclick="clearNote()" title="Leeren" style="color:#dc2626"><i class="fas fa-trash"></i></button>
            <span class="save-dot" id="save-dot" style="margin-left:6px"></span>
        </div>

        <div class="find-bar" id="find-bar">
            <input type="text" class="t-input find-inp" id="find-inp" placeholder="Suchen…" oninput="doFind()">
            <input type="text" class="t-input find-inp-replace" id="replace-inp" placeholder="Ersetzen durch…">
            <button class="tb-btn" onclick="doReplace()">Ersetzen</button>
            <button class="tb-btn" onclick="doReplaceAll()">Alle ersetzen</button>
            <span id="find-count" style="font-size:0.78rem;color:var(--muted)"></span>
            <button class="tb-btn" onclick="closeFind()" style="margin-left:auto"><i class="fas fa-times"></i></button>
        </div>

        <div id="editor-area">
            <textarea class="note-editor" id="notepad" oninput="onInput()" onkeydown="handleKey(event)" placeholder="Fang einfach an zu tippen – Notizen werden automatisch gespeichert…"></textarea>
        </div>

        <div class="stat-bar">
            <span id="stat-chars">0 Zeichen</span>
            <span id="stat-words">0 Wörter</span>
            <span id="stat-lines">0 Zeilen</span>
            <span id="stat-saved" style="margin-left:auto;color:#16a34a;font-weight:700"></span>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let tabs    = JSON.parse(localStorage.getItem('nz_tabs') || 'null') || [{id:1, name:'Notiz 1', content:''}];
let activeTabId = parseInt(localStorage.getItem('nz_active') || '1');
let mdMode  = false;
let monoMode= false;
let saveTimer = null;
let nextId  = Math.max(...tabs.map(t=>t.id)) + 1;

function getActiveTab() { return tabs.find(t=>t.id===activeTabId) || tabs[0]; }

function saveTabs() {
    localStorage.setItem('nz_tabs', JSON.stringify(tabs));
    localStorage.setItem('nz_active', activeTabId);
}

function saveContent() {
    const tab = getActiveTab();
    tab.content = document.getElementById('notepad').value;
    saveTabs();
    const dot = document.getElementById('save-dot');
    dot.classList.add('show');
    const now = new Date().toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'});
    document.getElementById('stat-saved').textContent = '✓ Gespeichert ' + now;
    setTimeout(() => dot.classList.remove('show'), 2000);
}

function renderTabs() {
    const el = document.getElementById('note-tabs');
    el.innerHTML = tabs.map(t => `
        <button class="note-tab ${t.id===activeTabId?'active':''}" onclick="switchTab(${t.id})">
            ${escH(t.name)}
            ${tabs.length>1?`<span class="tab-close" onclick="event.stopPropagation();removeTab(${t.id})">✕</span>`:''}
        </button>`).join('');
}

function switchTab(id) {
    saveContent();
    activeTabId = id;
    const tab = getActiveTab();
    document.getElementById('notepad').value = tab.content;
    renderTabs(); updateStats();
}

function addTab() {
    saveContent();
    const name = prompt('Tab-Name:', 'Notiz ' + nextId);
    if (!name) return;
    tabs.push({ id: nextId, name, content: '' });
    activeTabId = nextId;
    nextId++;
    renderTabs();
    document.getElementById('notepad').value = '';
    updateStats(); saveTabs();
}

function removeTab(id) {
    if (!confirm('Tab löschen?')) return;
    tabs = tabs.filter(t=>t.id!==id);
    if (!tabs.length) tabs = [{id:1,name:'Notiz 1',content:''}];
    if (activeTabId===id) activeTabId = tabs[0].id;
    renderTabs();
    document.getElementById('notepad').value = getActiveTab().content;
    updateStats(); saveTabs();
}

function onInput() {
    updateStats();
    clearTimeout(saveTimer);
    saveTimer = setTimeout(saveContent, 600);
    if (mdMode) renderMd();
}

function updateStats() {
    const val = document.getElementById('notepad').value;
    const words = val.trim() ? val.trim().split(/\s+/).length : 0;
    const lines = val.split('\n').length;
    document.getElementById('stat-chars').textContent = val.length.toLocaleString('de-DE') + ' Zeichen';
    document.getElementById('stat-words').textContent = words + ' Wörter';
    document.getElementById('stat-lines').textContent = lines + ' Zeilen';
}

function fmt(type) {
    const ta = document.getElementById('notepad');
    const s=ta.selectionStart, e=ta.selectionEnd, sel=ta.value.slice(s,e);
    const wrap = {bold:'**',italic:'_',strike:'~~',code:'`'}[type];
    ta.setRangeText(wrap+sel+wrap, s, e, 'select');
    ta.focus(); onInput();
}

function fmtLine(prefix) {
    const ta = document.getElementById('notepad');
    const s = ta.selectionStart;
    const before = ta.value.slice(0,s), after = ta.value.slice(s);
    ta.value = before + '\n' + prefix + after;
    ta.selectionStart = ta.selectionEnd = s + 1 + prefix.length;
    ta.focus(); onInput();
}

function toggleMono() {
    monoMode = !monoMode;
    document.getElementById('notepad').classList.toggle('mono', monoMode);
    document.getElementById('mono-btn').style.color = monoMode ? 'var(--accent)' : '';
}

function toggleMd() {
    mdMode = !mdMode;
    document.getElementById('md-btn').style.color = mdMode ? 'var(--accent)' : '';
    const area = document.getElementById('editor-area');
    if (mdMode) {
        area.className = 'md-split';
        area.innerHTML = `<textarea class="note-editor" id="notepad" oninput="onInput()" onkeydown="handleKey(event)"></textarea>
            <div class="md-preview-pane" id="md-pane" style="display:block;border-left:1px solid var(--line)"></div>`;
        document.getElementById('notepad').value = getActiveTab().content;
        renderMd();
    } else {
        area.className = '';
        area.innerHTML = `<textarea class="note-editor" id="notepad" oninput="onInput()" onkeydown="handleKey(event)"></textarea>`;
        document.getElementById('notepad').value = getActiveTab().content;
    }
    updateStats();
}

function renderMd() {
    const md = document.getElementById('notepad').value;
    const pane = document.getElementById('md-pane');
    if (!pane) return;
    let h = md;
    h=h.replace(/```([^\n]*)\n([\s\S]*?)```/g,(_,l,c)=>`<pre><code>${escH(c.trimEnd())}</code></pre>`);
    h=h.replace(/^#{3}\s(.+)$/gm,'<h3>$1</h3>');
    h=h.replace(/^#{2}\s(.+)$/gm,'<h2>$1</h2>');
    h=h.replace(/^#\s(.+)$/gm,'<h1>$1</h1>');
    h=h.replace(/^>\s?(.*)$/gm,'<blockquote>$1</blockquote>');
    h=h.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');
    h=h.replace(/\*(.+?)\*/g,'<em>$1</em>');
    h=h.replace(/~~(.+?)~~/g,'<del>$1</del>');
    h=h.replace(/`([^`]+)`/g,'<code>$1</code>');
    h=h.replace(/^[-*]\s(.+)$/gm,'<li>$1</li>');
    h=h.replace(/(<li>.*<\/li>)/s,'<ul>$1</ul>');
    h=h.replace(/^(?!<[a-z]).+$/gm,l=>l.trim()?`<p>${l}</p>`:'');
    pane.innerHTML = h;
}

function toggleFind() {
    const bar = document.getElementById('find-bar');
    bar.classList.toggle('open');
    if (bar.classList.contains('open')) document.getElementById('find-inp').focus();
}
function closeFind() { document.getElementById('find-bar').classList.remove('open'); }

function doFind() {
    const q = document.getElementById('find-inp').value;
    if (!q) { document.getElementById('find-count').textContent=''; return; }
    const text = document.getElementById('notepad').value;
    const count = (text.match(new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&'),'gi'))||[]).length;
    document.getElementById('find-count').textContent = count + ' Treffer';
}

function doReplace() {
    const ta=document.getElementById('notepad'), q=document.getElementById('find-inp').value, r=document.getElementById('replace-inp').value;
    if (!q) return;
    const idx=ta.value.indexOf(q);
    if (idx<0) return;
    ta.value=ta.value.slice(0,idx)+r+ta.value.slice(idx+q.length);
    onInput();
}
function doReplaceAll() {
    const ta=document.getElementById('notepad'), q=document.getElementById('find-inp').value, r=document.getElementById('replace-inp').value;
    if (!q) return;
    ta.value=ta.value.split(q).join(r);
    onInput(); doFind();
}

function downloadNote() {
    const blob=new Blob([document.getElementById('notepad').value],{type:'text/plain;charset=utf-8'});
    const a=document.createElement('a');
    a.href=URL.createObjectURL(blob);
    a.download='notiz_'+new Date().toISOString().slice(0,10)+'.txt';
    a.click(); URL.revokeObjectURL(a.href);
}

function copyAll() { navigator.clipboard.writeText(document.getElementById('notepad').value); }

function clearNote() {
    if (!confirm('Inhalt dieses Tabs löschen?')) return;
    document.getElementById('notepad').value='';
    onInput();
}

function handleKey(e) {
    if ((e.ctrlKey||e.metaKey)&&e.key==='b'){e.preventDefault();fmt('bold');}
    if ((e.ctrlKey||e.metaKey)&&e.key==='i'){e.preventDefault();fmt('italic');}
    if ((e.ctrlKey||e.metaKey)&&e.key==='f'){e.preventDefault();toggleFind();}
    if (e.key==='Tab'){
        e.preventDefault();
        const ta=e.target,s=ta.selectionStart;
        ta.setRangeText('  ',s,ta.selectionEnd,'end');
        onInput();
    }
}

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

// Init
renderTabs();
document.getElementById('notepad').value = getActiveTab().content;
updateStats();
</script>

@include('tools._seo_content', ['toolSlug' => 'notizblock', 'toolName' => 'Notizblock'])

@endsection