@extends('layouts.app')
@section('title', 'Taschenrechner – Wissenschaftlicher Rechner Online | kotsch.tech')
@section('meta_description', 'Kostenloser Online-Taschenrechner mit wissenschaftlichen Funktionen, Verlauf und Tastaturunterstützung. Sin, Cos, Tan, Wurzel, Potenz und mehr.')
@section('meta_extra')
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #4f46e5; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #eef2ff 0%, #fff 60%); padding-top: 92px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
    .tool-container { width: min(100% - 40px, 680px); margin: 0 auto; padding: 24px 0 60px; }
    .tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(79,70,229,0.1); color: #4338ca; font-size: 0.72rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
    h1.tool-h1 { margin: 18px 0 10px; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -2px; font-weight: 800; }
    .tool-page p.sub { color: var(--muted); margin: 0 0 28px; line-height: 1.7; }
    .panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 24px 60px -32px rgba(15,23,42,0.18); margin-bottom: 16px; }
    .panel-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }

    /* Display */
    .calc-display {
        background: #f8fafc; border: 1.5px solid var(--line); border-radius: 16px;
        padding: 16px 20px; margin-bottom: 18px; text-align: right; min-height: 88px;
        display: flex; flex-direction: column; justify-content: flex-end;
    }
    .calc-expression {
        font-size: 0.85rem; color: var(--muted); font-family: 'JetBrains Mono', monospace;
        min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .calc-current {
        font-size: 2.2rem; font-weight: 800; color: var(--ink); letter-spacing: -1px;
        font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap;
    }
    .calc-current.error { color: #dc2626; font-size: 1.4rem; }

    /* Grid */
    .calc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .calc-btn {
        border: none; border-radius: 12px; font-size: 1rem; font-weight: 700;
        cursor: pointer; padding: 0; height: 56px; display: flex; align-items: center;
        justify-content: center; transition: all 0.12s; font-family: 'Plus Jakarta Sans', sans-serif;
        user-select: none;
    }
    .calc-btn:active { transform: scale(0.93); }
    .btn-num { background: #f1f5f9; color: var(--ink); }
    .btn-num:hover { background: #e2e8f0; }
    .btn-op { background: rgba(79,70,229,0.12); color: var(--accent); }
    .btn-op:hover { background: rgba(79,70,229,0.22); }
    .btn-func { background: rgba(79,70,229,0.07); color: #6366f1; font-size: 0.78rem; }
    .btn-func:hover { background: rgba(79,70,229,0.15); }
    .btn-clear { background: #fef2f2; color: #dc2626; }
    .btn-clear:hover { background: #fee2e2; }
    .btn-ce { background: #fff7ed; color: #ea580c; }
    .btn-ce:hover { background: #fed7aa; }
    .btn-eq { background: var(--accent); color: #fff; grid-column: span 1; }
    .btn-eq:hover { background: #4338ca; }
    .btn-zero { grid-column: span 2; }

    /* Sci row */
    .sci-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.82rem; color: var(--muted); font-weight: 600; cursor: pointer; }
    .sci-toggle input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

    /* History */
    .history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .history-item {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 14px; background: #f8fafc; border-radius: 10px;
        font-family: 'JetBrains Mono', monospace; font-size: 0.83rem; cursor: pointer;
        border: 1px solid var(--line); transition: background 0.12s;
    }
    .history-item:hover { background: #eef2ff; border-color: rgba(79,70,229,0.3); }
    .history-expr { color: var(--muted); }
    .history-result { color: var(--accent); font-weight: 700; }
    .history-empty { color: var(--muted); font-size: 0.84rem; text-align: center; padding: 16px 0; }
</style>
<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Mathematik</span>
        <h1 class="tool-h1">Taschenrechner.</h1>
        <p class="sub">Wissenschaftlicher Online-Rechner mit Verlauf und Tastaturunterstützung – direkt im Browser.</p>
    </section>

    <div class="panel">
        <div class="calc-display">
            <div class="calc-expression" id="calcExpr"></div>
            <div class="calc-current" id="calcDisplay">0</div>
        </div>

        <label class="sci-toggle">
            <input type="checkbox" id="sciToggle" onchange="toggleSci()"> Wissenschaftliche Funktionen anzeigen
        </label>

        <div class="calc-grid" id="sciRow" style="margin-bottom:8px;display:none">
            <button class="calc-btn btn-func" onclick="calcFunc('sin')">sin</button>
            <button class="calc-btn btn-func" onclick="calcFunc('cos')">cos</button>
            <button class="calc-btn btn-func" onclick="calcFunc('tan')">tan</button>
            <button class="calc-btn btn-func" onclick="calcFunc('sqrt')">√</button>
            <button class="calc-btn btn-func" onclick="calcFunc('log')">log</button>
            <button class="calc-btn btn-func" onclick="calcFunc('ln')">ln</button>
            <button class="calc-btn btn-func" onclick="calcFunc('pow')">xʸ</button>
            <button class="calc-btn btn-func" onclick="calcFunc('pi')">π</button>
            <button class="calc-btn btn-func" onclick="calcFunc('e')">e</button>
            <button class="calc-btn btn-func" onclick="calcFunc('inv')" title="1/x">1/x</button>
        </div>

        <div class="calc-grid">
            <button class="calc-btn btn-clear" onclick="calcClear()">C</button>
            <button class="calc-btn btn-ce" onclick="calcCE()">CE</button>
            <button class="calc-btn btn-ce" onclick="calcPlusMinus()">±</button>
            <button class="calc-btn btn-op" onclick="calcPercent()">%</button>
            <button class="calc-btn btn-op" onclick="calcInput('/')">÷</button>

            <button class="calc-btn btn-num" onclick="calcDigit('7')">7</button>
            <button class="calc-btn btn-num" onclick="calcDigit('8')">8</button>
            <button class="calc-btn btn-num" onclick="calcDigit('9')">9</button>
            <button class="calc-btn btn-ce" onclick="calcBackspace()">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 4H8l-7 8 7 8h13a2 2 0 002-2V6a2 2 0 00-2-2z"/><line x1="18" y1="9" x2="12" y2="15"/><line x1="12" y1="9" x2="18" y2="15"/></svg>
            </button>
            <button class="calc-btn btn-op" onclick="calcInput('*')">×</button>

            <button class="calc-btn btn-num" onclick="calcDigit('4')">4</button>
            <button class="calc-btn btn-num" onclick="calcDigit('5')">5</button>
            <button class="calc-btn btn-num" onclick="calcDigit('6')">6</button>
            <button class="calc-btn btn-num" style="visibility:hidden"></button>
            <button class="calc-btn btn-op" onclick="calcInput('-')">−</button>

            <button class="calc-btn btn-num" onclick="calcDigit('1')">1</button>
            <button class="calc-btn btn-num" onclick="calcDigit('2')">2</button>
            <button class="calc-btn btn-num" onclick="calcDigit('3')">3</button>
            <button class="calc-btn btn-eq" onclick="calcEquals()" style="grid-row: span 2; height: auto; min-height: 120px;">=</button>
            <button class="calc-btn btn-op" onclick="calcInput('+')">+</button>

            <button class="calc-btn btn-num btn-zero" onclick="calcDigit('0')">0</button>
            <button class="calc-btn btn-num" onclick="calcDot()">.</button>
        </div>
    </div>

    <div class="panel">
        <div class="panel-label">Verlauf (letzte 8)</div>
        <ul class="history-list" id="historyList">
            <li class="history-empty">Noch keine Berechnungen.</li>
        </ul>
        <div style="margin-top:12px">
            <button onclick="clearHistory()" style="background:#f1f5f9;border:1.5px solid var(--line);border-radius:8px;padding:7px 14px;font-size:0.78rem;font-weight:700;color:var(--muted);cursor:pointer;">Verlauf löschen</button>
        </div>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
let current = '0';
let expression = '';
let operator = null;
let prevValue = null;
let justCalc = false;
let waitingOperand = false;
let history = [];

const display = document.getElementById('calcDisplay');
const exprEl = document.getElementById('calcExpr');

function updateDisplay(val) {
    display.classList.remove('error');
    let s = String(val);
    if (s.length > 16) s = parseFloat(parseFloat(s).toPrecision(12)).toString();
    display.textContent = s;
    current = s;
}

function showError(msg) {
    display.classList.add('error');
    display.textContent = msg;
    exprEl.textContent = '';
    current = '0';
    operator = null;
    prevValue = null;
    waitingOperand = false;
    justCalc = false;
}

function calcDigit(d) {
    if (justCalc) { current = d; justCalc = false; waitingOperand = false; }
    else if (waitingOperand) { current = d; waitingOperand = false; }
    else {
        const next = current === '0' ? d : current + d;
        if (next.length > 18) return; // reject digit before mutating state
        current = next;
    }
    updateDisplay(current);
}

function calcDot() {
    if (justCalc || waitingOperand) { current = '0.'; justCalc = false; waitingOperand = false; updateDisplay(current); return; }
    if (!current.includes('.')) { current += '.'; display.textContent = current; }
}

function calcInput(op) {
    const val = parseFloat(current);
    if (prevValue !== null && !waitingOperand && !justCalc) {
        const res = compute(prevValue, val, operator);
        if (res === null) return;
        addHistory(prevValue + ' ' + opLabel(operator) + ' ' + val, res);
        prevValue = res;
        updateDisplay(res);
    } else {
        prevValue = val;
    }
    operator = op;
    exprEl.textContent = formatNum(prevValue) + ' ' + opLabel(op);
    waitingOperand = true;
    justCalc = false;
}

function calcEquals() {
    if (operator === null || prevValue === null) return;
    const val = parseFloat(current);
    const res = compute(prevValue, val, operator);
    if (res === null) return;
    exprEl.textContent = formatNum(prevValue) + ' ' + opLabel(operator) + ' ' + formatNum(val) + ' =';
    addHistory(formatNum(prevValue) + ' ' + opLabel(operator) + ' ' + formatNum(val), res);
    updateDisplay(res);
    operator = null;
    prevValue = null;
    justCalc = true;
    waitingOperand = false;
}

function compute(a, b, op) {
    a = parseFloat(a); b = parseFloat(b);
    if (op === '+') return a + b;
    if (op === '-') return a - b;
    if (op === '*') return a * b;
    if (op === '/') { if (b === 0) { showError('Fehler: ÷ 0'); return null; } return a / b; }
    if (op === '^') return Math.pow(a, b);
    return b;
}

function opLabel(op) {
    return {'+':'+', '-':'−', '*':'×', '/':'÷', '^':'^'}[op] || op;
}
function formatNum(n) {
    let s = String(n);
    if (s.length > 12) s = parseFloat(parseFloat(s).toPrecision(8)).toString();
    return s;
}

function calcClear() { current = '0'; expression = ''; operator = null; prevValue = null; justCalc = false; waitingOperand = false; updateDisplay('0'); exprEl.textContent = ''; }
function calcCE() { current = '0'; updateDisplay('0'); waitingOperand = false; }
function calcBackspace() {
    if (justCalc) return;
    current = current.length > 1 ? current.slice(0, -1) : '0';
    updateDisplay(current);
}
function calcPlusMinus() {
    const v = parseFloat(current) * -1;
    current = String(v);
    updateDisplay(current);
}
function calcPercent() {
    const v = prevValue !== null ? (prevValue * parseFloat(current)) / 100 : parseFloat(current) / 100;
    current = String(v);
    updateDisplay(current);
    justCalc = true;
}

function calcFunc(fn) {
    const v = parseFloat(current);
    let res;
    if (fn === 'sin') res = Math.sin(v * Math.PI / 180);
    else if (fn === 'cos') res = Math.cos(v * Math.PI / 180);
    else if (fn === 'tan') { if (v % 180 === 90) { showError('Fehler'); return; } res = Math.tan(v * Math.PI / 180); }
    else if (fn === 'sqrt') { if (v < 0) { showError('Fehler'); return; } res = Math.sqrt(v); }
    else if (fn === 'log') { if (v <= 0) { showError('Fehler'); return; } res = Math.log10(v); }
    else if (fn === 'ln') { if (v <= 0) { showError('Fehler'); return; } res = Math.log(v); }
    else if (fn === 'inv') { if (v === 0) { showError('Fehler: ÷ 0'); return; } res = 1 / v; }
    else if (fn === 'pow') { operator = '^'; prevValue = v; exprEl.textContent = formatNum(v) + ' ^'; waitingOperand = true; return; }
    else if (fn === 'pi') { res = Math.PI; }
    else if (fn === 'e') { res = Math.E; }
    const label = {sin:'sin(',cos:'cos(',tan:'tan(',sqrt:'√(',log:'log(',ln:'ln(',inv:'1/'}[fn] || fn;
    addHistory(label + formatNum(v) + (fn==='inv'?'':')'), parseFloat(res.toPrecision(12)));
    exprEl.textContent = label + formatNum(v) + (fn==='inv'?'':')') + ' =';
    res = parseFloat(res.toPrecision(12));
    updateDisplay(res);
    justCalc = true;
}

function toggleSci() {
    document.getElementById('sciRow').style.display = document.getElementById('sciToggle').checked ? 'grid' : 'none';
}

function addHistory(expr, result) {
    history.unshift({ expr, result: formatNum(result) });
    if (history.length > 8) history.pop();
    renderHistory();
}

function renderHistory() {
    const ul = document.getElementById('historyList');
    if (!history.length) { ul.innerHTML = '<li class="history-empty">Noch keine Berechnungen.</li>'; return; }
    ul.innerHTML = history.map(h =>
        `<li class="history-item" onclick="useHistoryResult('${h.result}')">
            <span class="history-expr">${h.expr} =</span>
            <span class="history-result">${h.result}</span>
        </li>`
    ).join('');
}

function useHistoryResult(val) {
    current = val;
    updateDisplay(val);
    justCalc = true;
}

function clearHistory() { history = []; renderHistory(); }

document.addEventListener('keydown', e => {
    if (e.key >= '0' && e.key <= '9') calcDigit(e.key);
    else if (e.key === '.') calcDot();
    else if (e.key === '+') calcInput('+');
    else if (e.key === '-') calcInput('-');
    else if (e.key === '*') calcInput('*');
    else if (e.key === '/') { e.preventDefault(); calcInput('/'); }
    else if (e.key === 'Enter' || e.key === '=') calcEquals();
    else if (e.key === 'Escape') calcClear();
    else if (e.key === 'Backspace') calcBackspace();
    else if (e.key === '%') calcPercent();
});
</script>

@include('tools._seo_content', ['toolSlug' => 'taschenrechner', 'toolName' => 'Taschenrechner'])

@endsection