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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/document-list.css' %}">
<link rel="stylesheet" href="{% static 'css/components/page-header.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">
    {% if requests %}
      {% for obj in requests %}
        <article class="req-row" id="req-{{ obj.id }}">
          <header class="card-header">
            <!-- Иконка типа заявления -->
            <div class="card-icon d-flex align-items-center justify-content-center">
              {% with tp=obj.type|lower %}
                {% if tp == 'vacation' %}<i class="bi-calendar-check text-primary"></i>
                {% elif tp == 'sick_leave' %}<i class="bi-capsule text-danger"></i>
                {% elif tp == 'transfer' %}<i class="bi-box-arrow-right text-info"></i>
                {% elif tp == 'dismissal' %}<i class="bi-door-open text-warning"></i>
                {% else %}<i class="bi-clipboard-check text-secondary"></i>
                {% endif %}
              {% endwith %}
            </div>
            
            <!-- Основная информация -->
            <div class="card-meta">
              <div class="card-title d-flex align-items-center gap-2 flex-wrap">
                <!-- Заголовок заявления -->
                <strong>{{ obj.title|default:"Без заголовка" }}</strong>
                
                <!-- Тип заявления -->
                {% if obj.type %}{% with tp=obj.type|lower %}
                  <span class="badge text-bg-light">
                    {% if tp == 'vacation' %}Отпуск
                    {% elif tp == 'sick_leave' %}Больничный
                    {% elif tp == 'transfer' %}Перевод
                    {% elif tp == 'dismissal' %}Увольнение
                    {% elif tp == 'other' %}Другое
                    {% else %}{{ obj.type }}{% endif %}
                  </span>
                {% endwith %}{% endif %}
                
                <!-- Статус -->
                {% if obj.status %}{% with st=obj.status|lower %}
                  <span class="badge
                    {% if st == 'approved' %}text-bg-success
                    {% elif st == 'rejected' %}text-bg-danger
                    {% elif st == 'pending' %}text-bg-warning
                    {% elif st == 'cancelled' %}text-bg-secondary
                    {% elif st == 'draft' %}text-bg-info
                    {% else %}text-bg-light{% endif %}">
                    {% if st == 'draft' %}Черновик
                    {% elif st == 'pending' %}На рассмотрении
                    {% elif st == 'approved' %}Одобрено
                    {% elif st == 'rejected' %}Отклонено
                    {% elif st == 'cancelled' %}Отменено
                    {% else %}{{ obj.status }}{% endif %}
                  </span>
                {% endwith %}{% endif %}
              </div>
              
              <!-- Дополнительная информация -->
              <div class="card-subtitle">
                <!-- Автор -->
                {% if obj.employee %}
                  {% if obj.employee.id == user.id %}
                    <a href="{% url 'employees:profile' %}" class="text-decoration-none">Вы</a>
                  {% else %}
                    <a href="{% url 'employees:employee_detail' obj.employee.id %}" class="text-decoration-none">
                      {{ obj.employee.full_name|default:obj.employee.display_name|default:"Сотрудник" }}
                    </a>
                  {% endif %}
                {% endif %}
                
                <!-- Период -->
                {% if obj.date_from or obj.date_to %}
                  <span>·</span>
                  <span class="text-mono">
                    {{ obj.date_from|date:"d.m.Y"|default:"—" }} → {{ obj.date_to|date:"d.m.Y"|default:"—" }}
                  </span>
                {% endif %}
                
                <!-- Дата создания -->
                {% if obj.created_at %}
                  <span>·</span>
                  <span>{{ obj.created_at|date:"d.m.Y H:i" }}</span>
                {% endif %}
              </div>
            </div>
            
            <!-- Кнопки действий -->
            {% if obj.employee.id != user.id and can_process %}
            <div class="ms-auto d-flex gap-1">
              <button type="button" class="btn btn-ghost btn-sm text-success"
                      data-bs-toggle="modal" data-bs-target="#reqApproveModal"
                      data-id="{{ obj.id }}" title="Одобрить">
                <i class="bi-hand-thumbs-up"></i>
              </button>
              <button type="button" class="btn btn-ghost btn-sm text-danger"
                      data-bs-toggle="modal" data-bs-target="#reqRejectModal"
                      data-id="{{ obj.id }}" title="Отклонить">
                <i class="bi-hand-thumbs-down"></i>
              </button>
            </div>
            {% elif obj.employee.id == user.id %}
            <div class="ms-auto d-flex gap-1">
              <button type="button" class="btn btn-ghost btn-sm text-primary"
                      data-bs-toggle="modal" data-bs-target="#reqEditModal"
                      data-id="{{ obj.id }}"
                      data-title="{{ obj.title|default_if_none:'' }}"
                      data-type="{{ obj.type|default_if_none:'' }}"
                      data-date_from="{{ obj.date_from|default_if_none:'' }}"
                      data-date_to="{{ obj.date_to|default_if_none:'' }}"
                      data-comment="{{ obj.comment|default_if_none:'' }}"
                      data-status="{{ obj.status|lower }}" title="Изменить">
                <i class="bi-pencil"></i>
              </button>
              <button type="button" class="btn btn-ghost btn-sm text-secondary"
                      data-bs-toggle="modal" data-bs-target="#reqCancelModal"
                      data-id="{{ obj.id }}" title="Отменить">
                <i class="bi-slash-circle"></i>
              </button>
            </div>
            {% endif %}
          </header>

          {% if obj.comment %}
            <div class="card-body">
              <div class="small text-body-secondary">{{ obj.comment }}</div>
            </div>
          {% endif %}

          <footer class="card-actions">
            <button class="btn btn-ghost d-inline-flex align-items-center gap-1"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#rcoll-{{ obj.id }}"
                    aria-controls="rcoll-{{ obj.id }}"
                    aria-expanded="false">
              <i class="bi-chat-dots"></i>
              <span class="txt-open" data-role="count">{{ obj.comments_count|default:0 }}</span>
              <span class="txt-close">Скрыть</span>
            </button>
            {% if obj.attachment %}
              <a href="{{ obj.attachment }}" class="btn btn-ghost d-inline-flex align-items-center gap-1" target="_blank">
                <i class="bi-paperclip"></i><span>Вложение</span>
              </a>
            {% endif %}
          </footer>

          <div id="rcoll-{{ obj.id }}" class="collapse" data-request-id="{{ obj.id }}" data-comments-collapse>
            <div class="comments-block p-3">
              <div class="d-flex align-items-center gap-2 mb-3">
                <strong class="small mb-0">Комментарии</strong>
                <div class="spinner-border spinner-border-sm text-secondary" role="status" style="display:none;"></div>
              </div>
              <div class="comments-list" data-role="list"></div>
              <form class="comment-new mt-3 request-comment-form" data-role="form" autocomplete="off">
                {% csrf_token %}
                <div class="message-field message-field--compact">
                  <!-- Кнопка выбора эмодзи -->
                  <div class="dropdown message-emoji">
                    <button type="button" class="btn btn-ghost btn-emoji message-icon-btn"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            title="Вставить смайлик">
                      <i class="bi-emoji-smile"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-start message-emoji-menu">
                      <emoji-picker data-emoji-picker class="chat-emoji-picker"></emoji-picker>
                    </div>
                  </div>
                  <textarea class="form-control message-input" rows="1" placeholder="Написать…" data-role="text"></textarea>
                  <button class="btn btn-primary message-send" type="submit" title="Отправить"><i class="bi-send"></i></button>
                </div>
              </form>
            </div>
          </div>
        </article>
      {% endfor %}
    {% else %}
      <div class="p-4 text-center text-body-secondary">Нет заявлений.</div>
    {% endif %}
  </div>

  {# Пагинация по next/prev ссылкам из API (если есть) #}
  {% if next_url or prev_url %}
    <div class="d-flex justify-content-between align-items-center mt-3">
      <a class="btn btn-outline-secondary {% if not prev_url %}disabled{% endif %}" href="{{ prev_url|default:'#' }}">
        <i class="bi-arrow-left"></i> Назад
      </a>
      <span class="text-body-secondary small">Всего: {{ count|default:'—' }}</span>
      <a class="btn btn-outline-secondary {% if not next_url %}disabled{% endif %}" href="{{ next_url|default:'#' }}">
        Вперёд <i class="bi-arrow-right"></i>
      </a>
    </div>
  {% endif %}

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

<!-- Create -->
<div class="modal fade" id="reqCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="reqCreateForm" 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>
          <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" maxlength="255">
        </div>

        <div class="row g-2">
          <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="mt-3">
          <label class="form-label">Комментарий</label>
          <div class="message-field message-field--solo">
            <textarea name="comment" class="form-control message-input" rows="3"></textarea>
          </div>
        </div>

        <div class="mt-3">
          <label class="form-label">Вложение</label>
          <input type="file" name="attachment" class="form-control">
          <div class="form-text">Допустимые форматы и размер контролируются на сервере.</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">
    <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">Изменить заявление</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-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">Новое вложение</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 type="module">
  import { initRequestListPage } from "{% static 'js/pages/requestList.js' %}";

  initRequestListPage({
    apiListUrl: "{% url 'api:v1:request-list' %}",
    apiDetailBase: "{% url 'api:v1:request-list' %}",
    commentsUrlTemplate: "{% url 'requests:request_comments' 0 %}",
    addCommentUrlTemplate: "{% url 'requests:request_comment_add' 0 %}",
    autoShowComments: {% if comments_for %}true{% else %}false{% endif %}
  });
</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 %}