{# backend/templates/employees/_department_controls.html #}
{# Контекст: dept, head_choices, roles, dept_perm_choices, can_manage, can_assign_roles, can_change_head #}

{% load static %}
{% block extra_css %}
  <link rel="stylesheet" href="{% static 'css/components/department-controls.css' %}">
{% endblock %}

{% if can_manage %}
<div class="ios-acc mb-3">
  <div class="d-flex align-items-center gap-2 px-3 py-3">
    <i class="bi-pencil-square"></i>
    <div class="ios-section-title mb-0">Управление отделом</div>
  </div>

  <div class="ios-acc-body">
    <form method="post" action="{% url 'employees:department_edit' dept.id %}">
      {% csrf_token %}
      <div class="row g-3 px-2">
        <div class="col-12">
          <label class="form-label mb-1" for="dept_name">Название</label>
          <input id="dept_name" name="name" class="form-control"
                 value="{{ dept.name|default_if_none:'' }}" required>
        </div>

        <div class="col-12">
          <label class="form-label mb-1" for="dept_desc">Описание</label>
          <textarea id="dept_desc" name="description" class="form-control"
                    rows="3" data-autogrow data-max-height="240"
                    style="overflow:hidden;">{{ dept.description|default_if_none:'' }}</textarea>
        </div>

        <div class="col-12">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi-check2 me-1"></i>Сохранить
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endif %}


{% if can_change_head %}
<div class="ios-acc mb-3">
  <div class="d-flex align-items-center gap-2 px-3 py-3">
    <i class="bi-person-check"></i>
    <div class="ios-section-title mb-0">Руководитель отдела</div>
  </div>

  <div class="ios-acc-body">
    <form id="deptHeadForm" method="post" action="{% url 'employees:department_set_head' dept.id %}">
      {% csrf_token %}
      <div class="row g-3 px-2">
        <div class="col-12">
          <label class="form-label mb-1" for="dept_head_text">Руководитель</label>
          <div class="position-relative"
               data-head-picker
               data-choices='[
                 {% for m in head_choices %}
                   {"id":"{{ m.id }}","name":"{{ m.name|escapejs }}","email":"{{ m.email|default_if_none:''|escapejs }}"}{% if not forloop.last %},{% endif %}
                 {% endfor %}
               ]'>
            <input id="dept_head_text" type="text" class="form-control"
                   placeholder="ФИО или email" autocomplete="off"
                   value="{% if dept.head %}{{ dept.head.name|default_if_none:'' }}{% endif %}">
            <input id="dept_head_id" type="hidden" name="head_id"
                   value="{% if dept.head %}{{ dept.head.id }}{% endif %}">
            <div class="dropdown-menu w-100 shadow" style="max-height:240px; overflow:auto;"></div>
            <div class="invalid-feedback">Выберите сотрудника из списка, введите точный email или очистите поле.</div>
          </div>
          <div class="form-text">Очистите поле и сохраните, чтобы снять руководителя.</div>
        </div>

        <div class="col-12">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi-check2 me-1"></i>Сохранить
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endif %}


{% if can_assign_roles %}
<div class="ios-acc mb-3">
  <div class="d-flex align-items-center gap-2 px-3 py-3">
    <i class="bi-list-check"></i>
    <div class="ios-section-title mb-0">Роли отдела</div>
  </div>

  <div class="ios-acc-body">
    <div class="row g-3 px-2">
      <!-- Редактировать существующую роль -->
      <div class="col-12">
        <form id="roleEditForm" method="post" action="{% url 'employees:edit_department_role' dept.id %}">
          {% csrf_token %}
          <input type="hidden" name="op" value="update">
          <input type="hidden" name="role_id" id="edit_role_id" value="">
          <div id="edit_role_perms_hidden" class="d-none"></div>

          <div class="row g-3">
            <div class="col-12">
              <label class="form-label mb-1" for="role_name_text">Роль</label>
              <div class="position-relative"
                   data-role-picker
                   data-choices='[
                     {% for r in roles %}
                       {"id":"{{ r.id }}",
                        "name":"{{ r.name|escapejs }}",
                        "perms":"{% if r.permissions %}{% for p in r.permissions %}{% if not forloop.first %},{% endif %}{{ p }}{% endfor %}{% endif %}"}
                       {% if not forloop.last %},{% endif %}
                     {% endfor %}
                   ]'>
                <input id="role_name_text" name="name" type="text" class="form-control"
                       placeholder="Начните вводить название роли" autocomplete="off">
                <input type="hidden" id="role_id_hidden">
                <div class="dropdown-menu w-100 shadow" style="max-height:240px; overflow:auto;"></div>
                <div class="invalid-feedback">Выберите роль из списка или введите новое название для создания.</div>
              </div>
            </div>

            <div class="col-12">
              <button type="button"
                      class="btn btn-outline-secondary btn-sm me-2"
                      data-bs-toggle="modal"
                      data-bs-target="#rolePermsEditModal"
                      {% if not dept_perm_choices %}disabled{% endif %}>
                Выбрать права
              </button>
              <div id="edit_role_perms_chips" class="chips mt-2"></div>
            </div>

            <div class="col-12 d-flex flex-wrap gap-2">
              <button type="submit" class="btn btn-primary btn-sm" id="roleSaveBtn" disabled>
                <i class="bi-check2 me-1"></i>Сохранить
              </button>
              <button type="button" class="btn btn-outline-danger btn-sm" id="roleDeleteBtn" disabled>
                <i class="bi-trash me-1"></i>Удалить
              </button>
              <button type="button"
                      id="toggleNewRole"
                      class="btn btn-outline-secondary btn-sm"
                      data-toggle-target="#roleCreateForm">
                <i class="bi-plus-lg me-1"></i>Новая роль
              </button>
            </div>
          </div>
        </form>
      </div>

      {# ——— УБРАНО <hr class="my-0"> ——— #}

      <!-- Форма создания роли (скрыта по умолчанию) -->
      <div class="col-12">
        <form id="roleCreateForm" class="d-none" method="post" action="{% url 'employees:edit_department_role' dept.id %}">
          {% csrf_token %}
          <input type="hidden" name="op" value="create">
          <div id="new_role_perms_hidden" class="d-none"></div>

          <div class="row g-3">
            <div class="col-12">
              <label class="form-label mb-1" for="new_role_name">Название новой роли</label>
              <input id="new_role_name" name="name" class="form-control"
                     placeholder="Напр. Руководитель смены" required>
            </div>

            <div class="col-12">
              <button type="button"
                      class="btn btn-outline-secondary btn-sm me-2"
                      data-bs-toggle="modal"
                      data-bs-target="#rolePermsCreateModal"
                      {% if not dept_perm_choices %}disabled{% endif %}>
                Выбрать права
              </button>
              <div id="new_role_perms_chips" class="chips mt-2"></div>
            </div>

            <div class="col-12 d-flex gap-2">
              <button type="submit" class="btn btn-success btn-sm">
                <i class="bi-plus-lg me-1"></i>Создать
              </button>
              <button type="button" id="cancelNewRole" class="btn btn-ghost btn-sm">
                <i class="bi-x-lg me-1"></i>Отмена
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}


{% if not can_manage and not can_assign_roles and not can_change_head %}
  <div class="alert alert-light border small mb-3">У вас нет прав для управления этим отделом.</div>
{% endif %}

{# ===== Модальные окна выбора прав ===== #}
<div class="modal fade" id="rolePermsEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Права роли</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        {% if dept_perm_choices %}
          <div id="permListEdit" class="list-group">
            {% for p in dept_perm_choices %}
              <label class="list-group-item d-flex align-items-center gap-2 py-2">
                <input class="form-check-input me-2 perm-check-edit" type="checkbox" value="{{ p.id }}">
                <span class="flex-grow-1">{{ p.name }}</span>
                <span class="text-muted small">{{ p.code }}</span>
              </label>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-muted">Нет доступных прав.</div>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-sm" id="applyPermsEdit" data-bs-dismiss="modal">
          <i class="bi-check2 me-1"></i>Готово
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="rolePermsCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Права новой роли</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        {% if dept_perm_choices %}
          <div id="permListCreate" class="list-group">
            {% for p in dept_perm_choices %}
              <label class="list-group-item d-flex align-items-center gap-2 py-2">
                <input class="form-check-input me-2 perm-check-create" type="checkbox" value="{{ p.id }}">
                <span class="flex-grow-1">{{ p.name }}</span>
                <span class="text-muted small">{{ p.code }}</span>
              </label>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-muted">Нет доступных прав.</div>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-sm" id="applyPermsCreate" data-bs-dismiss="modal">
          <i class="bi-check2 me-1"></i>Готово
        </button>
      </div>
    </div>
  </div>
</div>

{# ===== Форма удаления роли ===== #}
<form id="roleDeleteForm" method="post" action="{% url 'employees:edit_department_role' dept.id %}" class="d-none">
  {% csrf_token %}
  <input type="hidden" name="op" value="delete">
  <input type="hidden" name="role_id" id="delete_role_id">
</form>

{# ===== JS: автогроу / пикеры / роли ===== #}
<script>
  (function() {
    if (window.__autogrowBound) return; 
    window.__autogrowBound = true;

    function autoGrow(el) {
      const max = parseInt(el.dataset.maxHeight || '240', 10);
      el.style.height = 'auto';
      const newH = Math.min(el.scrollHeight, max);
      el.style.height = newH + 'px';
      el.style.overflowY = (el.scrollHeight > max) ? 'auto' : 'hidden';
    }
    function bind(el) {
      if (el.dataset.autogrowBound === '1') return;
      el.dataset.autogrowBound = '1';
      el.addEventListener('input', () => autoGrow(el));
      autoGrow(el);
    }
    document.querySelectorAll('textarea[data-autogrow]').forEach(bind);
  })();
{% load static %}
</script>

<script type="module">
import { esc, norm } from '{% static "js/utils/stringUtils.js" %}';

(function(){
  if (window.__headPickerWithEmailBound) return;
  window.__headPickerWithEmailBound = true;

    function initPicker(root){
      const input  = root.querySelector('input[type="text"]');
      const hidden = root.querySelector('input[type="hidden"][name="head_id"]');
      const menu   = root.querySelector('.dropdown-menu');
      const choices = (JSON.parse(root.dataset.choices || '[]') || []).map(c => ({ id: c.id, name: c.name || '', email: c.email || '' }));

      function findById(id){ return choices.find(c => String(c.id) === String(id)); }
      function findByExact(text){
        const t = text.trim();
        const byName  = choices.find(c => c.name === t);
        if (byName) return byName;
        const byEmail = choices.find(c => c.email && norm(c.email) === norm(t));
        return byEmail || null;
      }

      if (hidden.value && !input.value){
        const item = findById(hidden.value);
        if (item) input.value = item.name || item.email || '';
      }
      if (input.value && !hidden.value){
        const m = findByExact(input.value);
        if (m) hidden.value = m.id;
      }

      function listItems(arr){
        if (!arr.length){
          menu.innerHTML = '<div class="dropdown-item disabled">Ничего не найдено</div>';
        } else {
          menu.innerHTML = arr.map(c => `
            <button type="button" class="dropdown-item" data-id="${esc(c.id)}" data-name="${esc(c.name)}" data-email="${esc(c.email)}">
              <div class="d-flex flex-column">
                <span>${esc(c.name || c.email || 'Без имени')}</span>
                ${c.email ? `<span class="text-muted small">${esc(c.email)}</span>` : ''}
              </div>
            </button>
          `).join('');
        }
        if (!menu.classList.contains('show')) menu.classList.add('show');
      }

      function filter(q){
        const s = norm(q);
        const res = s ? choices.filter(c => norm(c.name).includes(s) || norm(c.email).includes(s)).slice(0, 8) : choices.slice(0, 8);
        listItems(res);
      }
      function hideMenu(){ menu.classList.remove('show'); }

      input.addEventListener('focus', () => filter(input.value));
      input.addEventListener('input', () => { hidden.value = ''; input.classList.remove('is-invalid'); filter(input.value); });
      input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter'){
          const first = menu.querySelector('.dropdown-item:not(.disabled)');
          if (menu.classList.contains('show') && first){ e.preventDefault(); first.click(); }
        } else if (e.key === 'Escape'){ hideMenu(); }
      });

      menu.addEventListener('click', (e) => {
        const btn = e.target.closest('.dropdown-item');
        if (!btn || btn.classList.contains('disabled')) return;
        input.value  = btn.dataset.name || btn.dataset.email || '';
        hidden.value = btn.dataset.id || '';
        input.classList.remove('is-invalid');
        hideMenu();
      });
      document.addEventListener('click', (e) => { if (!root.contains(e.target)) hideMenu(); });

      const form = root.closest('form');
      form?.addEventListener('submit', (e) => {
        const val = input.value.trim();
        if (val === ''){ hidden.value = ''; return; }
        if (!hidden.value){
          const m = findByExact(val);
          if (m){ hidden.value = m.id; return; }
          e.preventDefault();
          input.classList.add('is-invalid');
          filter(val);
          input.focus();
        }
      });
    }

    document.querySelectorAll('[data-head-picker]').forEach(initPicker);
  })();
</script>

<script>
  (function() {
    const esc = s => String(s).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
    const norm = s => String(s||'').toLowerCase();

    function makeChip(text, value) {
      const span = document.createElement('span');
      span.className = 'chip';
      span.dataset.value = value;
      span.textContent = text;
      return span;
    }
    function buildDict(listSelector) {
      const res = new Map();
      document.querySelectorAll(listSelector + ' .list-group-item').forEach(li => {
        const cb = li.querySelector('input[type=checkbox]');
        const name = li.querySelector('.flex-grow-1')?.textContent?.trim();
        const code = li.querySelector('.text-muted')?.textContent?.trim();
        res.set(cb.value, {name, code});
      });
      return res;
    }
    function setChips(container, ids, dict) {
      container.innerHTML = '';
      ids.forEach(id => container.appendChild(makeChip((dict.get(id)?.name || id), id)));
    }
    function setChecks(listSelector, ids) {
      document.querySelectorAll(listSelector + ' input[type=checkbox]').forEach(cb => { cb.checked = ids.includes(cb.value); });
    }
    function syncHidden(containerEl, ids) {
      containerEl.innerHTML = '';
      ids.forEach(id => {
        const inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'permission_ids';
        inp.value = id;
        containerEl.appendChild(inp);
      });
    }

    const editForm      = document.getElementById('roleEditForm');
    const roleNameInp   = document.getElementById('role_name_text');
    const roleIdHidden  = document.getElementById('role_id_hidden');
    const roleIdInput   = document.getElementById('edit_role_id');
    const roleSaveBtn   = document.getElementById('roleSaveBtn');
    const roleDeleteBtn = document.getElementById('roleDeleteBtn');
    const editChips     = document.getElementById('edit_role_perms_chips');
    const editHidden    = document.getElementById('edit_role_perms_hidden');
    const editDict      = () => buildDict('#permListEdit');

    const createForm    = document.getElementById('roleCreateForm');
    const newRoleName   = document.getElementById('new_role_name');
    const newChips      = document.getElementById('new_role_perms_chips');
    const newHidden     = document.getElementById('new_role_perms_hidden');
    const createDict    = () => buildDict('#permListCreate');

    document.addEventListener('click', function(e) {
      const btn = e.target.closest('#toggleNewRole');
      if (!btn) return;
      const targetSel = btn.getAttribute('data-toggle-target') || '#roleCreateForm';
      const frm = document.querySelector(targetSel);
      if (!frm) return;

      const willShow = frm.classList.contains('d-none');
      if (willShow) {
        frm.classList.remove('d-none');
        if (roleNameInp?.value && !roleIdHidden?.value) newRoleName.value = roleNameInp.value.trim();
        newRoleName?.focus();
      } else {
        frm.classList.add('d-none');
        frm.reset?.();
        newChips.innerHTML = '';
        newHidden.innerHTML = '';
        document.querySelectorAll('#permListCreate input[type=checkbox]').forEach(cb => cb.checked = false);
      }
    });

    // Ролевой автокомплит с меню в body
    (function initRolePicker(){
      const root = document.querySelector('[data-role-picker]');
      const roleInp = document.getElementById('role_name_text');
      if (!root || !roleInp) return;

      const choices = JSON.parse(root.dataset.choices || '[]');

      const menuLayer = document.createElement('div');
      menuLayer.className = 'dropdown-menu shadow';
      menuLayer.style.position = 'fixed';
      menuLayer.style.zIndex = '2000';
      menuLayer.style.maxHeight = '240px';
      menuLayer.style.overflowY = 'auto';
      document.body.appendChild(menuLayer);

      function placeMenu() {
        const r = roleInp.getBoundingClientRect();
        menuLayer.style.left = r.left + 'px';
        menuLayer.style.top  = (r.bottom) + 'px';
        menuLayer.style.width = r.width + 'px';
      }
      function listItems(arr){
        if (!arr.length){
          menuLayer.innerHTML = '<div class="dropdown-item disabled">Ничего не найдено</div>';
        } else {
          menuLayer.innerHTML = arr.map(c => `
            <button type="button" class="dropdown-item"
                    data-id="${esc(c.id)}"
                    data-name="${esc(c.name)}"
                    data-perms="${esc(c.perms || '')}">
              ${esc(c.name)}
            </button>
          `).join('');
        }
        placeMenu();
        menuLayer.classList.add('show');
        window.addEventListener('scroll', placeMenu, true);
        window.addEventListener('resize', placeMenu);
      }
      function hideMenu(){
        menuLayer.classList.remove('show');
        window.removeEventListener('scroll', placeMenu, true);
        window.removeEventListener('resize', placeMenu);
      }
      function filter(q){
        const s = norm(q);
        const res = s ? choices.filter(c => norm(c.name).includes(s)).slice(0, 10) : choices.slice(0, 10);
        listItems(res);
      }

      roleInp.addEventListener('focus', () => filter(roleInp.value));
      roleInp.addEventListener('input', () => {
        roleIdHidden.value  = '';
        roleIdInput.value   = '';
        roleSaveBtn.disabled   = true;
        roleDeleteBtn.disabled = true;
        setChips(editChips, [], editDict());
        syncHidden(editHidden, []);
        document.querySelectorAll('#permListEdit input[type=checkbox]').forEach(cb => cb.checked = false);
        filter(roleInp.value);
      });
      roleInp.addEventListener('keydown', (e) => {
        if (e.key === 'Enter'){
          const first = menuLayer.querySelector('.dropdown-item:not(.disabled)');
          if (menuLayer.classList.contains('show') && first){ e.preventDefault(); first.click(); }
        } else if (e.key === 'Escape'){ hideMenu(); }
      });

      menuLayer.addEventListener('click', (e) => {
        const btn = e.target.closest('.dropdown-item');
        if (!btn || btn.classList.contains('disabled')) return;

        const id   = btn.dataset.id || '';
        const name = btn.dataset.name || '';
        const permsCsv = btn.dataset.perms || '';

        roleInp.value        = name;
        roleIdHidden.value   = id;
        roleIdInput.value    = id;
        roleSaveBtn.disabled   = !id;
        roleDeleteBtn.disabled = !id;

        const ids = (permsCsv ? permsCsv.split(',').map(s => s.trim()).filter(Boolean) : []);
        setChecks('#permListEdit', ids);
        setChips(editChips, ids, editDict());
        syncHidden(editHidden, ids);

        hideMenu();
      });

      document.addEventListener('click', (e) => {
        if (!roleInp.contains(e.target) && !menuLayer.contains(e.target)) hideMenu();
      });

      // На открытие любой модалки — гарантированно спрятать слой автокомплита
      document.addEventListener('show.bs.modal', hideMenu);
    })();

    document.getElementById('applyPermsEdit')?.addEventListener('click', function() {
      const ids = Array.from(document.querySelectorAll('#permListEdit input[type=checkbox]:checked')).map(cb => cb.value);
      setChips(editChips, ids, editDict());
      syncHidden(editHidden, ids);
    });

    roleDeleteBtn?.addEventListener('click', function() {
      if (!roleIdInput.value) return;
      if (confirm('Удалить выбранную роль?')) {
        document.getElementById('delete_role_id').value = roleIdInput.value;
        document.getElementById('roleDeleteForm').submit();
      }
    });

    document.getElementById('applyPermsCreate')?.addEventListener('click', function() {
      const ids = Array.from(document.querySelectorAll('#permListCreate input[type=checkbox]:checked')).map(cb => cb.value);
      setChips(newChips, ids, createDict());
      syncHidden(newHidden, ids);
    });

    createForm?.addEventListener('submit', function() {
      const ids = Array.from(document.querySelectorAll('#permListCreate input[type=checkbox]:checked')).map(cb => cb.value);
      syncHidden(newHidden, ids);
    });
  })();
</script>

<script>
  // Кнопка "Отмена" — скрыть форму создания роли и сбросить выбор
  document.addEventListener('click', function(e) {
    const btn = e.target.closest('#cancelNewRole');
    if (!btn) return;
    e.preventDefault();

    const frm = document.getElementById('roleCreateForm');
    if (!frm) return;

    frm.classList.add('d-none');
    frm.reset?.();

    const newChips  = document.getElementById('new_role_perms_chips');
    const newHidden = document.getElementById('new_role_perms_hidden');
    if (newChips)  newChips.innerHTML = '';
    if (newHidden) newHidden.innerHTML = '';

    document.querySelectorAll('#permListCreate input[type=checkbox]')
      .forEach(cb => cb.checked = false);
  });
</script>
<script>
  // Всегда держим модалки прямыми детьми <body>, чтобы избежать локальных стеков/перекрытий
  (function () {
    document.querySelectorAll('.modal').forEach(m => {
      if (m.parentElement !== document.body) document.body.appendChild(m);
    });
  })();
</script>