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

{% block title %}{{ translations.employees ?? 'Pracownicy' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .filter-bar { background:#f8f9fa; border-radius:.75rem; padding:1rem 1.25rem; }
        .sort-th { cursor:pointer; user-select:none; white-space:nowrap; }
        .sort-th:hover { background:rgba(0,0,0,.04); }
        .sort-th .bi { font-size:.75rem; opacity:.45; margin-left:.25rem; }
        .sort-th.asc .bi-arrow-up    { opacity:1; }
        .sort-th.desc .bi-arrow-down { opacity:1; }
        .emp-row { transition: background .1s; }
        .emp-row[data-status="inactive"] td { opacity:.65; }
        .emp-row[data-status="inactive"]:hover td { opacity:1; }
        .status-dot { width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0; }
        .status-dot.active   { background:#198754; }
        .status-dot.inactive { background:#adb5bd; }

        /* ── Gwiazdki ocen ── */
        .stars-filled { color:#fbbf24; letter-spacing:.05em; }
        .stars-empty  { color:#d1d5db; letter-spacing:.05em; }
        .eval-badge {
            display:inline-flex; align-items:center; gap:3px;
            font-size:.7rem; font-weight:600; border-radius:20px;
            padding:2px 7px; white-space:nowrap;
        }
        .eval-badge-count { background:#fef9c3; color:#854d0e; }
        .eval-badge-notes { background:#eff6ff; color:#1d4ed8; }

        /* ── Modal ocen ── */
        .eval-stat-card {
            border-radius: 10px;
            padding: .9rem 1rem;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,.07);
        }
        .eval-stat-card .stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
        .eval-stat-card .stat-label { font-size: .72rem; color: #6b7280; margin-top: 2px; }
        .eval-history-row {
            border-bottom: 1px solid #f3f4f6;
            padding: .6rem 0;
            font-size: .875rem;
        }
        .eval-history-row:last-child { border-bottom: none; }
        .eval-stars-lg { font-size: 1.1rem; letter-spacing: .05em; }
        .eval-note-text {
            font-size: .8rem; color: #6b7280;
            border-left: 3px solid #e5e7eb;
            padding-left: .6rem;
            margin-top: .25rem;
        }
        .schedule-link-banner {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 10px;
            padding: .85rem 1rem;
        }

        /* ── Badges stanowisk ── */
        .ws-badge {
            font-size: .7rem; font-weight: 500;
            background: #e0f2fe; color: #0369a1;
            border: 1px solid #bae6fd;
            border-radius: 20px;
            padding: 2px 8px;
            white-space: nowrap;
        }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.employees ?? 'Pracownicy' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.employees_subtitle ?? '' }}</p>
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h4 class="card-title mb-0">{{ translations.employees ?? 'Pracownicy' }}</h4>
                <a href="{{ root }}/employees/new" class="btn btn-success btn-sm">
                    <i class="bi bi-person-plus"></i> {{ translations.add_employee ?? 'Dodaj pracownika' }}
                </a>
            </div>

            <div class="card-body pb-2">

                {# ── Pasek filtrów ── #}
                <div class="filter-bar mb-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-12 col-md-3">
                            <label class="form-label mb-1 small">{{ translations.search ?? 'Szukaj' }}</label>
                            <input type="text" id="emp_search" class="form-control form-control-sm"
                                   placeholder="{{ translations.search_employees ?? 'Imię, nazwisko, login…' }}">
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label mb-1 small">{{ translations.workstation ?? 'Stanowisko' }}</label>
                            <select id="filter_workstation" class="form-select form-select-sm">
                                <option value="">{{ translations.all ?? 'Wszystkie' }}</option>
                                {% for ws in workstations %}
                                    <option value="{{ ws.getId() }}">{{ ws.getName() }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label mb-1 small">{{ translations.status ?? 'Status' }}</label>
                            <select id="filter_status" class="form-select form-select-sm">
                                <option value="">{{ translations.all_employees ?? 'Wszyscy' }}</option>
                                <option value="active" selected>{{ translations.active_plural ?? 'Aktywni' }}</option>
                                <option value="inactive">{{ translations.inactive_plural ?? 'Nieaktywni' }}</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label mb-1 small">{{ translations.lang ?? 'Język' }}</label>
                            <select id="filter_lang" class="form-select form-select-sm">
                                <option value="">{{ translations.all ?? 'Wszystkie' }}</option>
                                {% set langs = [] %}
                                {% for emp in employees %}
                                    {% if emp.getLangCode() and emp.getLangCode() not in langs %}
                                        {% set langs = langs|merge([emp.getLangCode()]) %}
                                    {% endif %}
                                {% endfor %}
                                {% for lang in langs %}
                                    <option value="{{ lang }}">{{ lang|upper }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label mb-1 small">{{ translations.min_rating ?? 'Min. ocena' }}</label>
                            <select id="filter_rating" class="form-select form-select-sm">
                                <option value="">{{ translations.all ?? 'Wszystkie' }}</option>
                                <option value="1">★ ≥ 1</option>
                                <option value="2">★★ ≥ 2</option>
                                <option value="3">★★★ ≥ 3</option>
                                <option value="4">★★★★ ≥ 4</option>
                                <option value="5">★★★★★ = 5</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-1 d-flex align-items-end">
                            <button class="btn btn-outline-secondary btn-sm w-100" id="clear_filters" title="{{ translations.clear_filters ?? 'Wyczyść filtry' }}">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                    </div>
                </div>

                {# ── Licznik ── #}
                <div class="d-flex justify-content-between align-items-center mb-2 px-1">
                    <span class="small text-muted">
                        {{ translations.showing ?? 'Wyświetlono' }}: <strong id="visible_count">0</strong> / {{ employees|length }}
                    </span>
                </div>

                {# ── Tabela ── #}
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="emp_table">
                        <thead class="table-light">
                            <tr>
                                <th style="width:42px;"></th>
                                <th class="sort-th" data-col="name">
                                    {{ translations.full_name ?? 'Imię i nazwisko' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="sort-th" data-col="workstation">
                                    {{ translations.workstation ?? 'Stanowisko' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="sort-th d-none d-md-table-cell" data-col="lang">
                                    {{ translations.lang ?? 'Język' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="sort-th d-none d-md-table-cell" data-col="franchise_role">
                                    {{ translations.franchise_role ?? 'Typ pracownika' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="sort-th" data-col="status">
                                    {{ translations.status ?? 'Status' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="sort-th d-none d-lg-table-cell text-end" data-col="salary">
                                    {{ translations.salary ?? 'Stawka' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="sort-th d-none d-lg-table-cell" data-col="rating">
                                    {{ translations.rating ?? 'Ocena' }}
                                    <i class="bi bi-arrow-up"></i><i class="bi bi-arrow-down"></i>
                                </th>
                                <th class="text-end">{{ translations.actions ?? 'Akcje' }}</th>
                            </tr>
                        </thead>
                        <tbody id="emp_tbody">
                            {% for employee in employees %}
                            {% set isInactive = employee.isSoftDelete() %}
                            <tr class="emp-row"
                                data-status="{{ isInactive ? 'inactive' : 'active' }}"
                                data-name="{{ (employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()))|lower }}"
                                data-login="{{ employee.getLogin()|lower }}"
                                data-workstation="{{ employee.getWorkstationString()|lower }}"
                                data-workstation-ids="{% for ws in employee.getWorkstations() %}{{ ws.getId() }}{% if not loop.last %},{% endif %}{% endfor %}"
                                data-lang="{{ employee.getLangCode()|lower }}"
                                data-sort-name="{{ employee.getSurname()|lower ~ ' ' ~ employee.getName()|lower }}"
                                data-sort-workstation="{{ employee.getWorkstationString()|lower }}"
                                data-sort-lang="{{ employee.getLangCode()|lower }}"
                                data-sort-status="{{ isInactive ? '1' : '0' }}"
                                data-sort-franchise_role="{{ employee.getFranchiseRole()|lower }}"
                                data-sort-rating=""
                                data-avg-rating=""
                                data-employee-id="{{ employee.getId() }}"
                                data-money-per-hour="{{ employee.getMoneyPerHour() ?? '' }}"
                                data-sort-salary="{{ employee.getMoneyPerHour() ?? 0 }}">

                                <td class="ps-2 pe-1">
                                    {% if isInactive %}
                                        <button type="button"
                                                class="btn btn-success btn-sm"
                                                onclick="toggleActive({{ employee.getId() }}, false)"
                                                title="{{ translations.activate ?? 'Aktywuj' }}">
                                            <i class="bi bi-person-check"></i>
                                        </button>
                                    {% else %}
                                        <button type="button"
                                                class="btn btn-outline-danger btn-sm"
                                                onclick="toggleActive({{ employee.getId() }}, true)"
                                                title="{{ translations.deactivate ?? 'Dezaktywuj' }}">
                                            <i class="bi bi-person-x"></i>
                                        </button>
                                    {% endif %}
                                </td>

                                <td>
                                    <a href="{{ root }}/employees/{{ employee.getId() }}" class="fw-semibold text-decoration-none d-flex align-items-center gap-2">
                                        <span class="status-dot {{ isInactive ? 'inactive' : 'active' }}"></span>
                                        {{ employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()) }}
                                    </a>
                                    {% if employee.getLogin() %}
                                        <div class="text-muted small">{{ employee.getLogin() }}</div>
                                    {% endif %}
                                </td>
                                <td>
                                    {% set empWorkstations = employee.getWorkstations() %}
                                    {% if empWorkstations is empty %}
                                        <span class="text-muted small">—</span>
                                    {% else %}
                                        <div class="d-flex flex-wrap gap-1">
                                            {% for ws in empWorkstations %}
                                                <span class="badge ws-badge">{{ ws.getName() }}</span>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="d-none d-md-table-cell">
                                    {% if employee.getLangCode() %}
                                        <span class="badge bg-light text-dark border">{{ employee.getLangCode()|upper }}</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td class="d-none d-md-table-cell">
                                    {% set role = employee.getFranchiseRole() %}
                                    {% if role == 'franchisee' %}
                                        <span class="badge bg-primary">{{ translations.franchise_role_franchisee ?? 'Franczyzobiorca' }}</span>
                                    {% elseif role == 'franchise_partner' %}
                                        <span class="badge bg-warning text-dark">{{ translations.franchise_role_franchise_partner ?? 'Partner franczyzowy' }}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ translations.franchise_role_employee ?? 'Pracownik' }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if isInactive %}
                                        <span class="badge bg-secondary">{{ translations.inactive ?? 'Nieaktywny' }}</span>
                                    {% else %}
                                        <span class="badge bg-success">{{ translations.active ?? 'Aktywny' }}</span>
                                    {% endif %}
                                </td>
                                {# Kolumna stawki godzinowej #}
                                <td class="d-none d-lg-table-cell text-end pe-3">
                                    {% if employee.getMoneyPerHour() > 0 %}
                                        <span class="text-nowrap fw-semibold">{{ employee.getMoneyPerHour() }} €/h</span>
                                    {% else %}
                                        <span class="text-muted small">—</span>
                                    {% endif %}
                                </td>
                                {# Kolumna oceny — wypełniana przez JS po załadowaniu summary #}
                                <td class="d-none d-lg-table-cell eval-cell" id="eval-cell-{{ employee.getId() }}">
                                    <span class="text-muted small">—</span>
                                </td>
                                <td class="text-end">
                                    <div class="d-flex gap-1 justify-content-end">
                                        <a href="{{ root }}/employees/{{ employee.getId() }}"
                                           class="btn btn-outline-secondary btn-sm"
                                           title="{{ translations.view ?? 'Podgląd' }}">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a href="{{ root }}/employees/{{ employee.getId() }}/edit"
                                           class="btn btn-warning btn-sm"
                                           title="{{ translations.edit ?? 'Edytuj' }}">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        <button type="button"
                                                class="btn btn-outline-warning btn-sm"
                                                title="{{ translations.evaluations ?? 'Oceny pracownika' }}"
                                                onclick="openEvalModal(
                                                    {{ employee.getId() }},
                                                    '{{ (employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()))|e('js') }}'
                                                )">
                                            <i class="bi bi-star"></i>
                                        </button>
                                        {% if role != 'franchisee' %}
                                        <button type="button"
                                                class="btn btn-outline-success btn-sm"
                                                title="{{ translations.salary ?? 'Stawka godzinowa' }}"
                                                onclick="openSalaryModal(
                                                    {{ employee.getId() }},
                                                    '{{ (employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()))|e('js') }}'
                                                )">
                                            <i class="bi bi-cash"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if employees|length == 0 %}
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-people fs-2"></i>
                        <p class="mt-2">{{ translations.no_employees ?? 'Brak pracowników.' }}</p>
                    </div>
                {% endif %}

                <div id="no_results" class="text-center text-muted py-4" style="display:none;">
                    <i class="bi bi-search fs-3"></i>
                    <p class="mt-2">{{ translations.no_results ?? 'Brak wyników dla podanych filtrów.' }}</p>
                </div>

            </div>
        </div>
    </div>
</div>

{# ── Modal ocen pracownika ───────────────────────────────────────────── #}
<div class="modal fade" id="modalEvalHistory" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header border-0 pb-0">
                <div>
                    <h5 class="modal-title mb-0 fw-semibold" id="evalModalEmployeeName">
                        <i class="bi bi-star-fill text-warning me-2"></i>
                        <span id="evalModalNameText"></span>
                    </h5>
                    <div class="text-muted small mt-1">
                        {{ translations.evaluations ?? 'Historia ocen' }}
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body pt-2">

                {# Spinner ładowania #}
                <div id="evalModalLoading" class="text-center py-5">
                    <div class="spinner-border text-warning" role="status"></div>
                    <p class="text-muted mt-2 small">{{ translations.loading ?? 'Ładowanie…' }}</p>
                </div>

                {# Treść — wypełniana przez JS #}
                <div id="evalModalContent" class="d-none">

                    {# KPI cards #}
                    <div class="row g-2 mb-4" id="evalKpiRow">
                        <div class="col-6 col-md-3">
                            <div class="eval-stat-card text-center">
                                <div class="stat-value text-warning" id="evalKpiAvg">—</div>
                                <div class="stat-label">{{ translations.avg_rating ?? 'Śr. ocena' }}</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="eval-stat-card text-center">
                                <div class="stat-value text-primary" id="evalKpiCount">—</div>
                                <div class="stat-label">{{ translations.evaluations_count ?? 'Liczba ocen' }}</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="eval-stat-card text-center">
                                <div class="stat-value text-success" id="evalKpiBest">—</div>
                                <div class="stat-label">{{ translations.best_rating ?? 'Najlepsza' }}</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="eval-stat-card text-center">
                                <div class="stat-value text-danger" id="evalKpiWorst">—</div>
                                <div class="stat-label">{{ translations.worst_rating ?? 'Najgorsza' }}</div>
                            </div>
                        </div>
                    </div>

                    {# Baner — przejście do grafiku #}
                    <div class="schedule-link-banner mb-4 d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <div class="fw-semibold text-primary small">
                                <i class="bi bi-info-circle me-1"></i>
                                {{ translations.eval_from_schedule_info ?? 'Oceny wystawia się z poziomu grafiku, dla wybranego dnia i zmiany.' }}
                            </div>
                        </div>
                        <a id="evalScheduleLink"
                           href="#"
                           class="btn btn-primary btn-sm flex-shrink-0">
                            <i class="bi bi-calendar-week me-1"></i>
                            {{ translations.go_to_schedule ?? 'Przejdź do grafiku' }}
                        </a>
                    </div>

                    {# Lista ocen #}
                    <div id="evalHistoryList"></div>

                    {# Brak ocen #}
                    <div id="evalNoData" class="text-center text-muted py-4 d-none">
                        <i class="bi bi-star fs-2 d-block mb-2"></i>
                        {{ translations.no_evaluations_yet ?? 'Brak ocen dla tego pracownika.' }}
                        <div class="mt-2 small">
                            {{ translations.eval_from_schedule_info ?? 'Oceny wystawia się z poziomu grafiku, dla wybranego dnia i zmiany.' }}
                        </div>
                        <a id="evalScheduleLinkEmpty"
                           href="#"
                           class="btn btn-outline-primary btn-sm mt-3">
                            <i class="bi bi-calendar-week me-1"></i>
                            {{ translations.go_to_schedule ?? 'Przejdź do grafiku' }}
                        </a>
                    </div>

                </div>
            </div>

            <div class="modal-footer border-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    {{ translations.close ?? 'Zamknij' }}
                </button>
            </div>

        </div>
    </div>
</div>
{# ── END Modal ocen ──────────────────────────────────────────────────── #}

{# ── Modal stawki godzinowej ─────────────────────────────────────────────────────── #}
<div class="modal fade" id="modalSalary" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <div>
                    <h5 class="modal-title fw-semibold" id="salaryModalTitle">
                        <i class="bi bi-cash text-success me-2"></i>
                        <span id="salaryModalNameText"></span>
                    </h5>
                    <div class="text-muted small mt-1">
                        {{ translations.salary ?? 'Stawka godzinowa' }}
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <div class="mb-3">
                    <label class="form-label fw-semibold">
                        {{ translations.money_per_hour ?? 'Stawka' }} [&#8364;/h]
                    </label>
                    <input type="number" id="salaryInput" class="form-control"
                           min="0" step="0.01"
                           placeholder="0.00">
                </div>
                <div id="salaryFeedback" class="d-none"></div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    {{ translations.cancel ?? 'Anuluj' }}
                </button>
                <button type="button" class="btn btn-success" id="salarySubmitBtn"
                        onclick="saveSalary()">
                    <i class="bi bi-check-lg me-1"></i>{{ translations.save ?? 'Zapisz' }}
                </button>
            </div>
        </div>
    </div>
</div>
{# ── END Modal stawki ─────────────────────────────────────────────────────────────────── #}
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const tbody             = document.getElementById('emp_tbody');
    const searchInp         = document.getElementById('emp_search');
    const filterWorkstation = document.getElementById('filter_workstation');
    const filterStatus      = document.getElementById('filter_status');
    const filterLang        = document.getElementById('filter_lang');
    const filterRating      = document.getElementById('filter_rating');
    const clearBtn          = document.getElementById('clear_filters');
    const countEl           = document.getElementById('visible_count');
    const noResults         = document.getElementById('no_results');

    // ── Filtrowanie ─────────────────────────────────────────────────────────
    function applyFilters() {
        const q          = (searchInp.value || '').trim().toLowerCase();
        const wsId       = filterWorkstation.value || '';
        const status     = filterStatus.value || '';
        const lang       = (filterLang.value  || '').toLowerCase();
        const minRating  = filterRating.value ? parseFloat(filterRating.value) : null;
        let visible      = 0;

        tbody.querySelectorAll('tr.emp-row').forEach(row => {
            const matchSearch = !q ||
                (row.dataset.name  || '').includes(q) ||
                (row.dataset.login || '').includes(q);
            const matchWs     = !wsId || (row.dataset.workstationIds || '').split(',').includes(wsId);
            const matchStatus = !status || row.dataset.status === status;
            const matchLang   = !lang   || (row.dataset.lang || '') === lang;

            let matchRating = true;
            if (minRating !== null) {
                const avg = parseFloat(row.dataset.avgRating);
                matchRating = !isNaN(avg) && avg >= minRating;
            }

            const show = matchSearch && matchWs && matchStatus && matchLang && matchRating;
            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        countEl.textContent = String(visible);
        noResults.style.display = visible === 0 && tbody.querySelectorAll('tr.emp-row').length > 0 ? '' : 'none';
    }

    searchInp.addEventListener('input', applyFilters);
    filterWorkstation.addEventListener('change', applyFilters);
    filterStatus.addEventListener('change', applyFilters);
    filterLang.addEventListener('change', applyFilters);
    filterRating.addEventListener('change', applyFilters);

    clearBtn.addEventListener('click', () => {
        searchInp.value         = '';
        filterWorkstation.value = '';
        filterStatus.value      = 'active';
        filterLang.value        = '';
        filterRating.value      = '';
        applyFilters();
    });

    applyFilters();

    // ── Sortowanie ──────────────────────────────────────────────────────────
    let sortCol = null;
    let sortDir = 'asc';

    document.querySelectorAll('.sort-th').forEach(th => {
        th.addEventListener('click', () => {
            const col = th.dataset.col;
            if (sortCol === col) {
                sortDir = sortDir === 'asc' ? 'desc' : 'asc';
            } else {
                sortCol = col;
                sortDir = 'asc';
            }

            document.querySelectorAll('.sort-th').forEach(h => h.classList.remove('asc', 'desc'));
            th.classList.add(sortDir);

            const rows = Array.from(tbody.querySelectorAll('tr.emp-row'));
            rows.sort((a, b) => {
                let av, bv;
                if (col === 'rating') {
                    av = parseFloat(a.dataset.avgRating) || 0;
                    bv = parseFloat(b.dataset.avgRating) || 0;
                    return sortDir === 'asc' ? av - bv : bv - av;
                }
                if (col === 'salary') {
                    av = parseFloat(a.dataset.sortSalary) || 0;
                    bv = parseFloat(b.dataset.sortSalary) || 0;
                    return sortDir === 'asc' ? av - bv : bv - av;
                }
                av = (a.dataset['sort' + col.charAt(0).toUpperCase() + col.slice(1)] || '');
                bv = (b.dataset['sort' + col.charAt(0).toUpperCase() + col.slice(1)] || '');
                return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
            });
            rows.forEach(r => tbody.appendChild(r));
        });
    });

    // ── Wczytanie podsumowania ocen ─────────────────────────────────────────
    function renderStars(avg) {
        const full  = Math.round(avg);
        const empty = 5 - full;
        return `<span class="stars-filled">${'★'.repeat(full)}</span><span class="stars-empty">${'★'.repeat(empty)}</span>`;
    }

    api('/ajax/employees/evaluation-summary', { method: 'GET' })
        .then(res => {
            if (!res.success || !res.data) return;

            const summary = res.data;

            tbody.querySelectorAll('tr.emp-row').forEach(row => {
                const empId = parseInt(row.dataset.employeeId);
                const cell  = document.getElementById('eval-cell-' + empId);
                if (!cell) return;

                const s = summary[empId] || summary[String(empId)];

                if (!s || s.eval_count === 0) {
                    // Brak ocen — link do grafiku
                    cell.innerHTML = `<span class="text-muted small">—</span>`;
                    row.dataset.avgRating  = '';
                    row.dataset.sortRating = '0';
                    return;
                }

                const avg      = parseFloat(s.avg_rating).toFixed(1);
                const starsHtml = renderStars(Math.round(s.avg_rating));
                const countBadge = `<span class="eval-badge eval-badge-count ms-1"
                    title="{{ translations.evaluations_count ?? 'Liczba ocen' }}: ${s.eval_count}">
                    ${s.eval_count}×
                </span>`;
                const noteBadge = s.has_notes
                    ? `<span class="eval-badge eval-badge-notes ms-1"
                        title="{{ translations.has_notes ?? 'Zawiera notatki' }}">
                        <i class="bi bi-chat-text-fill"></i>
                       </span>`
                    : '';
                const lastDate = s.last_eval_date
                    ? `<div class="text-muted" style="font-size:.7rem;margin-top:2px;">${s.last_eval_date}</div>`
                    : '';

                cell.innerHTML = `
                    <div class="d-flex align-items-center gap-1 flex-wrap">
                        ${starsHtml}
                        <span class="small fw-semibold ms-1">${avg}</span>
                        ${countBadge}${noteBadge}
                    </div>
                    ${lastDate}`;

                row.dataset.avgRating  = avg;
                row.dataset.sortRating = avg;
            });

            // Ponów filtrowanie bo kolumna oceny jest teraz wypełniona
            applyFilters();
        })
        .catch(err => console.warn('Nie udało się załadować podsumowania ocen:', err));

    // ── Dezaktywacja / aktywacja ─────────────────────────────────────────────
    window.toggleActive = function(employeeId, deactivate) {
        const title = deactivate
            ? '{{ translations.deactivate_confirm ?? "Dezaktywować pracownika?" }}'
            : '{{ translations.activate_confirm ?? "Aktywować pracownika?" }}';
        const confirmText = deactivate
            ? '{{ translations.yes_deactivate ?? "Tak, dezaktywuj" }}'
            : '{{ translations.yes_activate ?? "Tak, aktywuj" }}';

        Swal.fire({
            title, icon: 'warning', showCancelButton: true,
            confirmButtonColor: deactivate ? '#6c757d' : '#198754',
            cancelButtonColor: '#d33',
            confirmButtonText: confirmText,
            cancelButtonText: '{{ translations.cancel ?? "Anuluj" }}'
        }).then(result => {
            if (!result.isConfirmed) return;
            api('/ajax/employees/' + employeeId + '/status', {
                method: 'PATCH',
                data: { soft_delete: deactivate ? 1 : 0 }
            }).then(res => {
                if (res && (res.success || res.ok)) {
                    location.reload();
                } else {
                    Swal.fire('Error', (res && res.message) || '{{ translations.error ?? "Błąd" }}', 'error');
                }
            });
        });
    };

    // ── Modal historii ocen ──────────────────────────────────────────────────
    const evalHistoryModal = new bootstrap.Modal(document.getElementById('modalEvalHistory'));

    function _starsHtml(rating) {
        const r = Math.max(0, Math.min(5, Math.round(rating)));
        return `<span class="stars-filled">${'★'.repeat(r)}</span><span class="stars-empty">${'★'.repeat(5 - r)}</span>`;
    }

    function _escHtml(str) {
        return String(str ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    window.openEvalModal = async function(employeeId, employeeName) {
        // Reset
        document.getElementById('evalModalNameText').textContent = employeeName;
        document.getElementById('evalModalLoading').classList.remove('d-none');
        document.getElementById('evalModalContent').classList.add('d-none');

        // Link do grafiku bieżącego tygodnia z parametrem highlight
        const scheduleUrl = `{{ root }}/employees/schedule?highlight=${employeeId}`;
        document.getElementById('evalScheduleLink').href      = scheduleUrl;
        document.getElementById('evalScheduleLinkEmpty').href = scheduleUrl;

        evalHistoryModal.show();

        try {
            const res   = await api(`/ajax/employees/${employeeId}/evaluations`, { method: 'GET' });
            const evals = Array.isArray(res.data) ? res.data : [];

            document.getElementById('evalModalLoading').classList.add('d-none');
            document.getElementById('evalModalContent').classList.remove('d-none');

            if (!evals.length) {
                document.getElementById('evalKpiRow').classList.add('d-none');
                document.getElementById('evalNoData').classList.remove('d-none');
                document.getElementById('evalHistoryList').innerHTML = '';
                return;
            }

            document.getElementById('evalKpiRow').classList.remove('d-none');
            document.getElementById('evalNoData').classList.add('d-none');

            // ── KPI ──────────────────────────────────────────────────────────
            const ratings = evals.map(e => e.rating);
            const avg     = (ratings.reduce((s, r) => s + r, 0) / ratings.length);
            const best    = Math.max(...ratings);
            const worst   = Math.min(...ratings);

            document.getElementById('evalKpiAvg').innerHTML   = `${_starsHtml(avg)}<span class="ms-1 d-block">${avg.toFixed(2)}</span>`;
            document.getElementById('evalKpiCount').textContent = evals.length;
            document.getElementById('evalKpiBest').innerHTML  = `${_starsHtml(best)}<span class="ms-1 d-block">${best}</span>`;
            document.getElementById('evalKpiWorst').innerHTML = `${_starsHtml(worst)}<span class="ms-1 d-block">${worst}</span>`;

            // ── Lista — sortowana od najnowszej ──────────────────────────────
            const sorted = [...evals].sort((a, b) =>
                (b.evaluated_date + (b.start_hour ?? '')).localeCompare(a.evaluated_date + (a.start_hour ?? ''))
            );

            document.getElementById('evalHistoryList').innerHTML = sorted.map(ev => {
                const startH = (ev.start_hour ?? '').substring(0, 5);
                const endH   = (ev.end_hour   ?? '').substring(0, 5);
                const shiftHtml = startH
                    ? `<span class="badge bg-light text-dark border ms-2">${startH}–${endH}</span>`
                    : '';

                const noteHtml = ev.note && ev.note.trim()
                    ? `<div class="eval-note-text mt-1">${_escHtml(ev.note.trim())}</div>`
                    : '';

                const wasEdited = ev.updated_at && ev.updated_at !== ev.created_at;
                const editedBadge = wasEdited
                    ? `<span class="badge bg-light text-muted border ms-1" style="font-size:.65rem;"
                            title="{{ translations.last_updated ?? 'Ostatnia edycja' }}: ${_escHtml(ev.updated_at)}">
                            <i class="bi bi-pencil"></i> {{ translations.edited ?? 'edyt.' }}
                        </span>`
                    : '';

                const createdAt = ev.created_at
                    ? `<span class="text-muted ms-2" style="font-size:.72rem;"
                            title="{{ translations.added ?? 'Dodano' }}">
                            <i class="bi bi-clock me-1"></i>${_escHtml(ev.created_at)}
                        </span>`
                    : '';

                return `
                <div class="eval-history-row">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div class="d-flex align-items-center flex-wrap gap-1">
                            <span class="fw-semibold">${_escHtml(ev.evaluated_date ?? '')}</span>
                            ${shiftHtml}
                            ${editedBadge}
                            ${createdAt}
                        </div>
                        <div class="d-flex align-items-center gap-1">
                            <span class="eval-stars-lg">${_starsHtml(ev.rating)}</span>
                            <span class="fw-bold ms-1">${ev.rating}<span class="text-muted fw-normal">/5</span></span>
                        </div>
                    </div>
                    ${noteHtml}
                </div>`;
            }).join('');

        } catch (e) {
            document.getElementById('evalModalLoading').classList.add('d-none');
            document.getElementById('evalModalContent').classList.remove('d-none');
            document.getElementById('evalHistoryList').innerHTML =
                `<div class="alert alert-danger py-2 small">
                    <i class="bi bi-exclamation-triangle me-1"></i>{{ translations.error ?? 'Błąd' }}: ${_escHtml(e.message)}
                 </div>`;
            console.error(e);
        }
    };


    // ── Modal stawki godzinowej ───────────────────────────────────────────────────────────────────
    const salaryModal = new bootstrap.Modal(document.getElementById('modalSalary'));
    let _salaryEmployeeId = null;
    window.openSalaryModal = function(employeeId, employeeName) {
        _salaryEmployeeId = employeeId;
        document.getElementById('salaryModalNameText').textContent = employeeName;
        // Wczytaj aktualną stawkę z atrybutu data na wierszu
        const row = document.querySelector(`tr[data-employee-id="${employeeId}"]`);
        const currentSalary = row ? (row.dataset.moneyPerHour || '') : '';
        document.getElementById('salaryInput').value = currentSalary;
        // Reset feedback
        const fb = document.getElementById('salaryFeedback');
        fb.className = 'd-none';
        fb.textContent = '';
        salaryModal.show();
    };
    window.saveSalary = async function() {
        if (!_salaryEmployeeId) return;
        const input = document.getElementById('salaryInput');
        const value = input.value.trim();
        if (value === '' || isNaN(parseFloat(value)) || parseFloat(value) < 0) {
            const fb = document.getElementById('salaryFeedback');
            fb.textContent = '{{ translations.invalid_value ?? "Nieprawidłowa wartość" }}';
            fb.className = 'alert alert-warning py-2 small';
            return;
        }
        const btn = document.getElementById('salarySubmitBtn');
        btn.disabled = true;
        try {
            const res = await api(`/ajax/employees/${_salaryEmployeeId}`, {
                method: 'PATCH',
                data: { money_per_hour: parseFloat(value) }
            });
            if (res && (res.success || res.ok)) {
                // Zaktualizuj atrybut data na wierszu
                const row = document.querySelector(`tr[data-employee-id="${_salaryEmployeeId}"]`);
                if (row) row.dataset.moneyPerHour = value;
                salaryModal.hide();
                Swal.fire({
                    icon: 'success',
                    title: '{{ translations.saved ?? "Zapisano" }}',
                    timer: 1500,
                    showConfirmButton: false
                });
            } else {
                const fb = document.getElementById('salaryFeedback');
                fb.textContent = (res && res.message) || '{{ translations.error ?? "Błąd" }}';
                fb.className = 'alert alert-danger py-2 small';
            }
        } catch (e) {
            const fb = document.getElementById('salaryFeedback');
            fb.textContent = e.message || '{{ translations.error ?? "Błąd" }}';
            fb.className = 'alert alert-danger py-2 small';
            console.error(e);
        } finally {
            btn.disabled = false;
        }
    };
});
</script>
{% endblock %}