{% extends "layouts/mobile_base.twig" %}

{% block title %}{{ translations.nav_schedule }} · TFBuddy{% endblock %}
{% block topbar_title %}{{ translations.nav_schedule }}{% endblock %}
{% block topbar_subtitle %}{{ shop.name ?? '' }}{% endblock %}

{% block topbar_actions %}
    <button class="pwa-topbar-icon-btn" id="btnPrevWeek" aria-label="{{ translations.prev_week }}">
        <i class="bi bi-chevron-left"></i>
    </button>
    <button class="pwa-week-label-btn" id="btnWeekLabel" aria-label="{{ translations.pick_week }}">
        <span id="weekLabelText">...</span>
        <input type="date" id="weekDatePicker" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;">
    </button>
    <button class="pwa-topbar-icon-btn" id="btnNextWeek" aria-label="{{ translations.next_week }}">
        <i class="bi bi-chevron-right"></i>
    </button>
{% endblock %}

{% block head %}
<style>
    /* ── Topbar controls ── */
    .pwa-topbar-icon-btn {
        background: none; border: none; padding: 6px 8px;
        color: #435ebe; font-size: 1rem; cursor: pointer;
        border-radius: 8px; line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }
    .pwa-topbar-icon-btn:active { background: #f0f4ff; }
    .pwa-week-label-btn {
        position: relative; background: #f0f4ff; border: none;
        padding: 5px 12px; border-radius: 20px;
        font-size: .78rem; font-weight: 700; color: #435ebe; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Week hero ── */
    .week-hero {
        background: linear-gradient(135deg, #435ebe 0%, #6a11cb 100%);
        border-radius: 16px; padding: 16px; color: #fff;
        margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
    }
    .week-hero-main { flex: 1; min-width: 0; }
    .week-hero-label {
        font-size: .62rem; opacity: .7; text-transform: uppercase;
        letter-spacing: .07em; margin-bottom: 3px;
    }
    .week-hero-hours {
        font-size: 1.8rem; font-weight: 900; letter-spacing: -.03em; line-height: 1;
    }
    .week-hero-sub { font-size: .72rem; opacity: .65; margin-top: 2px; }
    .week-hero-kpis { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; text-align: right; }
    .week-hero-kpi-val { font-size: .92rem; font-weight: 900; }
    .week-hero-kpi-lbl { font-size: .58rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
    .week-hero-kpi + .week-hero-kpi { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); }
    .today-btn {
        display: block; width: 100%; background: rgba(255,255,255,.18); border: none;
        border-radius: 8px; color: #fff; font-size: .72rem; font-weight: 700;
        padding: 5px 0; margin-top: 10px; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .today-btn:active { background: rgba(255,255,255,.28); }

    /* ── Day accordion card ── */
    .day-card {
        background: #fff; border-radius: 16px;
        box-shadow: 0 1px 6px rgba(0,0,0,.06); margin-bottom: 8px;
        overflow: hidden; transition: box-shadow .2s;
    }
    .day-card.is-today { box-shadow: 0 0 0 2px #435ebe, 0 2px 12px rgba(67,94,190,.12); }
    .day-card.is-weekend { background: #fafafa; }

    /* ── Accordion header (always visible) ── */
    .day-toggle {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none; list-style: none;
        background: none; border: none; width: 100%; text-align: left;
    }
    .day-toggle:active { background: #f8faff; }
    .day-card.is-today .day-toggle:active { background: #f0f4ff; }

    .day-status-dot {
        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
        background: #e2e8f0; transition: background .2s;
    }
    .day-card.has-shifts .day-status-dot { background: #22c55e; }
    .day-card.is-today .day-status-dot { background: #435ebe; }

    .day-header-info { flex: 1; min-width: 0; }
    .day-name {
        font-size: .85rem; font-weight: 800; color: #111827;
    }
    .day-card.is-today .day-name { color: #435ebe; }
    .day-card.is-weekend:not(.is-today) .day-name { color: #92400e; }
    .day-date-label { font-size: .68rem; color: #9ca3af; margin-top: 1px; }

    /* summary badges shown when collapsed */
    .day-summary {
        display: flex; gap: 6px; align-items: center; flex-shrink: 0;
        transition: opacity .15s;
    }
    .day-badge {
        font-size: .72rem; font-weight: 700; padding: 3px 8px;
        border-radius: 20px; white-space: nowrap;
    }
    .day-badge-emp {
        background: #e0e7ff; color: #3730a3;
    }
    .day-badge-hrs {
        background: #f0fdf4; color: #166534;
    }
    .day-badge-empty {
        background: #f3f4f6; color: #9ca3af; font-style: italic;
    }

    .day-chevron {
        color: #adb5bd; font-size: .75rem; flex-shrink: 0;
        transition: transform .25s;
    }
    .day-card.is-open .day-chevron { transform: rotate(180deg); }

    /* ── Collapsible body ── */
    .day-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .28s ease;
        border-top: 0px solid #f2f4f8;
    }
    .day-card.is-open .day-body {
        grid-template-rows: 1fr;
        border-top-width: 1px;
    }
    .day-body-inner { overflow: hidden; }

    /* ── Shift rows ── */
    .day-shifts { padding: 6px 0 2px; }
    .shift-row {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 14px;
    }
    .shift-row + .shift-row { border-top: 1px solid #f8f9fa; }
    .shift-avatar {
        width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: .7rem; font-weight: 800; color: #fff;
    }
    .shift-info { flex: 1; min-width: 0; }
    .shift-name {
        font-size: .82rem; font-weight: 700; color: #111827;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .shift-time-bar { margin-top: 5px; }
    .shift-time-track {
        height: 5px; background: #f0f0f5; border-radius: 3px;
        overflow: hidden; position: relative;
    }
    .shift-time-fill {
        position: absolute; top: 0; bottom: 0; border-radius: 3px; opacity: .85;
    }
    .shift-time-labels {
        display: flex; justify-content: space-between;
        font-size: .6rem; color: #9ca3af; margin-top: 2px;
    }
    .shift-hrs {
        font-size: .82rem; font-weight: 800; color: #435ebe;
        flex-shrink: 0; min-width: 28px; text-align: right;
    }

    /* ── Empty day body ── */
    .day-empty-body {
        padding: 8px 14px 12px;
        font-size: .75rem; color: #d1d5db; font-style: italic;
    }

    /* ── Skeleton ── */
    #sched-skeleton .skeleton-hero { height: 100px; border-radius: 16px; margin-bottom: 12px; }
    #sched-skeleton .skeleton-card { height: 54px; border-radius: 16px; margin-bottom: 8px; }

    /* ── Empty week ── */
    .sched-empty { text-align: center; padding: 40px 20px; color: #adb5bd; }
    .sched-empty i { font-size: 2.5rem; display: block; margin-bottom: 8px; }

    /* ── Day card top wrapper ── */
    .day-card-top { display: flex; align-items: stretch; }
    .day-toggle   { flex: 1; }
    .day-add-btn {
        display: flex; align-items: center; justify-content: center;
        background: none; border: none; border-left: 1px solid #f2f4f8;
        padding: 0 14px; color: #435ebe; font-size: 1.1rem;
        cursor: pointer; flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .day-add-btn:active { background: #f0f4ff; }
    .shift-row-click { cursor: pointer; }
    .shift-row-click:active { background: #f8faff; }

    /* ── Shift modal overlay ── */
    .shift-modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,.45);
        z-index: 3000; display: none; align-items: flex-end;
    }
    .shift-modal-overlay.open { display: flex; }
    .shift-modal {
        background: #fff; border-radius: 20px 20px 0 0;
        width: 100%; transform: translateY(100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        max-height: 85vh; overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .shift-modal-overlay.open .shift-modal { transform: translateY(0); }
    .shift-modal-handle {
        width: 40px; height: 4px; background: #e5e7eb; border-radius: 2px;
        margin: .75rem auto .5rem;
    }
    .shift-modal-header {
        display: flex; align-items: center; padding: 0 1.25rem 1rem;
        border-bottom: 1px solid #f3f4f6;
    }
    .shift-modal-title { flex: 1; font-size: 1rem; font-weight: 800; color: #111827; }
    .shift-modal-body { padding: 1.25rem; }
    .shift-form-group { margin-bottom: 1rem; }
    .shift-form-label {
        display: block; font-size: .75rem; font-weight: 700;
        color: #6b7280; margin-bottom: .4rem;
        text-transform: uppercase; letter-spacing: .04em;
    }
    .shift-form-control {
        display: block; width: 100%; padding: .7rem 1rem;
        border: 1.5px solid #e5e7eb; border-radius: 12px;
        font-size: .9rem; color: #111827; background: #f9fafb;
        -webkit-appearance: none; appearance: none; outline: none;
        box-sizing: border-box;
    }
    .shift-form-control:focus { border-color: #435ebe; background: #fff; }
    .shift-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    .shift-modal-footer {
        display: flex; gap: .65rem; padding: 0 1.25rem 1.25rem; flex-wrap: wrap;
    }
    .btn-shift-save {
        flex: 1; background: #435ebe; color: #fff; border: none;
        border-radius: 12px; padding: .8rem; font-size: .9rem; font-weight: 700; cursor: pointer;
    }
    .btn-shift-save:active { background: #3451a1; }
    .btn-shift-delete {
        background: #fee2e2; color: #dc2626; border: none;
        border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; font-weight: 700; cursor: pointer;
    }
    .btn-shift-cancel {
        background: #f3f4f6; color: #6b7280; border: none;
        border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; font-weight: 700; cursor: pointer;
    }
    .shift-edit-icon { color: #d1d5db; font-size: .8rem; flex-shrink: 0; }
</style>
{% endblock %}

{% block content %}

<div id="sched-skeleton">
    <div class="skeleton-hero"></div>
    <div class="skeleton-card"></div>
    <div class="skeleton-card"></div>
    <div class="skeleton-card"></div>
    <div class="skeleton-card"></div>
    <div class="skeleton-card"></div>
</div>

<div id="sched-content" style="display:none;"></div>


<div id="shift-modal-overlay" class="shift-modal-overlay" role="dialog" aria-modal="true">
    <div id="shift-modal" class="shift-modal">
        <div class="shift-modal-handle"></div>
        <div class="shift-modal-header">
            <span class="shift-modal-title" id="shift-modal-title"></span>
            <button id="shift-modal-close" style="background:none;border:none;color:#9ca3af;font-size:1.25rem;cursor:pointer;padding:.25rem;line-height:1;" aria-label="Zamknij">&#x2715;</button>
        </div>
        <div class="shift-modal-body">
            <div class="shift-form-group">
                <label class="shift-form-label" for="shift-emp-sel">Pracownik</label>
                <select id="shift-emp-sel" class="shift-form-control"></select>
            </div>
            <div class="shift-form-group">
                <label class="shift-form-label" for="shift-date-inp">Data</label>
                <input type="date" id="shift-date-inp" class="shift-form-control">
            </div>
            <div class="shift-time-row">
                <div class="shift-form-group">
                    <label class="shift-form-label" for="shift-start-inp">Od</label>
                    <input type="time" id="shift-start-inp" class="shift-form-control" value="08:00">
                </div>
                <div class="shift-form-group">
                    <label class="shift-form-label" for="shift-end-inp">Do</label>
                    <input type="time" id="shift-end-inp" class="shift-form-control" value="16:00">
                </div>
            </div>
        </div>
        <div class="shift-modal-footer">
            <button id="shift-btn-delete" class="btn-shift-delete" style="display:none;"><i class="bi bi-trash3 me-1"></i><span id="delete-label">Usuń</span></button>
            <button id="shift-btn-cancel" class="btn-shift-cancel">Anuluj</button>
            <button id="shift-btn-save"   class="btn-shift-save"><i class="bi bi-check2 me-1"></i><span id="save-label">Zapisz</span></button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
(function () {
    const T = {{ translations | json_encode | raw }};

    const today     = new Date().toISOString().slice(0, 10);
    const PL_DAYS   = [
        T.monday    ?? 'Poniedzia\u0142ek',
        T.tuesday   ?? 'Wtorek',
        T.wednesday ?? '\u015aroda',
        T.thursday  ?? 'Czwartek',
        T.friday    ?? 'Pi\u0105tek',
        T.saturday  ?? 'Sobota',
        T.sunday    ?? 'Niedziela'
    ];
    const COLORS = ['#6366f1','#0ea5e9','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#14b8a6','#f97316','#84cc16'];

    let currentWeek = mondayOf(today);

    // ── Helpers ────────────────────────────────────────────────────────────
    function mondayOf(dateStr) {
        const d = new Date(dateStr + 'T00:00:00');
        const dow = d.getDay() === 0 ? 7 : d.getDay();
        d.setDate(d.getDate() - (dow - 1));
        return d.toISOString().slice(0, 10);
    }
    function addDays(dateStr, n) {
        const d = new Date(dateStr + 'T00:00:00');
        d.setDate(d.getDate() + n);
        return d.toISOString().slice(0, 10);
    }
    function fmtShort(dateStr) {
        const [, m, d] = dateStr.split('-');
        return d + '.' + m;
    }
    function fmtFull(dateStr) {
        const d = new Date(dateStr + 'T00:00:00');
        return d.toLocaleDateString('{{ app.locale|default("pl-PL") }}', { day: 'numeric', month: 'long' });
    }
    function timeToH(t) {
        if (!t) return 0;
        const p = t.split(':').map(Number);
        return p[0] + (p[1] || 0) / 60 + (p[2] || 0) / 3600;
    }
    function fmtH(h) { return parseFloat(h || 0).toFixed(1); }
    function getInitials(name) {
        return (name || '?').split(' ').map(w => w[0] || '').join('').slice(0, 2).toUpperCase();
    }
    function empColor(id) { return COLORS[(id || 0) % COLORS.length]; }
    function pluralEmps(n) {
        if (n === 1) return '1 ' + (T.person ?? 'osoba');
        if (n >= 2 && n <= 4) return n + ' ' + (T.persons_2_4 ?? 'osoby');
        return n + ' ' + (T.persons_many ?? 'os\u00f3b');
    }

    // ── Week label ─────────────────────────────────────────────────────────
    function updateWeekLabel(weekStr) {
        const end = addDays(weekStr, 6);
        document.getElementById('weekLabelText').textContent = fmtShort(weekStr) + '\u2013' + fmtShort(end);
    }

    // ── Load from API ──────────────────────────────────────────────────────
    async function loadWeek(weekStr) {
        currentWeek = weekStr;
        updateWeekLabel(weekStr);
        document.getElementById('sched-skeleton').style.display = '';
        document.getElementById('sched-content').style.display  = 'none';

        let rows = [];
        try {
            const res = await fetch('/panel/ajax/employees/schedule?date_from=' + weekStr + '&date_to=' + addDays(weekStr, 6), { credentials: 'include' });
            const json = await res.json();
            if (Array.isArray(json)) rows = json;
            else if (json && Array.isArray(json.data)) rows = json.data;
        } catch (e) {
            console.error(e);
        }

        document.getElementById('sched-skeleton').style.display = 'none';
        document.getElementById('sched-content').style.display  = '';
        renderWeek(weekStr, rows);
    }

    // ── Render ─────────────────────────────────────────────────────────────
    function renderWeek(weekStr, rows) {
        window._shiftMap = {};
        const days   = Array.from({ length: 7 }, (_, i) => addDays(weekStr, i));
        const dayMap = {};
        days.forEach(d => { dayMap[d] = { totalH: 0, empSet: new Set(), shifts: [] }; });

        rows.forEach(r => {
            const d = (r.work_date || '').split(' ')[0];
            if (!dayMap[d]) return;
            let h = timeToH(r.end_hour) - timeToH(r.start_hour);
            if (h < 0) h += 24;
            dayMap[d].totalH  += h;
            dayMap[d].empSet.add(r.id_employee);
            dayMap[d].shifts.push({ ...r, _h: h });
            if (r.id_schedule) window._shiftMap[r.id_schedule] = r;
        });

        let totalH = 0, totalShifts = 0;
        const allEmps = new Set();
        rows.forEach(r => {
            let h = timeToH(r.end_hour) - timeToH(r.start_hour);
            if (h < 0) h += 24;
            totalH += h; totalShifts++;
            allEmps.add(r.id_employee);
        });

        const todayMon     = mondayOf(today);
        const showTodayBtn = weekStr !== todayMon;

        // ── Hero ──
        let html = `
        <div class="week-hero">
            <div class="week-hero-main">
                <div class="week-hero-label"><i class="bi bi-calendar-week me-1"></i>${T.week_schedule ?? 'Grafik tygodnia'}</div>
                <div class="week-hero-hours">${fmtH(totalH)}<span style="font-size:.9rem;opacity:.6;font-weight:600;margin-left:4px;">h</span></div>
                <div class="week-hero-sub">${T.hours_planned ?? 'zaplanowanych godzin'}</div>
                ${showTodayBtn ? `<button class="today-btn" id="todayBtn"><i class="bi bi-calendar-check me-1"></i>${T.go_to_today ?? 'Biezacy tydzien'}</button>` : ''}
            </div>
            <div class="week-hero-kpis">
                <div class="week-hero-kpi">
                    <div class="week-hero-kpi-val">${allEmps.size}</div>
                    <div class="week-hero-kpi-lbl">${T.employees ?? 'Osoby'}</div>
                </div>
                <div class="week-hero-kpi">
                    <div class="week-hero-kpi-val">${totalShifts}</div>
                    <div class="week-hero-kpi-lbl">${T.shifts ?? 'Zmiany'}</div>
                </div>
            </div>
        </div>`;

        // ── Day cards ──
        days.forEach((d, i) => {
            const cell      = dayMap[d];
            const isToday   = d === today;
            const isWknd    = i >= 5;
            const hasShifts = cell.shifts.length > 0;
            const isOpen    = isToday;  // today expanded by default

            let cls = 'day-card';
            if (isToday)   cls += ' is-today';
            if (isWknd)    cls += ' is-weekend';
            if (hasShifts) cls += ' has-shifts';
            if (isOpen)    cls += ' is-open';

            const badgesHtml = hasShifts
                ? `<span class="day-badge day-badge-emp">${pluralEmps(cell.empSet.size)}</span>`
                  + `<span class="day-badge day-badge-hrs">${fmtH(cell.totalH)}h</span>`
                : `<span class="day-badge day-badge-empty">${T.no_shifts_day ?? 'Brak zmian'}</span>`;

            html += `<div class="${cls}" data-date="${d}">`;

            // ── Toggle header ──
            html += `<div class="day-card-top"><button class="day-toggle" aria-expanded="${isOpen}" aria-label="${PL_DAYS[i]}">
                <div class="day-status-dot"></div>
                <div class="day-header-info">
                    <div class="day-name">${PL_DAYS[i]}</div>
                    <div class="day-date-label">${fmtFull(d)}</div>
                </div>
                <div class="day-summary">${badgesHtml}</div>
                <i class="bi bi-chevron-down day-chevron"></i>
            </button><button class="day-add-btn" data-add-date="${d}" aria-label="${T.add_shift ?? 'Dodaj zmian\u0119'}"><i class="bi bi-plus-lg"></i></button></div>`;

            // ── Collapsible body ──
            html += `<div class="day-body"><div class="day-body-inner">`;

            if (hasShifts) {
                const sorted = [...cell.shifts].sort((a, b) => timeToH(a.start_hour) - timeToH(b.start_hour));
                const minH   = Math.min(...sorted.map(s => timeToH(s.start_hour)));
                const maxH   = Math.max(...sorted.map(s => timeToH(s.end_hour)));
                const range  = Math.max(maxH - minH, 1);

                html += `<div class="day-shifts">`;
                sorted.forEach(s => {
                    const color    = empColor(s.id_employee);
                    const ini      = getInitials(s.display_name);
                    const startH   = timeToH(s.start_hour);
                    const endH     = timeToH(s.end_hour);
                    const left     = ((startH - minH) / range * 100).toFixed(1);
                    const width    = Math.max(((endH - startH) / range * 100), 5).toFixed(1);
                    const startStr = (s.start_hour || '').slice(0, 5);
                    const endStr   = (s.end_hour   || '').slice(0, 5);

                    html += `<div class="shift-row shift-row-click" data-shift-id="${s.id_schedule}">
                        <div class="shift-avatar" style="background:${color};">${ini}</div>
                        <div class="shift-info">
                            <div class="shift-name">${s.display_name || ''}</div>
                            <div class="shift-time-bar">
                                <div class="shift-time-track">
                                    <div class="shift-time-fill" style="left:${left}%;width:${width}%;background:${color};"></div>
                                </div>
                                <div class="shift-time-labels"><span>${startStr}</span><span>${endStr}</span></div>
                            </div>
                        </div>
                        <div class="shift-hrs">${fmtH(s._h)}h</div>
                        <i class="bi bi-pencil-square shift-edit-icon"></i>
                    </div>`;
                });
                html += `</div>`;
            } else {
                html += `<div class="day-empty-body">${T.no_schedule_for_day ?? 'Brak zmian w tym dniu.'}</div>`;
            }

            html += `</div></div></div>`;
        });

        if (rows.length === 0) {
            html += `<div class="sched-empty"><i class="bi bi-calendar-x"></i>${T.no_schedule_for_week ?? 'Brak grafiku na ten tydzien.'}</div>`;
        }

        document.getElementById('sched-content').innerHTML = html;

        // ── Accordion listeners ──
        document.querySelectorAll('.day-toggle').forEach(btn => {
            btn.addEventListener('click', () => {
                const card = btn.closest('.day-card');
                const open = card.classList.toggle('is-open');
                btn.setAttribute('aria-expanded', open);
            });
        });

        document.getElementById('todayBtn')?.addEventListener('click', () => loadWeek(mondayOf(today)));
    }

    // ── Topbar navigation ──────────────────────────────────────────────────
    document.getElementById('btnPrevWeek').addEventListener('click', () => loadWeek(addDays(currentWeek, -7)));
    document.getElementById('btnNextWeek').addEventListener('click', () => loadWeek(addDays(currentWeek,  7)));
    document.getElementById('btnWeekLabel').addEventListener('click', () => {
        const p = document.getElementById('weekDatePicker');
        p.value = currentWeek;
        if (p.showPicker) p.showPicker();
    });
    document.getElementById('weekDatePicker').addEventListener('change', function () {
        loadWeek(mondayOf(this.value));
    });

    // ── Swipe ──────────────────────────────────────────────────────────────
    let swipeX = 0;
    const content = document.getElementById('sched-content');
    content.addEventListener('touchstart', e => { swipeX = e.touches[0].clientX; }, { passive: true });
    content.addEventListener('touchend', e => {
        const diff = swipeX - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 60) loadWeek(addDays(currentWeek, diff > 0 ? 7 : -7));
    }, { passive: true });


    // ────────────────────────────────────────────────────────────────────────
    // Schedule editing
    // ────────────────────────────────────────────────────────────────────────
    var _employees   = null;
    var _editShiftId = null;

    async function loadEmployees() {
        if (_employees) return _employees;
        try {
            var res  = await fetch('/panel/ajax/employees', { credentials: 'include' });
            var json = await res.json();
            _employees = Array.isArray(json) ? json : (json.data || []);
        } catch (e) { _employees = []; }
        return _employees;
    }

    function populateEmpSelect(selectedId) {
        var sel = document.getElementById('shift-emp-sel');
        if (!sel) return;
        sel.innerHTML = (_employees || []).map(function (e) {
            var label = e.display_name || ((e.name || '') + ' ' + (e.surname || '')).trim();
            var sel   = (e.id == selectedId) ? ' selected' : '';
            return '<option value="' + e.id + '"' + sel + '>' + label + '</option>';
        }).join('');
    }

    function showModal() {
        var overlay = document.getElementById('shift-modal-overlay');
        if (!overlay) return;
        overlay.style.display = 'flex';
        requestAnimationFrame(function () { overlay.classList.add('open'); });
    }

    function closeModal() {
        var overlay = document.getElementById('shift-modal-overlay');
        if (!overlay) return;
        overlay.classList.remove('open');
        setTimeout(function () { overlay.style.display = 'none'; }, 300);
    }

    function openAddModal(date) {
        _editShiftId = null;
        document.getElementById('shift-modal-title').textContent = T.add_shift ?? 'Dodaj zmianę';
        document.getElementById('shift-date-inp').value  = date;
        document.getElementById('shift-start-inp').value = '08:00';
        document.getElementById('shift-end-inp').value   = '16:00';
        document.getElementById('shift-btn-delete').style.display = 'none';
        loadEmployees().then(function () {
            populateEmpSelect(null);
            showModal();
        });
    }

    function openEditModal(shift) {
        if (!shift) return;
        _editShiftId = shift.id_schedule;
        document.getElementById('shift-modal-title').textContent = T.edit_shift ?? 'Edytuj zmianę';
        document.getElementById('shift-date-inp').value  = (shift.work_date || '').slice(0, 10);
        document.getElementById('shift-start-inp').value = (shift.start_hour || '08:00').slice(0, 5);
        document.getElementById('shift-end-inp').value   = (shift.end_hour   || '16:00').slice(0, 5);
        document.getElementById('shift-btn-delete').style.display = '';
        loadEmployees().then(function () {
            populateEmpSelect(shift.id_employee);
            showModal();
        });
    }

    async function submitShift() {
        var id_employee = parseInt(document.getElementById('shift-emp-sel').value);
        var work_date   = document.getElementById('shift-date-inp').value;
        var start_hour  = document.getElementById('shift-start-inp').value + ':00';
        var end_hour    = document.getElementById('shift-end-inp').value   + ':00';
        if (!id_employee || !work_date) return;
        var payload = { id_employee: id_employee, work_date: work_date, start_hour: start_hour, end_hour: end_hour };
        try {
            var url    = _editShiftId ? '/panel/ajax/employees/schedule/' + _editShiftId : '/panel/ajax/employees/schedule';
            var method = _editShiftId ? 'PATCH' : 'POST';
            await fetch(url, {
                method: method, credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            closeModal();
            showSnackbar(T.shift_saved ?? 'Zmiana zapisana');
            loadWeek(currentWeek);
        } catch (e) { showSnackbar('Błąd zapisu'); }
    }

    async function deleteShift(id) {
        if (!id) return;
        if (!confirm(T.confirm_delete_shift ?? 'Czy na pewno usunąć tę zmianę?')) return;
        try {
            await fetch('/panel/ajax/employees/schedule/' + id, { method: 'DELETE', credentials: 'include' });
            closeModal();
            showSnackbar(T.shift_deleted ?? 'Zmiana usunięta');
            loadWeek(currentWeek);
        } catch (e) { showSnackbar('Błąd usuwania'); }
    }

    function showSnackbar(msg) {
        var sb = document.getElementById('snackbar');
        if (!sb) return;
        sb.textContent = msg;
        sb.classList.add('show');
        setTimeout(function () { sb.classList.remove('show'); }, 2800);
    }

    // Event delegation: "+" button and shift row click on sched-content
    document.getElementById('sched-content').addEventListener('click', function (e) {
        var addBtn   = e.target.closest('[data-add-date]');
        var shiftRow = e.target.closest('[data-shift-id]');
        if (addBtn) {
            e.stopPropagation();
            openAddModal(addBtn.dataset.addDate);
        } else if (shiftRow) {
            var sid = shiftRow.dataset.shiftId;
            openEditModal(window._shiftMap && window._shiftMap[sid]);
        }
    });

    // Modal button listeners
    var _modalClose  = document.getElementById('shift-modal-close');
    var _btnCancel   = document.getElementById('shift-btn-cancel');
    var _btnSave     = document.getElementById('shift-btn-save');
    var _btnDelete   = document.getElementById('shift-btn-delete');
    var _overlay     = document.getElementById('shift-modal-overlay');
    if (_modalClose) _modalClose.addEventListener('click', closeModal);
    if (_btnCancel)  _btnCancel.addEventListener('click', closeModal);
    if (_btnSave)    _btnSave.addEventListener('click', submitShift);
    if (_btnDelete)  _btnDelete.addEventListener('click', function () { deleteShift(_editShiftId); });
    if (_overlay)    _overlay.addEventListener('click', function (e) { if (e.target === _overlay) closeModal(); });

    // Pre-fetch employees in background
    loadEmployees();
    // ────────────────────────────────────────────────────────────────────────
    loadWeek(currentWeek);
})();
</script>
{% endblock %}