{% extends "layouts/base.twig" %}
{% block title %}{{ translations.schedule ?? 'Harmonogram pracy' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        /* ── KPI stat cards ── */
        .sched-stat-card {
            border: none;
            border-radius: 12px;
            padding: 1.1rem 1.25rem;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,.07);
            display: flex;
            align-items: center;
            gap: .85rem;
        }
        .sched-stat-card .stat-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.15rem; flex-shrink: 0;
        }
        .sched-stat-card .stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
        .sched-stat-card .stat-label { font-size: .72rem; color: #6b7280; margin-top: 2px; }

        /* ── Schedule table ── */
        #scheduleTable { font-size: .875rem; }
        #scheduleTable thead th {
            background: #f8fafc;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #6b7280;
            border-bottom: 2px solid #e5e7eb;
            white-space: nowrap;
        }
        #scheduleTable tbody tr:hover { background: #f8fafc; }
        #scheduleTable tbody tr.summary-row td {
            font-weight: 700;
            border-top: 2px solid #e5e7eb;
            background: #f8fafc;
        }

        /* ── Eval star widget ── */
        .eval-star { transition: color .1s; }

        /* ── Modal tweaks ── */
        .modal-header { border-bottom: 1px solid #f3f4f6; }
        .modal-footer { border-top:    1px solid #f3f4f6; }

        /* ── Shift selector in eval modal ── */
        .shift-item {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: .5rem .75rem;
            cursor: pointer;
            transition: background .12s, border-color .12s;
            font-size: .85rem;
        }
        .shift-item:hover  { background: #f0f4ff; border-color: #93c5fd; }
        .shift-item.active { background: #eff6ff; border-color: #3b82f6; font-weight: 600; }
    </style>
{% endblock %}
{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.schedule ?? 'Harmonogram pracy' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.schedule_subtitle ?? '' }}</p>
    </div>
{% endblock %}

{% block content %}

    {# ── Kalendarz ─────────────────────────────────────────────── #}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body px-3 py-3">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>

    {# ── KPI cards ─────────────────────────────────────────────── #}
    <div class="row g-3 mb-4" id="kpi-row">
        <div class="col-6 col-lg-3">
            <div class="sched-stat-card">
                <div class="stat-icon" style="background:#eff6ff;">
                    <i class="bi bi-people-fill text-primary"></i>
                </div>
                <div>
                    <div class="stat-value text-primary" id="kpi-employees">—</div>
                    <div class="stat-label">{{ translations.employees ?? 'Pracownicy' }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="sched-stat-card">
                <div class="stat-icon" style="background:#ecfeff;">
                    <i class="bi bi-clock-fill text-info"></i>
                </div>
                <div>
                    <div class="stat-value text-info" id="kpi-hours">—</div>
                    <div class="stat-label">{{ translations.number_of_hours ?? 'Łączne godziny' }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="sched-stat-card">
                <div class="stat-icon" style="background:#fffbeb;">
                    <i class="bi bi-graph-up text-warning"></i>
                </div>
                <div>
                    <div class="stat-value text-warning" id="kpi-avg-hours">—</div>
                    <div class="stat-label">{{ translations.avg_hours ?? 'Śr. godz. / os.' }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="sched-stat-card">
                <div class="stat-icon" style="background:#f0fdf4;">
                    <i class="bi bi-cash-stack text-success"></i>
                </div>
                <div>
                    <div class="stat-value text-success" id="kpi-cost">—</div>
                    <div class="stat-label">{{ translations.receivable ?? 'Koszt [€]' }}</div>
                </div>
            </div>
        </div>
    </div>

    {# ── Tabela pracowników ────────────────────────────────────── #}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white d-flex align-items-center justify-content-between py-3">
                    <h6 class="mb-0 fw-semibold">
                        <i class="bi bi-table me-2 text-muted"></i>
                        {{ translations.employees ?? 'Pracownicy' }}
                        <span class="text-muted fw-normal ms-1 small" id="kpi-range-label"></span>
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0 align-middle" id="scheduleTable">
                            <thead>
                                <tr>
                                    <th style="width:30%; padding-left:1.25rem;">{{ translations.employee ?? 'Pracownik' }}</th>
                                    <th style="width:22%;">{{ translations.production_area ?? 'Obszar' }}</th>
                                    <th style="width:18%;">{{ translations.number_of_hours ?? 'Godziny' }}</th>
                                    <th style="width:18%;">{{ translations.receivable ?? 'Koszt' }} [€]</th>
                                    <th style="width:12%;"></th>
                                </tr>
                            </thead>
                            <tbody id="employee_tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL INFO-->
    <div class="modal fade" id="modalInfo" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Info</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="id_company_info_body">
                    <div class="row">
                        <div class="col-12">
                            <div id="dp"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.close }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- END MODAL INFO-->

    <!-- MODAL EVALUATION -->
    <div class="modal fade" id="modalEvaluation" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0" id="evalModalTitle">
                            <i class="bi bi-star-fill text-warning me-2"></i>{{ translations.evaluation ?? 'Ocena zmiany' }}
                        </h5>
                        <div class="text-muted small mt-1" id="evalEmployeeSubtitle"></div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    {# ── Wybór zmiany ───────────────────────────────── #}
                    <div class="mb-4">
                        <label class="form-label fw-semibold text-uppercase small text-muted letter-spacing-1">
                            <i class="bi bi-calendar3 me-1"></i>{{ translations.select_shift ?? 'Wybierz zmianę' }}
                        </label>
                        <div id="shiftList" class="d-flex flex-column gap-2">
                            <div class="text-muted small">
                                <span class="spinner-border spinner-border-sm me-1"></span>
                                {{ translations.loading ?? 'Ładowanie…' }}
                            </div>
                        </div>
                    </div>

                    <hr class="my-3">

                    {# ── Gwiazdki ───────────────────────────────────── #}
                    <div class="mb-4">
                        <label class="form-label fw-semibold text-uppercase small text-muted">
                            <i class="bi bi-star me-1"></i>{{ translations.rating ?? 'Ocena' }}
                        </label>
                        <div class="d-flex align-items-center gap-1" id="starContainer">
                            {% for i in 1..5 %}
                                <span class="eval-star fs-2 lh-1"
                                      data-value="{{ i }}"
                                      style="cursor:pointer; color:#d1d5db;">★</span>
                            {% endfor %}
                            <span class="ms-2 text-muted small" id="ratingLabel"></span>
                        </div>
                        <input type="hidden" id="evalRating" value="0">
                    </div>

                    {# ── Notatka ────────────────────────────────────── #}
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-uppercase small text-muted">
                            <i class="bi bi-pencil me-1"></i>{{ translations.note ?? 'Notatka' }}
                        </label>
                        <textarea class="form-control" id="evalNote" rows="3"
                                  placeholder="{{ translations.evaluation_note_placeholder ?? 'Opcjonalna notatka dla pracownika…' }}"></textarea>
                    </div>

                    <div id="evalExisting" class="alert alert-info d-none py-2 small">
                        <i class="bi bi-info-circle me-1"></i>
                        {{ translations.evaluation_exists ?? 'Istnieje już ocena dla tej zmiany — zostanie zaktualizowana.' }}
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger me-auto d-none" id="evalDeleteBtn">
                        <i class="bi bi-trash me-1"></i>{{ translations.delete_evaluation ?? 'Usuń ocenę' }}
                    </button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        {{ translations.close ?? 'Zamknij' }}
                    </button>
                    <button type="button" class="btn btn-primary" id="evalSaveBtn" disabled>
                        <i class="bi bi-check-circle me-1"></i>{{ translations.save ?? 'Zapisz ocenę' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- END MODAL EVALUATION -->
{% endblock %}
{% block scripts %}

    <link href="{{ root }}/assets/css/fullcalendar/5.11.3_main.min.css" rel="stylesheet">
    <script src="{{ root }}/assets/js/daypilot-all.min.js"></script>
    <script src="{{ root }}/assets/js/fullcalendar/5.11.3_main.min.js"></script>
    <script src="{{ root }}/assets/js/bootstrap.bundle.min.js"></script>
    <script>

        var modalEl = document.getElementById('modalInfo');
        var infoModal = new bootstrap.Modal(modalEl, {});

        modalEl.addEventListener('hidden.bs.modal', function (event) {
            dpInstance.dispose();
        });

        let dpInstance = null;
        let employeeArr = [];
        let calendarInstance = null;
        let employeeCostArr = [];
        let monthlyScheduleArr = [];

        let currentStartdate = null;
        let currentEnddate = null;

        // Mapa ocen indeksowana po id_schedule: { [id_schedule]: evaluationData }
        let evaluationsMap = {};
        const SHOP_ID = {{ user.idShop | default(0) }};

        window.onload = async function() {

            try {
                await loadSalespersons();
                await renderCalendar();


            } catch (error) {
                console.error('Wystąpił błąd podczas wykonywania funkcji:', error);
            }
        };

        function loadTerminal(date){

            dpInstance = new DayPilot.Scheduler("dp", {
                locale: "fr-fr",
                cellWidthSpec: "Auto",
                crosshairType: "Full",
                timeHeaders: [{"groupBy":"Day"},{"groupBy":"Hour"}, {"groupBy":"Cell"}],
                scale: "CellDuration",
                cellDuration: 30,
                days: 1,
                businessWeekends: true,
                startDate: date,
                allowEventOverlap: false,
                businessBeginsHour: 0,
                businessEndsHour: 24,
                showNonBusiness: false,
                timeRangeSelectedHandling: "Enabled",

                onTimeRangeSelected: async (args) => {
                    const dp = args.control;
                    //const modal = await DayPilot.Modal.prompt("Comment", "Work1");
                    dp.clearSelection();

                    let start = args.start;
                    let end = args.end;

                    if (end.getHours() === 0 && end.getMinutes() === 0) {
                        end = end.addSeconds(-1);
                    }

                    const inserted_id = await newWorkDay(args.resource, start.toString("HH:mm:ss"), end.toString("HH:mm:ss"), date);

                    //if (modal.canceled) { return; }

                    dp.events.add({
                        start: args.start,
                        end: args.end,
                        id: inserted_id,
                        resource: args.resource,
                        text: "work"
                    });

                },
                eventMoveHandling: "Disabled",
                eventResizeHandling: "Update",
                onEventResized: (args) => {
                    let start = args.newStart;
                    let end = args.newEnd;

                    if (end.getHours() === 0 && end.getMinutes() === 0) {
                        end = end.addSeconds(-1);
                    }


                    updateWorkHours(start.toString("HH:mm:ss"), end.toString("HH:mm:ss"), args.e.data.id)
                },
                eventDeleteHandling: "Update",
                onEventDeleted: (args) => {
                    const elem_data = args.e.data;
                    let iso_to_standard = "";


                    if (elem_data.start instanceof DayPilot.Date) {
                        iso_to_standard = elem_data.start.value.split("T");
                    } else if (typeof elem_data.start === 'string') {
                        iso_to_standard = elem_data.start.split("T");
                    }

                    const splitted = iso_to_standard[0].split("-");

                    if(deleteScheduleWork(elem_data.id)){
                        loadWorksForSelectedDay(splitted[0], splitted[1]);
                        // loadScheduleAndCalculationByYearMonth(splitted[0], splitted[1]);
                        loadEmployeesScheduleBetweenDates(splitted[0], splitted[1]);
                    }

                },
                eventClickHandling: "Disabled",
                eventHoverHandling: "Disabled",
            });
            dpInstance.resources = employeeArr;
            dpInstance.events.list = [];

            const splitted_date = date.split("-");
            loadWorksForSelectedDay(date, date);

            dpInstance.init();
        }

        function runModal(date){
            infoModal.show();
            loadTerminal(date);
        }

        async function newWorkDay(id_employee, start_hour, end_hour, work_date){
            const data = {
                id_employee : id_employee,
                start_hour : start_hour,
                end_hour : end_hour,
                work_date : work_date
            };

            await api(`/ajax/employees/schedule`, {
                data: data,
                method: 'POST'
            })
                .then(function(res){
                    showSnack(res.success);

                    if(res.success){
                        loadEmployeesScheduleBetweenDates(currentStartdate, currentEnddate)
                        return res.inserted_id;
                    }

                    return -1;
                })
                .catch(function(error) {
                    console.error('Wystąpił błąd:', error);
                    return -1;
                });

        }

        function renderCalendar(){
            return new Promise((resolve, reject) => {
                var calendarEl = document.getElementById('calendar');
                calendarInstance = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridWeek',
                    height: '400px',
                    firstDay: 1,
                    selectable: true,
                    displayEventEnd: true,
                    eventDisplay: "block",
                    eventTextColor: "#000000",
                    eventTimeFormat: {
                        hour: 'numeric',
                        minute: '2-digit',
                        meridiem: false,
                        hour12: false
                    },
                    eventContent: function(arg) {
                        let startTime = arg.event.start ? arg.event.start.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : '';
                        let endTime = arg.event.end ? arg.event.end.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : '';

                        return {
                            html: `
                        <div style="text-align: center; font-weight: bold; font-size: 13px;">
                            ${startTime} - ${endTime}
                        </div>
                        <div style="text-align: center; font-size: 12px;">
                            ${arg.event.title}
                        </div>
                    `
                        };
                    },
                    dateClick: function(info) {
                        runModal(info.dateStr);
                    },
                    eventDidMount: function(info) {
                        info.el.setAttribute('title', info.event.extendedProps.description);
                    },
                    datesSet: function(info) {
                        const firstVisibleDate = info.start; // Pierwszy dzień wyświetlany w kalendarzu
                        const lastVisibleDate = new Date(info.end); // Ostatni dzień WYŚWIETLANY + 1 dzień
                        lastVisibleDate.setDate(lastVisibleDate.getDate()); // Cofamy o jeden dzień
                        firstVisibleDate.setDate(firstVisibleDate.getDate() + 1); // Początkowa data o 1 dzien do przodu

                        // Wywołaj swoją funkcję z zakresem dat
                        loadEmployeesScheduleBetweenDates(firstVisibleDate.toISOString().split('T')[0], lastVisibleDate.toISOString().split('T')[0]);

                        currentStartdate = firstVisibleDate.toISOString().split('T')[0];
                        currentEnddate = lastVisibleDate.toISOString().split('T')[0];

                    }
                });
                calendarInstance.render();

                resolve();
            });
        }

        function loadWorksForSelectedDay(start_date, end_date){

            api(`/ajax/employees/schedule?date_from=${start_date}&date_to=${end_date}`, {
                method: 'GET'
            })
                .then(function(res){
                    dpInstance.events.list = [];

                    for(var i=0; i<res.data.length; i++){
                        const splitted_start_hour = res.data[i].start_hour;
                        const start_hour = splitted_start_hour.split(":")[0];
                        if(start_hour < 0) res.data[i].start_hour = "00:00:00";

                        const splitted_end_hour = res.data[i].end_hour;
                        const end_hour = splitted_end_hour.split(":")[0];
                        if(end_hour > 24) res.data[i].end_hour = "24:00:00";


                        const parsed_start_date = res.data[i].work_date + "T" + res.data[i].start_hour;
                        const parsed_end_date = res.data[i].work_date + "T" + res.data[i].end_hour;


                        var e = new DayPilot.Event({
                            start: parsed_start_date,
                            end: parsed_end_date,
                            id: res.data[i].id_schedule,
                            text: "work",
                            resource: res.data[i].id_employee,
                            additionalId: res.data[i].id_schedule,
                            backColor: "#e8f4f8"
                        });
                        dpInstance.events.add(e);
                    }
                })
                .catch(function(error) {
                    console.error('Wystąpił błąd:', error);
                });
        }

        function deleteScheduleWork(id_schedule){
            api(`/ajax/employees/schedule/${id_schedule}`, {
                method: 'DELETE'
            })
                .then(function(res){
                    showSnack(res.success);
                    if(res.success){
                        loadEmployeesScheduleBetweenDates(currentStartdate, currentEnddate);
                    }
                    return res.success
                })
                .catch(function(error) {
                    console.error('Wystąpił błąd:', error);
                    return false;
                });
        }

        function updateWorkHours(startHour, endHour, id_schedule){
            const data = {
                start_hour : startHour,
                end_hour : endHour
            }

            api(`/ajax/employees/schedule/${id_schedule}`, {
                method: 'PATCH',
                data
            })
                .then(function(res){

                    showSnack(res.success);

                    if(res.success){
                        loadEmployeesScheduleBetweenDates(currentStartdate, currentEnddate);
                    }
                })
                .catch(function(error) {
                    console.error('Wystąpił błąd:', error);
                });
        }

        function loadSalespersons(){
                api(`/ajax/employees`, {
                    method: 'GET'
                })
                .then(function(res){
                    if(res.data.length > 0){
                        for(var i=0; i<res.data.length; i++){
                            // Pomiń wyłączonych pracowników (soft_delete)
                            if(res.data[i].soft_delete == 1 || res.data[i].soft_delete === true) continue;

                            employeeArr.push({
                                id: res.data[i].id,
                                name: res.data[i].display_name,
                                money_per_hour: res.data[i].money_per_hour,
                                work_hours: 0,
                                total_earning: 0,
                                production_area: res.data[i].production_area_name
                            })
                        }
                    }
                    return true;
                })
                .catch();
        }

        function loadEmployeesScheduleBetweenDates(start_date, end_date){
                api(`/ajax/employees/schedule?date_from=${start_date}&date_to=${end_date}`, {
                    method: 'GET'
                })
                .then(function(res){
                    calendarInstance.removeAllEvents();
                    for(var i=0; i<res.data.length; i++){
                        const parsed_start_date = res.data[i].work_date + "T" + res.data[i].start_hour;
                        const parsed_end_date = res.data[i].work_date + "T" + res.data[i].end_hour;
                        calendarInstance.addEvent({
                            id: res.data[i].id_schedule,
                            title: res.data[i].display_name,
                            start: parsed_start_date,
                            end: parsed_end_date,
                            color: "#e8f4f8",
                            description: "xxxxxxx",
                            display: "block"
                        })
                    }

                    monthlyScheduleArr = res.data.map((x) => x);

                    // Załaduj oceny dla zakresu, potem odśwież tabelę
                    loadEvaluationsForRange(start_date, end_date).then(() => {
                        const employee_hours = calculateTotalHoursWithEmployeeInfo(res.data, employeeArr);
                        loadCalculationToTable(employee_hours);
                    });

                    return true;
                })
                .catch(function(error) {
                    console.error('Wystąpił błąd:', error);
                });
        }

        /**
         * Pobiera wszystkie oceny sklepu w zakresie dat i buduje evaluationsMap.
         * Mapa: { id_schedule → { rating, note, ... } }
         */
        async function loadEvaluationsForRange(start_date, end_date) {
            if (!SHOP_ID) return;
            try {
                const res = await api(
                    `/ajax/shops/${SHOP_ID}/evaluations?date_from=${start_date}&date_to=${end_date}`,
                    { method: 'GET' }
                );
                evaluationsMap = {};
                if (res.success && Array.isArray(res.data)) {
                    res.data.forEach(ev => {
                        evaluationsMap[ev.id_schedule] = ev;
                    });
                }
            } catch (e) {
                console.error('Błąd ładowania ocen:', e);
            }
        }

        function loadCalculationToTable(calculation){
            const employee_tbody = document.getElementById('employee_tbody');

            let total_hours_sum  = 0;
            let total_cost       = 0;
            let active_employees = 0;

            employee_tbody.innerHTML = "";

            Object.keys(calculation).forEach(empId => {
                const emp = calculation[empId];
                if (emp.total_hours === 0) return;

                const employee_salary = (emp.total_hours * emp.money_per_hour).toFixed(2);

                // Zbierz oceny tego pracownika z evaluationsMap
                const empEvals = Object.values(evaluationsMap)
                    .filter(ev => ev.id_employee === emp.id_employee);
                const evalCount   = empEvals.length;
                const hasNotes    = empEvals.some(ev => ev.note && ev.note.trim() !== '');
                const avgRating   = evalCount > 0
                    ? (empEvals.reduce((s, ev) => s + (ev.rating || 0), 0) / evalCount).toFixed(1)
                    : null;

                const row = employee_tbody.insertRow();
                const c0  = row.insertCell(0);
                c0.innerText = emp.display_name;
                c0.style.paddingLeft = '1.25rem';

                row.insertCell(1).innerText = emp.production_area ?? '—';
                row.insertCell(2).innerText = emp.total_hours.toFixed(2);
                row.insertCell(3).innerText = employee_salary;

                const actionCell = row.insertCell(4);
                actionCell.style.textAlign = 'right';
                actionCell.style.paddingRight = '.75rem';

                // Wskaźnik ocen
                const evalBadge = evalCount > 0
                    ? `<span class="badge me-1"
                            style="background:#fef9c3;color:#854d0e;font-size:.72rem;border-radius:20px;"
                            title="{{ translations.evaluations_count ?? 'Oceny w tym tygodniu' }}: ${evalCount}">
                            ★ ${avgRating}
                       </span>`
                    : '';

                // Wskaźnik notatek
                const noteBadge = hasNotes
                    ? `<span class="badge me-1"
                            style="background:#eff6ff;color:#1d4ed8;font-size:.72rem;border-radius:20px;"
                            title="{{ translations.has_notes ?? 'Zawiera notatki' }}">
                            <i class="bi bi-chat-text-fill"></i>
                       </span>`
                    : '';

                actionCell.innerHTML = `
                    <div class="d-flex align-items-center justify-content-end gap-1">
                        ${evalBadge}${noteBadge}
                        <button class="btn btn-sm btn-outline-warning py-0 px-2"
                                title="{{ translations.add_evaluation ?? 'Oceń pracownika' }}"
                                onclick="openEvaluationByEmployee(${emp.id_employee}, '${emp.display_name.replace(/'/g,"\\'")}')">
                            <i class="bi bi-star me-1"></i>{{ translations.evaluate ?? 'Oceń' }}
                        </button>
                    </div>`;

                total_hours_sum += emp.total_hours;
                total_cost      += Number(employee_salary);
                active_employees++;
            });

            // Wiersz sumaryczny
            if (active_employees > 0) {
                const sr   = employee_tbody.insertRow();
                sr.classList.add('summary-row');
                const sc0  = sr.insertCell(0);
                sc0.style.paddingLeft = '1.25rem';
                sc0.innerText = '';
                sr.insertCell(1).innerText = '';
                sr.insertCell(2).innerText = total_hours_sum.toFixed(2);
                sr.insertCell(3).innerText = total_cost.toFixed(2);
                sr.insertCell(4).innerText = '';
            }

            // KPI cards
            const avg_hours = active_employees > 0
                ? (total_hours_sum / active_employees).toFixed(2)
                : '—';

            document.getElementById('kpi-employees').innerText = active_employees;
            document.getElementById('kpi-hours').innerText     = total_hours_sum.toFixed(2);
            document.getElementById('kpi-avg-hours').innerText = avg_hours;
            document.getElementById('kpi-cost').innerText      = total_cost.toFixed(2);

            // Aktualizacja etykiety zakresu dat pod nagłówkiem tabeli
            if (currentStartdate && currentEnddate) {
                document.getElementById('kpi-range-label').innerText =
                    `(${currentStartdate} – ${currentEnddate})`;
            }
        }

        // Funkcja do obliczania całkowitych godzin pracy wraz z informacjami o pracownikach
        function calculateTotalHoursWithEmployeeInfo(schedules, employees) {
            const employeeMap = {};

            // Inicjalizacja mapy pracowników z podstawowymi informacjami
            employees.forEach(emp => {
                employeeMap[emp.id] = {
                    id_employee: emp.id,
                    display_name: emp.name,
                    production_area: emp.production_area,
                    money_per_hour: parseFloat(emp.money_per_hour),
                    total_hours: 0
                };
            });

            // Funkcja pomocnicza do konwersji czasu na godziny w formacie dziesiętnym
            function timeToDecimal(timeStr) {
                const [hours, minutes, seconds] = timeStr.split(':').map(Number);
                return hours + minutes / 60 + seconds / 3600;
            }

            // Iteracja przez harmonogramy i sumowanie godzin
            schedules.forEach(entry => {
                const { id_employee, start_hour, end_hour, work_date } = entry;

                // Sprawdzenie, czy pracownik istnieje w mapie (dla bezpieczeństwa)
                if (!employeeMap[id_employee]) {
                    console.warn(`Pracownik o ID ${id_employee} nie został znaleziony w danych pracowników.`);
                    return;
                }

                const startTime = timeToDecimal(start_hour);
                const endTime = timeToDecimal(end_hour);
                let hoursWorked = endTime - startTime;

                // Obsługa przypadków, gdy end_time jest mniejsze niż start_time (np. praca nocna)
                if (hoursWorked < 0) {
                    hoursWorked += 24;
                }

                // Dodanie przepracowanych godzin do sumy
                employeeMap[id_employee].total_hours += hoursWorked;
            });

            // Zaokrąglenie godzin do dwóch miejsc po przecinku
            for (let empId in employeeMap) {
                employeeMap[empId].total_hours = Math.round(employeeMap[empId].total_hours * 100) / 100;
            }

            return employeeMap;
        }


        // ── EVALUATION MODAL LOGIC ────────────────────────────────────────────

        let evalModal      = new bootstrap.Modal(document.getElementById('modalEvaluation'));
        let evalScheduleId = null;

        const RATING_LABELS = ['', '{{ translations.rating_1 ?? 'Słabo' }}', '{{ translations.rating_2 ?? 'Poniżej oczekiwań' }}', '{{ translations.rating_3 ?? 'Przeciętnie' }}', '{{ translations.rating_4 ?? 'Dobrze' }}', '{{ translations.rating_5 ?? 'Wyśmienicie' }}'];

        // ── Gwiazdki ─────────────────────────────────────────────────────────
        document.querySelectorAll('.eval-star').forEach(star => {
            star.addEventListener('mouseover', () => _highlightStars(+star.dataset.value, false));
            star.addEventListener('mouseout',  () => _highlightStars(+document.getElementById('evalRating').value, false));
            star.addEventListener('click',     () => _setRating(+star.dataset.value));
        });

        function _highlightStars(value, setInput = true) {
            document.querySelectorAll('.eval-star').forEach(s => {
                s.style.color = +s.dataset.value <= value ? '#ffc107' : '#d1d5db';
            });
            document.getElementById('ratingLabel').innerText = value > 0 ? RATING_LABELS[value] : '';
            if (setInput) document.getElementById('evalRating').value = value;
        }

        function _setRating(value) {
            document.getElementById('evalRating').value = value;
            _highlightStars(value, false);
            document.getElementById('evalSaveBtn').disabled = (value < 1 || !evalScheduleId);
        }

        function _resetEvalModal() {
            _setRating(0);
            document.getElementById('evalNote').value = '';
            document.getElementById('evalExisting').classList.add('d-none');
            document.getElementById('evalSaveBtn').disabled = true;
            document.getElementById('evalDeleteBtn').classList.add('d-none');
            evalScheduleId = null;
        }

        // ── Renderowanie listy zmian ──────────────────────────────────────────
        function _renderShiftList(shifts) {
            const container = document.getElementById('shiftList');
            container.innerHTML = '';

            if (!shifts || shifts.length === 0) {
                container.innerHTML = `<div class="text-muted small fst-italic">{{ translations.no_schedule_in_range ?? 'Brak zmian w wybranym tygodniu.' }}</div>`;
                return;
            }

            shifts.forEach(shift => {
                const item = document.createElement('div');
                item.className = 'shift-item d-flex justify-content-between align-items-start gap-2';
                item.dataset.idSchedule = shift.id_schedule;
                item.dataset.workDate   = shift.work_date   ?? '';
                item.dataset.startHour  = shift.start_hour  ?? '';
                item.dataset.endHour    = shift.end_hour    ?? '';

                const dateStr  = shift.work_date ?? '';
                const startStr = (shift.start_hour ?? '').substring(0, 5);
                const endStr   = (shift.end_hour   ?? '').substring(0, 5);

                // Sprawdź ocenę z mapy (zero dodatkowych requestów)
                const existingEval = evaluationsMap[shift.id_schedule];
                let evalHtml = '';

                if (existingEval) {
                    // Gwiazdki — wypełnione i puste
                    const filled = '★'.repeat(existingEval.rating || 0);
                    const empty  = '☆'.repeat(5 - (existingEval.rating || 0));
                    const starsHtml = `<span style="color:#fbbf24;font-size:.9rem;">${filled}</span><span style="color:#d1d5db;font-size:.9rem;">${empty}</span>`;

                    // Notatka — skrócona do 60 znaków
                    const notePreview = existingEval.note && existingEval.note.trim()
                        ? `<span class="text-muted ms-1" style="font-size:.75rem;">
                               <i class="bi bi-chat-text-fill" style="color:#3b82f6;"></i>
                               ${existingEval.note.trim().substring(0, 60)}${existingEval.note.trim().length > 60 ? '…' : ''}
                           </span>`
                        : '';

                    evalHtml = `<div class="d-flex align-items-center gap-1 flex-wrap mt-1">
                                    ${starsHtml}${notePreview}
                                </div>`;
                }

                item.innerHTML = `
                    <div class="flex-grow-1">
                        <div class="d-flex align-items-center gap-2">
                            <span class="fw-semibold">${dateStr}</span>
                            <span class="text-muted">${startStr} – ${endStr}</span>
                            ${existingEval ? `<span class="badge" style="background:#fef9c3;color:#854d0e;font-size:.68rem;border-radius:20px;">{{ translations.evaluated ?? 'Oceniono' }}</span>` : ''}
                        </div>
                        ${evalHtml}
                    </div>
                    <i class="bi ${existingEval ? 'bi-star-fill text-warning' : 'bi-star text-muted'} flex-shrink-0 mt-1"></i>`;

                item.addEventListener('click', () => _selectShift(shift, item));
                container.appendChild(item);
            });
        }

        async function _selectShift(shift, itemEl) {
            // Deselect all
            document.querySelectorAll('#shiftList .shift-item').forEach(el => el.classList.remove('active'));
            itemEl.classList.add('active');

            evalScheduleId = shift.id_schedule;

            // Pobierz istniejącą ocenę
            _resetEvalModal();
            evalScheduleId = shift.id_schedule; // reset wyzerował

            try {
                const res = await api(`/ajax/employees/schedule/${shift.id_schedule}/evaluation`, { method: 'GET' });
                if (res.success && res.data) {
                    _setRating(res.data.rating);
                    document.getElementById('evalNote').value = res.data.note ?? '';
                    document.getElementById('evalExisting').classList.remove('d-none');
                    // Pokaż przycisk usuwania — ocena istnieje
                    document.getElementById('evalDeleteBtn').classList.remove('d-none');
                    document.getElementById('evalDeleteBtn').dataset.evalId = res.data.id;
                }
            } catch (_) {}

            // Ponownie zaznacz kafelek po resecie
            document.querySelectorAll('#shiftList .shift-item').forEach(el => el.classList.remove('active'));
            itemEl.classList.add('active');
            document.getElementById('evalSaveBtn').disabled = false;
        }

        // ── Otwieranie modalu przez przycisk w tabeli ─────────────────────────
        async function openEvaluationByEmployee(idEmployee, employeeName) {
            if (!currentStartdate || !currentEnddate) {
                showSnack(false, '{{ translations.no_range ?? 'Brak zakresu dat.' }}');
                return;
            }

            _resetEvalModal();
            document.getElementById('evalModalTitle').innerHTML =
                `<i class="bi bi-star-fill text-warning me-2"></i>${employeeName}`;
            document.getElementById('evalEmployeeSubtitle').innerText =
                `${currentStartdate} – ${currentEnddate}`;
            document.getElementById('shiftList').innerHTML =
                `<div class="text-muted small"><span class="spinner-border spinner-border-sm me-1"></span>{{ translations.loading ?? 'Ładowanie…' }}</div>`;

            evalModal.show();

            try {
                const res = await api(
                    `/ajax/employees/schedule?date_from=${currentStartdate}&date_to=${currentEnddate}`,
                    { method: 'GET' }
                );

                const shifts = (res.data ?? [])
                    .filter(s => s.id_employee === idEmployee)
                    .sort((a, b) => (a.work_date + a.start_hour).localeCompare(b.work_date + b.start_hour));

                _renderShiftList(shifts);

                // Jeśli tylko jedna zmiana — zaznacz ją automatycznie
                if (shifts.length === 1) {
                    const firstItem = document.querySelector('#shiftList .shift-item');
                    if (firstItem) await _selectShift(shifts[0], firstItem);
                }
            } catch (e) {
                document.getElementById('shiftList').innerHTML =
                    `<div class="text-danger small">{{ translations.error_loading ?? 'Błąd ładowania zmian.' }}</div>`;
                console.error(e);
            }
        }

        // ── Odświeżenie GUI po zmianie oceny ─────────────────────────────────
        async function _refreshAfterEvalChange() {
            // Przeładuj mapę ocen dla bieżącego zakresu dat
            if (currentStartdate && currentEnddate) {
                await loadEvaluationsForRange(currentStartdate, currentEnddate);
            }
            // Przelicz i odśwież tabelę pracowników (dane harmonogramu już są w monthlyScheduleArr)
            const employee_hours = calculateTotalHoursWithEmployeeInfo(monthlyScheduleArr, employeeArr);
            loadCalculationToTable(employee_hours);
        }

        // ── Zapis oceny ───────────────────────────────────────────────────────
        document.getElementById('evalSaveBtn').addEventListener('click', async () => {
            const rating = parseInt(document.getElementById('evalRating').value);
            const note   = document.getElementById('evalNote').value.trim();

            if (!rating || rating < 1) {
                showSnack(false, '{{ translations.rating_required ?? 'Wybierz ocenę (1–5 gwiazdek).' }}');
                return;
            }
            if (!evalScheduleId) return;

            const savedScheduleId = evalScheduleId;

            const saveBtn = document.getElementById('evalSaveBtn');
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ translations.saving ?? 'Zapisywanie…' }}';

            try {
                const res = await api(`/ajax/employees/schedule/${savedScheduleId}/evaluation`, {
                    method: 'POST',
                    data:   { rating, note: note || null },
                });

                showSnack(res.success);

                if (res.success) {
                    // Odczytaj dane wszystkich kafelków z DOM przed resetem
                    const existingShifts = Array.from(
                        document.querySelectorAll('#shiftList .shift-item')
                    ).map(el => ({
                        id_schedule: parseInt(el.dataset.idSchedule),
                        work_date:   el.dataset.workDate  ?? '',
                        start_hour:  el.dataset.startHour ?? '',
                        end_hour:    el.dataset.endHour   ?? '',
                    }));

                    // Odśwież mapę ocen i tabelę pracowników w tle
                    await _refreshAfterEvalChange();

                    // Wyczyść formularz (gwiazdki, notatka, alerty)
                    _resetEvalModal();
                    evalScheduleId = null;

                    // Przerenderuj listę zmian z odświeżonymi danymi z mapy
                    // (kafelki pokażą zaktualizowane gwiazdki/notatki bez zamykania modalu)
                    _renderShiftList(existingShifts);
                }
            } catch (e) {
                showSnack(false);
                console.error(e);
            } finally {
                saveBtn.disabled = false;
                saveBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{{ translations.save ?? 'Zapisz ocenę' }}';
            }
        });

        // ── Usunięcie oceny ───────────────────────────────────────────────────
        document.getElementById('evalDeleteBtn').addEventListener('click', async () => {
            const evalId = parseInt(document.getElementById('evalDeleteBtn').dataset.evalId);
            if (!evalId) return;

            const confirmed = confirm('{{ translations.delete_evaluation_confirm ?? 'Czy na pewno chcesz usunąć tę ocenę?' }}');
            if (!confirmed) return;

            const deleteBtn = document.getElementById('evalDeleteBtn');
            deleteBtn.disabled = true;

            try {
                const res = await api(`/ajax/evaluations/${evalId}`, { method: 'DELETE' });

                showSnack(res.success);
                if (res.success) {
                    // Odczytaj kafelki z DOM przed resetem
                    const existingShifts = Array.from(
                        document.querySelectorAll('#shiftList .shift-item')
                    ).map(el => ({
                        id_schedule: parseInt(el.dataset.idSchedule),
                        work_date:   el.dataset.workDate  ?? '',
                        start_hour:  el.dataset.startHour ?? '',
                        end_hour:    el.dataset.endHour   ?? '',
                    }));

                    // Odśwież mapę ocen i tabelę pracowników w tle
                    await _refreshAfterEvalChange();

                    // Wyczyść formularz
                    _resetEvalModal();
                    evalScheduleId = null;

                    // Przerenderuj kafelki — usunięta ocena zniknie z podglądu
                    _renderShiftList(existingShifts);
                }
            } catch (e) {
                showSnack(false);
                console.error(e);
            } finally {
                deleteBtn.disabled = false;
            }
        });

    </script>
{% endblock %}