@extends('layouts.app')
@section('title', 'Arbeitszeit Rechner – Arbeitszeiten berechnen | kotsch.tech')
@section('meta_description', 'Arbeitszeit Rechner online: Tägliche Netto-Arbeitszeit und Überstunden berechnen. Wöchenliche Stundenübersicht mit Pause und Sollzeit. Kostenlos.')
@section('meta_extra')
<meta name="keywords" content="Arbeitszeit Rechner, Überstunden berechnen, Netto Arbeitszeit, Arbeitszeit berechnen, Stunden berechnen, Pausenrechner, Wochenarbeitszeit">
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #0891b2; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #ecfeff 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(8,145,178,0.12); color: #0e7490; 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-title { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 18px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
    @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
    .field label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
    .field input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 1rem; outline: 0; box-sizing: border-box; }
    .field input:focus { border-color: var(--accent); outline: 4px solid rgba(8,145,178,0.1); }
    .calc-btn { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 900; cursor: pointer; font-size: 1rem; margin-top: 4px; }
    .result-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
    @media (max-width: 480px) { .result-row { grid-template-columns: 1fr; } }
    .res-box { border-radius: 14px; padding: 16px; text-align: center; border: 1px solid var(--line); background: #f8fafc; }
    .res-box.positive { background: #ecfeff; border-color: rgba(8,145,178,0.3); }
    .res-box.negative { background: #fff1f2; border-color: rgba(225,29,72,0.2); }
    .res-num { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
    .res-lbl { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }
    .week-table { width: 100%; border-collapse: collapse; }
    .week-table th { text-align: left; font-size: 0.78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; padding: 8px 10px; border-bottom: 2px solid var(--line); }
    .week-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
    .week-table td input { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 0.9rem; outline: 0; box-sizing: border-box; }
    .week-table td input:focus { border-color: var(--accent); }
    .week-table .day-lbl { font-weight: 700; font-size: 0.9rem; }
    .week-table .day-result { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
    .week-summary { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
    .wsum-box { flex: 1; min-width: 120px; background: rgba(8,145,178,0.07); border-radius: 12px; padding: 14px; text-align: center; }
    .wsum-num { font-size: 1.5rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
    .wsum-lbl { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }
    .tabs { display: flex; gap: 8px; margin-bottom: 20px; }
    .tab { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
    .tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .tab-section { display: none; }
    .tab-section.active { display: block; }
</style>
<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Datum & Zeit</span>
        <h1 class="tool-h1">Arbeitszeit.</h1>
        <p class="sub">Netto-Arbeitszeit, Überstunden und Wochenstunden blitzschnell berechnen.</p>
    </section>

    <div class="tabs">
        <button class="tab active" onclick="switchTab('day', this)">Tagesrechner</button>
        <button class="tab" onclick="switchTab('week', this)">Wochenrechner</button>
    </div>

    <!-- TAGESRECHNER -->
    <div class="tab-section active" id="tab-day">
        <div class="panel">
            <div class="panel-title">Tagesrechner</div>
            <div class="form-row">
                <div class="field"><label>Arbeitsbeginn</label><input type="time" id="day-start" value="09:00"></div>
                <div class="field"><label>Arbeitsende</label><input type="time" id="day-end" value="17:00"></div>
                <div class="field"><label>Pause (Minuten)</label><input type="number" id="day-break" value="30" min="0"></div>
            </div>
            <div class="field" style="max-width:200px">
                <label>Sollzeit (Stunden)</label>
                <input type="number" id="day-target" value="8" min="0" max="24" step="0.5">
            </div>
            <button class="calc-btn" onclick="calcDay()">Berechnen</button>
            <div class="result-row" id="day-results" style="display:none">
                <div class="res-box">
                    <div class="res-num" id="res-total">--</div>
                    <div class="res-lbl">Gesamtzeit</div>
                </div>
                <div class="res-box positive">
                    <div class="res-num" id="res-net">--</div>
                    <div class="res-lbl">Netto-Arbeitszeit</div>
                </div>
                <div class="res-box" id="res-overtime-box">
                    <div class="res-num" id="res-overtime">--</div>
                    <div class="res-lbl" id="res-overtime-lbl">Überstunden</div>
                </div>
            </div>
        </div>
    </div>

    <!-- WOCHENRECHNER -->
    <div class="tab-section" id="tab-week">
        <div class="panel">
            <div class="panel-title">Wochenrechner</div>
            <table class="week-table">
                <thead>
                    <tr>
                        <th>Tag</th>
                        <th>Beginn</th>
                        <th>Ende</th>
                        <th>Pause (min)</th>
                        <th>Netto</th>
                    </tr>
                </thead>
                <tbody id="week-tbody"></tbody>
            </table>
            <button class="calc-btn" onclick="calcWeek()" style="margin-top:18px">Woche berechnen</button>
            <div class="week-summary" id="week-summary" style="display:none">
                <div class="wsum-box"><div class="wsum-num" id="w-total">--</div><div class="wsum-lbl">Wochenstunden</div></div>
                <div class="wsum-box"><div class="wsum-num" id="w-avg">--</div><div class="wsum-lbl">Ø pro Tag</div></div>
                <div class="wsum-box"><div class="wsum-num" id="w-over">--</div><div class="wsum-lbl">Überstunden</div></div>
            </div>
        </div>
    </div>
</div>@include('tools._ads_banner')</div>
<script>
    const days = ['Montag','Dienstag','Mittwoch','Donnerstag','Freitag'];
    const STORAGE_KEY = 'arbeitszeit_week';

    function switchTab(id, btn) {
        document.querySelectorAll('.tab-section').forEach(s => s.classList.remove('active'));
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.getElementById('tab-' + id).classList.add('active');
        btn.classList.add('active');
    }

    function parseTime(val) {
        if (!val) return null;
        const [h, m] = val.split(':').map(Number);
        return h * 60 + m;
    }

    function minsToHours(m) {
        const sign = m < 0 ? '-' : '';
        m = Math.abs(m);
        const h = Math.floor(m / 60);
        const min = m % 60;
        return `${sign}${h}:${String(min).padStart(2,'0')} h`;
    }

    function calcDay() {
        const start = parseTime(document.getElementById('day-start').value);
        const end   = parseTime(document.getElementById('day-end').value);
        const brk   = parseInt(document.getElementById('day-break').value) || 0;
        const target = parseFloat(document.getElementById('day-target').value) * 60 || 480;
        if (start === null || end === null) return;
        // Handle midnight crossover: if end <= start, assume next day
        let total = end - start;
        if (total <= 0) total += 24 * 60;
        const net   = total - brk;
        const over  = net - target;
        document.getElementById('res-total').textContent   = minsToHours(total);
        document.getElementById('res-net').textContent     = minsToHours(net);
        document.getElementById('res-overtime').textContent = minsToHours(Math.abs(over));
        const ob = document.getElementById('res-overtime-box');
        ob.className = 'res-box ' + (over >= 0 ? 'positive' : 'negative');
        document.getElementById('res-overtime-lbl').textContent = over < 0 ? 'Minusstunden' : 'Überstunden';
        document.getElementById('day-results').style.display = 'grid';
    }

    // Build week table
    const tbody = document.getElementById('week-tbody');
    const saved = (() => { try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {}; } catch(e) { return {}; } })();

    days.forEach((day, i) => {
        const s = saved[i] || {};
        tbody.innerHTML += `<tr>
            <td class="day-lbl">${day}</td>
            <td><input type="time" id="w-start-${i}" value="${s.start||'09:00'}" onchange="saveWeek()"></td>
            <td><input type="time" id="w-end-${i}"   value="${s.end||'17:00'}"   onchange="saveWeek()"></td>
            <td><input type="number" id="w-brk-${i}" value="${s.brk||30}" min="0" onchange="saveWeek()" style="max-width:80px"></td>
            <td class="day-result" id="w-res-${i}">–</td>
        </tr>`;
    });

    function saveWeek() {
        const data = {};
        days.forEach((_, i) => {
            data[i] = {
                start: document.getElementById('w-start-'+i).value,
                end:   document.getElementById('w-end-'+i).value,
                brk:   document.getElementById('w-brk-'+i).value,
            };
        });
        try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch(e) {}
    }

    function calcWeek() {
        let totalMins = 0;
        let daysWorked = 0;
        days.forEach((_, i) => {
            const start = parseTime(document.getElementById('w-start-'+i).value);
            const end   = parseTime(document.getElementById('w-end-'+i).value);
            const brk   = parseInt(document.getElementById('w-brk-'+i).value) || 0;
            if (start !== null && end !== null) {
                // Handle midnight crossover
                let diff = end - start;
                if (diff <= 0) diff += 24 * 60;
                const net = diff - brk;
                totalMins += net;
                daysWorked++;
                document.getElementById('w-res-'+i).textContent = minsToHours(net);
            } else {
                document.getElementById('w-res-'+i).textContent = '–';
            }
        });
        const targetWeek = 40 * 60;
        const avg = daysWorked > 0 ? Math.round(totalMins / daysWorked) : 0;
        const over = totalMins - targetWeek;
        document.getElementById('w-total').textContent = minsToHours(totalMins);
        document.getElementById('w-avg').textContent   = minsToHours(avg);
        document.getElementById('w-over').textContent  = minsToHours(over);
        document.getElementById('week-summary').style.display = 'flex';
        saveWeek();
    }
</script>

@include('tools._seo_content', ['toolSlug' => 'arbeitszeit-rechner', 'toolName' => 'Arbeitszeitrechner'])

@endsection