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

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

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

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

  {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
  {% include "includes/components/page_header.html" with icon="bi-file-earmark-text" title="Документы" search_id="docFilter" search_placeholder="Поиск по названию или описанию" has_filters=True filters_target="docFilters" filters_template="documents/_filters.html" create_as_card=True create_modal="docCreateModal" create_text="Создать документ" %}

  {# ===== Tabs для переключения области (Mine/All) ===== #}
  {% if can_manage_documents %}
  <div class="card mb-3">
    <div class="card-body py-2">
      <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <a class="nav-link {% if scope == 'mine' %}active{% endif %}" 
             href="?scope=mine">
            <i class="bi-person-circle"></i> Мои документы
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if scope == 'all' %}active{% endif %}" 
             href="?scope=all">
            <i class="bi-folder"></i> Все документы
          </a>
        </li>
      </ul>
    </div>
  </div>
  {% endif %}

  {# ===== Карточка со списком ===== #}
  <div class="card mb-3">
    <div id="docList" class="card-list">
      {# Список загружается через JavaScript из documentListHandler.js #}
      <div class="text-center py-4">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Загрузка...</span>
        </div>
      </div>
    </div>
  </div>

</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="createDepartmentsBlock" hidden>
          <label class="form-label">Отделы-получатели</label>
          <select name="department_ids" id="createDepartments" class="form-select" multiple size="5">
            <!-- Заполняется динамически -->
          </select>
          <small class="text-muted">Удерживайте Ctrl/Cmd для выбора нескольких</small>
        </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="editDepartmentsBlock" hidden>
          <label class="form-label">Отделы-получатели</label>
          <select name="department_ids" id="editDepartments" class="form-select" multiple size="5">
            <!-- Заполняется динамически -->
          </select>
          <small class="text-muted">Удерживайте Ctrl/Cmd для выбора нескольких</small>
        </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>
  // Передаем данные для инициализации страницы
  document.body.dataset.userId = '{{ user.id }}';
  document.body.dataset.canManageDocuments = '{{ can_manage_documents|yesno:"true,false" }}';
</script>
<script type="module">
  import { initDocumentListPage } from "{% static 'js/pages/documentList.js' %}";

  initDocumentListPage({
    apiListUrl: "{{ api_document_list_url|default:'' }}",
    apiDetailBase: "{{ api_document_detail_base|default:'' }}",
    employeesApi: "{% url 'api:v1:employees-list' %}",
    departmentsApi: "{% url 'api:v1:departments-list' %}",
    pageSize: 100
  });
</script>
{% endblock %}