@extends('layouts.app')
@section('title', 'Haushaltsbuch – Einnahmen & Ausgaben verwalten | kotsch.tech')
@section('meta_description', 'Kostenloses Haushaltsbuch online: Einnahmen und Ausgaben erfassen, Budget überwachen und Sparquote berechnen. Daten werden lokal gespeichert.')
@section('meta_extra')
<meta name="keywords" content="Haushaltsbuch, Haushaltsrechner, Budgetplaner, Einnahmen Ausgaben Rechner, Haushalt berechnen, Budgetrechner, Monatsbudget, Sparquote">
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #059669; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #ecfdf5 0%, #fff 60%); padding-top: 92px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
    .tool-container { width: min(100% - 40px, 720px); margin: 0 auto; padding: 24px 0 60px; }
    .tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(5,150,105,0.12); color: #065f46; 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); line-height: 1.7; margin: 0 0 28px; }
    .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; }
    .section-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 16px; }
    .income-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
    .field label { display: block; font-weight: 700; margin-bottom: 7px; font-size: 0.88rem; color: var(--ink); }
    .field input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; font: inherit; outline: 0; box-sizing: border-box; }
    .field input:focus { border-color: var(--accent); outline: 3px solid rgba(5,150,105,0.12); }
    .cat-list { display: flex; flex-direction: column; gap: 10px; }
    .cat-row { display: flex; align-items: center; gap: 12px; }
    .cat-icon { font-size: 1.15rem; width: 28px; flex-shrink: 0; text-align: center; }
    .cat-name { flex: 1; font-weight: 700; font-size: 0.9rem; color: var(--ink); }
    .cat-input { width: 130px; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; font: inherit; font-size: 0.95rem; outline: 0; box-sizing: border-box; text-align: right; }
    .cat-input:focus { border-color: var(--accent); outline: 3px solid rgba(5,150,105,0.12); }
    .summary-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
    .sum-card { background: #f8fafc; border-radius: 14px; padding: 16px 12px; text-align: center; border: 1px solid var(--line); }
    .sum-card.income { background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.2); }
    .sum-card.expenses { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.2); }
    .sum-card.balance.pos { background: rgba(5,150,105,0.12); border-color: rgba(5,150,105,0.3); }
    .sum-card.balance.neg { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); }
    .sum-val { font-size: 1.3rem; font-weight: 900; letter-spacing: -0.5px; }
    .sum-val.green { color: var(--accent); }
    .sum-val.red { color: #dc2626; }
    .sum-lbl { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.7px; }
    .progress-wrap { margin-bottom: 20px; }
    .progress-bar-bg { height: 12px; background: #f1f5f9; border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
    .progress-bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s, background 0.3s; background: var(--accent); }
    .progress-label { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
    .chart-area { margin-top: 4px; }
    .chart-bars { display: flex; gap: 6px; align-items: flex-end; height: 100px; margin-bottom: 6px; flex-wrap: wrap; }
    .chart-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 36px; flex: 1; }
    .chart-bar-inner { width: 100%; border-radius: 6px 6px 0 0; min-height: 4px; transition: height 0.5s; }
    .chart-bar-lbl { font-size: 0.63rem; font-weight: 700; color: var(--muted); text-align: center; }
    .chart-bar-pct { font-size: 0.68rem; font-weight: 800; color: var(--ink); }
    .save-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border: 2px solid var(--accent); border-radius: 12px; background: rgba(5,150,105,0.08); color: var(--accent); font: inherit; font-weight: 800; font-size: 0.88rem; cursor: pointer; transition: all 0.18s; }
    .save-btn:hover { background: var(--accent); color: #fff; }
    .saved-note { font-size: 0.78rem; color: var(--accent); font-weight: 700; margin-left: 10px; opacity: 0; transition: opacity 0.3s; }
    @media(max-width:560px){ .income-grid { grid-template-columns: 1fr; } .summary-box { grid-template-columns: 1fr; } .cat-name { display: none; } }
</style>

<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Finanzen</span>
        <h1 class="tool-h1">Haushaltsbuch.</h1>
        <p class="sub">Einnahmen und Ausgaben im Blick. Daten werden automatisch gespeichert.</p>
    </section>

    <div class="panel">
        <div class="section-label">Einnahmen</div>
        <div class="income-grid">
            <div class="field"><label>Nettolohn (€)</label><input type="number" id="inc-lohn" placeholder="z.B. 2800" min="0" oninput="calc()"></div>
            <div class="field"><label>Sonstige Einnahmen (€)</label><input type="number" id="inc-sonstig" placeholder="z.B. 200" min="0" oninput="calc()"></div>
        </div>
    </div>

    <div class="panel">
        <div class="section-label">Ausgaben</div>
        <div class="cat-list">
            <div class="cat-row"><span class="cat-icon">🏠</span><span class="cat-name">Miete / Hypothek</span><input type="number" class="cat-input" data-cat="miete" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">🛒</span><span class="cat-name">Lebensmittel</span><input type="number" class="cat-input" data-cat="lebensmittel" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">🚗</span><span class="cat-name">Transport</span><input type="number" class="cat-input" data-cat="transport" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">🛡</span><span class="cat-name">Versicherungen</span><input type="number" class="cat-input" data-cat="versicherungen" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">🎮</span><span class="cat-name">Freizeit</span><input type="number" class="cat-input" data-cat="freizeit" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">👕</span><span class="cat-name">Kleidung</span><input type="number" class="cat-input" data-cat="kleidung" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">💊</span><span class="cat-name">Gesundheit</span><input type="number" class="cat-input" data-cat="gesundheit" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">💰</span><span class="cat-name">Sparen</span><input type="number" class="cat-input" data-cat="sparen" placeholder="0,00" min="0" oninput="calc()"></div>
            <div class="cat-row"><span class="cat-icon">📦</span><span class="cat-name">Sonstiges</span><input type="number" class="cat-input" data-cat="sonstiges" placeholder="0,00" min="0" oninput="calc()"></div>
        </div>
    </div>

    <div class="panel">
        <div class="section-label">Monatsbilanz</div>
        <div class="summary-box">
            <div class="sum-card income"><div class="sum-val green" id="s-income">0,00 €</div><div class="sum-lbl">Einnahmen</div></div>
            <div class="sum-card expenses"><div class="sum-val red" id="s-expenses">0,00 €</div><div class="sum-lbl">Ausgaben</div></div>
            <div class="sum-card balance" id="s-balance-card"><div class="sum-val" id="s-balance">0,00 €</div><div class="sum-lbl">Übrig</div></div>
        </div>

        <div class="progress-wrap">
            <div class="progress-label"><span id="prog-label">Ausgaben: 0 %</span><span id="prog-warn"></span></div>
            <div class="progress-bar-bg"><div class="progress-bar-fill" id="progress-fill" style="width:0%"></div></div>
        </div>

        <div class="chart-area">
            <div class="section-label" style="margin-bottom:10px">Ausgaben-Verteilung</div>
            <div class="chart-bars" id="chart-bars"></div>
        </div>
    </div>

    <div style="display:flex;align-items:center;margin-top:4px">
        <button class="save-btn" onclick="saveData()">💾 Speichern</button>
        <span class="saved-note" id="saved-note">Gespeichert!</span>
        <button class="save-btn" style="margin-left:auto;border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,0.07)" onclick="resetData()">Zurücksetzen</button>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
    const fmtEur = n => n.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
    const COLORS = ['#059669','#0d9488','#0891b2','#7c3aed','#db2777','#ea580c','#65a30d','#d97706','#64748b'];
    const LABELS = { miete:'Miete', lebensmittel:'Lebensmittel', transport:'Transport', versicherungen:'Versicherung', freizeit:'Freizeit', kleidung:'Kleidung', gesundheit:'Gesundheit', sparen:'Sparen', sonstiges:'Sonstiges' };

    function calc() {
        const income = (parseFloat(document.getElementById('inc-lohn').value) || 0)
                     + (parseFloat(document.getElementById('inc-sonstig').value) || 0);
        const inputs = document.querySelectorAll('.cat-input');
        let totalExp = 0;
        const catVals = {};
        inputs.forEach(inp => {
            const v = parseFloat(inp.value) || 0;
            catVals[inp.dataset.cat] = v;
            totalExp += v;
        });

        const balance = income - totalExp;
        const pct = income > 0 ? Math.min(Math.round((totalExp / income) * 100), 200) : 0;

        document.getElementById('s-income').textContent = fmtEur(income);
        document.getElementById('s-expenses').textContent = fmtEur(totalExp);
        document.getElementById('s-balance').textContent = fmtEur(balance);

        const balCard = document.getElementById('s-balance-card');
        const balVal = document.getElementById('s-balance');
        balVal.style.color = balance >= 0 ? 'var(--accent)' : '#dc2626';

        const fill = document.getElementById('progress-fill');
        fill.style.width = Math.min(pct, 100) + '%';
        fill.style.background = pct >= 100 ? '#dc2626' : pct >= 80 ? '#f59e0b' : 'var(--accent)';
        document.getElementById('prog-label').textContent = 'Ausgaben: ' + pct + ' %';
        document.getElementById('prog-warn').textContent = pct >= 100 ? '⚠ Mehr ausgegeben als verdient!' : '';

        // Chart bars
        const chartDiv = document.getElementById('chart-bars');
        const maxCat = Math.max(...Object.values(catVals), 1);
        let chartHtml = '';
        let colorIdx = 0;
        for (const [key, val] of Object.entries(catVals)) {
            if (val <= 0) { colorIdx++; continue; }
            const barH = Math.max(6, (val / maxCat) * 90);
            const catPct = income > 0 ? Math.round((val / income) * 100) : 0;
            chartHtml += `<div class="chart-bar-wrap">
                <div class="chart-bar-pct">${catPct}%</div>
                <div class="chart-bar-inner" style="height:${barH}px;background:${COLORS[colorIdx % COLORS.length]}"></div>
                <div class="chart-bar-lbl">${LABELS[key]}</div>
            </div>`;
            colorIdx++;
        }
        chartDiv.innerHTML = chartHtml || '<span style="color:var(--muted);font-size:0.88rem">Noch keine Ausgaben eingetragen.</span>';
    }

    function saveData() {
        const data = {};
        data.inc_lohn = document.getElementById('inc-lohn').value;
        data.inc_sonstig = document.getElementById('inc-sonstig').value;
        document.querySelectorAll('.cat-input').forEach(inp => { data[inp.dataset.cat] = inp.value; });
        localStorage.setItem('haushaltsbuch_v1', JSON.stringify(data));
        const note = document.getElementById('saved-note');
        note.style.opacity = '1';
        setTimeout(() => note.style.opacity = '0', 2000);
    }

    function resetData() {
        if (!confirm('Alle Einträge löschen?')) return;
        localStorage.removeItem('haushaltsbuch_v1');
        document.getElementById('inc-lohn').value = '';
        document.getElementById('inc-sonstig').value = '';
        document.querySelectorAll('.cat-input').forEach(inp => inp.value = '');
        calc();
    }

    function loadData() {
        const raw = localStorage.getItem('haushaltsbuch_v1');
        if (!raw) return;
        try {
            const data = JSON.parse(raw);
            if (data.inc_lohn) document.getElementById('inc-lohn').value = data.inc_lohn;
            if (data.inc_sonstig) document.getElementById('inc-sonstig').value = data.inc_sonstig;
            document.querySelectorAll('.cat-input').forEach(inp => { if (data[inp.dataset.cat]) inp.value = data[inp.dataset.cat]; });
            calc();
        } catch(e) {}
    }

    loadData();
    calc();
</script>

@include('tools._seo_content', ['toolSlug' => 'haushaltsbuch', 'toolName' => 'Haushaltsbudget'])

@endsection