@extends('layouts.app')
@section('title', 'Datum Rechner – Tage zwischen zwei Daten berechnen | kotsch.tech')
@section('meta_description', 'Datum Rechner online: Tage zwischen zwei Daten berechnen, Datum addieren oder subtrahieren. Wie viele Tage bis Weihnachten? Kostenloser Datumsrechner.')
@section('meta_extra')
<meta name="keywords" content="Datum Rechner, Tage berechnen, Tage zwischen zwei Daten, Datumsrechner, Datum addieren, wie viele Tage bis, Datum berechnen online">
@endsection
@section('content')
@include('tools._tool_base')

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-calendar-days"></i> Datum</span>
        <h1 class="tool-h1">Datum<br><span>berechnen.</span></h1>
        <p class="tool-sub">Tage zwischen Daten, Datum addieren, Wochentag ermitteln – mit Schnellzugriff auf beliebte Daten.</p>
    </div>

    <div class="t-tabs">
        <button class="t-tab active" onclick="showTab('diff',this)">Differenz</button>
        <button class="t-tab" onclick="showTab('add',this)">Datum addieren</button>
        <button class="t-tab" onclick="showTab('weekday',this)">Wochentag</button>
    </div>

    <div class="t-panel">
        <div class="t-tab-pane active" id="tab-diff">
            <div class="t-grid-2">
                <div class="t-field">
                    <label class="t-label">Startdatum</label>
                    <input type="date" class="t-input" id="d1" oninput="calcDiff()">
                </div>
                <div class="t-field">
                    <label class="t-label">Enddatum</label>
                    <input type="date" class="t-input" id="d2" oninput="calcDiff()">
                </div>
            </div>
            <div id="res-diff" style="display:none">
                <div class="t-grid-4" style="margin-top:4px">
                    <div class="t-stat-card accent">
                        <div class="t-stat-num" id="diff-days">–</div>
                        <div class="t-stat-lbl">Tage gesamt</div>
                    </div>
                    <div class="t-stat-card">
                        <div class="t-stat-num" id="diff-workdays">–</div>
                        <div class="t-stat-lbl">Werktage</div>
                    </div>
                    <div class="t-stat-card">
                        <div class="t-stat-num" id="diff-weeks">–</div>
                        <div class="t-stat-lbl">Wochen</div>
                    </div>
                    <div class="t-stat-card">
                        <div class="t-stat-num" id="diff-months">–</div>
                        <div class="t-stat-lbl">Monate (ca.)</div>
                    </div>
                </div>
                <div class="t-info" id="diff-text" style="margin-top:14px;text-align:center"></div>
            </div>
            <div class="t-panel-title" style="margin-top:20px;margin-bottom:10px"><i class="fas fa-bolt"></i> Schnellzugriff</div>
            <div class="t-quick-row">
                <button class="t-quick-btn" onclick="quickTo(12,25,'Weihnachten')">Bis Weihnachten</button>
                <button class="t-quick-btn" onclick="quickTo(1,1,'Neujahr')">Bis Neujahr</button>
                <button class="t-quick-btn" onclick="quickTo(10,3,'Tag der Einheit')">Tag der Einheit</button>
                <button class="t-quick-btn" onclick="quickFromToday(100)">+100 Tage</button>
                <button class="t-quick-btn" onclick="quickFromToday(365)">+365 Tage</button>
                <button class="t-quick-btn" onclick="quickFromToday(-365)">−365 Tage</button>
            </div>
        </div>

        <div class="t-tab-pane" id="tab-add">
            <div class="t-field">
                <label class="t-label">Startdatum</label>
                <input type="date" class="t-input" id="add-start" oninput="calcAdd()">
            </div>
            <div class="t-grid-2">
                <div class="t-field">
                    <label class="t-label">Tage (+/−)</label>
                    <input type="number" class="t-input" id="add-days" placeholder="z.B. 30 oder -14" oninput="calcAdd()">
                </div>
                <div class="t-field">
                    <label class="t-label">Monate (+/−)</label>
                    <input type="number" class="t-input" id="add-months" placeholder="z.B. 6" oninput="calcAdd()">
                </div>
            </div>
            <div class="t-result" id="res-add" style="display:none;text-align:center">
                <div class="t-result-big" id="add-result">–</div>
                <div class="t-result-lbl" id="add-weekday"></div>
                <div class="t-result-lbl" id="add-kw" style="margin-top:4px"></div>
            </div>
        </div>

        <div class="t-tab-pane" id="tab-weekday">
            <div class="t-field">
                <label class="t-label">Datum auswählen</label>
                <input type="date" class="t-input" id="wd-date" oninput="calcWeekday()">
            </div>
            <div class="t-result" id="res-weekday" style="display:none;text-align:center">
                <div class="t-result-big" id="wd-day" style="font-size:1.8rem">–</div>
                <div class="t-result-lbl" id="wd-info"></div>
                <div class="t-result-lbl" id="wd-kw" style="margin-top:4px"></div>
            </div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const DAYS_DE = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
const MONTHS_DE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
function fmtFull(d) { return `${DAYS_DE[d.getDay()]}, ${d.getDate()}. ${MONTHS_DE[d.getMonth()]} ${d.getFullYear()}`; }
function getKW(d) {
    const dt = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    const day = dt.getUTCDay() || 7;
    dt.setUTCDate(dt.getUTCDate() + 4 - day);
    const y1 = new Date(Date.UTC(dt.getUTCFullYear(), 0, 1));
    return Math.ceil((((dt - y1) / 86400000) + 1) / 7);
}
function countWorkdays(d1, d2) {
    let count = 0, cur = new Date(d1 < d2 ? d1 : d2);
    const end = new Date(d1 < d2 ? d2 : d1);
    while (cur <= end) {
        const dow = cur.getDay();
        if (dow !== 0 && dow !== 6) count++;
        cur.setDate(cur.getDate() + 1);
    }
    return count;
}
function showTab(id, btn) {
    document.querySelectorAll('.t-tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.t-tab-pane').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-' + id).classList.add('active');
}
function calcDiff() {
    const v1 = document.getElementById('d1').value;
    const v2 = document.getElementById('d2').value;
    if (!v1 || !v2) { document.getElementById('res-diff').style.display = 'none'; return; }
    const d1 = new Date(v1), d2 = new Date(v2);
    const ms   = d2 - d1;
    const days = Math.round(ms / 86400000);
    const abs  = Math.abs(days);
    document.getElementById('diff-days').textContent     = abs.toLocaleString('de-DE');
    document.getElementById('diff-workdays').textContent = countWorkdays(d1, d2).toLocaleString('de-DE');
    document.getElementById('diff-weeks').textContent    = (abs / 7).toFixed(1).replace('.',',');
    document.getElementById('diff-months').textContent   = (abs / 30.44).toFixed(1).replace('.',',');
    document.getElementById('diff-text').textContent = days >= 0
        ? `Von ${fmtFull(d1)} bis ${fmtFull(d2)}`
        : `Rückwärts: ${abs.toLocaleString('de-DE')} Tage`;
    document.getElementById('res-diff').style.display = 'block';
}
function quickTo(month, day, label) {
    const now = new Date(); let t = new Date(now.getFullYear(), month - 1, day);
    if (t < now) t.setFullYear(now.getFullYear() + 1);
    document.getElementById('d1').valueAsDate = now;
    document.getElementById('d2').valueAsDate = t;
    calcDiff();
}
function quickFromToday(days) {
    const now = new Date(), t = new Date(now.getTime() + days * 86400000);
    document.getElementById('d1').valueAsDate = days >= 0 ? now : t;
    document.getElementById('d2').valueAsDate = days >= 0 ? t   : now;
    calcDiff();
}
function calcAdd() {
    const v = document.getElementById('add-start').value;
    if (!v) { document.getElementById('res-add').style.display = 'none'; return; }
    const start  = new Date(v);
    const days   = parseInt(document.getElementById('add-days').value)   || 0;
    const months = parseInt(document.getElementById('add-months').value) || 0;
    const result = new Date(start);
    result.setMonth(result.getMonth() + months);
    result.setDate(result.getDate() + days);
    document.getElementById('add-result').textContent  = result.toLocaleDateString('de-DE');
    document.getElementById('add-weekday').textContent = DAYS_DE[result.getDay()];
    document.getElementById('add-kw').textContent      = 'Kalenderwoche ' + getKW(result);
    document.getElementById('res-add').style.display   = 'block';
}
function calcWeekday() {
    const v = document.getElementById('wd-date').value;
    if (!v) { document.getElementById('res-weekday').style.display = 'none'; return; }
    const d = new Date(v);
    document.getElementById('wd-day').textContent   = DAYS_DE[d.getDay()];
    document.getElementById('wd-info').textContent  = fmtFull(d);
    document.getElementById('wd-kw').textContent    = 'Kalenderwoche ' + getKW(d);
    document.getElementById('res-weekday').style.display = 'block';
}
const todayStr = new Date().toISOString().split('T')[0];
document.getElementById('d1').value = todayStr;
document.getElementById('add-start').value = todayStr;
document.getElementById('wd-date').value   = todayStr;
calcWeekday();
</script>

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

@endsection