{% extends "base.html" %}
{% set active = "arbeitsorte" %}

{% block content %}
<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Arbeitsorte</h1>
        <p class="page-subtitle">Verwalte deine Arbeitsorte für die tägliche Zeiterfassung.</p>
    </div>
</div>

<div class="settings-section" style="max-width:700px;">
    <div class="settings-section-title">Arbeitsorte verwalten</div>
    <div class="settings-section-body">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-sub">Büro und Homeoffice sind voreingestellt. Eigene Orte hinzufügen, bearbeiten oder löschen. Der gewählte Arbeitsort wird in der Auswertung und im CSV-Export angezeigt.</div>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div id="arbeitsorte-liste" style="margin-bottom:16px;"></div>
        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:4px;">
            <input type="text" id="neuer-ort-name" placeholder="Neuer Arbeitsort" style="flex:1;min-width:180px;" class="form-control">
            <input type="color" id="neuer-ort-farbe" value="#4A90D9" style="width:44px;height:36px;border:none;padding:2px;cursor:pointer;border-radius:6px;">
            <button class="btn btn-primary" onclick="arbeitsortHinzufuegen()">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Hinzufügen
            </button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// ── Arbeitsorte ─────────────────────────────────────────────────────────────

async function ladeArbeitsorte() {
    var r    = await fetch("/api/arbeitsorte");
    var list = await r.json();
    var el   = document.getElementById("arbeitsorte-liste");
    if (!list.length) {
        el.innerHTML = "<p style='color:#8E8E93;font-size:13px;margin:8px 0;'>Keine Arbeitsorte vorhanden.</p>";
        return;
    }
    el.innerHTML = list.map(function(o) {
        return `<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);">
            <span style="width:14px;height:14px;border-radius:50%;background:${o.farbe};display:inline-block;flex-shrink:0;"></span>
            <input type="text" value="${o.name}" id="ort-name-${o.id}" class="form-control" style="flex:1;">
            <input type="color" value="${o.farbe}" id="ort-farbe-${o.id}" style="width:38px;height:32px;border:none;padding:2px;cursor:pointer;border-radius:6px;" onchange="aktualisiereVorschau(${o.id}, this.value)">
            <button class="btn btn-ghost" style="padding:4px 10px;" onclick="arbeitsortSpeichern(${o.id})">Speichern</button>
            <button class="btn btn-ghost" style="padding:4px 10px;color:#FF3B30;" onclick="arbeitsortLoeschen(${o.id})">Löschen</button>
        </div>`;
    }).join("");
}

function aktualisiereVorschau(id, farbe) {
    // Farbdot inline aktualisieren
    var row = document.getElementById("ort-farbe-" + id).closest("div");
    row.querySelector("span").style.background = farbe;
}

async function arbeitsortHinzufuegen() {
    var name  = document.getElementById("neuer-ort-name").value.trim();
    var farbe = document.getElementById("neuer-ort-farbe").value;
    if (!name) { showToast("Bitte Namen eingeben.", "error"); return; }
    var r = await fetch("/api/arbeitsorte", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({name, farbe})
    });
    var d = await r.json();
    if (d.ok) {
        document.getElementById("neuer-ort-name").value = "";
        showToast("Arbeitsort hinzugefügt.");
        ladeArbeitsorte();
    } else {
        showToast(d.fehler || "Fehler.", "error");
    }
}

async function arbeitsortSpeichern(id) {
    var name  = document.getElementById("ort-name-" + id).value.trim();
    var farbe = document.getElementById("ort-farbe-" + id).value;
    if (!name) { showToast("Name darf nicht leer sein.", "error"); return; }
    await fetch("/api/arbeitsorte/" + id, {
        method: "PUT",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({name, farbe})
    });
    showToast("Gespeichert.");
    ladeArbeitsorte();
}

async function arbeitsortLoeschen(id) {
    zeigeBestaetigung("Diesen Arbeitsort wirklich löschen?", async function() {
        await fetch("/api/arbeitsorte/" + id, {method: "DELETE"});
        showToast("Gelöscht.");
        ladeArbeitsorte();
    });
}

ladeArbeitsorte();
</script>
{% endblock %}