@extends('layouts.app')
@section('title', 'To-Do Liste – Aufgaben online verwalten | kotsch.tech')
@section('meta_description', 'To-Do Liste online: Aufgaben erstellen, abhaken und verwalten. Automatisch gespeichert im Browser. Einfache und schnelle Task-Liste – kostenlos.')
@section('meta_extra')
<meta name="keywords" content="To-Do Liste, Aufgabenliste online, Task Manager, Checkliste online, Todo App, Aufgaben verwalten, Aufgaben kostenlos">
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #d97706; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #fffbeb 0%, #fff 60%); padding-top: 92px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
    .tool-container { width: min(100% - 40px, 640px); margin: 0 auto; padding: 24px 0 60px; }
    .tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(217,119,6,0.12); color: #92400e; 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; }
    .add-row { display: flex; gap: 10px; margin-bottom: 20px; }
    .add-input { flex: 1; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; font: inherit; font-size: 1rem; outline: 0; }
    .add-input:focus { border-color: var(--accent); outline: 4px solid rgba(217,119,6,0.12); }
    .tool-page button.add-btn { min-height: 50px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 900; cursor: pointer; padding: 0 22px; white-space: nowrap; }
    .filter-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
    .filter-btn { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 0.83rem; font-weight: 700; cursor: pointer; }
    .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .counter { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
    .clear-done-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; color: var(--muted); }
    .clear-done-btn:hover { border-color: #ef4444; color: #ef4444; }
    .task-list { list-style: none; margin: 0; padding: 0; min-height: 60px; }
    .task-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; transition: background 0.15s; border-radius: 8px; }
    .task-item:last-child { border-bottom: none; }
    .task-item.dragging { opacity: 0.4; }
    .task-item.drag-over { background: rgba(217,119,6,0.06); }
    .task-cb { width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
    .task-text { flex: 1; font-size: 0.98rem; font-weight: 600; transition: all 0.2s; word-break: break-word; }
    .task-text.done { text-decoration: line-through; color: var(--muted); font-weight: 500; }
    .del-btn { min-width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
    .del-btn:hover { background: #fee2e2; color: #ef4444; }
    .drag-handle { color: #cbd5e1; font-size: 0.9rem; cursor: grab; flex-shrink: 0; }
    .empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
    .empty-icon { font-size: 3rem; margin-bottom: 12px; display: block; }
    .empty-text { font-weight: 700; font-size: 1rem; }
    .empty-sub  { font-size: 0.85rem; margin-top: 6px; }
</style>
<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Produktivität</span>
        <h1 class="tool-h1">To-Do Liste.</h1>
        <p class="sub">Aufgaben erstellen, abhaken, fertig – alles automatisch gespeichert.</p>
    </section>
    <div class="panel">
        <div class="add-row">
            <input class="add-input" type="text" id="task-input" placeholder="Neue Aufgabe eingeben…" onkeydown="if(event.key==='Enter') addTask()">
            <button class="add-btn" onclick="addTask()">+ Hinzufügen</button>
        </div>
        <div class="filter-row">
            <button class="filter-btn active" onclick="setFilter('all',this)">Alle</button>
            <button class="filter-btn" onclick="setFilter('open',this)">Offen</button>
            <button class="filter-btn" onclick="setFilter('done',this)">Erledigt</button>
            <span class="counter" id="task-counter">0 Aufgaben übrig</span>
            <button class="clear-done-btn" onclick="clearDone()">Erledigte löschen</button>
        </div>
        <ul class="task-list" id="task-list"></ul>
        <div class="empty-state" id="empty-state" style="display:none">
            <span class="empty-icon">📋</span>
            <div class="empty-text">Noch keine Aufgaben</div>
            <div class="empty-sub">Füge oben eine neue Aufgabe hinzu</div>
        </div>
    </div>
</div>@include('tools._ads_banner')</div>
<script>
    let tasks = [];
    let currentFilter = 'all';
    let dragSrc = null;

    function load() {
        try { tasks = JSON.parse(localStorage.getItem('todo_tasks')) || []; } catch(e) { tasks = []; }
    }
    function save() {
        try { localStorage.setItem('todo_tasks', JSON.stringify(tasks)); } catch(e) {}
    }

    function addTask() {
        const input = document.getElementById('task-input');
        const text = input.value.trim();
        if (!text) return;
        tasks.unshift({ id: Date.now(), text, done: false });
        input.value = '';
        save();
        render();
    }

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

    function deleteTask(id) {
        tasks = tasks.filter(t => t.id !== id);
        save(); render();
    }

    function clearDone() {
        tasks = tasks.filter(t => !t.done);
        save(); render();
    }

    function setFilter(f, btn) {
        currentFilter = f;
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        render();
    }

    function render() {
        const list = document.getElementById('task-list');
        const empty = document.getElementById('empty-state');
        let visible = tasks;
        if (currentFilter === 'open') visible = tasks.filter(t => !t.done);
        if (currentFilter === 'done') visible = tasks.filter(t => t.done);

        if (visible.length === 0) {
            list.innerHTML = '';
            empty.style.display = 'block';
        } else {
            empty.style.display = 'none';
            list.innerHTML = visible.map(t => `
                <li class="task-item" draggable="true" data-id="${t.id}"
                    ondragstart="dragStart(event,${t.id})"
                    ondragover="dragOver(event)"
                    ondrop="dragDrop(event,${t.id})"
                    ondragleave="dragLeave(event)">
                    <span class="drag-handle" title="Ziehen zum Sortieren">⋮⋮</span>
                    <input type="checkbox" class="task-cb" ${t.done?'checked':''} onchange="toggleTask(${t.id})">
                    <span class="task-text ${t.done?'done':''}">${escHtml(t.text)}</span>
                    <button class="del-btn" onclick="deleteTask(${t.id})" title="Löschen">✕</button>
                </li>`).join('');
        }

        const open = tasks.filter(t => !t.done).length;
        document.getElementById('task-counter').textContent = open + ' Aufgabe' + (open !== 1 ? 'n' : '') + ' übrig';
    }

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

    // Drag & Drop
    function dragStart(e, id) { dragSrc = id; e.currentTarget.classList.add('dragging'); }
    function dragOver(e) { e.preventDefault(); e.currentTarget.classList.add('drag-over'); }
    function dragLeave(e) { e.currentTarget.classList.remove('drag-over'); }
    function dragDrop(e, targetId) {
        e.preventDefault();
        e.currentTarget.classList.remove('drag-over');
        if (dragSrc === targetId) return;
        const fromIdx = tasks.findIndex(t => t.id === dragSrc);
        const toIdx   = tasks.findIndex(t => t.id === targetId);
        if (fromIdx < 0 || toIdx < 0) return;
        const [item] = tasks.splice(fromIdx, 1);
        tasks.splice(toIdx, 0, item);
        dragSrc = null;
        save(); render();
    }

    load();
    render();
</script>

@include('tools._seo_content', ['toolSlug' => 'to-do', 'toolName' => 'To-Do Liste'])

@endsection