@extends('layouts.app')
@section('title', 'Countdown Timer – Zieldatum Countdown online | kotsch.tech')
@section('meta_description', 'Countdown Timer online: Mehrere Countdowns gleichzeitig, Tage/Stunden/Minuten/Sekunden, Fortschrittsbalken, Quick-Presets und lokale Speicherung.')
@section('meta_extra')
<meta name="keywords" content="Countdown Timer, Countdown Weihnachten, Silvester Countdown, Geburtstag Countdown, Countdown online, Datum Countdown, Tage bis">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.cd-card { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); overflow:hidden; margin-bottom:12px; }
.cd-card-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg); }
.cd-name { font-weight:900; font-size:0.95rem; }
.cd-date { font-size:0.78rem; color:var(--muted); }
.cd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:16px; }
@media(max-width:400px){ .cd-grid { grid-template-columns:repeat(2,1fr); } }
.cd-box { text-align:center; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 8px; }
.cd-num { font-size:clamp(1.6rem,5vw,2.4rem); font-weight:900; letter-spacing:-2px; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1; }
.cd-lbl { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.cd-progress { height:4px; background:var(--line); }
.cd-prog-fill { height:100%; background:var(--accent); transition:width 1s linear; }
.cd-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; font-size:0.78rem; color:var(--muted); }
.cd-done { text-align:center; padding:24px; }
.cd-done-icon { font-size:2.5rem; margin-bottom:8px; }
.cd-done-txt { font-weight:900; font-size:1.1rem; color:var(--accent); }
.quick-btn { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.quick-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-hourglass-half"></i> Datum & Zeit</span>
        <h1 class="tool-h1">Count<span>down.</span></h1>
        <p class="tool-sub">Wie lange noch? Mehrere Ereignisse gleichzeitig, Fortschrittsbalken und Quick-Presets.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:12px">
            <div class="t-field">
                <label class="t-label">Ereignisname</label>
                <input type="text" class="t-input" id="new-name" placeholder="z.B. Urlaub, Hochzeit, Prüfung…">
            </div>
            <div class="t-field">
                <label class="t-label">Zieldatum & Uhrzeit</label>
                <input type="datetime-local" class="t-input" id="new-dt">
            </div>
        </div>
        <div style="display:flex;gap:8px;margin-top:4px;flex-wrap:wrap">
            <button class="t-btn full" onclick="addCountdown()"><i class="fas fa-plus"></i> Countdown hinzufügen</button>
        </div>

        <div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--line)">
            <div style="font-size:0.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Schnell hinzufügen</div>
            <div style="display:flex;gap:6px;flex-wrap:wrap">
                <button class="quick-btn" onclick="quickAdd('🎆 Silvester', 12, 31, 0, 0)">🎆 Silvester</button>
                <button class="quick-btn" onclick="quickAdd('🎄 Weihnachten', 12, 24, 18, 0)">🎄 Weihnachten</button>
                <button class="quick-btn" onclick="quickAdd('🌸 Frühlingsbeginn', 3, 20, 0, 0)">🌸 Frühling</button>
                <button class="quick-btn" onclick="quickAdd('☀ Sommeranfang', 6, 21, 0, 0)">☀ Sommer</button>
                <button class="quick-btn" onclick="addBirthday()">🎂 Geburtstag</button>
                <button class="quick-btn" onclick="addCustomDays()">📅 In X Tagen</button>
            </div>
        </div>
    </div>

    <div id="cd-list"></div>

    <div id="cd-empty" class="t-panel" style="text-align:center;color:var(--muted);padding:32px;display:none">
        <i class="fas fa-hourglass-start" style="font-size:2rem;margin-bottom:12px;opacity:0.3"></i>
        <div style="font-weight:700">Noch kein Countdown – oben hinzufügen!</div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let countdowns = JSON.parse(localStorage.getItem('cd_list') || '[]');
let ticker = null;

function pad(n) { return String(n).padStart(2,'0'); }

function toLocalIso(d) {
    return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+'T'+pad(d.getHours())+':'+pad(d.getMinutes());
}

function save() { localStorage.setItem('cd_list', JSON.stringify(countdowns)); }

function addCountdown() {
    const name = document.getElementById('new-name').value.trim() || 'Ereignis';
    const dt   = document.getElementById('new-dt').value;
    if (!dt) { alert('Bitte ein Zieldatum eingeben.'); return; }
    const target = new Date(dt).getTime();
    if (isNaN(target)) { alert('Ungültiges Datum.'); return; }
    const created = Date.now();
    countdowns.push({ id: Date.now(), name, dt, target, created });
    save();
    document.getElementById('new-name').value = '';
    render();
}

function removeCountdown(id) {
    countdowns = countdowns.filter(c => c.id !== id);
    save();
    render();
}

function quickAdd(name, month, day, hour, minute) {
    const now = new Date();
    let t = new Date(now.getFullYear(), month-1, day, hour, minute);
    if (t <= now) t.setFullYear(now.getFullYear()+1);
    document.getElementById('new-name').value = name;
    document.getElementById('new-dt').value = toLocalIso(t);
    addCountdown();
}

function addBirthday() {
    const bd = prompt('Nächster Geburtstag (JJJJ-MM-TT):');
    if (!bd) return;
    const d = new Date(bd+'T00:00');
    if (isNaN(d)) { alert('Ungültiges Datum.'); return; }
    const now = new Date();
    let t = new Date(now.getFullYear(), d.getMonth(), d.getDate(), 0, 0);
    if (t <= now) t.setFullYear(now.getFullYear()+1);
    document.getElementById('new-name').value = '🎂 Geburtstag';
    document.getElementById('new-dt').value = toLocalIso(t);
    addCountdown();
}

function addCustomDays() {
    const days = parseInt(prompt('In wie vielen Tagen?'));
    if (isNaN(days) || days < 1) return;
    const t = new Date(Date.now() + days*86400000);
    t.setHours(0,0,0,0);
    document.getElementById('new-name').value = 'In '+days+' Tagen';
    document.getElementById('new-dt').value = toLocalIso(t);
    addCountdown();
}

function render() {
    const list = document.getElementById('cd-list');
    const empty = document.getElementById('cd-empty');
    if (!countdowns.length) { list.innerHTML=''; empty.style.display=''; return; }
    empty.style.display = 'none';

    list.innerHTML = countdowns.map(c => {
        const now = Date.now();
        const diff = c.target - now;
        const expired = diff <= 0;
        const created = c.created || (c.target - 365*86400000);
        const total = c.target - created;
        const elapsed = now - created;
        const progress = Math.min(100, Math.max(0, (elapsed/total)*100));
        const dtStr = new Date(c.target).toLocaleString('de-DE',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'});

        if (expired) return `<div class="cd-card" id="cd-${c.id}">
            <div class="cd-card-head">
                <div><div class="cd-name">${escH(c.name)}</div><div class="cd-date">${dtStr}</div></div>
                <button class="t-btn ghost sm" onclick="removeCountdown(${c.id})"><i class="fas fa-times"></i></button>
            </div>
            <div class="cd-done">
                <div class="cd-done-icon">🎉</div>
                <div class="cd-done-txt">Abgelaufen!</div>
                <div style="font-size:0.82rem;color:var(--muted);margin-top:4px">${escH(c.name)} ist vorbei</div>
            </div>
        </div>`;

        const days  = Math.floor(diff/86400000);
        const hours = Math.floor((diff%86400000)/3600000);
        const mins  = Math.floor((diff%3600000)/60000);
        const secs  = Math.floor((diff%60000)/1000);
        const totalDays = Math.ceil(diff/86400000);

        return `<div class="cd-card" id="cd-${c.id}">
            <div class="cd-card-head">
                <div><div class="cd-name">${escH(c.name)}</div><div class="cd-date">${dtStr}</div></div>
                <button class="t-btn ghost sm" onclick="removeCountdown(${c.id})"><i class="fas fa-times"></i></button>
            </div>
            <div class="cd-grid">
                <div class="cd-box"><div class="cd-num">${String(days).padStart(2,'0')}</div><div class="cd-lbl">Tage</div></div>
                <div class="cd-box"><div class="cd-num">${pad(hours)}</div><div class="cd-lbl">Stunden</div></div>
                <div class="cd-box"><div class="cd-num">${pad(mins)}</div><div class="cd-lbl">Minuten</div></div>
                <div class="cd-box"><div class="cd-num">${pad(secs)}</div><div class="cd-lbl">Sekunden</div></div>
            </div>
            <div class="cd-progress"><div class="cd-prog-fill" style="width:${progress.toFixed(1)}%"></div></div>
            <div class="cd-footer">
                <span>${totalDays} Tage verbleibend</span>
                <span>${progress.toFixed(0)}% vergangen</span>
            </div>
        </div>`;
    }).join('');
}

function tick() { render(); }

function escH(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

// Default: tomorrow
const tom = new Date(Date.now()+86400000);
tom.setHours(12,0,0,0);
document.getElementById('new-dt').value = toLocalIso(tom);

render();
ticker = setInterval(tick, 1000);
</script>

@include('tools._seo_content', ['toolSlug' => 'countdown', 'toolName' => 'Countdown zum Datum'])

@endsection