{% extends "base.html" %}
{% block title %}Uploaded Consultant DOCX{% endblock %}
{% from "contracts/_upload_modal.html" import upload_modal %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contract.css') }}" />
<div class="container mt-4">

  <!-- ==== CARDS ROW ==== -->
  <div class="row mb-4 cards-row">
    <!-- Total Uploaded Files Card -->
    <div class="col-sm-6 col-xl-3">
      <div class="card card-1 h-100">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h6 class="card-title text-muted">Total Uploaded DOCX</h6>
              <h4 class="mb-1">{{ total_uploads }}</h4>
              <small class="text-muted">All time</small>
            </div>
            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                 style="width: 50px; height: 50px;">
              <i class="bx bx-file fs-4"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Today's Uploads Card -->
    <div class="col-sm-6 col-xl-3">
      <div class="card card-1 h-100">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h6 class="card-title text-muted">Uploaded Today</h6>
              <h4 class="mb-1">{{ today_uploads }}</h4>
              <small class="text-muted">{{ today_pretty }}</small>
            </div>
            <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center"
                 style="width: 50px; height: 50px;">
              <i class="bx bx-calendar fs-4"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==== FILTER + ACTIONS ==== -->
  <div class="d-flex justify-content-between align-items-center mb-2">
    <div class="d-flex flex-wrap gap-2">
      <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#uploadDocxModal">
       Signed  Upload Contract
      </button>
      <a href="{{ url_for('docx_upload.download_all_zip') }}" class="btn btn-primary">
        <i class='bx bx-download'></i> Download All (ZIP)
      </a>
    </div>
  </div>

  {{ upload_modal() }}

  <div class="table-card card-1">
    <!-- ==== FILTER FORM ==== -->
    <form id="filterForm"
          action="{{ url_for('docx_upload.uploads_list') }}"
          method="get"
          class="filter-form d-flex flex-wrap gap-3 mb-4 align-items-center">

      <!-- Search -->
      <div class="input-group w-auto position-relative">
        <span class="input-group-text"><i class='bx bx-search'></i></span>
        <input type="text" name="search" id="searchInput" class="form-control"
               placeholder="Search by filename or uploader"
               value="{{ search_query or '' }}">
        <button type="button" id="clearSearch"
                class="btn btn-outline-secondary {% if not search_query %}d-none{% endif %}">
          <i class='bx bx-x'></i>
        </button>
        <button type="submit" class="btn btn-primary" id="searchButton">Search</button>
        <div id="searchSpinner"
             class="spinner-border spinner-border-sm position-absolute"
             style="right: 80px; top: 50%; transform: translateY(-50%); display: none;"
             role="status"><span class="visually-hidden">Loading...</span></div>
      </div>

      <!-- Sort -->
      <div class="input-group w-auto">
        <label class="input-group-text" for="sortSelect">Sort</label>
        <select id="sortSelect" name="sort" class="form-select" onchange="this.form.submit()">
          <option value="uploaded_at_desc" {% if sort_order == 'uploaded_at_desc' %}selected{% endif %}>Newest First</option>
          <option value="uploaded_at_asc" {% if sort_order == 'uploaded_at_asc' %}selected{% endif %}>Oldest First</option>
          <option value="original_name_asc" {% if sort_order == 'original_name_asc' %}selected{% endif %}>Name (A-Z)</option>
          <option value="original_name_desc" {% if sort_order == 'original_name_desc' %}selected{% endif %}>Name (Z-A)</option>
          <option value="uploaded_by_asc" {% if sort_order == 'uploaded_by_asc' %}selected{% endif %}>Uploader (A-Z)</option>
          <option value="uploaded_by_desc" {% if sort_order == 'uploaded_by_desc' %}selected{% endif %}>Uploader (Z-A)</option>
        </select>
      </div>

      <!-- Entries per page -->
      <div class="input-group w-auto">
        <label class="input-group-text" for="entriesSelect">Show</label>
        <select id="entriesSelect" name="entries" class="form-select" onchange="this.form.submit()">
          <option value="5" {% if entries_per_page == 5 %}selected{% endif %}>5</option>
          <option value="10" {% if entries_per_page == 10 %}selected{% endif %}>10</option>
          <option value="15" {% if entries_per_page == 15 %}selected{% endif %}>15</option>
          <option value="30" {% if entries_per_page == 30 %}selected{% endif %}>30</option>
        </select>
      </div>
    </form>

    <!-- ==== TABLE ==== -->
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>File</th>
            <th class="d-none d-md-table-cell">Uploaded By</th>
            <th class="d-none d-md-table-cell">Uploaded At</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for doc in pagination.items %}
          <tr>
            <td><i class='bx bxs-file-doc text-primary'></i> {{ doc.original_name }}</td>
            <td class="d-none d-md-table-cell">{{ doc.uploaded_by }}</td>
            <td class="d-none d-md-table-cell">
              {{ doc.uploaded_at.strftime('%d %B %Y') }}
            </td>
            <td class="text-center">
              <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary" type="button"
                        data-bs-toggle="dropdown">
                  <i class="bx bx-dots-horizontal-rounded"></i>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item"
                       href="{{ url_for('docx_upload.download', file_id=doc.id) }}">
                      <i class='bx bx-download'></i> Download
                    </a>
                  </li>
                  {% if current_user.has_role('Admin') %}
                  <li>
                    <a class="dropdown-item text-danger" href="#"
                       data-bs-toggle="modal"
                       data-bs-target="#deleteConfirmModal{{ doc.id }}">
                      <i class='bx bx-trash'></i> Delete
                    </a>
                  </li>
                  {% endif %}
                </ul>
              </div>
            </td>
          </tr>

          <!-- Delete Confirm Modal -->
          <div class="modal fade" id="deleteConfirmModal{{ doc.id }}" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Confirm Deletion</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  Are you sure you want to delete the file "<strong>{{ doc.original_name }}</strong>"?
                  <br><small>This action cannot be undone.</small>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <form action="{{ url_for('docx_upload.delete', file_id=doc.id) }}" method="POST"
                        class="d-inline">
                    <button type="submit" class="btn btn-danger">Delete</button>
                  </form>
                </div>
              </div>
            </div>
          </div>

          {% else %}
          <tr><td colspan="4" class="text-center text-muted py-4">No files uploaded yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- ==== PAGINATION ==== -->
    {% if pagination.pages > 1 %}
    <nav class="mt-3">
      <ul class="pagination justify-content-center mb-0">
        {% if pagination.has_prev %}
        <li class="page-item">
          <a class="page-link"
             href="{{ url_for('docx_upload.uploads_list',
                               page=pagination.prev_num,
                               search=search_query,
                               sort=sort_order,
                               entries=entries_per_page) }}">Prev</a>
        </li>
        {% else %}
        <li class="page-item disabled"><span class="page-link">Prev</span></li>
        {% endif %}

        {% for p in pagination.iter_pages() %}
          {% if p %}
            <li class="page-item {% if p == pagination.page %}active{% endif %}">
              <a class="page-link"
                 href="{{ url_for('docx_upload.uploads_list',
                                   page=p,
                                   search=search_query,
                                   sort=sort_order,
                                   entries=entries_per_page) }}">{{ p }}</a>
            </li>
          {% else %}
            <li class="page-item disabled"><span class="page-link">...</span></li>
          {% endif %}
        {% endfor %}

        {% if pagination.has_next %}
        <li class="page-item">
          <a class="page-link"
             href="{{ url_for('docx_upload.uploads_list',
                               page=pagination.next_num,
                               search=search_query,
                               sort=sort_order,
                               entries=entries_per_page) }}">Next</a>
        </li>
        {% else %}
        <li class="page-item disabled"><span class="page-link">Next</span></li>
        {% endif %}
      </ul>
    </nav>
    {% endif %}
  </div>
</div>

<!-- ==== SEARCH DEBOUNCE JS ==== -->
<script>
  function debounce(func, wait) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  const filterForm    = document.getElementById('filterForm');
  const searchInput   = document.getElementById('searchInput');
  const clearSearch   = document.getElementById('clearSearch');
  const searchSpinner = document.getElementById('searchSpinner');

  searchInput.addEventListener('input', debounce(() => {
    if (searchInput.value.length >= 2 || searchInput.value.length === 0) {
      searchSpinner.style.display = 'block';
      clearSearch.classList.toggle('d-none', !searchInput.value);
      filterForm.submit();
    }
  }, 500));

  clearSearch.addEventListener('click', () => {
    searchInput.value = '';
    clearSearch.classList.add('d-none');
    searchSpinner.style.display = 'block';
    filterForm.submit();
  });

  window.addEventListener('load', () => {
    searchSpinner.style.display = 'none';
  });
</script>
{% endblock %}