@extends('layouts.app')
@section('title', 'Hackepeter Rechner – Mettrechner für Partys | kotsch.tech')
@section('meta_description', 'Hackepeter Rechner: Wie viel Mett brauche ich? Berechne Mett, Brötchen, Zwiebeln, Bier und mehr für deine Party. Kostenloser Mettrechner online.')
@section('meta_extra')
<meta name="keywords" content="Hackepeter Rechner, Mettrechner, Mett Party, Mett berechnen, Mett pro Person, Hackepeter Party">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.mett-hero { text-align:center; padding:24px 0; }
.mett-num { font-size:clamp(3.5rem,14vw,6rem); font-weight:900; color:var(--accent); line-height:1; letter-spacing:-3px; }
.mett-unit { font-size:1rem; font-weight:700; color:var(--muted); margin-top:4px; }
.ing-card { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); }
.ing-icon { font-size:1.8rem; flex-shrink:0; width:40px; text-align:center; }
.ing-body { flex:1; }
.ing-name { font-weight:700; font-size:0.88rem; }
.ing-qty { font-weight:900; color:var(--accent); font-size:1.1rem; }
.ing-unit { font-size:0.78rem; color:var(--muted); font-weight:700; }
.preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.preset-btn { padding:10px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; text-align:center; transition:all 0.15s; color:var(--ink); }
.preset-btn:hover { border-color:var(--accent); color:var(--accent); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-bread-slice"></i> Spaß & Küche</span>
        <h1 class="tool-h1">Hackepeter<span>rechner.</span></h1>
        <p class="tool-sub">Wieviel Mett brauche ich für meine Party? Alles auf einen Blick – inkl. Brötchen, Zwiebeln und Bier.</p>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-users"></i> Personenanzahl & Anlass</div>
        <div class="t-grid-2">
            <div class="t-field">
                <label class="t-label">Personen</label>
                <input type="number" class="t-input" id="persons" value="10" min="1" max="500" oninput="calc()">
            </div>
            <div class="t-field">
                <label class="t-label">Mett-Typ</label>
                <select class="t-select" id="mett-type" onchange="calc()">
                    <option value="150">Normal (150g/Person)</option>
                    <option value="200">Hungrig (200g/Person)</option>
                    <option value="250">Party-Modus (250g/Person)</option>
                    <option value="100">Leicht (100g/Person)</option>
                </select>
            </div>
        </div>

        <div class="t-panel-title" style="margin-top:12px"><i class="fas fa-sliders-h"></i> Schnell wählen</div>
        <div class="preset-grid" style="margin-bottom:4px">
            <button class="preset-btn" onclick="setPersons(5)">5 Personen</button>
            <button class="preset-btn" onclick="setPersons(10)">10 Personen</button>
            <button class="preset-btn" onclick="setPersons(20)">20 Personen</button>
            <button class="preset-btn" onclick="setPersons(50)">50 Personen</button>
            <button class="preset-btn" onclick="setPersons(100)">100 Personen</button>
        </div>

        <div class="mett-hero">
            <div class="mett-num" id="mett-total">1.500</div>
            <div class="mett-unit">Gramm Mett gesamt</div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-shopping-basket"></i> Einkaufsliste</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px" id="ing-grid">
        </div>
        <button class="t-btn ghost full" style="margin-top:14px" onclick="copyList()"><i class="fas fa-copy"></i> Liste kopieren</button>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-toggle-on"></i> Zutaten anpassen</div>
        <div id="toggles" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px"></div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-info-circle"></i> Mett-Fakten</div>
        <div class="t-row"><span class="t-row-lbl">Kalorien (gesamt, ca.)</span><span class="t-row-val" id="kcal">–</span></div>
        <div class="t-row"><span class="t-row-lbl">Protein (gesamt, ca.)</span><span class="t-row-val" id="protein">–</span></div>
        <div class="t-row"><span class="t-row-lbl">Kosten (ca. 6€/kg)</span><span class="t-row-val" id="cost">–</span></div>
        <div class="t-row"><span class="t-row-lbl">Pakete à 500g</span><span class="t-row-val" id="packs">–</span></div>
        <p class="t-info" style="margin-top:10px">Nährwerte sind Schätzwerte. Mett enthält ca. 210 kcal und 15g Protein pro 100g.</p>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const INGS = [
    { id:'broetchen',  icon:'🥖', name:'Brötchen',        ratio: 1/100,   unit:'Stück',  factor:1,      active:true  },
    { id:'zwiebel',    icon:'🧅', name:'Zwiebeln',         ratio: 0.5/100, unit:'Stück',  factor:1,      active:true  },
    { id:'senf',       icon:'🟡', name:'Senf',             ratio: 10/100,  unit:'g',      factor:1,      active:true  },
    { id:'paprika',    icon:'🫑', name:'Paprikapulver',    ratio: 2/100,   unit:'g',      factor:1,      active:true  },
    { id:'salz',       icon:'🧂', name:'Salz & Pfeffer',   ratio: 1/100,   unit:'g',      factor:1,      active:true  },
    { id:'bier',       icon:'🍺', name:'Bier',             ratio: 0.5/100, unit:'Flaschen',factor:1,     active:true  },
    { id:'butter',     icon:'🧈', name:'Butter',           ratio: 20/100,  unit:'g',      factor:1,      active:false },
    { id:'knobi',      icon:'🧄', name:'Knoblauch',        ratio: 0.5/100, unit:'Zehen',  factor:1,      active:false },
    { id:'chili',      icon:'🌶️', name:'Chili',            ratio: 1/100,   unit:'Schoten',factor:1,      active:false },
    { id:'schnaps',    icon:'🥃', name:'Schnaps',          ratio: 0.25/100,unit:'Flaschen',factor:1,     active:false },
];

function setPersons(n){ document.getElementById('persons').value=n; calc(); }

function buildToggles(){
    const div=document.getElementById('toggles');
    div.innerHTML=INGS.map(ing=>`
        <label class="t-toggle-row" style="cursor:pointer;gap:10px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)">
            <input type="checkbox" ${ing.active?'checked':''} onchange="toggleIng('${ing.id}',this.checked)">
            <span>${ing.icon} ${ing.name}</span>
        </label>`).join('');
}

function toggleIng(id,state){
    const ing=INGS.find(i=>i.id===id);
    if(ing)ing.active=state;
    calc();
}

function calc(){
    const persons=Math.max(1,parseInt(document.getElementById('persons').value)||1);
    const gpp=parseInt(document.getElementById('mett-type').value)||150;
    const totalG=persons*gpp;
    const totalKg=totalG/1000;

    document.getElementById('mett-total').textContent=(totalG).toLocaleString('de-DE');
    document.getElementById('kcal').textContent=Math.round(totalG*2.1).toLocaleString('de-DE')+' kcal';
    document.getElementById('protein').textContent=Math.round(totalG*0.15).toLocaleString('de-DE')+'g';
    document.getElementById('cost').textContent=(totalKg*6).toFixed(2).replace('.',',')+' €';
    document.getElementById('packs').textContent=Math.ceil(totalKg/0.5);

    const active=INGS.filter(i=>i.active);
    document.getElementById('ing-grid').innerHTML=active.map(ing=>{
        const qty=ing.ratio*totalG;
        const display=qty>=1?Math.ceil(qty).toLocaleString('de-DE'):qty.toFixed(1).replace('.',',');
        return `<div class="ing-card">
            <div class="ing-icon">${ing.icon}</div>
            <div class="ing-body">
                <div class="ing-name">${ing.name}</div>
                <div class="ing-qty">${display} <span class="ing-unit">${ing.unit}</span></div>
            </div>
        </div>`;
    }).join('');
}

function copyList(){
    const persons=Math.max(1,parseInt(document.getElementById('persons').value)||1);
    const gpp=parseInt(document.getElementById('mett-type').value)||150;
    const totalG=persons*gpp;
    const active=INGS.filter(i=>i.active);
    let text=`Einkaufsliste Mettparty (${persons} Personen)\n`;
    text+=`Mett: ${(totalG/1000).toFixed(2).replace('.',',')} kg\n`;
    active.forEach(ing=>{
        const qty=ing.ratio*totalG;
        const display=qty>=1?Math.ceil(qty):qty.toFixed(1);
        text+=`${ing.name}: ${display} ${ing.unit}\n`;
    });
    navigator.clipboard.writeText(text).then(()=>alert('Liste kopiert!'));
}

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

@include('tools._seo_content', ['toolSlug' => 'hackepeter', 'toolName' => 'Hackepeter Rechner'])

@endsection