@extends('layouts.app')
@section('title', 'Pomodoro Timer – Fokus & Produktivität | kotsch.tech')
@section('meta_description', 'Pomodoro Timer online: 25 Minuten Arbeiten, 5 Minuten Pause. Aufgabenliste, anpassbare Zeiten, Statistiken und Benachrichtigungen – kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Pomodoro Timer, Pomodoro Technik, Fokus Timer, Produktivität, Arbeits-Timer, Konzentrations-Timer, Pomodoro online">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.pomo-circle-wrap { display:flex; justify-content:center; margin:8px 0 20px; }
.pomo-wrap-rel { position:relative; width:200px; height:200px; }
.pomo-svg { width:200px; height:200px; transform:rotate(-90deg); }
.pomo-track { fill:none; stroke:var(--line); stroke-width:10; }
.pomo-prog  { fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 0.95s linear,stroke 0.3s; }
.pomo-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pomo-time { font-size:2.8rem; font-weight:900; letter-spacing:-3px; font-variant-numeric:tabular-nums; color:var(--ink); }
.pomo-lbl  { font-size:0.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.mode-tabs { display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
.mode-tab { padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.2s; }
.mode-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mode-tab.short.active { background:#16a34a; border-color:#16a34a; }
.mode-tab.long.active  { background:#2563eb; border-color:#2563eb; }
.sdot { width:12px; height:12px; border-radius:50%; border:2px solid var(--line); background:var(--bg); transition:all 0.3s; display:inline-block; }
.sdot.done { background:var(--accent); border-color:var(--accent); }
.sdot.done.short { background:#16a34a; border-color:#16a34a; }
.task-row { display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); margin-bottom:6px; }
.task-row.done-task .task-name { text-decoration:line-through; color:var(--muted); }
.task-name { flex:1; font-size:0.88rem; font-weight:600; }
.task-pomos { font-size:0.75rem; color:var(--muted); font-weight:700; white-space:nowrap; }
.stat-row { display:flex; gap:8px; }
.custom-field { display:flex; gap:8px; align-items:center; }
.custom-field label { font-size:0.8rem; font-weight:700; color:var(--muted); flex-shrink:0; min-width:100px; }
.custom-field input { width:70px; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-clock"></i> Produktivität</span>
        <h1 class="tool-h1">Pomodoro<span> Timer.</span></h1>
        <p class="tool-sub">25 Min. Fokus, 5 Min. Pause – mit Aufgabenliste, Statistiken und anpassbaren Zeiten.</p>
    </div>

    <div class="t-panel">
        <div class="mode-tabs">
            <button class="mode-tab active" id="tab-work"  onclick="setMode('work',this)">🍅 Arbeit</button>
            <button class="mode-tab short"  id="tab-short" onclick="setMode('short',this)">☕ Kurzpause</button>
            <button class="mode-tab long"   id="tab-long"  onclick="setMode('long',this)">🌿 Lange Pause</button>
        </div>

        <div class="pomo-circle-wrap">
            <div class="pomo-wrap-rel">
                <svg class="pomo-svg" viewBox="0 0 200 200">
                    <circle class="pomo-track" cx="100" cy="100" r="88"/>
                    <circle class="pomo-prog"  cx="100" cy="100" r="88" id="prog-circle" stroke="var(--accent)" stroke-dasharray="552.92" stroke-dashoffset="0"/>
                </svg>
                <div class="pomo-overlay">
                    <div class="pomo-time" id="timer-display">25:00</div>
                    <div class="pomo-lbl"  id="timer-lbl">Arbeit</div>
                </div>
            </div>
        </div>

        <div style="display:flex;gap:10px;justify-content:center;margin-bottom:20px">
            <button class="t-btn full" id="start-btn" onclick="toggleTimer()" style="min-width:120px"><i class="fas fa-play"></i> Start</button>
            <button class="t-btn ghost" onclick="resetTimer()"><i class="fas fa-undo"></i> Reset</button>
            <button class="t-btn ghost" onclick="skipMode()"><i class="fas fa-forward"></i> Weiter</button>
        </div>

        <div style="text-align:center;margin-bottom:6px">
            <div style="display:flex;gap:5px;justify-content:center;flex-wrap:wrap" id="session-dots"></div>
            <div style="font-size:0.78rem;color:var(--muted);font-weight:700;margin-top:6px" id="session-info">0 Pomodoros heute</div>
        </div>

        <div style="text-align:center;margin-top:10px">
            <button class="t-btn ghost sm" id="notif-btn" onclick="requestNotif()"><i class="fas fa-bell"></i> Benachrichtigungen aktivieren</button>
        </div>
        <div style="text-align:center;font-size:0.75rem;color:var(--muted);margin-top:6px">Leertaste = Start / Pause</div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-tasks"></i> Aufgaben</div>
        <div style="display:flex;gap:8px;margin-bottom:12px">
            <input type="text" class="t-input" id="task-inp" placeholder="Neue Aufgabe hinzufügen…" onkeydown="if(event.key==='Enter')addTask()">
            <button class="t-btn ghost" onclick="addTask()"><i class="fas fa-plus"></i></button>
        </div>
        <div id="task-list"></div>
        <div style="font-size:0.78rem;color:var(--muted);margin-top:8px" id="active-task-hint"></div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-chart-bar"></i> Heutige Statistiken</div>
        <div class="t-grid-3" style="gap:10px">
            <div class="t-stat-card">
                <div class="t-stat-val" id="stat-total">0</div>
                <div class="t-stat-label">Pomodoros</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-val" id="stat-focus">0 Min</div>
                <div class="t-stat-label">Fokuszeit</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-val" id="stat-streak">0</div>
                <div class="t-stat-label">Aktuell Serie</div>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-sliders-h"></i> Zeiten anpassen</div>
        <div class="custom-field" style="margin-bottom:10px">
            <label>Arbeitszeit (Min)</label>
            <input type="number" class="t-input" id="custom-work" min="1" max="60" value="25" onchange="updateCustom()">
        </div>
        <div class="custom-field" style="margin-bottom:10px">
            <label>Kurzpause (Min)</label>
            <input type="number" class="t-input" id="custom-short" min="1" max="30" value="5" onchange="updateCustom()">
        </div>
        <div class="custom-field">
            <label>Lange Pause (Min)</label>
            <input type="number" class="t-input" id="custom-long" min="1" max="60" value="15" onchange="updateCustom()">
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const dateKey = new Date().toDateString();
let sessions   = parseInt(localStorage.getItem('pomo_sess_' + dateKey) || '0');
let focusMins  = parseInt(localStorage.getItem('pomo_focus_' + dateKey) || '0');
let streak     = 0;
let tasks      = JSON.parse(localStorage.getItem('pomo_tasks') || '[]');
let activeTask = localStorage.getItem('pomo_active_task') || null;

const CIRC = 2 * Math.PI * 88;
const circle = document.getElementById('prog-circle');
circle.setAttribute('stroke-dasharray', CIRC);

let MODES = {
    work:  { label:'Arbeit',      secs:25*60, color:'var(--accent)',  icon:'🍅' },
    short: { label:'Kurzpause',   secs: 5*60, color:'#16a34a',        icon:'☕' },
    long:  { label:'Lange Pause', secs:15*60, color:'#2563eb',        icon:'🌿' },
};
let currentMode = 'work';
let totalSecs   = MODES.work.secs;
let remaining   = totalSecs;
let running     = false;
let interval    = null;

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

function updateDisplay() {
    const m = Math.floor(remaining/60), s = remaining%60;
    document.getElementById('timer-display').textContent = pad(m)+':'+pad(s);
    document.title = pad(m)+':'+pad(s)+' – Pomodoro | kotsch.tech';
}

function updateCircle(frac) {
    circle.setAttribute('stroke-dashoffset', CIRC*(1-Math.max(0,frac)));
}

function setMode(mode, btn) {
    if (running) resetTimer();
    currentMode = mode;
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    totalSecs = MODES[mode].secs;
    remaining  = totalSecs;
    circle.setAttribute('stroke', MODES[mode].color);
    document.getElementById('timer-lbl').textContent = MODES[mode].label;
    document.getElementById('start-btn').style.background = '';
    updateDisplay(); updateCircle(1);
}

function toggleTimer() {
    if (!running) {
        running = true;
        document.getElementById('start-btn').innerHTML = '<i class="fas fa-pause"></i> Pause';
        interval = setInterval(tick, 1000);
    } else {
        running = false;
        document.getElementById('start-btn').innerHTML = '<i class="fas fa-play"></i> Weiter';
        clearInterval(interval);
    }
}

function tick() {
    remaining--;
    updateDisplay();
    updateCircle(remaining / totalSecs);
    if (remaining <= 0) {
        clearInterval(interval);
        running = false;
        document.getElementById('start-btn').innerHTML = '<i class="fas fa-play"></i> Start';
        playBeep();
        if (currentMode === 'work') {
            sessions++;
            focusMins += Math.round(totalSecs/60);
            streak++;
            localStorage.setItem('pomo_sess_'+dateKey, sessions);
            localStorage.setItem('pomo_focus_'+dateKey, focusMins);
            if (activeTask) incrementTaskPomo(activeTask);
            sendNotif('🍅 Pomodoro fertig! Zeit für eine Pause.');
            autoNext('short');
        } else {
            streak = 0;
            sendNotif('☕ Pause vorbei – weiter geht\'s!');
            autoNext('work');
        }
        updateStats(); updateDots();
    }
}

function autoNext(mode) {
    const btn = document.getElementById('tab-' + mode);
    setMode(mode, btn);
}

function resetTimer() {
    clearInterval(interval);
    running = false;
    remaining = totalSecs;
    document.getElementById('start-btn').innerHTML = '<i class="fas fa-play"></i> Start';
    document.title = 'Pomodoro | kotsch.tech';
    updateDisplay(); updateCircle(1);
}

function skipMode() {
    resetTimer();
    const next = currentMode === 'work' ? 'short' : 'work';
    autoNext(next);
}

function updateDots() {
    const c = document.getElementById('session-dots');
    c.innerHTML = '';
    const show = Math.min(sessions, 12);
    for (let i=0;i<show;i++) {
        const d = document.createElement('span');
        d.className = 'sdot done' + (i%4===3?' short':'');
        c.appendChild(d);
    }
    document.getElementById('session-info').textContent = sessions + ' Pomodoro' + (sessions!==1?'s':'') + ' heute';
}

function updateStats() {
    document.getElementById('stat-total').textContent = sessions;
    document.getElementById('stat-focus').textContent = focusMins + ' Min';
    document.getElementById('stat-streak').textContent = streak;
}

function playBeep() {
    try {
        const ctx = new (window.AudioContext||window.webkitAudioContext)();
        [0, 0.35, 0.7].forEach(off => {
            const osc = ctx.createOscillator(), gain = ctx.createGain();
            osc.connect(gain); gain.connect(ctx.destination);
            osc.frequency.value = currentMode==='work' ? 660 : 880;
            osc.type = 'sine';
            gain.gain.setValueAtTime(0.35, ctx.currentTime+off);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime+off+0.3);
            osc.start(ctx.currentTime+off); osc.stop(ctx.currentTime+off+0.3);
        });
    } catch(e){}
}

function requestNotif() {
    if (!('Notification' in window)) return;
    Notification.requestPermission().then(p => {
        if (p==='granted') {
            document.getElementById('notif-btn').innerHTML = '<i class="fas fa-check"></i> Aktiv';
            document.getElementById('notif-btn').disabled = true;
        }
    });
}
function sendNotif(msg) {
    if (Notification.permission==='granted') new Notification('Pomodoro', {body:msg,icon:'/favicon.ico'});
}

// Tasks
function saveTasks() { localStorage.setItem('pomo_tasks', JSON.stringify(tasks)); }

function addTask() {
    const inp = document.getElementById('task-inp');
    const name = inp.value.trim();
    if (!name) return;
    tasks.push({ id: Date.now(), name, pomos: 0, done: false });
    inp.value = '';
    saveTasks(); renderTasks();
}

function toggleTask(id) {
    const t = tasks.find(t=>t.id===id);
    if (t) { t.done = !t.done; saveTasks(); renderTasks(); }
}

function setActiveTask(id) {
    activeTask = id;
    localStorage.setItem('pomo_active_task', id);
    renderTasks();
}

function removeTask(id) {
    tasks = tasks.filter(t=>t.id!==id);
    if (activeTask===id) { activeTask=null; localStorage.removeItem('pomo_active_task'); }
    saveTasks(); renderTasks();
}

function incrementTaskPomo(id) {
    const t = tasks.find(t=>t.id===id);
    if (t) { t.pomos++; saveTasks(); renderTasks(); }
}

function renderTasks() {
    const list = document.getElementById('task-list');
    if (!tasks.length) { list.innerHTML='<div style="font-size:0.82rem;color:var(--muted);text-align:center;padding:12px">Keine Aufgaben – füge eine hinzu!</div>'; return; }
    list.innerHTML = tasks.map(t => `
        <div class="task-row ${t.done?'done-task':''} ${activeTask===t.id?'':''}` +
            (activeTask===t.id ? ' style="border-color:var(--accent);background:var(--accent-soft)"' : '') + `">
            <input type="checkbox" ${t.done?'checked':''} onchange="toggleTask(${t.id})" class="t-check" style="flex-shrink:0">
            <span class="task-name" onclick="setActiveTask(${t.id})" style="cursor:pointer" title="Als aktive Aufgabe setzen">${escH(t.name)}</span>
            <span class="task-pomos">🍅 ${t.pomos}</span>
            <button class="t-btn ghost sm" onclick="removeTask(${t.id})" style="padding:4px 8px"><i class="fas fa-times"></i></button>
        </div>`).join('');
    const hint = document.getElementById('active-task-hint');
    const at = tasks.find(t=>t.id===activeTask);
    hint.textContent = at ? '🎯 Aktiv: ' + at.name : 'Klicke auf Aufgabe, um sie als aktiv zu setzen.';
}

function updateCustom() {
    MODES.work.secs  = (parseInt(document.getElementById('custom-work').value)||25) * 60;
    MODES.short.secs = (parseInt(document.getElementById('custom-short').value)||5)  * 60;
    MODES.long.secs  = (parseInt(document.getElementById('custom-long').value)||15) * 60;
    if (!running) { totalSecs = MODES[currentMode].secs; remaining = totalSecs; updateDisplay(); updateCircle(1); }
}

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

document.addEventListener('keydown', e => {
    if (e.code==='Space' && e.target.tagName!=='INPUT' && e.target.tagName!=='TEXTAREA') {
        e.preventDefault(); toggleTimer();
    }
});

if (Notification.permission==='granted') {
    document.getElementById('notif-btn').innerHTML = '<i class="fas fa-check"></i> Aktiv';
    document.getElementById('notif-btn').disabled = true;
}

updateDisplay(); updateCircle(1); updateDots(); updateStats(); renderTasks();
</script>

@include('tools._seo_content', ['toolSlug' => 'pomodoro', 'toolName' => 'Pomodoro Timer'])

@endsection