{% extends "layouts/base.twig" %}
{% block title %}{{ translations.external_collaborators }}{% endblock %}
{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.external_collaborators }}</h3>
        <p class="text-subtitle text-muted">
            {{ translations.external_collaborators_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.consultant_access_list }}</h4>
                    <div class="d-flex gap-2 align-items-center flex-wrap">
                        <input type="text"
                               id="search_collaborators"
                               class="form-control form-control-sm"
                               style="width: 240px;"
                               placeholder="{{ translations.search }}...">
                        <button class="btn btn-outline-secondary btn-sm" id="toggle_inactive_btn" data-show="0">
                            <i class="bi bi-eye"></i> {{ translations.show_inactive }}
                        </button>
                        <button class="btn btn-outline-info btn-sm" id="area_templates_btn">
                            <i class="bi bi-card-list"></i> {{ translations.area_templates }}
                        </button>
                        <button class="btn btn-success btn-sm" id="grant_access_btn">
                            <i class="bi bi-plus"></i> {{ translations.grant_access }}
                        </button>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">
                        <div class="table-responsive">
                            <table class="table table-hover text-sm align-middle" id="collaborators_table">
                                <thead>
                                <tr>
                                    <th style="width:5%;">#</th>
                                    <th style="width:25%;">{{ translations.user }}</th>
                                    <th style="width:22%;">{{ translations.contact }}</th>
                                    <th style="width:18%;">{{ translations.position }}</th>
                                    <th style="width:12%;">{{ translations.level }}</th>
                                    <th style="width:8%;">{{ translations.status }}</th>
                                    <th style="width:10%;">{{ translations.actions }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if collaborators|length == 0 %}
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">
                                            {{ translations.no_records_found }}
                                        </td>
                                    </tr>
                                {% else %}
                                    {% for c in collaborators %}
                                        {% set fullName = ((c.first_name ?? '') ~ ' ' ~ (c.last_name ?? ''))|trim %}
                                        {% set isActive = c.is_active ? 1 : 0 %}
                                        <tr class="collaborator-row {{ isActive ? '' : 'row-inactive' }}"
                                            data-id="{{ c.membership_id }}"
                                            data-active="{{ isActive }}"
                                            data-position-id="{{ c.position_id }}"
                                            data-level-id="{{ c.level_id }}"
                                            data-search="{{ (c.membership_id ~ ' ' ~ fullName ~ ' ' ~ (c.email ?? '') ~ ' ' ~ (c.phone ?? '') ~ ' ' ~ (c.position_name ?? '') ~ ' ' ~ (c.level_name ?? ''))|lower }}"
                                            style="{{ isActive ? '' : 'opacity:.45; background:rgba(0,0,0,.03);' }}">
                                            <td><span class="text-muted">#{{ c.membership_id }}</span></td>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <strong>{{ fullName ?: translations.no_name }}</strong>
                                                    <small class="text-muted">{{ translations.account_id }}: {{ c.auth_user_id }}</small>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <span><i class="bi bi-envelope"></i> <span class="text-muted">{{ c.email ?: '---' }}</span></span>
                                                    <span><i class="bi bi-telephone"></i> <span class="text-muted">{{ c.phone ?: '---' }}</span></span>
                                                </div>
                                            </td>
                                             <td>
                                                 {% set areas = position_areas[c.position_id] ?? [] %}
                                                 <div class="d-flex flex-column gap-1">
                                                     <span>{{ c.position_name ?: '---' }}</span>
                                                     {% if areas|length > 0 %}
                                                         <div class="d-flex flex-wrap gap-1 mt-1">
                                                             {% for area in areas %}
                                                                 <span class="badge bg-primary bg-opacity-10 text-white border border-primary border-opacity-25"
                                                                       style="font-size:.7rem; font-weight:400;">
                                                                     {{ area }}
                                                                 </span>
                                                             {% endfor %}
                                                         </div>
                                                     {% elseif c.position_id %}
                                                         <small class="text-muted" style="font-size:.7rem;">{{ translations.no_areas_assigned }}</small>
                                                     {% endif %}
                                                 </div>
                                             </td>
                                            <td>{{ c.level_name ?: '---' }}</td>
                                            <td>
                                                {% if c.is_active %}
                                                    <span class="badge bg-success">{{ translations.active }}</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ translations.inactive }}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="d-flex gap-1">
                                                    {% if c.is_active %}
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-info areas-btn"
                                                                data-id="{{ c.membership_id }}"
                                                                data-name="{{ fullName ?: ('#' ~ c.auth_user_id) }}"
                                                                title="{{ translations.manage_areas }}">
                                                            <i class="bi bi-card-list"></i>
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-primary edit-btn"
                                                                data-id="{{ c.membership_id }}"
                                                                data-position-id="{{ c.position_id }}"
                                                                data-level-id="{{ c.level_id }}"
                                                                title="{{ translations.edit }}">
                                                            <i class="bi bi-pencil"></i>
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-danger revoke-btn"
                                                                data-id="{{ c.membership_id }}"
                                                                data-name="{{ fullName ?: ('#' ~ c.auth_user_id) }}"
                                                                title="{{ translations.revoke_access }}">
                                                            <i class="bi bi-x-circle"></i>
                                                        </button>
                                                    {% else %}
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-success restore-btn"
                                                                data-id="{{ c.membership_id }}"
                                                                data-name="{{ fullName ?: ('#' ~ c.auth_user_id) }}"
                                                                title="{{ translations.restore_access }}">
                                                            <i class="bi bi-arrow-counterclockwise"></i>
                                                        </button>
                                                    {% endif %}
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {# =====================
       MODAL: GRANT ACCESS
       ===================== #}
    <div class="modal fade" id="grantAccessModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ translations.grant_consultant_access }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ translations.close }}"></button>
                </div>
                <form id="grant_access_form" class="needs-validation" novalidate>
                    <div class="modal-body">
                        <div class="mb-3" style="position:relative;">
                            <label class="form-label">{{ translations.user }} <span class="text-danger">*</span></label>
                            <input type="text"
                                   id="user_search_input"
                                   class="form-control"
                                   placeholder="{{ translations.search_by_name_or_phone }}"
                                   autocomplete="off">
                            <input type="hidden" id="selected_user_id">
                            <div id="user_search_results"
                                 class="list-group mt-1"
                                 style="display:none; max-height:200px; overflow-y:auto; position:absolute; z-index:1055; width:100%; left:0;"></div>
                            <div class="text-danger small mt-1" id="user_error" style="display:none;">
                                {{ translations.required_field }}
                            </div>
                        </div>
                        <div id="selected_user_info" class="alert alert-light border py-2 mb-3" style="display:none;">
                            <small class="text-muted">{{ translations.selected_user }}:</small>
                            <span id="selected_user_display" class="fw-semibold"></span>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ translations.position }} <span class="text-danger">*</span></label>
                            <select class="form-select" id="position_select" required>
                                <option value="">--- {{ translations.select_position }} ---</option>
                                {% for pos in positions %}
                                    <option value="{{ pos.getId() }}"
                                            data-levels="{{ pos.getLevels()|json_encode }}">
                                        {{ pos.getName() }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="invalid-feedback">{{ translations.required_field }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ translations.level }} <span class="text-danger">*</span></label>
                            <select class="form-select" id="level_select" required disabled>
                                <option value="">--- {{ translations.select_level }} ---</option>
                            </select>
                            <div class="invalid-feedback">{{ translations.required_field }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            {{ translations.cancel }}
                        </button>
                        <button type="submit" class="btn btn-success" id="save_grant_btn">
                            {{ translations.grant_access }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {# =====================
       MODAL: EDIT ACCESS
       ===================== #}
    <div class="modal fade" id="editAccessModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ translations.edit_consultant_access }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ translations.close }}"></button>
                </div>
                <form id="edit_access_form" class="needs-validation" novalidate>
                    <input type="hidden" id="edit_membership_id">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ translations.position }} <span class="text-danger">*</span></label>
                            <select class="form-select" id="edit_position_select" required>
                                <option value="">--- {{ translations.select_position }} ---</option>
                                {% for pos in positions %}
                                    <option value="{{ pos.getId() }}"
                                            data-levels="{{ pos.getLevels()|json_encode }}">
                                        {{ pos.getName() }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="invalid-feedback">{{ translations.required_field }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ translations.level }} <span class="text-danger">*</span></label>
                            <select class="form-select" id="edit_level_select" required disabled>
                                <option value="">--- {{ translations.select_level }} ---</option>
                            </select>
                            <div class="invalid-feedback">{{ translations.required_field }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            {{ translations.cancel }}
                        </button>
                        <button type="submit" class="btn btn-primary" id="save_edit_btn">
                            {{ translations.save }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {# =============================================
       MODAL: AREA TEMPLATES (global configuration)
       ============================================= #}
    <div class="modal fade" id="areaTemplatesModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-card-list me-1"></i>
                        {{ translations.area_templates_title }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3">
                        {{ translations.area_templates_info }}
                    </p>
                    <div class="row">
                        <div class="col-md-4 border-end">
                            <ul class="list-group list-group-flush" id="area_key_list"></ul>
                        </div>
                        <div class="col-md-8" id="area_template_form_wrap" style="display:none;">
                            <h6 id="area_template_form_title" class="mb-3"></h6>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ translations.description }}</label>
                                <textarea id="tpl_description" class="form-control" rows="3" placeholder="{{ translations.short_description_placeholder }}"></textarea>
                            </div>
                            <div class="mb-2">
                                <label class="form-label fw-semibold">
                                    {{ translations.duties }}
                                    <button type="button" class="btn btn-sm btn-outline-primary ms-2" id="add_tpl_duty_btn">
                                        <i class="bi bi-plus"></i> {{ translations.add }}
                                    </button>
                                </label>
                                <div id="tpl_duties_list" class="d-flex flex-column gap-2 mt-1"></div>
                            </div>
                        </div>
                        <div class="col-md-8 d-flex align-items-center justify-content-center text-muted" id="area_template_empty_state">
                            <span>{{ translations.select_area_key }}</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" id="area_template_footer" style="display:none!important;">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        {{ translations.close }}
                    </button>
                    <button type="button" class="btn btn-primary" id="save_tpl_btn">
                        <i class="bi bi-save"></i> {{ translations.save }}
                    </button>
                </div>
                <div class="modal-footer" id="area_template_footer_closed">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        {{ translations.close }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    {# =============================================
       MODAL: AREA DESCRIPTIONS (per consultant)
       =============================================

       Obszary konsultanta są dziedziczone ze stanowiska — tu edytujemy
       wyłącznie OPISY i OBOWIĄZKI dla każdego z nich (dane informacyjne).
       #}
    <div class="modal fade" id="areaDescriptionsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <i class="bi bi-person-lines-fill text-primary"></i>
                        <span class="fw-semibold">{{ translations.consultant_areas_title }}</span>
                        <span class="text-muted">—</span>
                        <span id="desc_consultant_name" class="fw-bold text-primary"></span>
                    </div>
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0" style="min-height: 420px;">
                    <div id="descriptions_loading" class="text-center text-muted py-5">
                        <div class="spinner-border spinner-border-sm" role="status"></div>
                    </div>
                    <div id="descriptions_layout" class="d-none" style="display:none!important;">
                        <div class="row g-0" style="min-height:420px;">
                            <div class="col-md-4 border-end bg-light" style="max-height:520px; overflow-y:auto;">
                                <div class="px-2 pt-2 pb-1 border-bottom">
                                    <small class="text-muted text-uppercase fw-semibold" style="font-size:.7rem; letter-spacing:.05em;">{{ translations.areas_header }}</small>
                                </div>
                                <ul class="list-group list-group-flush" id="desc_area_key_list"></ul>
                            </div>
                            <div class="col-md-8" style="max-height:520px; overflow-y:auto;">
                                <div id="desc_form_wrap" class="p-3" style="display:none;">
                                    <div class="d-flex justify-content-between align-items-start mb-3 gap-2">
                                        <div>
                                            <span class="badge bg-info me-1" id="desc_form_badge"></span>
                                            <strong id="desc_form_title" class="text-sm"></strong>
                                        </div>
                                        <div class="d-flex gap-1 flex-shrink-0" id="desc_form_actions"></div>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label small fw-semibold mb-1">{{ translations.description }}</label>
                                        <textarea id="desc_description_input" class="form-control form-control-sm" rows="2"
                                                  placeholder="{{ translations.desc_short_placeholder }}"></textarea>
                                    </div>
                                    <div class="mb-2">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <label class="form-label small fw-semibold mb-0">{{ translations.duties }}</label>
                                            <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2" id="desc_add_duty_btn" style="font-size:.75rem;">
                                                <i class="bi bi-plus"></i> {{ translations.add }}
                                            </button>
                                        </div>
                                        <div class="d-flex flex-column gap-1" id="desc_duties_container"></div>
                                    </div>
                                    <div class="d-flex justify-content-end mt-3 pt-2 border-top">
                                        <button type="button" class="btn btn-sm btn-primary" id="desc_save_btn">
                                            <i class="bi bi-save me-1"></i>{{ translations.save }}
                                        </button>
                                    </div>
                                </div>
                                <div id="desc_empty_state" class="d-flex align-items-center justify-content-center h-100 text-muted p-4" style="min-height:200px;">
                                    <span class="text-sm">{{ translations.select_area_key }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="desc_no_areas" class="text-center text-muted py-5 small" style="display:none;">
                        {{ translations.no_areas_assigned }}
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal">
                        {{ translations.close }}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    var T = {
        show_inactive:              '{{ translations.show_inactive }}',
        hide_inactive:              '{{ translations.hide_inactive }}',
        select_level:               '{{ translations.select_level }}',
        no_results:                 '{{ translations.no_results }}',
        success:                    '{{ translations.success }}',
        error:                      '{{ translations.error }}',
        access_granted:             '{{ translations.access_granted }}',
        error_occurred:             '{{ translations.error_occurred }}',
        no_api_connection:          '{{ translations.no_api_connection }}',
        changes_saved:              '{{ translations.changes_saved }}',
        revoke_access_confirm_title:'{{ translations.revoke_access_confirm_title }}',
        revoke_access_confirm_html: '{{ translations.revoke_access_confirm_html }}',
        yes_revoke:                 '{{ translations.yes_revoke }}',
        cancel:                     '{{ translations.cancel }}',
        access_revoked:             '{{ translations.access_revoked }}',
        restore_access_confirm_title:'{{ translations.restore_access_confirm_title }}',
        restore_access_confirm_html: '{{ translations.restore_access_confirm_html }}',
        yes_restore:                '{{ translations.yes_restore }}',
        access_restored:            '{{ translations.access_restored }}',
        duty_placeholder:           '{{ translations.duty_placeholder }}',
        none:                       '{{ translations.none }}',
        load_failed:                '{{ translations.load_failed }}',
        saved:                      '{{ translations.saved }}',
        template_updated:           '{{ translations.template_updated }}',
        from_template:              '{{ translations.from_template }}',
        loaded_from_template:       '{{ translations.loaded_from_template }}',
        delete_description_title:   '{{ translations.delete_description_title }}',
        delete_description_text:    '{{ translations.delete_description_text }}',
        yes_delete:                 '{{ translations.yes_delete }}',
        deleted:                    '{{ translations.deleted }}'
    };

    var showInactive = false;
    var toggleBtn    = document.getElementById('toggle_inactive_btn');
    function applyVisibility(searchQ) {
        document.querySelectorAll('.collaborator-row').forEach(function(row) {
            var matchSearch = !searchQ || (row.dataset.search || '').includes(searchQ);
            var isActive    = row.dataset.active === '1';
            var showRow     = matchSearch && (isActive || showInactive);
            row.style.display = showRow ? '' : 'none';
        });
    }
    toggleBtn.addEventListener('click', function () {
        showInactive = !showInactive;
        if (showInactive) {
            this.innerHTML = '<i class="bi bi-eye-slash"></i> ' + T.hide_inactive;
            this.classList.remove('btn-outline-secondary');
            this.classList.add('btn-secondary');
        } else {
            this.innerHTML = '<i class="bi bi-eye"></i> ' + T.show_inactive;
            this.classList.remove('btn-secondary');
            this.classList.add('btn-outline-secondary');
        }
        var q = (document.getElementById('search_collaborators').value || '').trim().toLowerCase();
        applyVisibility(q);
    });
    // ---- Search filter -------------------------------------------------------
    var searchInput = document.getElementById('search_collaborators');
    searchInput.addEventListener('input', function () {
        applyVisibility(this.value.trim().toLowerCase());
    });
    // Initial: hide inactive
    applyVisibility('');
    // ---- Helpers -------------------------------------------------------------
    function populateLevelSelect(levelSelectEl, levels, selectedLevelId) {
        levelSelectEl.innerHTML = '<option value="">--- ' + T.select_level + ' ---</option>';
        if (!levels || levels.length === 0) {
            levelSelectEl.disabled = true;
            return;
        }
        levels.forEach(function(l) {
            var opt = document.createElement('option');
            opt.value = l.id;
            opt.textContent = l.name || ('#' + l.id);
            if (selectedLevelId && parseInt(l.id) === parseInt(selectedLevelId)) {
                opt.selected = true;
            }
            levelSelectEl.appendChild(opt);
        });
        levelSelectEl.disabled = false;
    }
    // =========================================================================
    // GRANT ACCESS MODAL
    // =========================================================================
    var grantAccessModal    = new bootstrap.Modal(document.getElementById('grantAccessModal'));
    var form                = document.getElementById('grant_access_form');
    var userSearchInput     = document.getElementById('user_search_input');
    var selectedUserId      = document.getElementById('selected_user_id');
    var userSearchResults   = document.getElementById('user_search_results');
    var selectedUserInfo    = document.getElementById('selected_user_info');
    var selectedUserDisplay = document.getElementById('selected_user_display');
    var userError           = document.getElementById('user_error');
    var positionSelect      = document.getElementById('position_select');
    var levelSelect         = document.getElementById('level_select');
    document.getElementById('grant_access_btn').addEventListener('click', function () {
        form.reset();
        form.classList.remove('was-validated');
        selectedUserId.value = '';
        userSearchResults.style.display = 'none';
        userSearchResults.innerHTML = '';
        selectedUserInfo.style.display = 'none';
        userError.style.display = 'none';
        levelSelect.innerHTML = '<option value="">--- ' + T.select_level + ' ---</option>';
        levelSelect.disabled = true;
        grantAccessModal.show();
    });
    var searchTimeout = null;
    userSearchInput.addEventListener('input', function () {
        clearTimeout(searchTimeout);
        var q = this.value.trim();
        selectedUserId.value = '';
        selectedUserInfo.style.display = 'none';
        if (q.length < 2) { userSearchResults.style.display = 'none'; return; }
        searchTimeout = setTimeout(function() {
            api('/ajax/user-accounts/search', { method: 'GET', data: { q: q } })
                .then(function(resp) {
                    userSearchResults.innerHTML = '';
                    var users = resp.data || [];
                    if (resp.ok && users.length > 0) {
                        users.forEach(function(u) {
                            var fn = ((u.first_name || '') + ' ' + (u.last_name || '')).trim();
                            var label = [fn || ('#' + u.id), u.phone, u.email ? '(' + u.email + ')' : ''].filter(Boolean).join(' ');
                            var item = document.createElement('button');
                            item.type = 'button';
                            item.className = 'list-group-item list-group-item-action py-2 text-sm';
                            item.textContent = label;
                            item.addEventListener('click', function() {
                                selectedUserId.value = u.id;
                                userSearchInput.value = fn || ('#' + u.id);
                                selectedUserDisplay.textContent = label;
                                selectedUserInfo.style.display = '';
                                userSearchResults.style.display = 'none';
                                userError.style.display = 'none';
                            });
                            userSearchResults.appendChild(item);
                        });
                        userSearchResults.style.display = '';
                    } else {
                        var noResult = document.createElement('div');
                        noResult.className = 'list-group-item text-muted py-2 text-sm';
                        noResult.textContent = T.no_results;
                        userSearchResults.appendChild(noResult);
                        userSearchResults.style.display = '';
                    }
                })
                .catch(function() { userSearchResults.style.display = 'none'; });
        }, 300);
    });
    document.addEventListener('click', function (e) {
        if (!userSearchInput.contains(e.target) && !userSearchResults.contains(e.target)) {
            userSearchResults.style.display = 'none';
        }
    });
    positionSelect.addEventListener('change', function () {
        var selected = this.options[this.selectedIndex];
        var levels = [];
        try { levels = JSON.parse(selected.dataset.levels || '[]'); } catch (e) {}
        populateLevelSelect(levelSelect, levels, null);
    });
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var userId     = parseInt(selectedUserId.value, 10);
        var positionId = parseInt(positionSelect.value, 10);
        var levelId    = parseInt(levelSelect.value, 10);
        if (!userId || userId <= 0) {
            userError.style.display = 'block';
            form.classList.add('was-validated');
            return;
        }
        userError.style.display = 'none';
        if (!form.checkValidity()) { form.classList.add('was-validated'); return; }
        api('/ajax/consultant-memberships', {
            method: 'POST',
            data: { auth_user_id: userId, position_id: positionId, level_id: levelId }
        }).then(function(resp) {
            if (resp.success && resp.ok) {
                Swal.fire({ icon: 'success', title: T.success, text: T.access_granted, timer: 1500, showConfirmButton: false });
                grantAccessModal.hide();
                setTimeout(function() { window.location.reload(); }, 900);
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
            }
        }).catch(function() {
            Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
        });
    });
    // =========================================================================
    // EDIT ACCESS MODAL
    // =========================================================================
    var editAccessModal    = new bootstrap.Modal(document.getElementById('editAccessModal'));
    var editForm           = document.getElementById('edit_access_form');
    var editMembershipId   = document.getElementById('edit_membership_id');
    var editPositionSelect = document.getElementById('edit_position_select');
    var editLevelSelect    = document.getElementById('edit_level_select');
    document.querySelectorAll('.edit-btn').forEach(function(btn) {
        btn.addEventListener('click', function () {
            var id         = this.dataset.id;
            var positionId = this.dataset.positionId;
            var levelId    = this.dataset.levelId;
            editForm.reset();
            editForm.classList.remove('was-validated');
            editMembershipId.value = id;
            editLevelSelect.innerHTML = '<option value="">--- ' + T.select_level + ' ---</option>';
            editLevelSelect.disabled = true;
            for (var i = 0; i < editPositionSelect.options.length; i++) {
                var opt = editPositionSelect.options[i];
                if (parseInt(opt.value) === parseInt(positionId)) {
                    opt.selected = true;
                    var levels = [];
                    try { levels = JSON.parse(opt.dataset.levels || '[]'); } catch (e) {}
                    populateLevelSelect(editLevelSelect, levels, levelId);
                    break;
                }
            }
            editAccessModal.show();
        });
    });
    editPositionSelect.addEventListener('change', function () {
        var selected = this.options[this.selectedIndex];
        var levels = [];
        try { levels = JSON.parse(selected.dataset.levels || '[]'); } catch (e) {}
        populateLevelSelect(editLevelSelect, levels, null);
    });
    editForm.addEventListener('submit', function (e) {
        e.preventDefault();
        if (!editForm.checkValidity()) { editForm.classList.add('was-validated'); return; }
        var id         = parseInt(editMembershipId.value, 10);
        var positionId = parseInt(editPositionSelect.value, 10);
        var levelId    = parseInt(editLevelSelect.value, 10);
        api('/ajax/consultant-memberships/' + id, {
            method: 'PUT',
            data: { position_id: positionId, level_id: levelId }
        }).then(function(resp) {
            if (resp.success && resp.ok) {
                Swal.fire({ icon: 'success', title: T.success, text: T.changes_saved, timer: 1500, showConfirmButton: false });
                editAccessModal.hide();
                setTimeout(function() { window.location.reload(); }, 900);
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
            }
        }).catch(function() {
            Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
        });
    });
    // =========================================================================
    // REVOKE ACCESS
    // =========================================================================
    document.querySelectorAll('.revoke-btn').forEach(function(btn) {
        btn.addEventListener('click', function () {
            var id   = this.dataset.id;
            var name = this.dataset.name;
            Swal.fire({
                icon: 'warning',
                title: T.revoke_access_confirm_title,
                html:  T.revoke_access_confirm_html.replace('{{name}}', name),
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: T.yes_revoke,
                cancelButtonText: T.cancel
            }).then(function(result) {
                if (!result.isConfirmed) return;
                api('/ajax/consultant-memberships/' + id, { method: 'DELETE' })
                .then(function(resp) {
                    if (resp.success && resp.ok) {
                        Swal.fire({ icon: 'success', title: T.success, text: T.access_revoked, timer: 1500, showConfirmButton: false });
                        setTimeout(function() { window.location.reload(); }, 900);
                    } else {
                        Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
                    }
                }).catch(function() {
                    Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
                });
            });
        });
    });
    // =========================================================================
    // RESTORE ACCESS
    // =========================================================================
    document.querySelectorAll('.restore-btn').forEach(function(btn) {
        btn.addEventListener('click', function () {
            var id   = this.dataset.id;
            var name = this.dataset.name;
            Swal.fire({
                icon: 'question',
                title: T.restore_access_confirm_title,
                html:  T.restore_access_confirm_html.replace('{{name}}', name),
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#6c757d',
                confirmButtonText: T.yes_restore,
                cancelButtonText: T.cancel
            }).then(function(result) {
                if (!result.isConfirmed) return;
                api('/ajax/consultant-memberships/' + id + '/restore', { method: 'POST', data: {} })
                .then(function(resp) {
                    if (resp.success && resp.ok) {
                        Swal.fire({ icon: 'success', title: T.success, text: T.access_restored, timer: 1500, showConfirmButton: false });
                        setTimeout(function() { window.location.reload(); }, 900);
                    } else {
                        Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
                    }
                }).catch(function() {
                    Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
                });
            });
        });
    });

    // =========================================================================
    // AREA TEMPLATES MODAL
    // =========================================================================
    var areaTemplatesModal = new bootstrap.Modal(document.getElementById('areaTemplatesModal'));
    var allAreaKeys = [];
    var templatesMap = {};
    var currentTplKey = null;

    function makeDutyRow(containerId, value) {
        var container = document.getElementById(containerId);
        var wrap = document.createElement('div');
        wrap.className = 'd-flex gap-2 align-items-center duty-row';
        var inp = document.createElement('input');
        inp.type = 'text';
        inp.className = 'form-control form-control-sm duty-input';
        inp.value = value || '';
        inp.placeholder = T.duty_placeholder;
        var rm = document.createElement('button');
        rm.type = 'button';
        rm.className = 'btn btn-sm btn-outline-danger';
        rm.innerHTML = '<i class="bi bi-x"></i>';
        rm.addEventListener('click', function() { wrap.remove(); });
        wrap.appendChild(inp);
        wrap.appendChild(rm);
        container.appendChild(wrap);
    }

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

    document.getElementById('area_templates_btn').addEventListener('click', function () {
        Promise.all([
            api('/ajax/consultant-area-templates', { method: 'GET' }),
            api('/ajax/consultant/responsibility-areas', { method: 'GET' })
        ]).then(function(results) {
            var tplResp  = results[0];
            var dictResp = results[1];
            allAreaKeys  = dictResp.data || [];
            templatesMap = {};
            (tplResp.data || []).forEach(function(t) { templatesMap[t.area_key] = t; });

            var list = document.getElementById('area_key_list');
            list.innerHTML = '';
            allAreaKeys.forEach(function(area) {
                var li = document.createElement('li');
                li.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center cursor-pointer area-key-item';
                li.dataset.key = area.key;
                var hasTpl = !!templatesMap[area.key];
                li.innerHTML = '<span>' + area.label + '</span>' +
                    (hasTpl ? '<span class="badge bg-success">\u2713</span>' : '<span class="badge bg-light text-secondary">' + T.none + '</span>');
                li.addEventListener('click', function() {
                    loadTemplateForm(area.key, area.label);
                    document.querySelectorAll('.area-key-item').forEach(function(el) { el.classList.remove('active'); });
                    li.classList.add('active');
                });
                list.appendChild(li);
            });

            document.getElementById('area_template_form_wrap').style.display  = 'none';
            document.getElementById('area_template_empty_state').style.display = '';
            document.getElementById('area_template_footer').style.cssText      = 'display:none!important;';
            document.getElementById('area_template_footer_closed').style.display = '';
            currentTplKey = null;
            areaTemplatesModal.show();
        }).catch(function() {
            Swal.fire({ icon: 'error', title: T.error, text: T.load_failed });
        });
    });

    function loadTemplateForm(areaKey, areaLabel) {
        currentTplKey = areaKey;
        var tpl = templatesMap[areaKey] || { description: '', duties: [] };
        document.getElementById('area_template_form_title').textContent = areaLabel;
        document.getElementById('tpl_description').value = tpl.description || '';
        var dutiesCont = document.getElementById('tpl_duties_list');
        dutiesCont.innerHTML = '';
        (tpl.duties || []).forEach(function(d) { makeDutyRow('tpl_duties_list', d); });
        document.getElementById('area_template_form_wrap').style.display  = '';
        document.getElementById('area_template_empty_state').style.display = 'none';
        document.getElementById('area_template_footer').style.cssText      = '';
        document.getElementById('area_template_footer_closed').style.display = 'none';
    }

    document.getElementById('add_tpl_duty_btn').addEventListener('click', function() {
        makeDutyRow('tpl_duties_list', '');
    });

    document.getElementById('save_tpl_btn').addEventListener('click', function() {
        if (!currentTplKey) return;
        var description = document.getElementById('tpl_description').value.trim();
        var duties      = collectDuties('tpl_duties_list');
        api('/ajax/consultant-area-templates/' + currentTplKey, {
            method: 'PUT',
            data: { description: description, duties: duties }
        }).then(function(resp) {
            if (resp.success && resp.ok) {
                Swal.fire({ icon: 'success', title: T.saved, text: T.template_updated, timer: 1200, showConfirmButton: false });
                templatesMap[currentTplKey] = (resp.data || {});
                document.querySelectorAll('.area-key-item').forEach(function(li) {
                    if (li.dataset.key === currentTplKey) {
                        var badge = li.querySelector('.badge');
                        if (badge) { badge.className = 'badge bg-success'; badge.textContent = '\u2713'; }
                    }
                });
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
            }
        }).catch(function() {
            Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
        });
    });

    // =========================================================================
    // AREA DESCRIPTIONS MODAL — sidebar layout (per consultant)
    // =========================================================================
    var areaDescriptionsModal   = new bootstrap.Modal(document.getElementById('areaDescriptionsModal'));
    var currentDescMembershipId = null;
    var currentDescriptions     = [];
    var areaLabelMap            = {};
    var currentDescAreaKey      = null;

    document.querySelectorAll('.areas-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            currentDescMembershipId = parseInt(this.dataset.id, 10);
            currentDescAreaKey      = null;
            document.getElementById('desc_consultant_name').textContent = this.dataset.name || '';
            document.getElementById('descriptions_loading').style.display = '';
            document.getElementById('descriptions_layout').style.cssText  = 'display:none!important;';
            document.getElementById('desc_no_areas').style.display        = 'none';
            areaDescriptionsModal.show();
            loadDescriptions();
        });
    });

    function loadDescriptions() {
        var labelPromise = Object.keys(areaLabelMap).length > 0
            ? Promise.resolve()
            : api('/ajax/consultant/responsibility-areas', { method: 'GET' }).then(function(resp) {
                (resp.data || []).forEach(function(a) { areaLabelMap[a.key] = a.label; });
            });

        Promise.all([
            labelPromise,
            api('/ajax/consultant-memberships/' + currentDescMembershipId + '/area-descriptions', { method: 'GET' })
        ]).then(function(results) {
            currentDescriptions = (results[1] && results[1].data) || [];
            renderDescSidebar();
        }).catch(function() {
            document.getElementById('descriptions_loading').innerHTML =
                '<span class="text-danger small">' + T.no_api_connection + '</span>';
        });
    }

    function renderDescSidebar() {
        document.getElementById('descriptions_loading').style.display = 'none';

        if (currentDescriptions.length === 0) {
            document.getElementById('desc_no_areas').style.display = '';
            return;
        }

        document.getElementById('descriptions_layout').style.cssText = '';
        document.getElementById('descriptions_layout').classList.remove('d-none');

        var list = document.getElementById('desc_area_key_list');
        list.innerHTML = '';
        currentDescriptions.forEach(function(item) {
            var label   = areaLabelMap[item.area_key] || item.area_key;
            var hasData = (item.description && item.description !== '') || (item.duties && item.duties.length > 0);
            var li = document.createElement('li');
            li.className = 'list-group-item list-group-item-action py-2 px-3 d-flex justify-content-between align-items-center desc-area-item';
            li.style.cssText = 'cursor:pointer; font-size:.82rem;';
            li.dataset.key   = item.area_key;
            li.innerHTML =
                '<span class="text-truncate me-2">' + label + '</span>' +
                (hasData
                    ? '<span class="badge bg-success flex-shrink-0" style="font-size:.65rem;">\u2713</span>'
                    : '<span class="badge bg-light text-secondary flex-shrink-0" style="font-size:.65rem;">' + T.none + '</span>');
            li.addEventListener('click', function() {
                document.querySelectorAll('.desc-area-item').forEach(function(el) { el.classList.remove('active'); });
                li.classList.add('active');
                loadDescFormForKey(item.area_key);
            });
            list.appendChild(li);
        });

        if (currentDescAreaKey) {
            var prevLi = list.querySelector('[data-key="' + currentDescAreaKey + '"]');
            if (prevLi) { prevLi.classList.add('active'); loadDescFormForKey(currentDescAreaKey); }
        } else {
            document.getElementById('desc_form_wrap').style.display  = 'none';
            document.getElementById('desc_empty_state').style.display = '';
        }
    }

    function loadDescFormForKey(areaKey) {
        currentDescAreaKey = areaKey;
        var item = currentDescriptions.find(function(d) { return d.area_key === areaKey; });
        if (!item) return;
        var label   = areaLabelMap[item.area_key] || item.area_key;
        var hasData = (item.description && item.description !== '') || (item.duties && item.duties.length > 0);

        document.getElementById('desc_form_badge').textContent  = item.area_key;
        document.getElementById('desc_form_title').textContent  = label;
        document.getElementById('desc_description_input').value = item.description || '';
        document.getElementById('desc_empty_state').style.display = 'none';
        document.getElementById('desc_form_wrap').style.display   = '';

        var actionsEl = document.getElementById('desc_form_actions');
        actionsEl.innerHTML = '';
        if (!hasData) {
            var tplBtn = document.createElement('button');
            tplBtn.type = 'button';
            tplBtn.className = 'btn btn-xs btn-outline-secondary py-0 px-2';
            tplBtn.style.fontSize = '.75rem';
            tplBtn.innerHTML = '<i class="bi bi-cloud-download"></i> ' + T.from_template;
            tplBtn.addEventListener('click', function() { initDescriptionFromTemplate(areaKey); });
            actionsEl.appendChild(tplBtn);
        }
        if (item.description_id) {
            var delBtn = document.createElement('button');
            delBtn.type = 'button';
            delBtn.className = 'btn btn-xs btn-outline-danger py-0 px-2';
            delBtn.style.fontSize = '.75rem';
            delBtn.innerHTML = '<i class="bi bi-trash"></i>';
            delBtn.addEventListener('click', function() { deleteDescription(item.description_id); });
            actionsEl.appendChild(delBtn);
        }

        var dutiesEl = document.getElementById('desc_duties_container');
        dutiesEl.innerHTML = '';
        (item.duties || []).forEach(function(d) { addDescDutyRow(dutiesEl, d); });

        var addDutyBtn = document.getElementById('desc_add_duty_btn');
        var newAddDutyBtn = addDutyBtn.cloneNode(true);
        addDutyBtn.parentNode.replaceChild(newAddDutyBtn, addDutyBtn);
        newAddDutyBtn.addEventListener('click', function() { addDescDutyRow(dutiesEl, ''); });

        var saveBtn = document.getElementById('desc_save_btn');
        var newSaveBtn = saveBtn.cloneNode(true);
        saveBtn.parentNode.replaceChild(newSaveBtn, saveBtn);
        newSaveBtn.addEventListener('click', function() { saveDescription(areaKey); });
    }

    function addDescDutyRow(container, value) {
        var row = document.createElement('div');
        row.className = 'd-flex gap-1 align-items-center';
        row.innerHTML =
            '<input type="text" class="form-control form-control-sm duty-input" value="' +
                String(value || '').replace(/"/g, '&quot;') +
            '" placeholder="' + T.duty_placeholder + '">' +
            '<button type="button" class="btn btn-sm btn-outline-danger remove-duty-btn px-2">' +
                '<i class="bi bi-x"></i>' +
            '</button>';
        row.querySelector('.remove-duty-btn').addEventListener('click', function() { row.remove(); });
        container.appendChild(row);
    }

    function saveDescription(areaKey) {
        var description = document.getElementById('desc_description_input').value.trim();
        var duties = Array.from(document.querySelectorAll('#desc_duties_container .duty-input'))
                         .map(function(i) { return i.value.trim(); })
                         .filter(function(v) { return v !== ''; });

        api('/ajax/consultant-memberships/' + currentDescMembershipId + '/area-descriptions/' + areaKey, {
            method: 'PUT',
            data: { description: description, duties: duties }
        }).then(function(resp) {
            if (resp.success && resp.ok) {
                Swal.fire({ icon: 'success', title: T.saved, timer: 900, showConfirmButton: false });
                loadDescriptions();
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
            }
        }).catch(function() {
            Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
        });
    }

    function initDescriptionFromTemplate(areaKey) {
        api('/ajax/consultant-memberships/' + currentDescMembershipId + '/area-descriptions/' + areaKey + '/init-from-template', {
            method: 'POST'
        }).then(function(resp) {
            if (resp.success && resp.ok) {
                Swal.fire({ icon: 'success', title: T.loaded_from_template, timer: 900, showConfirmButton: false });
                loadDescriptions();
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
            }
        }).catch(function() {
            Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
        });
    }

    function deleteDescription(descriptionId) {
        if (!descriptionId) return;
        Swal.fire({
            icon: 'warning',
            title: T.delete_description_title,
            text: T.delete_description_text,
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: T.yes_delete,
            cancelButtonText: T.cancel
        }).then(function(result) {
            if (!result.isConfirmed) return;
            api('/ajax/consultant-area-descriptions/' + descriptionId, { method: 'DELETE' })
                .then(function(resp) {
                    if (resp.success && resp.ok) {
                        Swal.fire({ icon: 'success', title: T.deleted, timer: 900, showConfirmButton: false });
                        loadDescriptions();
                    } else {
                        Swal.fire({ icon: 'error', title: T.error, text: resp.description || resp.message || T.error_occurred });
                    }
                }).catch(function() {
                    Swal.fire({ icon: 'error', title: T.error, text: T.no_api_connection });
                });
        });
    }
});
</script>
{% endblock %}