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

{% block title %}{{ translations.employee_position }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.employee_position }}</h3>
        <p class="text-subtitle text-muted">{{ translations.employee_position_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">
                    <h4 class="card-title">{{ translations.inserted_employee_positions }}</h4>

                    <div class="d-flex gap-2 align-items-center">
                        <select id="app_type_filter" class="form-select form-select-sm" style="width:auto;">
                            {% set currentType = selected_app_type ?? 'EMPLOYEE' %}
                            {% for t in app_types ?? ['EMPLOYEE','PANEL','ADMIN','CONSULTANT'] %}
                                <option value="{{ t }}" {% if t == currentType %}selected{% endif %}>
                                    {{ translations['app_type_' ~ t]|default(t) }}
                                </option>
                            {% endfor %}
                        </select>

                        {% if (selected_app_type ?? 'EMPLOYEE') == 'CONSULTANT' %}
                            <button class="btn btn-outline-info btn-sm" id="area_templates_btn"
                                    title="{{ translations.area_templates_title|default('Szablony opisów obszarów') }}">
                                <i class="bi bi-card-list me-1"></i>
                                {{ translations.area_templates|default('Szablony opisów') }}
                            </button>
                        {% endif %}

                        <button class="btn btn-success btn-sm" id="add_position_btn">
                            <i class="bi bi-plus"></i> {{ translations.add }}
                        </button>
                    </div>
                </div>

                <div class="card-content">
                    <div class="card-body px-3 py-4-5">

                        <table class="table text-sm">
                            <thead>
                            <tr>
                                {% set currentType = selected_app_type ?? 'EMPLOYEE' %}
                                <th style="width:{{ currentType == 'CONSULTANT' ? '22%' : '30%' }}">{{ translations.name }}</th>
                                <th style="width:12%">{{ translations.app_type|default('Type') }}</th>
                                {% if currentType == 'CONSULTANT' %}
                                    <th style="width:28%">{{ translations.consultant_responsibility_areas|default('Obszary odpowiedzialności') }}</th>
                                {% endif %}
                                <th style="width:{{ currentType == 'CONSULTANT' ? '28%' : '48%' }}">{{ translations.description }}</th>
                                <th style="width:10%">{{ translations.action }}</th>
                            </tr>
                            </thead>

                            <tbody>
                            {% if positions|length == 0 %}
                                <tr>
                                    <td colspan="{{ currentType == 'CONSULTANT' ? 5 : 4 }}" class="text-center">
                                        {{ translations.no_positions_found }}
                                    </td>
                                </tr>
                            {% else %}

                                {% for position in positions %}
                                    <tr class="position-row"
                                        data-id="{{ position.getId() }}"
                                        data-app-type="{{ position.getAppType() }}"
                                        data-is-consultant="{{ position.getAppType() == 'CONSULTANT' ? '1' : '0' }}"
                                        {% if currentType == 'CONSULTANT' %}
                                            data-areas="{{ position.getConsultantAreas()|json_encode }}"
                                        {% endif %}>
                                        <td>
                                            <strong>{{ position.getName() }}</strong><br>
                                            <small class="text-muted">{{ translations.click_to_expand }}</small>
                                        </td>

                                        <td>
                                            <span class="badge bg-light-secondary">
                                                {{ translations['app_type_' ~ position.getAppType()]|default(position.getAppType()) }}
                                            </span>
                                        </td>

                                        {% if currentType == 'CONSULTANT' %}
                                            <td id="consultant_areas_badges_{{ position.getId() }}">
                                                {# Wypełniane przez JS z data-areas — bez dodatkowego AJAX #}
                                            </td>
                                        {% endif %}

                                        <td>{{ position.getDescription() }}</td>

                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-warning btn-sm edit_position_btn"
                                                        data-id="{{ position.getId() }}"
                                                        data-name="{{ position.getName() }}"
                                                        data-description="{{ position.getDescription() }}"
                                                        data-app-type="{{ position.getAppType() }}">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                {% if currentType == 'CONSULTANT' %}
                                                    <button class="btn btn-info btn-sm manage_consultant_areas_btn"
                                                            data-id="{{ position.getId() }}"
                                                            data-name="{{ position.getName() }}"
                                                            title="{{ translations.consultant_responsibility_areas|default('Obszary odpowiedzialności') }}">
                                                        <i class="bi bi-tags"></i>
                                                    </button>
                                                {% endif %}
                                                <button class="btn btn-secondary btn-sm download_position_pdf_btn"
                                                        data-id="{{ position.getId() }}">
                                                    <i class="bi bi-file-earmark-arrow-down"></i>
                                                </button>
                                                <button class="btn btn-danger btn-sm delete_position_btn"
                                                        data-id="{{ position.getId() }}"
                                                        data-name="{{ position.getName() }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr class="position-levels-container d-none" data-position-id="{{ position.getId() }}">
                                        <td colspan="{{ currentType == 'CONSULTANT' ? 5 : 4 }}">

                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6 class="mb-0">{{ translations.levels_in_this_position }}</h6>

                                                <a href="{{ root }}/positions/{{ position.getId() }}/levels/new"
                                                   class="btn btn-primary btn-sm">
                                                    <i class="bi bi-plus"></i> {{ translations.add_level }}
                                                </a>
                                            </div>

                                            <table class="table table-bordered text-sm mb-2">
                                                <thead>
                                                <tr>
                                                    <th style="width: 5%"></th>
                                                    <th style="width: 25%">{{ translations.level_name }}</th>
                                                    <th style="width: 50%">{{ translations.level_description }}</th>
                                                    <th style="width: 20%">{{ translations.action }}</th>
                                                </tr>
                                                </thead>

                                                <tbody id="position_levels_body_{{ position.getId() }}">
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted">
                                                        {{ translations.loading_levels }}
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>

                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="{{ currentType == 'CONSULTANT' ? 5 : 4 }}" class="text-center">
                                            {{ translations.no_positions_found }}
                                        </td>
                                    </tr>
                                {% endfor %}

                            {% endif %}
                            </tbody>

                        </table>

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

    {% include "operational_framework/organisational_structure/position/modals/position_modal.twig" %}
    {% include "operational_framework/organisational_structure/position/modals/position_level_competencies_modal.twig" %}
    {% include "operational_framework/organisational_structure/position/modals/consultant_areas_modal.twig" %}
    {% if (selected_app_type ?? 'EMPLOYEE') == 'CONSULTANT' %}
        {% include "operational_framework/organisational_structure/position/modals/consultant_area_templates_modal.twig" %}
    {% endif %}

{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            let POSITION_MODAL_MODE = 'add';
            let EDIT_POSITION_ID = null;

            const positionModalEl = document.getElementById('positionModal');
            const positionForm = document.getElementById('position_form');
            const modalAppTypeSelect = document.getElementById('position_app_type');

            const addPositionBtn = document.getElementById('add_position_btn');

            const currentFilter = document.getElementById('app_type_filter')?.value || 'EMPLOYEE';
            modalAppTypeSelect.value = currentFilter;

            const modalNameInput = document.getElementById('position_name');
            const modalDescriptionInput = document.getElementById('position_description');

            // ================================
            // OTWARCIE MODALA — TWORZENIE NOWEJ ŚCIEŻKI
            // ================================
            addPositionBtn.addEventListener('click', function () {

                POSITION_MODAL_MODE = 'add';
                EDIT_POSITION_ID = null;

                // Reset formularza
                positionForm.reset();

                // Zmień tekst na "Zapisz"
                positionForm.querySelector('button[type="submit"]').textContent =
                    "{{ translations.save }}";

                // Pokaż modal
                const modal = new bootstrap.Modal(positionModalEl);
                modal.show();
            });


            // ================================
            // OTWARCIE MODALA — EDYCJA ŚCIEŻKI
            // ================================
            document.querySelectorAll('.edit_position_btn').forEach(btn => {
                btn.addEventListener('click', function () {

                    POSITION_MODAL_MODE = 'edit';
                    EDIT_POSITION_ID = this.dataset.id;

                    // Wypełnij pola
                    modalNameInput.value = this.dataset.name;
                    modalDescriptionInput.value = this.dataset.description;
                    modalAppTypeSelect.value = this.dataset.appType || 'EMPLOYEE';

                    // Zmień tekst przycisku
                    positionForm.querySelector('button[type="submit"]').textContent =
                        "{{ translations.edit }}";

                    // Pokaż modal
                    const modal = new bootstrap.Modal(positionModalEl);
                    modal.show();
                });
            });


            // ================================
            // ZAPIS (ADD / EDIT)
            // ================================
            positionForm.addEventListener('submit', async function (e) {
                e.preventDefault();

                const payload = {
                    name: modalNameInput.value,
                    description: modalDescriptionInput.value,
                    app_type: modalAppTypeSelect.value
                };

                // Prosta walidacja
                if (!payload.name) {
                    positionForm.classList.add('was-validated');
                    return;
                }

                let url = '/ajax/positions';
                let method = 'POST';

                if (POSITION_MODAL_MODE === 'edit') {
                    url = `/ajax/positions/${EDIT_POSITION_ID}`;
                    method = 'PATCH';
                }

                api(url, {method, data: payload})
                    .then(resp => {
                        if (resp.success || resp.ok) {
                            Swal.fire({
                                icon: 'success',
                                title: '{{ translations.success }}',
                                text: '{{ translations.operation_successful }}',
                                timer: 1500,
                                showConfirmButton: false
                            });

                            setTimeout(() => window.location.reload(), 1000);

                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error }}',
                                text: resp.message ?? '{{ translations.undefined_error_occurred }}'
                            });
                        }
                    })
                    .catch(err => {
                        console.error("API error:", err);
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error }}',
                            text: '{{ translations.no_api_connection }}'
                        });
                    });
            });


            // ================================
            // USUWANIE ŚCIEŻKI
            // ================================
            document.querySelectorAll('.delete_position_btn').forEach(btn => {
                btn.addEventListener('click', function () {

                    const id = this.dataset.id;
                    const name = this.dataset.name;

                    Swal.fire({
                        title: '{{ translations.are_you_sure }}',
                        text: '{{ translations.delete_confirmation }}: "' + name + '"',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ translations.yes_delete_it }}',
                        cancelButtonText: '{{ translations.cancel }}'
                    }).then((result) => {
                        if (result.isConfirmed) {

                            api(`/ajax/positions/${id}`, {method: 'DELETE'})
                                .then(resp => {
                                    if (resp.success) {
                                        Swal.fire({
                                            icon: 'success',
                                            title: '{{ translations.success }}',
                                            text: '{{ translations.deleted_successfully }}',
                                            timer: 1500,
                                            showConfirmButton: false
                                        });
                                        setTimeout(() => window.location.reload(), 1000);

                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: '{{ translations.error }}',
                                            text: resp.message ?? '{{ translations.undefined_error_occurred }}'
                                        });
                                    }
                                })
                                .catch(err => {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '{{ translations.error }}',
                                        text: '{{ translations.no_api_connection }}'
                                    });
                                });
                        }
                    });
                });
            });
            // ============================================================
            // 1) ROZWIJANIE ŚCIEŻKI — ŁADOWANIE JEJ ETAPÓW
            // ============================================================
            document.querySelectorAll('.position-row').forEach(row => {
                row.addEventListener('click', function (e) {

                    // jeśli kliknięto przyciski → ignoruj
                    if (e.target.closest("button")) return;
                    if (e.target.closest("a")) return;

                    const positionId = this.dataset.id;

                    const container = document.querySelector(
                        `.position-levels-container[data-position-id="${positionId}"]`
                    );

                    container.classList.toggle('d-none');

                    if (!container.classList.contains('d-none')) {
                        loadLevels(positionId);
                    }
                });
            });

            function loadLevels(positionId) {

                const tbody = document.getElementById(`position_levels_body_${positionId}`);
                tbody.innerHTML = `
            <tr><td colspan="4" class="text-center text-muted">
                {{ translations.loading_levels }}
            </td></tr>
            `;

                api(`/ajax/positions/${positionId}/levels`, {method: 'GET'})
                    .then(resp => {

                        const levels = resp.data;

                        if (levels.length === 0) {
                            tbody.innerHTML = `
                        <tr><td colspan="4" class="text-center text-muted">
                            {{ translations.no_records_found }}
                        </td></tr>
                    `;
                            return;
                        }

                        tbody.innerHTML = "";

                        levels.forEach(level => {

                            const row = document.createElement('tr');
                            row.innerHTML = `
                        <td class="text-center">
                            <button class="btn btn-sm btn-light move_up_btn" data-id="${level.id}" data-position="${positionId}">
                                <i class="bi bi-arrow-up"></i>
                            </button>
                            <button class="btn btn-sm btn-light move_down_btn" data-id="${level.id}" data-position="${positionId}">
                                <i class="bi bi-arrow-down"></i>
                            </button>
                        </td>

                        <td>${level.name}</td>
                        <td>${level.description ?? ""}</td>

                        <td>
                            <div class="btn-group">

                                <button class="btn btn-info btn-sm view_level_competencies_btn"
                                        data-id="${level.id}"
                                        data-name="${level.name}">
                                    <i class="bi bi-list-check"></i>
                                </button>

                                <a href="{{ root }}/positions/${positionId}/levels/${level.id}/edit"
                                   class="btn btn-warning btn-sm">
                                    <i class="bi bi-pencil"></i>
                                </a>



                                <button class="btn btn-secondary btn-sm download_level_pdf_btn"
                                        data-id="${level.id}">
                                    <i class="bi bi-file-earmark-arrow-down"></i>
                                </button>

                                <button class="btn btn-danger btn-sm delete_level_btn"
                                        data-id="${level.id}"
                                        data-name="${level.name}">
                                    <i class="bi bi-trash"></i>
                                </button>

                            </div>
                        </td>
                    `;

                            tbody.appendChild(row);
                        });

                    })
                    .catch(err => {
                        tbody.innerHTML = `
                    <tr><td colspan="4" class="text-center text-danger">
                        {{ translations.no_api_connection }}
                    </td></tr>
                `;
                    });
            }

            document.body.addEventListener('click', function (e) {
                if (e.target.closest('.delete_level_btn')) {
                    const btn = e.target.closest('.delete_level_btn');
                    const levelId = btn.dataset.id;
                    const levelName = btn.dataset.name;

                    Swal.fire({
                        title: '{{ translations.are_you_sure }}',
                        text: '{{ translations.delete_confirmation }}: "' + levelName + '"',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ translations.yes_delete_it }}',
                        cancelButtonText: '{{ translations.cancel }}'
                    }).then((result) => {
                        if (result.isConfirmed) {

                            api(`/ajax/position-levels/${levelId}`, {method: 'DELETE'})
                                .then(resp => {
                                    if (resp.success) {
                                        Swal.fire({
                                            icon: 'success',
                                            title: '{{ translations.success }}',
                                            text: '{{ translations.deleted_successfully }}',
                                            timer: 1500,
                                            showConfirmButton: false
                                        });
                                        setTimeout(() => window.location.reload(), 1000);

                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: '{{ translations.error }}',
                                            text: resp.message ?? '{{ translations.undefined_error_occurred }}'
                                        });
                                    }
                                })
                                .catch(err => {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '{{ translations.error }}',
                                        text: '{{ translations.no_api_connection }}'
                                    });
                                });
                        }
                    });
                }

                if (e.target.closest('.download_position_pdf_btn')) {
                    const btn = e.target.closest('.download_position_pdf_btn');

                    downloadPdf(`/ajax/positions/${btn.dataset.id}/pdf`, {}, `position_${btn.dataset.id}.pdf`);
                }

                if (e.target.closest('.download_level_pdf_btn')) {
                    const btn = e.target.closest('.download_level_pdf_btn');

                    downloadPdf(`/ajax/position-levels/${btn.dataset.id}/pdf`, {}, `career_level_${btn.dataset.id}.pdf`);
                }
            });

            // ============================================================
// VIEW STAGE COMPETENCIES (modal)
// ============================================================

            const levelCompetenciesModal = new bootstrap.Modal(
                document.getElementById("levelCompetenciesModal")
            );

            document.body.addEventListener("click", function (e) {
                const btn = e.target.closest(".view_level_competencies_btn");
                if (!btn) return; // jeśli to nie przycisk — ignoruj

                const levelId = btn.dataset.id;
                const levelName = btn.dataset.name;

                // ustawiamy nazwę etapu
                document.getElementById("levelCompetenciesStageName").textContent = levelName;

                const tbody = document.getElementById("levelCompetenciesBody");
                tbody.innerHTML = `
                    <tr>
                        <td colspan="3" class="text-center text-muted">
                            {{ translations.loading }}
                        </td>
                    </tr>
                `;

                // 1) pobieramy kompetencje z backendu
                api(`/ajax/position-levels/${levelId}/competencies`, { method: "GET" })
                    .then(resp => {

                        const data = resp.data;
                        if (!data || data.length === 0) {
                            tbody.innerHTML = `
                    <tr>
                        <td colspan="3" class="text-center text-muted">
                            {{ translations.no_competencies_assigned }}
                        </td>
                    </tr>
                `;
                            levelCompetenciesModal.show();
                            return;
                        }

                        tbody.innerHTML = "";

                        data.forEach(comp => {
                            tbody.innerHTML += `
                    <tr>
                        <td>${comp.category_name ?? ''}</td>
                        <td>${comp.subcategory_name ?? ''}</td>
                        <td>${comp.name}</td>
                    </tr>
                `;
                        });

                        levelCompetenciesModal.show();
                    })
                    .catch(() => {
                        tbody.innerHTML = `
                <tr>
                    <td colspan="3" class="text-center text-danger">
                        {{ translations.no_api_connection }}
                    </td>
                </tr>
            `;
                        levelCompetenciesModal.show();
                    });
            });

            document.body.addEventListener("click", function (e) {
                const upBtn = e.target.closest(".move_up_btn");
                const downBtn = e.target.closest(".move_down_btn");

                if (upBtn) {
                    const levelId = upBtn.dataset.id;
                    const positionId = upBtn.dataset.position;

                    api(`/ajax/position-levels/${levelId}/move-up`, { method: "PATCH" })
                        .then(() => loadLevels(positionId));
                }

                if (downBtn) {
                    const levelId = downBtn.dataset.id;
                    const positionId = downBtn.dataset.position;

                    api(`/ajax/position-levels/${levelId}/move-down`, { method: "PATCH" })
                        .then(() => loadLevels(positionId));
                }
            });

            const appTypeFilter = document.getElementById('app_type_filter');
            if (appTypeFilter) {
                appTypeFilter.addEventListener('change', function () {
                    const url = new URL(window.location.href);
                    url.searchParams.set('app_type', this.value);
                    window.location.href = url.toString();
                });
            }

            // ============================================================
            // BADGES OBSZARÓW — ładowanie na starcie dla CONSULTANT
            // ============================================================

            /**
             * Kolory badge per obszar — spójna paleta.
             */
            const AREA_BADGE_CLASS = {
                'strategy':              'bg-primary',
                'product':               'bg-success',
                'operational_activities':'bg-warning text-dark',
                'sales':                 'bg-danger',
                'app_development':       'bg-info text-dark',
                'social_media':          'bg-secondary',
            };

            // ── DEKLARACJE ZMIENNYCH (przed jakimkolwiek użyciem) ────────────
            let _consultantAreasPositionId = null;
            let _allAreas                  = [];
            /**
             * Mapa key→label zasilana przy pierwszym otwarciu modala.
             * Używana przez renderAreaBadges() i modal checkboxes.
             */
            let _areaLabelMap              = {};
            // ────────────────────────────────────────────────────────────────

            /**
             * Renderuje badges obszarów w komórce tabeli.
             * @param {HTMLElement} cell   Komórka <td>
             * @param {string[]}    keys   Klucze obszarów
             */
            function renderAreaBadges(cell, keys) {
                if (!keys || keys.length === 0) {
                    cell.innerHTML = '<span class="text-muted small fst-italic">{{ translations.no_areas_assigned|default("brak") }}</span>';
                    return;
                }
                cell.innerHTML = keys.map(key => {
                    const label = _areaLabelMap[key] ?? key.replace(/_/g, ' ');
                    return `<span class="badge ${AREA_BADGE_CLASS[key] ?? 'bg-secondary'} me-1 mb-1" style="font-size:.72em">${label}</span>`;
                }).join('');
            }

            /**
             * Renderuje badges dla wszystkich stanowisk CONSULTANT.
             * Dane obszarów z data-areas (serwer). Słownik tłumaczeń pobierany raz —
             * jeden AJAX niezależnie od liczby stanowisk, potem synchroniczne renderowanie.
             */
            async function loadAllConsultantAreaBadges() {
                const consultantRows = document.querySelectorAll('.position-row[data-is-consultant="1"]');
                if (consultantRows.length === 0) return;

                // Jeden call dla słownika — zasilamy _areaLabelMap przed renderowaniem
                if (_allAreas.length === 0) {
                    try {
                        const resp = await api('/ajax/consultant/responsibility-areas', { method: 'GET' });
                        _allAreas  = resp.data ?? [];
                        _allAreas.forEach(a => { _areaLabelMap[a.key] = a.label; });
                    } catch (e) {
                        // brak połączenia — badges pokażą klucze jako fallback
                    }
                }

                // Teraz _areaLabelMap jest wypełniony — renderujemy z tłumaczeniami
                consultantRows.forEach(row => {
                    const positionId = row.dataset.id;
                    const cell       = document.getElementById(`consultant_areas_badges_${positionId}`);
                    if (!cell) return;

                    let areas = [];
                    try { areas = JSON.parse(row.dataset.areas || '[]'); } catch (e) {}
                    renderAreaBadges(cell, areas);
                });
            }

            loadAllConsultantAreaBadges();


            const consultantAreasModalEl = document.getElementById('consultantAreasModal');
            const consultantAreasModal   = new bootstrap.Modal(consultantAreasModalEl);

            /**
             * Ładuje słownik obszarów i zaznaczone obszary dla stanowiska.
             * Aktualnie przypisane obszary pobierane z data-areas na wierszu (serwer) —
             * tylko jeden AJAX call dla słownika (z cache po pierwszym wywołaniu).
             */
            async function openConsultantAreasModal(positionId, positionName) {
                _consultantAreasPositionId = positionId;

                document.getElementById('consultantAreasPositionName').textContent = positionName;
                document.getElementById('consultantAreasLoading').classList.remove('d-none');
                document.getElementById('consultantAreasContent').classList.add('d-none');

                consultantAreasModal.show();

                try {
                    // Słownik — tylko gdy nie załadowany wcześniej
                    if (_allAreas.length === 0) {
                        const areasResp = await api('/ajax/consultant/responsibility-areas', { method: 'GET' });
                        _allAreas = areasResp.data ?? [];
                        _allAreas.forEach(a => { _areaLabelMap[a.key] = a.label; });
                    }

                    // Aktualnie przypisane obszary z data-areas na wierszu
                    const row = document.querySelector(`.position-row[data-id="${positionId}"]`);
                    let assigned = [];
                    try { assigned = JSON.parse(row?.dataset?.areas || '[]'); } catch(e) {}

                    const container = document.getElementById('consultantAreasCheckboxes');
                    container.innerHTML = '';

                    _allAreas.forEach(area => {
                        const isChecked = assigned.includes(area.key);
                        container.innerHTML += `
                            <div class="col-md-4">
                                <div class="form-check form-check-card border rounded p-3">
                                    <input class="form-check-input consultant-area-checkbox"
                                           type="checkbox"
                                           id="area_${area.key}"
                                           value="${area.key}"
                                           ${isChecked ? 'checked' : ''}>
                                    <label class="form-check-label fw-semibold" for="area_${area.key}">
                                        ${area.label}
                                    </label>
                                </div>
                            </div>
                        `;
                    });

                    document.getElementById('consultantAreasLoading').classList.add('d-none');
                    document.getElementById('consultantAreasContent').classList.remove('d-none');

                } catch (err) {
                    document.getElementById('consultantAreasLoading').innerHTML =
                        `<span class="text-danger">{{ translations.no_api_connection|default('Brak połączenia z API') }}</span>`;
                }
            }

            // Otwieranie modala po kliknięciu przycisku
            document.body.addEventListener('click', function (e) {
                const btn = e.target.closest('.manage_consultant_areas_btn');
                if (!btn) return;

                openConsultantAreasModal(btn.dataset.id, btn.dataset.name);
            });

            // Zapis obszarów
            document.getElementById('saveConsultantAreasBtn').addEventListener('click', function () {
                if (!_consultantAreasPositionId) return;

                const selected = Array.from(
                    document.querySelectorAll('.consultant-area-checkbox:checked')
                ).map(cb => cb.value);

                api(`/ajax/positions/${_consultantAreasPositionId}/consultant-areas`, {
                    method: 'PUT',
                    data: { areas: selected }
                })
                    .then(resp => {
                        if (resp.success) {
                            consultantAreasModal.hide();
                            Swal.fire({
                                icon: 'success',
                                title: '{{ translations.success|default("Sukces") }}',
                                text: '{{ translations.operation_successful|default("Operacja zakończona pomyślnie") }}',
                                timer: 1500,
                                showConfirmButton: false
                            });

                            // Odśwież badges i data-areas na wierszu
                            const cell = document.getElementById(`consultant_areas_badges_${_consultantAreasPositionId}`);
                            if (cell) renderAreaBadges(cell, selected);

                            // Zaktualizuj data-areas na wierszu, by kolejne otwarcia modala
                            // miały świeże dane bez AJAX
                            const row = document.querySelector(`.position-row[data-id="${_consultantAreasPositionId}"]`);
                            if (row) row.dataset.areas = JSON.stringify(selected);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error|default("Błąd") }}',
                                text: resp.message ?? '{{ translations.undefined_error_occurred|default("Wystąpił nieznany błąd") }}'
                            });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default("Błąd") }}',
                            text: '{{ translations.no_api_connection|default("Brak połączenia z API") }}'
                        });
                    });
            });

            // ============================================================
            // MODAL SZABLONÓW OBSZARÓW ODPOWIEDZIALNOŚCI
            // Dostępny wyłącznie gdy app_type == CONSULTANT
            // ============================================================
            {% if (selected_app_type ?? 'EMPLOYEE') == 'CONSULTANT' %}
            (function () {
                const areaTemplatesModalEl = document.getElementById('areaTemplatesModal');
                if (!areaTemplatesModalEl) return;

                const areaTemplatesModal = new bootstrap.Modal(areaTemplatesModalEl);
                let _tplCurrentKey  = null;   // aktualnie edytowany area_key
                let _tplTemplateMap = {};      // key → { description, duties[] }

                // ── Pomocniki ────────────────────────────────────────────
                function tplUpdateDutiesHint() {
                    const hint = document.getElementById('tpl_duties_empty_hint');
                    const rows = document.querySelectorAll('#tpl_duties_container .duty-row');
                    if (hint) hint.style.display = rows.length === 0 ? '' : 'none';
                }

                function tplAddDutyRow(value) {
                    const container = document.getElementById('tpl_duties_container');
                    const wrap = document.createElement('div');
                    wrap.className = 'd-flex gap-2 align-items-center duty-row';
                    wrap.innerHTML = `
                        <input type="text"
                               class="form-control form-control-sm duty-input"
                               value="${(value || '').replace(/"/g, '&quot;')}"
                               placeholder="{{ translations.duty_placeholder|default('Treść obowiązku…') }}">
                        <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0 remove-duty-btn">
                            <i class="bi bi-x"></i>
                        </button>`;
                    wrap.querySelector('.remove-duty-btn').addEventListener('click', function () {
                        wrap.remove();
                        tplUpdateDutiesHint();
                    });
                    container.appendChild(wrap);
                    tplUpdateDutiesHint();
                    wrap.querySelector('.duty-input').focus();
                }

                function tplCollectDuties() {
                    return Array.from(document.querySelectorAll('#tpl_duties_container .duty-input'))
                        .map(i => i.value.trim())
                        .filter(v => v !== '');
                }

                function tplShowForm(areaKey, areaLabel) {
                    _tplCurrentKey = areaKey;
                    const tpl = _tplTemplateMap[areaKey] || { description: '', duties: [] };

                    document.getElementById('tpl_form_area_label').textContent = areaLabel;
                    document.getElementById('tpl_description').value = tpl.description || '';
                    document.getElementById('tpl_duties_container').innerHTML = '';
                    (tpl.duties || []).forEach(d => tplAddDutyRow(d));
                    tplUpdateDutiesHint();

                    document.getElementById('tpl_empty_state').classList.add('d-none');
                    document.getElementById('tpl_empty_state').classList.remove('d-flex');
                    document.getElementById('tpl_form_wrap').classList.remove('d-none');

                    // Zaznacz aktywny element na liście
                    document.querySelectorAll('#tpl_area_key_list .area-key-item').forEach(el => {
                        el.classList.toggle('active', el.dataset.key === areaKey);
                    });
                }

                function tplHideForm() {
                    _tplCurrentKey = null;
                    document.getElementById('tpl_form_wrap').classList.add('d-none');
                    document.getElementById('tpl_empty_state').classList.remove('d-none');
                    document.getElementById('tpl_empty_state').classList.add('d-flex');
                    document.querySelectorAll('#tpl_area_key_list .area-key-item')
                        .forEach(el => el.classList.remove('active'));
                }

                function tplUpdateBadge(key, hasTpl) {
                    const item = document.querySelector(`#tpl_area_key_list .area-key-item[data-key="${key}"]`);
                    if (!item) return;
                    const badge = item.querySelector('.tpl-status-badge');
                    if (!badge) return;
                    badge.className = hasTpl
                        ? 'tpl-status-badge badge bg-success ms-auto'
                        : 'tpl-status-badge badge bg-light text-secondary ms-auto';
                    badge.textContent = hasTpl ? '✓' : '—';
                }

                // ── Otwarcie modala ──────────────────────────────────────
                const areaTemplatesBtn = document.getElementById('area_templates_btn');
                if (areaTemplatesBtn) {
                    areaTemplatesBtn.addEventListener('click', async function () {
                        tplHideForm();

                        // Załaduj słownik (cache z loadAllConsultantAreaBadges) + szablony
                        const keyList = document.getElementById('tpl_area_key_list');
                        keyList.innerHTML = '<div class="text-center text-muted py-3"><div class="spinner-border spinner-border-sm" role="status"></div></div>';

                        areaTemplatesModal.show();

                        try {
                            // Pobierz szablony i słownik równolegle
                            const [tplResp, dictResp] = await Promise.all([
                                api('/ajax/consultant-area-templates', { method: 'GET' }),
                                _allAreas.length > 0
                                    ? Promise.resolve({ data: _allAreas })
                                    : api('/ajax/consultant/responsibility-areas', { method: 'GET' })
                            ]);

                            // Zasilaj słownik jeśli pusty
                            if (_allAreas.length === 0) {
                                _allAreas = dictResp.data ?? [];
                                _allAreas.forEach(a => { _areaLabelMap[a.key] = a.label; });
                            }

                            // Mapowanie szablonów
                            _tplTemplateMap = {};
                            (tplResp.data ?? []).forEach(t => { _tplTemplateMap[t.area_key] = t; });

                            // Zbuduj listę
                            keyList.innerHTML = '';
                            _allAreas.forEach(area => {
                                const hasTpl = !!_tplTemplateMap[area.key];
                                const item = document.createElement('button');
                                item.type = 'button';
                                item.className = 'list-group-item list-group-item-action d-flex align-items-center area-key-item';
                                item.dataset.key = area.key;
                                item.innerHTML = `
                                    <span class="me-auto">${area.label}</span>
                                    <span class="tpl-status-badge badge ${hasTpl ? 'bg-success' : 'bg-light text-secondary'} ms-2">
                                        ${hasTpl ? '✓' : '—'}
                                    </span>`;
                                item.addEventListener('click', () => tplShowForm(area.key, area.label));
                                keyList.appendChild(item);
                            });

                        } catch (err) {
                            keyList.innerHTML = '<div class="text-danger small p-2">{{ translations.no_api_connection|default("Brak połączenia z API") }}</div>';
                        }
                    });
                }

                // ── Dodawanie obowiązku ──────────────────────────────────
                document.getElementById('tpl_add_duty_btn')?.addEventListener('click', () => tplAddDutyRow(''));

                // ── Anulowanie edycji ────────────────────────────────────
                document.getElementById('tpl_cancel_btn')?.addEventListener('click', tplHideForm);

                // ── Zapis szablonu ───────────────────────────────────────
                document.getElementById('tpl_save_btn')?.addEventListener('click', async function () {
                    if (!_tplCurrentKey) return;

                    const description = document.getElementById('tpl_description').value.trim();
                    const duties      = tplCollectDuties();

                    try {
                        const resp = await api(`/ajax/consultant-area-templates/${_tplCurrentKey}`, {
                            method: 'PUT',
                            data: { description, duties }
                        });

                        if (resp.success && resp.ok) {
                            // Zaktualizuj lokalny cache
                            _tplTemplateMap[_tplCurrentKey] = resp.data ?? { description, duties };
                            tplUpdateBadge(_tplCurrentKey, true);

                            Swal.fire({
                                icon: 'success',
                                title: '{{ translations.success|default("Sukces") }}',
                                text: '{{ translations.template_saved|default("Szablon został zapisany.") }}',
                                timer: 1400,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error|default("Błąd") }}',
                                text: resp.description ?? resp.message ?? '{{ translations.undefined_error_occurred|default("Wystąpił nieznany błąd") }}'
                            });
                        }
                    } catch (err) {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default("Błąd") }}',
                            text: '{{ translations.no_api_connection|default("Brak połączenia z API") }}'
                        });
                    }
                });

            })();
            {% endif %}

        });


    </script>
{% endblock %}