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

{% block title %}Заявления{% endblock %}

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

{% block content %}

  {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
  {% if can_process or user.is_staff or user.is_superuser %}
    {% url 'requests:request_list' as base_url %}
    {% include "includes/components/page_header.html" with icon="bi-clipboard-check" title="Заявления" no_search=True scope=scope has_filters=True filters_target="reqFilters" filters_template="requests_app/_filters.html" create_as_card=True create_modal="reqCreateModal" create_text="Создать заявление" %}
  {% else %}
    {% include "includes/components/page_header.html" with icon="bi-clipboard-check" title="Заявления" no_search=True has_filters=True filters_target="reqFilters" filters_template="requests_app/_filters.html" create_as_card=True create_modal="reqCreateModal" create_text="Создать заявление" %}
  {% endif %}

  {# ===== Список ===== #}
  {# DEBUG: Фильтры - type: {{ filters.type }}, status: {{ filters.status }}, count: {{ requests|length }} #}
  <div id="reqList" class="card mb-3">
    <!-- Заголовок таблицы -->
    <div class="req-table-header">
      <div class="req-table-row">
        <div class="req-cell req-cell-icon"></div>
        <div class="req-cell req-cell-title">
          <h6 class="mb-0 text-secondary">Заявление</h6>
        </div>
        <div class="req-cell req-cell-author">
          <h6 class="mb-0 text-secondary">Автор</h6>
        </div>
        <div class="req-cell req-cell-dates">
          <h6 class="mb-0 text-secondary">Период</h6>
        </div>
        <div class="req-cell req-cell-status">
          <h6 class="mb-0 text-secondary">Статус</h6>
        </div>
        <div class="req-cell req-cell-created">
          <h6 class="mb-0 text-secondary">Создано</h6>
        </div>
        <div class="req-cell req-cell-actions">
          <h6 class="mb-0 text-secondary">Действия</h6>
        </div>
      </div>
    </div>
    
    {# Контейнер для данных заявлений #}
    <div id="reqListContent">
      {# Список загружается через JavaScript из requestListHandler.js #}
      <div class="text-center py-4" id="reqListLoading">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Загрузка...</span>
        </div>
      </div>
    </div>
  </div>

{# ===== Modals ===== #}

<!-- Create -->
<div class="modal fade" id="reqCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <form class="modal-content" id="reqCreateForm" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-plus-circle me-2"></i>Новое заявление
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>

      <div class="modal-body">
        <!-- Получатели (как в email - в начале) -->
        <div class="mb-4 pb-3 border-bottom">
          <div id="createRecipientPicker"></div>
        </div>

        <div class="mb-3">
          <label class="form-label">Тип заявления</label>
          <select name="type" class="form-select" required>
            <option value="" selected disabled>Выберите тип…</option>
            <option value="vacation">📅 Отпуск</option>
            <option value="sick_leave">🏥 Больничный</option>
            <option value="transfer">↔️ Перевод</option>
            <option value="dismissal">👋 Увольнение</option>
            <option value="other">📋 Другое</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Тема</label>
          <input type="text" name="title" class="form-control" 
                 placeholder="Краткое описание заявления..." maxlength="255">
        </div>

        <div class="row g-2 mb-3">
          <div class="col">
            <label class="form-label">Дата начала</label>
            <input type="date" name="date_from" class="form-control">
          </div>
          <div class="col">
            <label class="form-label">Дата окончания</label>
            <input type="date" name="date_to" class="form-control">
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label">Комментарий</label>
          <div class="message-field message-field--solo">
            <textarea name="comment" class="form-control message-input" rows="3"
                      placeholder="Дополнительная информация..."></textarea>
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label">
            <i class="bi-paperclip"></i> Вложение
          </label>
          <input type="file" name="attachment" class="form-control">
          <div class="form-text">PDF, JPG, PNG до 10MB</div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Отмена</button>

        <!-- Новая кнопка: сохранить как черновик -->
        <!-- formnovalidate позволяет сохранить не заполняя обязательные поля -->
        <button class="btn btn-outline-secondary" type="submit"
                name="_save_as" value="draft" formnovalidate>
          Сохранить как черновик
        </button>

        <!-- Обычное создание -->
        <button class="btn btn-primary" type="submit" name="_save_as" value="submit">
          Создать
        </button>
      </div>
    </form>
  </div>
</div>


<!-- Edit (PATCH) -->
<div class="modal fade" id="reqEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <form class="modal-content" id="reqEditForm" enctype="multipart/form-data">
      {% csrf_token %}
      <input type="hidden" name="id" id="editId">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi-pencil me-2"></i>Редактировать заявление
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>

      <div class="modal-body">
        <!-- Значение по умолчанию — submit -->
        <input type="hidden" name="_save_as" value="submit">

        <!-- Получатели -->
        <div class="mb-4 pb-3 border-bottom">
          <div id="editRecipientPicker"></div>
        </div>

        <div class="mb-3">
          <label class="form-label">Тип заявления</label>
          <select name="type" id="editType" class="form-select" required>
            <option value="" disabled>Выберите тип…</option>
            <option value="vacation">📅 Отпуск</option>
            <option value="sick_leave">🏥 Больничный</option>
            <option value="transfer">↔️ Перевод</option>
            <option value="dismissal">👋 Увольнение</option>
            <option value="other">📋 Другое</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Тема</label>
          <input type="text" name="title" id="editTitle" class="form-control" maxlength="255">
        </div>

        <div class="row g-2 mb-3">
          <div class="col">
            <label class="form-label">Дата начала</label>
            <input type="date" name="date_from" id="editDateFrom" class="form-control">
          </div>
          <div class="col">
            <label class="form-label">Дата окончания</label>
            <input type="date" name="date_to" id="editDateTo" class="form-control">
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label" for="editComment">Комментарий</label>
          <textarea name="comment" id="editComment" class="form-control" rows="3"></textarea>
        </div>

        <div class="mb-3">
          <label class="form-label">
            <i class="bi-paperclip"></i> Новое вложение
          </label>
          <input type="file" name="attachment" class="form-control">
        </div>

        <!-- Чекбокс для черновика -->
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="editIsDraft" name="_save_as" value="draft">
          <label class="form-check-label" for="editIsDraft">Сохранить как черновик</label>
          <div class="form-text">Если отмечено, заявка будет переведена в статус черновика.</div>
        </div>
      </div>

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


<!-- Delete -->
<div class="modal fade" id="reqDeleteModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="reqDeleteForm">
      {% csrf_token %}
      <input type="hidden" name="id" id="deleteId">
      <div class="modal-header">
        <h5 class="modal-title text-danger">Удалить заявление?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        Это действие необратимо.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Отмена</button>
        <button class="btn btn-danger" type="submit">Удалить</button>
      </div>
    </form>
  </div>
</div>

<!-- Approve -->
<div class="modal fade" id="reqApproveModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="reqApproveForm">
      {% csrf_token %}
      <input type="hidden" name="id" id="approveId">
      <div class="modal-header">
        <h5 class="modal-title text-success">Одобрить заявление?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Отмена</button>
        <button class="btn btn-success" type="submit">Одобрить</button>
      </div>
    </form>
  </div>
</div>

<!-- Reject -->
<div class="modal fade" id="reqRejectModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="reqRejectForm">
      {% csrf_token %}
      <input type="hidden" name="id" id="rejectId">
      <div class="modal-header">
        <h5 class="modal-title text-danger">Отклонить заявление?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Отмена</button>
        <button class="btn btn-danger" type="submit">Отклонить</button>
      </div>
    </form>
  </div>
</div>

<!-- Cancel -->
<div class="modal fade" id="reqCancelModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="reqCancelForm">
      {% csrf_token %}
      <input type="hidden" name="id" id="cancelId">
      <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-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Отмена</button>
        <button class="btn btn-outline-secondary" type="submit">Отменить</button>
      </div>
    </form>
  </div>
</div>

<!-- Add comment -->
<div class="modal fade" id="reqCommentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="reqCommentForm">
      {% csrf_token %}
      <input type="hidden" name="id" id="commentId">
      <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="message-field message-field--solo">
          <textarea name="text" id="commentText" class="form-control message-input" rows="4" required></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Отмена</button>
        <button class="btn btn-primary" type="submit">Отправить</button>
      </div>
    </form>
  </div>
</div>

<!-- Comments viewer -->
<div class="modal fade" id="reqCommentsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Комментарии к заявлению #{{ comments_for }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        {% if comments %}
          <div class="list-group">
            {% for c in comments %}
              <div class="list-group-item">
                <div class="small text-body-secondary d-flex justify-content-between">
                  <span>{{ c.author.full_name|default:c.author|default:"—" }}</span>
                  <span class="text-mono">{{ c.created_at }}</span>
                </div>
                <div class="mt-1">{{ c.text }}</div>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-body-secondary">Комментариев пока нет.</div>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reqCommentModal"
                data-id="{{ comments_for }}">Добавить комментарий</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
  // Передаем данные для инициализации страницы
  document.body.dataset.userId = '{{ user.id }}';
  document.body.dataset.canProcess = '{{ can_process|yesno:"true,false" }}';
</script>
<script type="module">
  import { initRequestListPage } from "{% static 'js/pages/requestList.js' %}";

  initRequestListPage({
    apiListUrl: "{% url 'api:v1:request-list' %}",
    apiDetailBase: "{% url 'api:v1:request-list' %}",
    commentsUrlTemplate: "/api/v1/requests/0/comments/",
    addCommentUrlTemplate: "/api/v1/requests/0/comments/",
    autoShowComments: {% if comments_for %}true{% else %}false{% endif %},
    useAjaxList: true  // Включаем AJAX режим для списка
  });
</script>
<script src="{% static 'js/components/requestComments.js' %}"></script>
<!-- Emoji Picker Library -->
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
{% endblock %}