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

{% block content %}

<!-- Eintrag-Modal (Erstellen & Bearbeiten) -->
<div id="abw-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:420px;">
        <h3 id="abw-modal-titel">Abwesenheit eintragen</h3>
        <input type="hidden" id="abw-modal-id">

        <!-- Einzel / Zeitraum Toggle -->
        <div class="abw-modus-toggle" style="margin-bottom:16px;">
            <button class="abw-modus-btn aktiv" data-modus="einzel"  onclick="setzeModusBtn(this)">Einzelner Tag</button>
            <button class="abw-modus-btn"       data-modus="bereich" onclick="setzeModusBtn(this)">Zeitraum</button>
        </div>

        <!-- Einzel-Datum -->
        <div id="modus-einzel">
            <div class="form-group">
                <label>Datum</label>
                <input type="date" id="abw-datum">
            </div>
        </div>

        <!-- Bereich-Datum -->
        <div id="modus-bereich" style="display:none;">
            <div class="form-row">
                <div class="form-group">
                    <label>Von</label>
                    <input type="date" id="abw-datum-von" onchange="vonDatumGeaendert()">
                </div>
                <div class="form-group">
                    <label>Bis</label>
                    <input type="date" id="abw-datum-bis">
                </div>
            </div>
            <div class="form-group" style="margin-top:10px; flex-direction:row; align-items:center; gap:10px;">
                <input type="checkbox" id="abw-nur-arbeitstage" checked style="width:auto;">
                <label for="abw-nur-arbeitstage" style="font-size:13px; color:var(--text-secondary); text-transform:none; letter-spacing:0; font-weight:400;">Wochenenden überspringen</label>
            </div>
        </div>

        <div class="form-group" style="margin-top:14px;">
            <label>Typ</label>
            <div class="abw-typ-toggle">
                <button class="abw-typ-btn aktiv" data-typ="urlaub"          onclick="setzeTyp(this)">Urlaub</button>
                <button class="abw-typ-btn"       data-typ="krank"           onclick="setzeTyp(this)">Krank</button>
                <button class="abw-typ-btn"       data-typ="feiertag"        onclick="setzeTyp(this)">Feiertag</button>
                <button class="abw-typ-btn"       data-typ="fortbildung"     onclick="setzeTyp(this)">Fortbildung</button>
                <button class="abw-typ-btn"       data-typ="sonderurlaub"    onclick="setzeTyp(this)">Sonderurlaub</button>
                <button class="abw-typ-btn"       data-typ="elternzeit"      onclick="setzeTyp(this)">Elternzeit</button>
                <button class="abw-typ-btn"       data-typ="sonstiges"       onclick="setzeTyp(this)">Sonstiges</button>
            </div>
        </div>
        <div class="form-group" style="margin-top:12px;">
            <label>Notiz (optional)</label>
            <input type="text" id="abw-notiz" placeholder="z.B. Sommerurlaub">
        </div>
        <div class="modal-actions" style="margin-top:20px;">
            <button class="btn btn-primary" onclick="abwesenheitSpeichern()">Speichern</button>
            <button class="btn btn-ghost"   onclick="schliesseModal('abw-modal')">Abbrechen</button>
            <button class="btn btn-stop" id="abw-modal-loeschen" style="display:none; margin-left:auto;" onclick="abwesenheitLoeschenAusModal()">Löschen</button>
        </div>
    </div>
</div>

<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Abwesenheiten</h1>
        <p class="page-subtitle">Urlaub, Krankentage und Feiertage verwalten.</p>
    </div>
    <div class="page-header-actions" style="display:flex;gap:8px;">
        <button class="btn btn-ghost" id="jahres-btn" onclick="jahresansichtToggle()">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            Jahresübersicht
        </button>
        <button class="btn btn-primary" onclick="modalOeffnen()">
            <svg width="14" height="14" 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>
            Eintrag hinzufügen
        </button>
    </div>
</div>

<!-- Jahresübersicht Modal -->
<div id="jahres-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8000;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px;">
    <div style="background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:960px;box-shadow:0 8px 40px rgba(0,0,0,.2);overflow:hidden;">
        <!-- Header -->
        <div style="display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);">
            <div style="display:flex;align-items:center;gap:12px;">
                <button class="btn btn-ghost btn-sm" onclick="jahresNavigieren(-1)">&#9664;</button>
                <span id="jahres-titel" style="font-size:16px;font-weight:700;color:var(--text-primary);min-width:60px;text-align:center;"></span>
                <button class="btn btn-ghost btn-sm" onclick="jahresNavigieren(1)">&#9654;</button>
            </div>
            <!-- Urlaubskonto-Blöcke -->
            <div id="jahres-konto" style="display:flex;gap:10px;"></div>
            <button class="btn btn-ghost btn-sm" onclick="jahresModalSchliessen()">&#10005;</button>
        </div>
        <!-- Grid -->
        <div id="jahres-grid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px;"></div>
    </div>
</div>

<!-- Urlaubskonto -->
<div class="abw-konto-row">
    <div class="abw-konto-item">
        <div class="abw-konto-label">Jahresurlaub</div>
        <div class="abw-konto-val" id="konto-gesamt">–</div>
    </div>
    <div class="abw-konto-item konto-genommen">
        <div class="abw-konto-label">Genommen</div>
        <div class="abw-konto-val" id="konto-genommen">–</div>
    </div>
    <div class="abw-konto-item konto-rest">
        <div class="abw-konto-label">Verbleibend</div>
        <div class="abw-konto-val" id="konto-rest">–</div>
    </div>
    <div class="abw-konto-item konto-krank">
        <div class="abw-konto-label">Krankentage</div>
        <div class="abw-konto-val" id="konto-krank">–</div>
    </div>
    <div class="abw-konto-item konto-feiertag">
        <div class="abw-konto-label">Feiertage</div>
        <div class="abw-konto-val" id="konto-feiertag">–</div>
    </div>
</div>

<!-- Monats-Navigation -->
<div class="abw-nav">
    <button class="btn btn-ghost" onclick="monatNavigieren(-1)">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <span class="abw-nav-titel" id="abw-nav-titel">–</span>
    <button class="btn btn-ghost" onclick="monatNavigieren(1)">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
    </button>
</div>

<!-- Kalender -->
<div class="abw-kalender" id="abw-kalender"></div>

<!-- Einträge-Liste -->
<div class="section-header" style="margin-top:32px;">
    <h2 class="section-title">Einträge</h2>
</div>
<div id="abw-liste">
    <div class="empty-state">Keine Einträge.</div>
</div>

{% endblock %}

{% block scripts %}
<script>
var aktuellesJahr  = new Date().getFullYear();
var aktuellerMonat = new Date().getMonth();
var alleEintraege  = []; // [{id, datum_von, datum_bis, typ, notiz, nur_arbeitstage}]
var alleFeiertage  = {}; // datum → name
var gewaehlterTyp  = "urlaub";
var aktuellerModus = "einzel";

var MONATE     = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
var WOCHENTAGE = ["Mo","Di","Mi","Do","Fr","Sa","So"];
var AKTIVE_TAGE = ["Mo","Di","Mi","Do","Fr"];

// ── Init ───────────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", function() {
    datenladen().then(function() {
        kalenderRendern();
        urlaubskontoLaden();
    }).catch(function(err) {
        console.error("Fehler:", err);
        kalenderRendern();
    });
});

// ── Daten laden ────────────────────────────────────────────────────────────
function datenladen() {
    return fetch("/api/einstellungen")
        .then(function(r) { return r.json(); })
        .then(function(cfg) {
            if (cfg.aktive_tage) AKTIVE_TAGE = cfg.aktive_tage.split(",");
            var bl = cfg.bundesland || "";
            var p1 = fetch("/api/abwesenheiten")
                .then(function(r) { return r.json(); })
                .then(function(list) { alleEintraege = list; });
            var p2 = bl ? Promise.all([
                fetch("/api/feiertage?jahr=" + aktuellesJahr + "&bundesland=" + bl).then(function(r){return r.json();}),
                fetch("/api/feiertage?jahr=" + (aktuellesJahr+1) + "&bundesland=" + bl).then(function(r){return r.json();})
            ]).then(function(results) {
                alleFeiertage = {};
                results.forEach(function(list) {
                    list.forEach(function(f) { alleFeiertage[f.datum] = f.name; });
                });
            }) : Promise.resolve();
            return Promise.all([p1, p2]);
        });
}

function urlaubskontoLaden() {
    fetch("/api/urlaub/konto?jahr=" + aktuellesJahr)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            document.getElementById("konto-gesamt").textContent   = data.gesamt;
            document.getElementById("konto-genommen").textContent = data.genommen;
            document.getElementById("konto-rest").textContent     = data.verbleibend;
            document.getElementById("konto-krank").textContent    = data.krank    || 0;
            document.getElementById("konto-feiertag").textContent = data.feiertage || 0;
        });
}

// ── Kalender ───────────────────────────────────────────────────────────────
// ── Jahresansicht ─────────────────────────────────────────────────────────
var jahresAnsichtJahr = new Date().getFullYear();
var jahresAnsichtOffen = false;

function jahresansichtToggle() {
    document.getElementById("jahres-modal").style.display = "flex";
    jahresRendern();
}
function jahresModalSchliessen() {
    document.getElementById("jahres-modal").style.display = "none";
}

function jahresNavigieren(delta) {
    jahresAnsichtJahr += delta;
    jahresRendern();
}

function jahresRendern() {
    document.getElementById("jahres-titel").textContent = jahresAnsichtJahr;
    // Urlaubskonto-Blöcke laden
    fetch("/api/urlaub/konto?jahr=" + jahresAnsichtJahr)
        .then(function(r){ return r.json(); })
        .then(function(d) {
            var kEl = document.getElementById("jahres-konto");
            if (!kEl) return;
            var blocks = [
                {label:"Jahresurlaub",  val: d.gesamt,      color:"var(--accent)"},
                {label:"Genommen",      val: d.genommen,    color:"var(--green)"},
                {label:"Verbleibend",   val: d.verbleibend, color:"var(--text-primary)"},
                {label:"Krankentage",   val: d.krank || 0,  color:"var(--red)"},
                {label:"Feiertage",     val: d.feiertage || 0, color:"var(--orange)"},
            ];
            kEl.innerHTML = blocks.map(function(b) {
                return '<div style="text-align:center;padding:6px 12px;">'
                    + '<div style="font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;">' + b.label + '</div>'
                    + '<div style="font-size:18px;font-weight:800;color:' + b.color + ';">' + b.val + '</div>'
                    + '</div>';
            }).join('<div style="width:1px;background:var(--border);margin:4px 0;"></div>');
        }).catch(function(){});
    var grid = document.getElementById("jahres-grid");
    grid.innerHTML = "";

    for (var m = 0; m < 12; m++) {
        var mini = document.createElement("div");
        mini.style.cssText = "background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;";

        var mTitel = document.createElement("div");
        mTitel.style.cssText = "font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;";
        mTitel.textContent = MONATE[m];
        mini.appendChild(mTitel);

        // Mini-Kalender-Grid
        var miniGrid = document.createElement("div");
        miniGrid.style.cssText = "display:grid;grid-template-columns:repeat(7,1fr);gap:1px;";

        // Wochentag-Header
        ["M","D","M","D","F","S","S"].forEach(function(wt) {
            var h = document.createElement("div");
            h.style.cssText = "font-size:8px;color:var(--text-tertiary);text-align:center;padding:1px;";
            h.textContent = wt;
            miniGrid.appendChild(h);
        });

        var erster = new Date(jahresAnsichtJahr, m, 1);
        var letzter = new Date(jahresAnsichtJahr, m + 1, 0).getDate();
        var offset = erster.getDay() - 1;
        if (offset < 0) offset = 6;

        // Tagesmap für diesen Monat
        var tagesmap = {};
        alleEintraege.forEach(function(e) {
            var mStr = String(m + 1).padStart(2,"0");
            var vonM = e.datum_von.substring(0,7);
            var bisM = e.datum_bis.substring(0,7);
            var curM = jahresAnsichtJahr + "-" + mStr;
            if (vonM <= curM && bisM >= curM) {
                var cur = e.datum_von;
                while (cur <= e.datum_bis) {
                    if (cur.startsWith(jahresAnsichtJahr + "-" + mStr)) {
                        tagesmap[cur] = e.typ;
                    }
                    cur = datumAddTage(cur, 1);
                }
            }
        });

        for (var i = 0; i < offset; i++) {
            var leer = document.createElement("div");
            miniGrid.appendChild(leer);
        }

        for (var d = 1; d <= letzter; d++) {
            var dStr = String(d).padStart(2,"0");
            var datum = jahresAnsichtJahr + "-" + String(m+1).padStart(2,"0") + "-" + dStr;
            var wday = new Date(jahresAnsichtJahr, m, d).getDay();
            var isWE = (wday === 0 || wday === 6);
            var typ  = tagesmap[datum];
            var ft   = alleFeiertage[datum];

            var zelle = document.createElement("div");
            zelle.style.cssText = "width:100%;aspect-ratio:1;border-radius:2px;font-size:7px;text-align:center;line-height:1.8;cursor:pointer;";
            zelle.textContent = d;
            var typFarben = {
                urlaub:       "#3a7bc8",
                krank:        "#cc2f26",
                feiertag:     "#1a8c38",
                fortbildung:  "#7c4dbe",
                sonderurlaub: "#b36a00",
                elternzeit:   "#2e6fa3",
                sonstiges:    "#636366",
            };
            if (typ && typFarben[typ]) {
                zelle.style.background = typFarben[typ];
                zelle.style.color = "white";
            } else if (ft) {
                zelle.style.background = "#1a8c38";
                zelle.style.color = "white";
            } else if (isWE) {
                zelle.style.color = "var(--text-tertiary)";
            }

            (function(da) {
                zelle.addEventListener("click", function() {
                    aktuellerMonat = parseInt(da.split("-")[1]) - 1;
                    aktuellesJahr  = parseInt(da.split("-")[0]);
                    jahresModalSchliessen();
                    kalenderRendern();
                });
            })(datum);
            miniGrid.appendChild(zelle);
        }
        mini.appendChild(miniGrid);
        grid.appendChild(mini);
    }
}

// ── Drag-to-Select ────────────────────────────────────────────────────────
var _dragAktiv  = false;
var _dragStart  = null;
var _dragEnd    = null;

document.addEventListener("mouseup", function() {
    if (_dragAktiv && _dragStart && _dragEnd && _dragStart !== _dragEnd) {
        // Zeitraum-Modal öffnen
        var von = _dragStart < _dragEnd ? _dragStart : _dragEnd;
        var bis = _dragStart < _dragEnd ? _dragEnd   : _dragStart;
        _dragAktiv = false;
        _dragStart = null; _dragEnd = null;
        document.querySelectorAll(".kal-cell.drag-select").forEach(function(c) {
            c.classList.remove("drag-select");
        });
        oeffneModalZeitraum(von, bis);
    } else {
        _dragAktiv = false;
    }
});

function dragStart(e, datum) {
    e.preventDefault();
    _dragAktiv = true;
    _dragStart = datum;
    _dragEnd   = datum;
    document.querySelectorAll(".kal-cell.drag-select").forEach(function(c) {
        c.classList.remove("drag-select");
    });
}

function dragMove(e, datum) {
    if (!_dragAktiv) return;
    _dragEnd = datum;
    // Highlight
    var von = _dragStart < datum ? _dragStart : datum;
    var bis = _dragStart < datum ? datum : _dragStart;
    document.querySelectorAll(".kal-cell[data-datum]").forEach(function(c) {
        var d = c.dataset.datum;
        if (d >= von && d <= bis) c.classList.add("drag-select");
        else c.classList.remove("drag-select");
    });
}

function dragEnd(e, datum) {
    if (!_dragAktiv) return;
    _dragEnd = datum;
    if (_dragStart === _dragEnd) {
        _dragAktiv = false; // Normaler Klick → onclick übernimmt
        return;
    }
    // Wird von document.mouseup behandelt
}

function oeffneModalZeitraum(von, bis) {
    document.getElementById("abw-modal-id").value = "";
    document.getElementById("abw-modal-titel").textContent = "Abwesenheit eintragen";
    document.getElementById("abw-modal-loeschen").style.display = "none";
    setzeModusBtn(document.querySelector(".abw-modus-btn[data-modus='bereich']"));
    document.getElementById("abw-datum-von").value = von;
    document.getElementById("abw-datum-bis").value = bis;
    document.getElementById("abw-notiz").value = "";
    typBtnSetzen("urlaub");
    document.getElementById("abw-modal").style.display = "flex";
}

function kalenderRendern() {
    document.getElementById("abw-nav-titel").textContent =
        MONATE[aktuellerMonat] + " " + aktuellesJahr;

    var container  = document.getElementById("abw-kalender");
    var ersterTag  = new Date(aktuellesJahr, aktuellerMonat, 1);
    var letzterTag = new Date(aktuellesJahr, aktuellerMonat + 1, 0);
    var startOffset = ersterTag.getDay() - 1;
    if (startOffset < 0) startOffset = 6;

    // Tagesmap aufbauen: datum → Eintrag
    // Rein string-basiert, keine Date-Objekte → kein Zeitzonenproblem
    var tagesmap = {};
    alleEintraege.forEach(function(e) {
        var cur = e.datum_von;
        while (cur <= e.datum_bis) {
            var wt = datumWochentag(cur);
            if (!e.nur_arbeitstage || AKTIVE_TAGE.indexOf(wt) !== -1) {
                tagesmap[cur] = e;
            }
            cur = datumAddTage(cur, 1);
        }
    });

    var html = '<div class="kal-grid">';
    WOCHENTAGE.forEach(function(t) { html += '<div class="kal-header">' + t + '</div>'; });
    for (var i = 0; i < startOffset; i++) html += '<div class="kal-cell leer"></div>';

    for (var tag = 1; tag <= letzterTag.getDate(); tag++) {
        var m     = String(aktuellerMonat + 1).padStart(2, "0");
        var d     = String(tag).padStart(2, "0");
        var datum = aktuellesJahr + "-" + m + "-" + d;
        var wt    = new Date(aktuellesJahr, aktuellerMonat, tag).getDay();
        var isWE  = (wt === 0 || wt === 6);
        var eintrag = tagesmap[datum];
        var ft    = alleFeiertage[datum];
        var heute = (function(){ var n=new Date(); return n.getFullYear()+"-"+String(n.getMonth()+1).padStart(2,"0")+"-"+String(n.getDate()).padStart(2,"0"); })();

        var klassen = "kal-cell";
        if (isWE)                          klassen += " kal-wochenende";
        if (datum === heute)               klassen += " kal-heute";
        if (eintrag) {
            var t = eintrag.typ;
            if      (t === "urlaub")       klassen += " kal-urlaub";
            else if (t === "krank")        klassen += " kal-krank";
            else if (t === "feiertag")     klassen += " kal-feiertag-manuell";
            else if (t === "fortbildung")  klassen += " kal-fortbildung";
            else if (t === "sonderurlaub") klassen += " kal-sonderurlaub";
            else if (t === "elternzeit")   klassen += " kal-elternzeit";
            else if (t === "sonstiges")    klassen += " kal-sonstiges";
        }
        if (ft && !eintrag)                klassen += " kal-feiertag-auto";

        var tooltip  = eintrag ? (eintrag.typ + (eintrag.notiz ? ": " + eintrag.notiz : "")) : (ft || "");
        var ftLabel  = (ft && !eintrag) ? '<span class="kal-feiertag-name">' + ft + '</span>' : "";
        var editBtn  = eintrag ? '<button class="kal-del" onclick="eintrageBearbeiten(event,' + eintrag.id + ')">✏</button>' : "";

        html += '<div class="' + klassen + '" title="' + tooltip + '"'
              + ' data-datum="' + datum + '"'
              + ' onmousedown="dragStart(event,\'' + datum + '\')"'
              + ' onmouseover="dragMove(event,\'' + datum + '\')"'
              + ' onmouseup="dragEnd(event,\'' + datum + '\')"'
              + ' onclick="tagAnklicken(\'' + datum + '\')">'
              + '<span class="kal-tag-nr">' + tag + '</span>'
              + ftLabel + editBtn
              + '</div>';
    }
    html += '</div>';
    container.innerHTML = html;
    listeRendern();
}

function listeRendern() {
    var container = document.getElementById("abw-liste");
    if (alleEintraege.length === 0) {
        container.innerHTML = '<div class="empty-state">Keine Einträge vorhanden.</div>';
        return;
    }
    // Sortiert nach datum_von
    var sortiert = alleEintraege.slice().sort(function(a,b){ return a.datum_von.localeCompare(b.datum_von); });
    container.innerHTML = sortiert.map(function(e) {
        var istEinzel = e.datum_von === e.datum_bis;
        var zeitraum  = istEinzel ? datumFormatieren(e.datum_von)
            : datumFormatieren(e.datum_von) + " – " + datumFormatieren(e.datum_bis);
        return '<div class="abw-list-row">'
            + '<div class="abw-list-datum">' + zeitraum + '</div>'
            + '<div class="abw-typ-badge abw-typ-' + e.typ + '">' + typLabel(e.typ) + '</div>'
            + '<div class="abw-list-notiz">' + (e.notiz || "") + '</div>'
            + '<button class="icon-btn" title="Bearbeiten" onclick="eintrageBearbeiten(event,' + e.id + ')">✏️</button>'
            + '<button class="icon-btn" title="Löschen"    onclick="eintrageLoeschen(event,'   + e.id + ')">🗑️</button>'
            + '</div>';
    }).join("");
}

// ── Navigation ─────────────────────────────────────────────────────────────
function monatNavigieren(delta) {
    aktuellerMonat += delta;
    if (aktuellerMonat > 11) { aktuellerMonat = 0;  aktuellesJahr++; }
    if (aktuellerMonat < 0)  { aktuellerMonat = 11; aktuellesJahr--; }
    kalenderRendern();
}

// ── Modal öffnen ───────────────────────────────────────────────────────────
function tagAnklicken(datum) {
    // Prüfen ob Klick auf bestehenden Eintrag
    var eintrag = null;
    for (var i = 0; i < alleEintraege.length; i++) {
        var e = alleEintraege[i];
        if (datum >= e.datum_von && datum <= e.datum_bis) { eintrag = e; break; }
    }
    if (eintrag) {
        eintrageBearbeiten(null, eintrag.id);
        return;
    }
    // Neuer Einzel-Eintrag
    resetModal();
    document.getElementById("abw-datum").value = datum;
    if (alleFeiertage[datum]) {
        typBtnSetzen("feiertag");
        document.getElementById("abw-notiz").value = alleFeiertage[datum];
    }
    document.getElementById("abw-modal").style.display = "flex";
}

function modalOeffnen() {
    resetModal();
    var heute = new Date().toISOString().split("T")[0];
    document.getElementById("abw-datum").value     = heute;
    document.getElementById("abw-datum-von").value = heute;
    document.getElementById("abw-datum-bis").value = heute;
    document.getElementById("abw-modal").style.display = "flex";
}

function eintrageBearbeiten(e, id) {
    if (e) e.stopPropagation();
    fetch("/api/abwesenheiten/" + id)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var istEinzel = data.datum_von === data.datum_bis;
            resetModal();
            document.getElementById("abw-modal-id").value = id;
            document.getElementById("abw-modal-loeschen").style.display = "inline-flex";

            if (istEinzel) {
                setzeModusIntern("einzel");
                document.getElementById("abw-datum").value = data.datum_von;
            } else {
                setzeModusIntern("bereich");
                document.getElementById("abw-datum-von").value = data.datum_von;
                document.getElementById("abw-datum-bis").value = data.datum_bis;
                document.getElementById("abw-nur-arbeitstage").checked = data.nur_arbeitstage;
            }
            typBtnSetzen(data.typ);
            document.getElementById("abw-notiz").value        = data.notiz || "";
            document.getElementById("abw-modal-titel").textContent = "Eintrag bearbeiten";
            document.getElementById("abw-modal").style.display = "flex";
        });
}

function resetModal() {
    document.getElementById("abw-modal-id").value    = "";
    document.getElementById("abw-modal-loeschen").style.display = "none";
    document.getElementById("abw-notiz").value        = "";
    document.getElementById("abw-nur-arbeitstage").checked = true;
    typBtnSetzen("urlaub");
    setzeModusIntern("einzel");
    document.getElementById("abw-modal-titel").textContent = "Abwesenheit eintragen";
}

// ── Modus-Toggle ───────────────────────────────────────────────────────────
function setzeModusBtn(btn) {
    setzeModusIntern(btn.dataset.modus);
}
function setzeModusIntern(modus) {
    aktuellerModus = modus;
    document.querySelectorAll(".abw-modus-btn").forEach(function(b) {
        b.classList.toggle("aktiv", b.dataset.modus === modus);
    });
    document.getElementById("modus-einzel").style.display  = modus === "einzel"  ? "block" : "none";
    document.getElementById("modus-bereich").style.display = modus === "bereich" ? "block" : "none";
}

// ── Typ-Toggle ─────────────────────────────────────────────────────────────
function setzeTyp(btn) {
    gewaehlterTyp = btn.dataset.typ;
    document.querySelectorAll(".abw-typ-btn").forEach(function(b) { b.classList.remove("aktiv"); });
    btn.classList.add("aktiv");
}
function typBtnSetzen(typ) {
    gewaehlterTyp = typ;
    // Prüfe ob ein Button mit diesem Typ existiert
    var gefunden = false;
    document.querySelectorAll(".abw-typ-btn").forEach(function(b) {
        if (b.dataset.typ === typ) { b.classList.add("aktiv"); gefunden = true; }
        else { b.classList.remove("aktiv"); }
    });
    // Kein Button → "Sonstiges" wählen
    if (!gefunden) {
        document.querySelectorAll(".abw-typ-btn").forEach(function(b) {
            b.classList.toggle("aktiv", b.dataset.typ === "sonstiges");
        });
        gewaehlterTyp = "sonstiges";
    }
}

// Von-Datum → Bis-Datum automatisch nachziehen
function vonDatumGeaendert() {
    var von = document.getElementById("abw-datum-von").value;
    var bis = document.getElementById("abw-datum-bis").value;
    // Bis nur setzen wenn es noch vor Von liegt oder leer ist
    if (!bis || bis < von) {
        document.getElementById("abw-datum-bis").value = von;
    }
}

// ── Speichern ──────────────────────────────────────────────────────────────
function abwesenheitSpeichern() {
    var id    = document.getElementById("abw-modal-id").value;
    var notiz = document.getElementById("abw-notiz").value;
    var nur   = document.getElementById("abw-nur-arbeitstage").checked;

    var datum_von, datum_bis;
    if (aktuellerModus === "einzel") {
        datum_von = document.getElementById("abw-datum").value;
        datum_bis = datum_von;
    } else {
        datum_von = document.getElementById("abw-datum-von").value;
        datum_bis = document.getElementById("abw-datum-bis").value;
    }

    if (!datum_von || !datum_bis) { showToast("Bitte Datum angeben.", "error"); return; }
    if (datum_bis < datum_von)    { showToast("Enddatum muss nach Startdatum liegen.", "error"); return; }

    var body = { datum_von: datum_von, datum_bis: datum_bis, typ: gewaehlterTyp, notiz: notiz, nur_arbeitstage: nur };
    var url    = id ? "/api/abwesenheiten/" + id : "/api/abwesenheiten";
    var method = id ? "PUT" : "POST";

    fetch(url, { method: method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.fehler) { showToast(data.fehler, "error"); return; }
            schliesseModal("abw-modal");
            showToast(id ? "Eintrag gespeichert." : "Eintrag erstellt.");
            return datenladen();
        })
        .then(function() {
            if (alleEintraege !== undefined) { kalenderRendern(); urlaubskontoLaden(); }
        });
}

function abwesenheitLoeschenAusModal() {
    var id = document.getElementById("abw-modal-id").value;
    if (!id) return;
    zeigeBestaetigung("Diesen Eintrag wirklich löschen?", function() {
        fetch("/api/abwesenheiten/" + id, { method: "DELETE" })
            .then(function() {
                schliesseModal("abw-modal");
                showToast("Eintrag gelöscht.");
                return datenladen();
            })
            .then(function() { kalenderRendern(); urlaubskontoLaden(); });
    });
}

function eintrageLoeschen(e, id) {
    e.stopPropagation();
    zeigeBestaetigung("Diesen Eintrag wirklich löschen?", function() {
        fetch("/api/abwesenheiten/" + id, { method: "DELETE" })
            .then(function() { return datenladen(); })
            .then(function() { kalenderRendern(); urlaubskontoLaden(); });
    });
}

// ── Hilfsfunktionen ────────────────────────────────────────────────────────
function typLabel(typ) {
    var labels = {
        urlaub:       "Urlaub",
        krank:        "Krank",
        feiertag:     "Feiertag",
        fortbildung:  "Fortbildung",
        sonderurlaub: "Sonderurlaub",
        elternzeit:   "Elternzeit",
        sonstiges:    "Sonstiges",
    };
    return labels[typ] || typ;
}
function datumFormatieren(str) {
    var d = new Date(str + "T12:00:00"); // Mittag → kein TZ-Problem
    return d.toLocaleDateString("de-DE", { weekday: "short", day: "numeric", month: "short" });
}

// Datum-Hilfsfunktionen ohne Zeitzonenproblem
function datumAddTage(datum, n) {
    // datum = "YYYY-MM-DD"
    var teile = datum.split("-");
    var j = parseInt(teile[0]), m = parseInt(teile[1]) - 1, t = parseInt(teile[2]);
    var d = new Date(j, m, t + n);
    return d.getFullYear() + "-"
        + String(d.getMonth() + 1).padStart(2, "0") + "-"
        + String(d.getDate()).padStart(2, "0");
}

function datumWochentag(datum) {
    var teile = datum.split("-");
    var j = parseInt(teile[0]), m = parseInt(teile[1]) - 1, t = parseInt(teile[2]);
    return ["So","Mo","Di","Mi","Do","Fr","Sa"][new Date(j, m, t).getDay()];
}
</script>
{% endblock %}