{% extends "base.html" %}
{% load static %}

{% block title %}Документы{% endblock %}

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

{% block content %}
<div class="container ios-page">

  {# ===== Шапка страницы ===== #}
  <div class="ios-header feed-header d-flex align-items-center gap-2 flex-wrap">
    <i class="bi-file-earmark-text fs-2 text-primary"></i>
    <h2 class="title ios-title mb-0">Документы</h2>

    {% if can_manage_documents or user.is_staff or user.is_superuser %}
      <div class="ms-auto d-flex align-items-center gap-2 flex-wrap">
        <!-- Переключатель области (Мои / Все) -->
        <div class="btn-group scope-switch" role="group" aria-label="Область">
          <a href="{{ scope_urls.mine }}"
             class="btn btn-outline-secondary {% if scope == 'mine' %}active{% endif %}">
            Мои
          </a>
          <a href="{{ scope_urls.all }}"
             class="btn btn-outline-secondary {% if scope == 'all' %}active{% endif %}">
            Все
          </a>
        </div>

        {% if perms.documents.add_document %}
          <button type="button"
                  class="btn btn-primary d-flex align-items-center gap-2"
                  data-bs-toggle="modal"
                  data-bs-target="#docCreateModal">
            <i class="bi-plus-lg"></i><span>Создать документ</span>
          </button>
        {% endif %}
      </div>
    {% else %}
      <span class="ms-2 small text-secondary">Показаны ваши документы</span>
    {% endif %}
  </div>

  {# ===== Карточка со списком ===== #}
  <div class="feed-card mb-3">
    {% if documents %}
      <div id="docList" class="feed-stream">
        {% for doc in documents %}
          <div class="doc-row" data-doc-id="{{ doc.id }}">
            <div class="feed-hd">
              <div class="feed-ico" aria-hidden="true"><i class="bi-file-earmark-text"></i></div>

              <div class="feed-main">
                <div class="feed-author">
                  {% if doc.file_url %}
                    <a href="{{ doc.file_url }}" class="text-decoration-none" target="_blank" rel="noopener">
                      {{ doc.title|default:"Без названия" }}
                    </a>
                  {% else %}
                    {{ doc.title|default:"Без названия" }}
                  {% endif %}
                </div>
                <div class="feed-sub">
                  {{ doc.description|default:"— без описания —" }}
                  {% if doc.uploaded_at %} • Загружен: {{ doc.uploaded_at|date:"d.m.Y H:i" }}{% endif %}
                  {% if doc.sent_to_all %} • Для всех{% endif %}
                </div>
              </div>

              <div class="doc-actions">
                {# Вкладка "Мои" — как раньше #}
                {% if scope == 'mine' %}
                  {% if doc.id in acked_ids %}
                    <span class="badge-acked">Ознакомлен</span>
                  {% else %}
                    <a href="{% url 'documents:acknowledge' doc.id %}" class="btn btn-outline-primary">Ознакомиться</a>
                  {% endif %}

                {# Вкладка "Все" — кнопка модалки #}
                {% else %}
                  <button type="button"
                          class="btn btn-outline-secondary"
                          data-action="show-acks"
                          data-doc-id="{{ doc.id }}"
                          data-doc-title="{{ doc.title|default_if_none:'Документ'|escape }}">
                    Ознакомления
                  </button>
                {% endif %}

                {% if show_admin_controls %}
                  {% if perms.documents.change_document or user.is_staff or user.is_superuser %}
                    <button type="button"
                            class="btn-icon"
                            data-bs-toggle="tooltip"
                            title="Редактировать"
                            aria-label="Редактировать"
                            data-action="edit"
                            data-doc-id="{{ doc.id }}"
                            data-doc-title="{{ doc.title|default_if_none:'' }}"
                            data-doc-description="{{ doc.description|default_if_none:'' }}"
                            data-doc-sent_to_all="{{ doc.sent_to_all|yesno:'1,0' }}">
                      <i class="bi-pencil-square"></i>
                    </button>
                  {% endif %}
                  {% if perms.documents.delete_document or user.is_staff or user.is_superuser %}
                    <button type="button"
                            class="btn-icon btn-icon--danger"
                            data-bs-toggle="tooltip"
                            title="Удалить"
                            aria-label="Удалить"
                            data-action="delete"
                            data-doc-id="{{ doc.id }}">
                      <i class="bi-trash"></i>
                    </button>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="p-4 text-center text-secondary">Нет доступных документов.</div>
    {% endif %}
  </div>

  {# ===== Пагинация (если понадобится — через next_url/prev_url) ===== #}
  {% if prev_url or next_url %}
    <div class="d-flex justify-content-between">
      <a class="btn btn-outline-secondary {% if not prev_url %}disabled{% endif %}" href="{{ prev_url|default:'#' }}">Назад</a>
      <a class="btn btn-outline-secondary {% if not next_url %}disabled{% endif %}" href="{{ next_url|default:'#' }}">Вперёд</a>
    </div>
  {% endif %}

</div>

<!-- ===== Модалки: Создать / Редактировать ===== -->

<div class="modal fade" id="docCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="docCreateForm" enctype="multipart/form-data">
      {% csrf_token %}
      <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">
        <div class="mb-3">
          <label class="form-label">Заголовок</label>
          <input type="text" name="title" class="form-control" maxlength="255" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Описание</label>
          <textarea name="description" class="form-control" rows="3" maxlength="2000" placeholder="Краткое описание (необязательно)"></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label">Файл</label>
          <input type="file" name="file" class="form-control" required>
        </div>

        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="sent_to_all" id="createSentToAll" checked>
          <label class="form-check-label" for="createSentToAll">Отправить всем</label>
        </div>

        <!-- Виджет получателей -->
        <div class="recipient-block" id="createRecipientsBlock" hidden>
          <label class="form-label">Получатели</label>
          <div id="createRecipients" class="recipient-picker" data-api-employees="{% url 'api:v1:employees-list' %}">
            <div class="rp-selected" aria-live="polite"></div>
            <div class="rp-search mb-2">
              <input type="search" class="form-control" placeholder="Найти сотрудника (имя, почта, телефон)">
            </div>
            <div class="rp-results" role="listbox" aria-label="Сотрудники"></div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit"><i class="bi-check-lg"></i> Сохранить</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="docEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="docEditForm" enctype="multipart/form-data">
      {% csrf_token %}
      <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">
        <input type="hidden" name="id">
        <div class="mb-3">
          <label class="form-label">Заголовок</label>
          <input type="text" name="title" class="form-control" maxlength="255" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Описание</label>
          <textarea name="description" class="form-control" rows="3" maxlength="2000"></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label">Заменить файл (необязательно)</label>
          <input type="file" name="file" class="form-control">
        </div>

        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="sent_to_all" id="editSentToAll">
          <label class="form-check-label" for="editSentToAll">Отправить всем</label>
        </div>

        <!-- Виджет получателей -->
        <div class="recipient-block" id="editRecipientsBlock" hidden>
          <label class="form-label">Получатели</label>
          <div id="editRecipients" class="recipient-picker" data-api-employees="{% url 'api:v1:employees-list' %}">
            <div class="rp-selected" aria-live="polite"></div>
            <div class="rp-search mb-2">
              <input type="search" class="form-control" placeholder="Найти сотрудника (имя, почта, телефон)">
            </div>
            <div class="rp-results" role="listbox" aria-label="Сотрудники"></div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit"><i class="bi-check-lg"></i> Сохранить</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </form>
  </div>
</div>
{# ===== Модалка ведомости ознакомлений ===== #}
<div class="modal fade" id="acksModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title">Ознакомления</h5>
          <div class="small text-secondary" id="acksDocTitle"></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3 align-items-center mb-2">
          <div class="col-md-6">
            <input type="search" id="acksSearch" class="form-control" placeholder="Поиск по имени или email">
          </div>
          <div class="col text-end small text-secondary" id="acksTotals">—</div>
        </div>

        <div class="row g-4">
          <div class="col-md-6">
            <div class="fw-semibold mb-2">Ознакомились</div>
            <div id="acksYes" class="border rounded p-2" style="min-height:140px;">
              <div class="text-secondary">Загружается…</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="fw-semibold mb-2">Не ознакомились</div>
            <div id="acksNo" class="border rounded p-2" style="min-height:140px;">
              <div class="text-secondary">Загружается…</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}
{% block extra_js %}
  <script>
    (function(){
      const apiListUrl = "{{ api_document_list_url|default:'' }}";
      const apiDetailBase = "{{ api_document_detail_base|default:'' }}"; // + {id}/
      const employeesApi = "{% url 'api:v1:employees-list' %}";
      const accessMeta = document.querySelector('meta[name="api-access"]');
      const ACCESS = accessMeta ? accessMeta.content : "";
      const headersAuth = ACCESS ? { 'Authorization': 'Bearer ' + ACCESS } : {};

      /* ===== Утилиты ===== */
      const debounce = (fn, ms=300) => {
        let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); };
      };

      function initials(name){
        const parts = (name || "").trim().split(/\s+/).slice(0,2);
        return parts.map(p=>p[0]||"").join("").toUpperCase() || "U";
      }

      class RecipientPicker {

        constructor(root, opts){
          this.root = root;
          this.headers = opts.headers || {};
          this.apiUrl = opts.apiUrl;
          this.q = "";
          this.selected = new Map(); // id -> {id, display_name, email}
          this.elSelected = root.querySelector('.rp-selected');
          this.elSearch = root.querySelector('.rp-search input');
          this.elResults = root.querySelector('.rp-results');
          this._bind();
          this._fetch();
        }
        _bind(){
          this.elSearch.addEventListener('input', debounce(()=>{
            this.q = this.elSearch.value.trim();
            this._fetch();
          }, 250));
          this.elResults.addEventListener('change', (e)=>{
            const cb = e.target.closest('input[type=checkbox][data-id]');
            if(!cb) return;
            const id = Number(cb.dataset.id);
            const payload = JSON.parse(cb.dataset.payload || "{}");
            if(cb.checked){
              this.selected.set(id, payload);
            }else{
              this.selected.delete(id);
            }
            this._renderSelected();
          });
          this.elSelected.addEventListener('click', (e)=>{
            const btn = e.target.closest('button[data-id]');
            if(!btn) return;
            const id = Number(btn.dataset.id);
            this.selected.delete(id);
            const cb = this.elResults.querySelector(`input[type=checkbox][data-id="${id}"]`);
            if(cb) cb.checked = false;
            this._renderSelected();
          });
        }
        async _fetch(){
          const url = new URL(this.apiUrl, window.location.origin);
          if(this.q) url.searchParams.set('search', this.q);
          url.searchParams.set('ordering', 'last_name,first_name');
          url.searchParams.set('page_size', '20');
          try{
            const resp = await fetch(url.toString(), {headers: this.headers});
            if(!resp.ok) throw new Error('HTTP ' + resp.status);
            const data = await resp.json();
            const items = Array.isArray(data) ? data : (data.results || []);
            this._renderResults(items);
          }catch(err){
            this.elResults.innerHTML = `<div class="rp-empty">Не удалось загрузить сотрудников</div>`;
          }
        }
        _renderResults(items){
          const escHtml = (s) =>
            String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
          const escAttr = (s) =>
            String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));

          if(!items.length){
            this.elResults.innerHTML = `<div class="rp-empty">Ничего не найдено</div>`;
            return;
          }

          this.elResults.innerHTML = items.map(emp=>{
            const id    = Number(emp.id);
            const name  = emp.display_name || emp.full_name || emp.email || ('#'+id);
            const email = emp.email || '';
            const checked = this.selected.has(id) ? 'checked' : '';
            const payloadObj = { id, display_name: name, email };
            const payload = escAttr(JSON.stringify(payloadObj));

            const av = emp.avatar
              ? `<span class="feed-ava"><img src="${escAttr(emp.avatar)}" class="rp-avatar" alt=""></span>`
              : `<span class="feed-ava"><i class="bi-person"></i></span>`;

            return `<label class="rp-item">
                      ${av}
                      <div class="flex-grow-1">
                        <div>${escHtml(name)}</div>
                        ${email ? `<small>${escHtml(email)}</small>` : ''}
                      </div>
                      <input type="checkbox" data-id="${id}" data-payload='${payload}' ${checked} />
                    </label>`;
          }).join('');
        }
        _renderSelected(){
          const chips = Array.from(this.selected.values()).map(v=>{
            const n = v.display_name || v.email || ('#'+v.id);
            return `<span class="rp-chip">${n}<button type="button" title="Убрать" data-id="${v.id}">&times;</button></span>`;
          });
          this.elSelected.innerHTML = chips.join('') || `<span class="text-secondary">Никто не выбран</span>`;
        }
        /** Установить выбранных получателей массивом объектов {id, display_name, email} */
        setSelected(list){
          this.selected.clear();
          (list||[]).forEach(v=>{ if(v && v.id) this.selected.set(Number(v.id), v); });
          this._renderSelected();
          // синхронизируем чекбоксы в текущем списке результатов
          this.elResults.querySelectorAll('input[type=checkbox][data-id]').forEach(cb=>{
            const id = Number(cb.dataset.id);
            cb.checked = this.selected.has(id);
          });
        }
        /** Получить массив выбранных ID */
        getIds(){ return Array.from(this.selected.keys()); }
      }

      function toggleRecipientsBlock(checkbox, block){
        block.hidden = checkbox.checked; // скрыть, если "всем"
      }

      function appendRecipientIdsToFD(fd, ids){
        // API ждёт повторяемые recipient_ids
        for(const id of ids){ fd.append("recipient_ids", String(id)); }
      }

      /* ===== CREATE ===== */
      const createForm = document.getElementById('docCreateForm');
      const createAll = document.getElementById('createSentToAll');
      const createBlock = document.getElementById('createRecipientsBlock');
      const createPicker = new RecipientPicker(
        document.getElementById('createRecipients'),
        { headers: headersAuth, apiUrl: employeesApi }
      );
      toggleRecipientsBlock(createAll, createBlock);
      createAll.addEventListener('change', ()=> toggleRecipientsBlock(createAll, createBlock));

      if (createForm){
        createForm.addEventListener('submit', async (e)=>{
          e.preventDefault();
          const fd = new FormData(createForm);
          fd.set("sent_to_all", createAll.checked ? "true" : "false");
          if(!createAll.checked){
            const ids = createPicker.getIds();
            if(ids.length === 0){
              alert('Выберите получателей или включите «Отправить всем».');
              return;
            }
            appendRecipientIdsToFD(fd, ids);
          }else{
            fd.delete("recipient_ids");
          }
          try{
            const resp = await fetch(apiListUrl, { method:'POST', headers: headersAuth, body: fd });
            if(!resp.ok) throw new Error('HTTP ' + resp.status);
            await resp.json();
            window.location.reload();
          }catch(err){
            alert('Не удалось создать документ: ' + err.message);
          }
        });
      }

      /* ===== EDIT / DELETE ===== */
      const listEl = document.getElementById('docList');
      const editModal = document.getElementById('docEditModal');
      const editForm  = document.getElementById('docEditForm');
      const editAll   = document.getElementById('editSentToAll');
      const editBlock = document.getElementById('editRecipientsBlock');
      const editPicker = new RecipientPicker(
        document.getElementById('editRecipients'),
        { headers: headersAuth, apiUrl: employeesApi }
      );
      toggleRecipientsBlock(editAll, editBlock);
      editAll.addEventListener('change', ()=> toggleRecipientsBlock(editAll, editBlock));

      function openEdit(btn){
        const id = btn.getAttribute('data-doc-id');
        editForm.elements.id.value = id;
        editForm.elements.title.value = btn.getAttribute('data-doc-title') || '';
        editForm.elements.description.value = btn.getAttribute('data-doc-description') || '';
        const all = btn.getAttribute('data-doc-sent_to_all') === '1';
        editAll.checked = all;
        toggleRecipientsBlock(editAll, editBlock);

        // подтягиваем текущих получателей документа
        fetch(apiDetailBase + id + '/', { headers: headersAuth })
          .then(r=> r.ok ? r.json() : Promise.reject(r.status))
          .then(data=>{
            const recs = (data && data.recipients) ? data.recipients.map(r=>({
              id: r.id, display_name: (r.display_name || r.full_name || r.email || ('#'+r.id)), email: r.email || ''
            })) : [];
            editPicker.setSelected(recs);
          })
          .catch(()=> editPicker.setSelected([]));

        bootstrap.Modal.getOrCreateInstance(editModal).show();
      }

      async function doDelete(btn){
        if(!confirm('Удалить документ?')) return;
        const id = btn.getAttribute('data-doc-id');
        try{
          const resp = await fetch(apiDetailBase + id + '/', { method:'DELETE', headers: headersAuth });
          if(resp.status === 204){ window.location.reload(); return; }
          if(!resp.ok) throw new Error('HTTP ' + resp.status);
          window.location.reload();
        }catch(err){
          alert('Не удалось удалить документ: ' + err.message);
        }
      }

      if(listEl){
        listEl.addEventListener('click', (e)=>{
          const btn = e.target.closest('button[data-action]');
          if(!btn) return;
          const action = btn.getAttribute('data-action');
          if(action === 'edit') openEdit(btn);
          if(action === 'delete') doDelete(btn);
        });
      }

      if (editForm){
        editForm.addEventListener('submit', async (e)=>{
          e.preventDefault();
          const id = editForm.elements.id.value;
          const fd = new FormData(editForm);
          fd.set("sent_to_all", editAll.checked ? "true" : "false");
          if(!editAll.checked){
            const ids = editPicker.getIds();
            if(ids.length === 0){
              alert('Выберите получателей или включите «Отправить всем».');
              return;
            }
            appendRecipientIdsToFD(fd, ids);
          }else{
            fd.delete("recipient_ids");
          }
          // если файл не выбран — не посылаем ключ
          if(!(editForm.elements.file && editForm.elements.file.files.length)){
            fd.delete('file');
          }
          try{
            const resp = await fetch(apiDetailBase + id + '/', { method:'PATCH', headers: headersAuth, body: fd });
            if(!resp.ok) throw new Error('HTTP ' + resp.status);
            await resp.json();
            window.location.reload();
          }catch(err){
            alert('Не удалось сохранить: ' + err.message);
          }
        });
      }
    })();
  </script>
  <script>
    (function(){
      const apiDetailBase = "{{ api_document_detail_base|default:'' }}"; // /api/v1/documents/
      const accessMeta = document.querySelector('meta[name="api-access"]');
      const ACCESS = accessMeta ? accessMeta.content : "";
      const headersAuth = ACCESS ? { 'Authorization': 'Bearer ' + ACCESS } : {};

      const modalEl   = document.getElementById('acksModal');
      const modalInst = () => bootstrap.Modal.getOrCreateInstance(modalEl);
      const elTitle   = document.getElementById('acksDocTitle');
      const elTotals  = document.getElementById('acksTotals');
      const elYes     = document.getElementById('acksYes');
      const elNo      = document.getElementById('acksNo');
      const elSearch  = document.getElementById('acksSearch');

      // Храним загруженные данные и состояние пагинации вывода
      let state = {
        docId: null,
        docTitle: "",
        rawYes: [],
        rawNo: [],
        filter: "",
        // сколько одновременно показываем (порциями)
        pageSize: 100,
        shownYes: 0,
        shownNo: 0
      };

      const debounce = (fn, ms=300) => { let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); }; };
      const esc = (s) => String(s ?? '').replace(/[&<>"']/g, c=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;' }[c]));

      function buildItem(u){
        const name  = esc(u.display_name || u.full_name || u.email || ('#'+u.id));
        const email = u.email ? ` <small class="text-secondary">${esc(u.email)}</small>` : '';
        const when  = u.acknowledged_at ? ` <small class="text-secondary">(${esc(u.acknowledged_at)})</small>` : '';
        return `<li>${name}${email}${when}</li>`;
      }

      function applyFilter(list, term){
        if(!term) return list;
        const t = term.toLowerCase();
        return list.filter(u => {
          const name = (u.display_name || u.full_name || u.email || '').toLowerCase();
          const email = (u.email || '').toLowerCase();
          return name.includes(t) || email.includes(t);
        });
      }

      function renderLists(){
        const yes = applyFilter(state.rawYes, state.filter);
        const no  = applyFilter(state.rawNo,  state.filter);

        elTotals.textContent = `Ознакомились: ${yes.length} • Не ознакомились: ${no.length} • Всего: ${yes.length + no.length}`;

        // Порционное отображение
        const sliceYes = yes.slice(0, state.shownYes || state.pageSize);
        const sliceNo  = no.slice(0,  state.shownNo  || state.pageSize);

        elYes.innerHTML = sliceYes.length
          ? `<ul class="acks-list">${sliceYes.map(buildItem).join('')}</ul>`
          : `<div class="acks-empty">— никого —</div>`;
        elNo.innerHTML = sliceNo.length
          ? `<ul class="acks-list">${sliceNo.map(buildItem).join('')}</ul>`
          : `<div class="acks-empty">— никого —</div>`;

        // Кнопки «Показать ещё» при необходимости
        const needMoreYes = sliceYes.length < yes.length;
        const needMoreNo  = sliceNo.length  < no.length;

        if(needMoreYes){
          const btn = document.createElement('button');
          btn.className = 'btn btn-sm btn-outline-secondary acks-more';
          btn.textContent = `Показать ещё (${Math.min(state.pageSize, yes.length - sliceYes.length)})`;
          btn.addEventListener('click', ()=>{
            state.shownYes = sliceYes.length + state.pageSize;
            renderLists();
          });
          elYes.appendChild(btn);
        }
        if(needMoreNo){
          const btn = document.createElement('button');
          btn.className = 'btn btn-sm btn-outline-secondary acks-more';
          btn.textContent = `Показать ещё (${Math.min(state.pageSize, no.length - sliceNo.length)})`;
          btn.addEventListener('click', ()=>{
            state.shownNo = sliceNo.length + state.pageSize;
            renderLists();
          });
          elNo.appendChild(btn);
        }
      }

      async function fetchAcks(docId, searchTerm){
        // Если API поддерживает ?search= — используем его; иначе заберём всё и фильтруем локально
        const url = new URL(apiDetailBase + docId + "/acknowledgements/", window.location.origin);
        if(searchTerm) url.searchParams.set('search', searchTerm);
        try{
          const resp = await fetch(url.toString(), { headers: headersAuth });
          if(!resp.ok) throw new Error('HTTP ' + resp.status);
          const data = await resp.json();

          // Поддержка двух форматов:
          // 1) непагинированный: { acknowledged: [...], unacknowledged: [...] }
          // 2) с пагинацией: { acknowledged: {results: [...], count:..}, unacknowledged: {...} }
          const ack = Array.isArray(data.acknowledged) ? data.acknowledged : (data.acknowledged?.results || []);
          const un  = Array.isArray(data.unacknowledged) ? data.unacknowledged : (data.unacknowledged?.results || []);

          state.rawYes = ack;
          state.rawNo  = un;
          state.shownYes = state.pageSize;
          state.shownNo  = state.pageSize;
          renderLists();
        }catch(err){
          elYes.innerHTML = `<div class="text-danger small">Не удалось загрузить: ${esc(err.message)}</div>`;
          elNo.innerHTML  = `<div class="text-danger small">Не удалось загрузить: ${esc(err.message)}</div>`;
          elTotals.textContent = '—';
        }
      }

      function openAcks(docId, title){
        state.docId = docId;
        state.docTitle = title || '';
        state.filter = '';
        state.shownYes = state.pageSize;
        state.shownNo  = state.pageSize;

        elTitle.textContent = title || '';
        elSearch.value = '';
        elYes.innerHTML = `<div class="text-secondary">Загружается…</div>`;
        elNo.innerHTML  = `<div class="text-secondary">Загружается…</div>`;
        elTotals.textContent = '—';

        modalInst().show();
        fetchAcks(docId, /*search*/ null);
      }

      // Делегирование: кнопка "Ознакомления"
      document.addEventListener('click', (e)=>{
        const btn = e.target.closest('button[data-action="show-acks"]');
        if(!btn) return;
        const id = btn.getAttribute('data-doc-id');
        const title = btn.getAttribute('data-doc-title') || '';
        openAcks(id, title);
      });

      // Поиск (дебаунс)
      elSearch.addEventListener('input', debounce(()=>{
        state.filter = elSearch.value.trim();
        // Если API поддерживает поиск — можно перезагрузить данными с сервера:
        // fetchAcks(state.docId, state.filter);
        // А пока — локальная фильтрация:
        renderLists();
      }, 250));
    })();
  </script>

{% endblock %}