{% extends 'base.html' %}
{% load static django_bootstrap5 %}

{% block title %}Все заявления сотрудников{% endblock %}

{% block content %}
<div class="container">
  <div class="row gx-0">
    <div class="col-12">

      <!-- Заголовок -->
      <div class="section-header">
        <i class="bi-clipboard2-check fs-2 text-primary"></i>
        <h2 class="title mb-0">Заявления сотрудников</h2>
      </div>

      <!-- Фильтры -->
      <div class="feed-new mb-3">
        <form method="get" class="row g-2 align-items-end">
          <div class="col-12 col-sm-4">
            <label class="form-label small text-secondary mb-1">Статус</label>
            <select name="status" class="form-select">
              <option value="" {% if not filters.status %}selected{% endif %}>Все</option>
              <option value="pending"  {% if filters.status == 'pending' %}selected{% endif %}>На рассмотрении</option>
              <option value="approved" {% if filters.status == 'approved' %}selected{% endif %}>Одобрено</option>
              <option value="rejected" {% if filters.status == 'rejected' %}selected{% endif %}>Отклонено</option>
              <option value="cancelled" {% if filters.status == 'cancelled' %}selected{% endif %}>Отменено</option>
              <option value="draft" {% if filters.status == 'draft' %}selected{% endif %}>Черновик</option>
            </select>
          </div>

          <div class="col-6 col-sm-4 col-md-3">
            <label class="form-label small text-secondary mb-1">С даты</label>
            <input type="date" name="from" class="form-control" value="{{ filters.from }}">
          </div>

          <div class="col-6 col-sm-4 col-md-3">
            <label class="form-label small text-secondary mb-1">По дату</label>
            <input type="date" name="to" class="form-control" value="{{ filters.to }}">
          </div>

          <div class="col-12 col-md-2">
            <label class="form-label small text-secondary mb-1">Сортировка</label>
            <select name="sort" class="form-select">
              <option value="" {% if not filters.sort %}selected{% endif %}>По умолчанию</option>
              <option value="-created_at" {% if filters.sort == '-created_at' %}selected{% endif %}>Новые сверху</option>
              <option value="created_at"  {% if filters.sort == 'created_at' %}selected{% endif %}>Старые сверху</option>
            </select>
          </div>

          <div class="col-12 d-flex gap-2">
            <button class="btn btn-primary"><i class="bi-funnel me-1"></i>Применить</button>
            <a class="btn btn-ghost" href="?"><i class="bi-x-circle me-1"></i>Сбросить</a>
          </div>
        </form>
      </div>

      {% with items=requests|default:page.object_list %}
        {% if items %}
          <div class="card-list">
            {% for req in items %}
              <article class="card">
                <header class="card-header">
                  <div class="card-icon" style="width:44px;height:44px;">
                    {% if req.employee.avatar %}
                      <img src="{{ req.employee.avatar }}" alt="">
                    {% else %}
                      <i class="bi-person"></i>
                    {% endif %}
                  </div>

                  <div class="card-meta flex-grow-1">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                      <a href="{% url 'employees:employee_detail' req.employee.pk %}"
                         class="card-title text-decoration-none">
                        {{ req.employee.get_full_name|default:req.employee.username }}
                      </a>
                      {% if req.department %}
                        <span class="badge bg-light text-dark border">
                          <i class="bi-diagram-3 me-1"></i>{{ req.department.name }}
                        </span>
                      {% endif %}
                    </div>

                    <div class="card-subtitle mt-1">
                      <span class="text-secondary">Подано:</span>
                      {{ req.created_at|date:"d.m.Y H:i" }}
                    </div>
                  </div>

                  <!-- Бейдж статуса справа -->
                  <div class="ms-auto">
                    {% if req.status == 'pending' %}
                      <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">На рассмотрении</span>
                    {% elif req.status == 'approved' %}
                      <span class="badge bg-success-subtle text-success-emphasis border border-success-subtle">Одобрено</span>
                    {% elif req.status == 'rejected' %}
                      <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle">Отклонено</span>
                    {% elif req.status == 'cancelled' %}
                      <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">Отменено</span>
                    {% else %}
                      <span class="badge bg-secondary">Черновик</span>
                    {% endif %}
                  </div>
                </header>

                <div class="card-body pt-0">
                  <div class="mb-2">
                    <span class="badge bg-primary-subtle text-primary-emphasis border border-primary-subtle">
                      {{ req.get_type_display }}
                    </span>
                  </div>

                  <div class="small text-muted">
                    <span class="me-1 text-secondary">Период:</span>
                    {% if req.date_from or req.date_to %}
                      {{ req.date_from|date:"d.m.Y" }}{% if req.date_to %} — {{ req.date_to|date:"d.m.Y" }}{% endif %}
                    {% else %}
                      —
                    {% endif %}
                  </div>
                </div>

                <footer class="card-actions">
                  <a href="{% url 'requests_app:request_process' req.pk %}"
                     class="btn btn-ghost d-inline-flex align-items-center gap-1">
                    <i class="bi-box-arrow-up-right"></i><span>Рассмотреть</span>
                  </a>
                </footer>
              </article>
            {% endfor %}
          </div>

          {% if page %}
            <div class="mt-4">
              {% bootstrap_pagination page %}
            </div>
          {% endif %}
        {% else %}
          <div class="alert alert-info shadow-sm">Заявлений нет.</div>
        {% endif %}
      {% endwith %}
    </div>
  </div>
</div>
{% endblock %}