@extends('layouts.app')
@section('title', 'Trinkgeld Rechner – Tip Calculator auf Deutsch | kotsch.tech')
@section('meta_description', 'Trinkgeld Rechner: Wie viel Trinkgeld geben? Rechnungsbetrag und Prozentsatz eingeben – Trinkgeld, Gesamtbetrag und Aufteilung sofort berechnet.')
@section('meta_extra')
<meta name="keywords" content="Trinkgeld Rechner, Trinkgeld berechnen, Tip Rechner, wie viel Trinkgeld, Trinkgeld Prozent, Rechnungssplitter">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.tip-quick { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tip-pill { padding:8px 18px; border-radius:999px; border:2px solid var(--line); background:var(--card); font:inherit; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.tip-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.tip-slider { accent-color:var(--accent); width:100%; margin:8px 0; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-hand-holding-usd"></i> Finanzen</span>
        <h1 class="tool-h1">Trinkgeld<span>rechner.</span></h1>
        <p class="tool-sub">Rechnungsbetrag, Prozentsatz, Personen – Trinkgeld und Aufteilung sofort berechnet.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Rechnungsbetrag (€)</label>
            <input type="number" class="t-input" id="bill" placeholder="z.B. 42.50" step="0.01" min="0" oninput="calc()">
        </div>

        <div class="t-field">
            <label class="t-label">Trinkgeld-Prozentsatz</label>
            <div class="tip-quick">
                <button class="tip-pill" onclick="setTip(5,this)">5%</button>
                <button class="tip-pill active" onclick="setTip(10,this)">10%</button>
                <button class="tip-pill" onclick="setTip(15,this)">15%</button>
                <button class="tip-pill" onclick="setTip(20,this)">20%</button>
                <button class="tip-pill" onclick="setTip(25,this)">25%</button>
            </div>
            <input type="range" class="tip-slider" id="tip-slider" min="0" max="50" value="10" oninput="sliderInput(this.value)">
            <input type="number" class="t-input" id="tip-pct" value="10" min="0" max="100" style="margin-top:8px" oninput="pctInput(this.value)">
        </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="1" min="1" max="100" oninput="calc()">
            </div>
            <div class="t-field">
                <label class="t-label">Aufrunden auf</label>
                <select class="t-select" id="round" onchange="calc()">
                    <option value="0">Nicht aufrunden</option>
                    <option value="0.5">Nächste 0,50 €</option>
                    <option value="1">Nächsten Euro</option>
                    <option value="5">Nächste 5 €</option>
                </select>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-chart-bar"></i> Ergebnis</div>
        <div class="t-grid-4">
            <div class="t-stat-card accent">
                <div class="t-stat-num" id="r-tip">–</div>
                <div class="t-stat-lbl">Trinkgeld</div>
            </div>
            <div class="t-stat-card accent">
                <div class="t-stat-num" id="r-total">–</div>
                <div class="t-stat-lbl">Gesamt</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-tip-pp">–</div>
                <div class="t-stat-lbl">Trinkgeld / Person</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-num" id="r-total-pp">–</div>
                <div class="t-stat-lbl">Gesamt / Person</div>
            </div>
        </div>
        <button class="t-btn ghost full" style="margin-top:12px" onclick="copyResult()">
            <i class="fas fa-copy"></i> Ergebnis kopieren
        </button>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const fmt=n=>n.toLocaleString('de-DE',{style:'currency',currency:'EUR'});
function setTip(pct,btn){
    document.querySelectorAll('.tip-pill').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tip-pct').value=pct;
    document.getElementById('tip-slider').value=pct;
    calc();
}
function sliderInput(v){
    document.getElementById('tip-pct').value=v;
    document.querySelectorAll('.tip-pill').forEach(b=>b.classList.remove('active'));
    calc();
}
function pctInput(v){
    document.getElementById('tip-slider').value=Math.min(v,50);
    document.querySelectorAll('.tip-pill').forEach(b=>b.classList.remove('active'));
    calc();
}
function calc(){
    const bill=parseFloat(document.getElementById('bill').value);
    const pct=parseFloat(document.getElementById('tip-pct').value)||0;
    const persons=Math.max(1,parseInt(document.getElementById('persons').value)||1);
    const roundStep=parseFloat(document.getElementById('round').value)||0;
    if(isNaN(bill)||bill<0){['r-tip','r-total','r-tip-pp','r-total-pp'].forEach(id=>document.getElementById(id).textContent='–');return;}
    const tip=bill*pct/100;
    let total=bill+tip;
    if(roundStep>0) total=Math.ceil(total/roundStep)*roundStep;
    const actualTip=total-bill;
    document.getElementById('r-tip').textContent=fmt(actualTip);
    document.getElementById('r-total').textContent=fmt(total);
    document.getElementById('r-tip-pp').textContent=fmt(actualTip/persons);
    document.getElementById('r-total-pp').textContent=fmt(total/persons);
}
function copyResult(){
    const tip=document.getElementById('r-tip').textContent,total=document.getElementById('r-total').textContent,pp=document.getElementById('r-total-pp').textContent;
    navigator.clipboard.writeText(`Trinkgeld: ${tip}\nGesamt: ${total}\nPro Person: ${pp}`).then(()=>{
        const btn=document.querySelector('.t-btn.ghost.full');
        btn.innerHTML='<i class="fas fa-check"></i> Kopiert!';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i> Ergebnis kopieren',2000);
    });
}
calc();
</script>

@include('tools._seo_content', ['toolSlug' => 'trinkgeld-rechner', 'toolName' => 'Trinkgeld Rechner'])

@endsection