{% extends "base.html" %}
{% block title %}Stundensatz-Kalkulation{% endblock %}
{% block heading %}💰 Stundensatz-Kalkulation{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Auswertungen / Stundensatz-Kalkulation</p>{% endblock %}

{% block content %}
<style>
  .calc-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  @media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
  .input-block { margin-bottom:14px; }
  .input-block label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.55); font-weight:600; margin-bottom:4px; }
  .input-block input { width:100%; padding:10px 12px; background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.20); border-radius:6px; font-size:15px; }
  .result-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px; }
  .result-row.total { font-weight:700; font-size:18px; color:#fcd34d; padding-top:14px; margin-top:6px; border-top:2px solid rgba(252,211,77,0.40); }
  .split-bar { display:flex; height:30px; border-radius:6px; overflow:hidden; margin-top:14px; }
  .split-bar > div { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; }
</style>

<div class="calc-grid">
  <div class="card">
    <div class="card-header"><div><h2>Eingabe</h2></div></div>
    <div class="p-5">
      <div class="input-block">
        <label>Material pro Stunde (€)</label>
        <input type="number" id="material" step="0.01" value="0" placeholder="z.B. 12.50">
      </div>
      <div class="input-block">
        <label>Lohn pro Stunde (€) — Brutto inkl. Sozialabgaben</label>
        <input type="number" id="lohn" step="0.01" value="35" placeholder="z.B. 35.00">
      </div>
      <div class="input-block">
        <label>Maschinenkosten pro Stunde (€) — AfA, Strom, Wartung</label>
        <input type="number" id="machine" step="0.01" value="25" placeholder="z.B. 25.00">
      </div>
      <div class="input-block">
        <label>Gemeinkosten-Aufschlag (%)</label>
        <input type="number" id="gk" step="1" value="30" placeholder="20-50 typisch">
      </div>
      <div class="input-block">
        <label>Gewinn-Aufschlag (%)</label>
        <input type="number" id="gewinn" step="1" value="15" placeholder="10-25 typisch">
      </div>
      <button class="btn btn-primary" onclick="calc()">→ Berechnen</button>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><div><h2>Ergebnis pro Stunde</h2></div></div>
    <div class="p-5">
      <div id="result-area" style="color:rgba(255,255,255,0.55);font-size:13px;text-align:center;padding:40px 0;">
        ← Werte eintragen + "Berechnen"
      </div>
    </div>
  </div>
</div>

<div style="margin-top:18px;font-size:12px;color:rgba(255,255,255,0.55);padding:14px;background:rgba(53,102,146,0.10);border-radius:8px;">
  <strong>Erklärung:</strong>
  <strong>Selbstkosten</strong> = Material + Lohn + Maschine.
  <strong>Gemeinkosten</strong> = Verwaltung, Vertrieb, Geschäftsführer, Räume — typisch 20-50 % Aufschlag auf Selbstkosten.
  <strong>Gewinn-Aufschlag</strong> = was nach Steuern + Investitionen übrig bleiben soll, typisch 10-25 %.
  <strong>Verkaufspreis</strong> ist der Mindest-Stundensatz den du dem Kunden in Rechnung stellen musst um nicht mit Verlust zu arbeiten.
</div>

<script>
function calc() {
  const v = (id) => parseFloat(document.getElementById(id).value) || 0;
  fetch('/api/hourly-rate/compute', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      material_per_h: v('material'),
      lohn_per_h: v('lohn'),
      machine_per_h: v('machine'),
      gemeinkosten_pct: v('gk'),
      gewinn_pct: v('gewinn'),
    })
  }).then(r=>r.json()).then(d => {
    if (!d.ok) { alert('Fehler'); return; }
    const eur = (n) => n.toLocaleString('de-DE', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' €';
    const s = d.splits;
    document.getElementById('result-area').innerHTML = `
      <div class="result-row"><span>Material</span><span>${eur(v('material'))}</span></div>
      <div class="result-row"><span>Lohn</span><span>${eur(v('lohn'))}</span></div>
      <div class="result-row"><span>Maschine</span><span>${eur(v('machine'))}</span></div>
      <div class="result-row"><span><strong>Selbstkosten</strong></span><span>${eur(d.selbstkosten)}</span></div>
      <div class="result-row"><span>+ Gemeinkosten (${v('gk')}%)</span><span>${eur(d.gemeinkosten)}</span></div>
      <div class="result-row"><span><strong>Selbstkosten-Total</strong></span><span>${eur(d.selbstkosten_total)}</span></div>
      <div class="result-row"><span>+ Gewinn (${v('gewinn')}%)</span><span>${eur(d.gewinn)}</span></div>
      <div class="result-row total"><span>= Verkaufspreis pro Stunde</span><span>${eur(d.verkaufspreis)}</span></div>
      <div class="split-bar">
        ${s.material_pct > 0 ? `<div style="width:${s.material_pct}%;background:#0ea5e9;">Mat ${s.material_pct}%</div>` : ''}
        <div style="width:${s.lohn_pct}%;background:#10b981;">Lohn ${s.lohn_pct}%</div>
        <div style="width:${s.machine_pct}%;background:#a78bfa;">Maschine ${s.machine_pct}%</div>
        <div style="width:${s.gk_pct}%;background:#94a3b8;">GK ${s.gk_pct}%</div>
        <div style="width:${s.gewinn_pct}%;background:#fcd34d;color:#0f1620;">Gewinn ${s.gewinn_pct}%</div>
      </div>
    `;
  });
}
calc();  // initial mit Defaults
</script>

{% endblock %}