{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h3 class="text-primary mb-3">Employee Documents</h3>

  <form class="card p-3 shadow-sm mb-3" method="get">
    <div class="row g-2 align-items-end">
    <div class="col-md-3">
      <label class="form-label">Employee</label>
      <select class="form-select" id="employee_id" name="employee_id" data-placeholder="Type name or code">
        <option value=""></option>
        <!-- preselect block if needed -->
        {% if emp_id %}
          {% for e in employees if e.id == emp_id %}
            <option value="{{ e.id }}" selected>{{ e.employee_code }} — {{ e.full_name }}</option>
          {% endfor %}
        {% endif %}
      </select>
    </div>
      <div class="col-md-3">
        <label class="form-label">Document Type</label>
        <select class="form-select" name="doc_type_id">
          <option value="">All</option>
          {% for t in doc_types %}
            <option value="{{ t.id }}" {{ 'selected' if type_id==t.id }}>
              {{ t.name }} ({{ t.code }})
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label">Issued From</label>
        <input type="date" class="form-control" name="issued_from" value="{{ issued_from or '' }}">
      </div>
      <div class="col-md-2">
        <label class="form-label">Issued To</label>
        <input type="date" class="form-control" name="issued_to" value="{{ issued_to or '' }}">
      </div>
      <div class="col-md-2">
        <label class="form-label">Search</label>
        <input class="form-control" name="q" placeholder="name/code/title" value="{{ q or '' }}">
      </div>
    </div>
    <div class="mt-3 d-flex gap-2">
      <button class="btn btn-primary">Filter</button>
      <a class="btn btn-outline-secondary" href="{{ url_for('docs.list_documents') }}">Reset</a>
      <a class="btn btn-outline-success" href="{{ url_for('docs.upload_document') }}">Upload New</a>
    </div>
  </form>

  <div class="card shadow-sm">
    <div class="table-responsive">
      <table class="table table-bordered m-0">
        <thead class="table-light">
        <tr>
          <th>#</th>
          <th>Emp Code</th>
          <th>Employee</th>
          <th>Type</th>
          <th>Title</th>
          <th>Issued</th>
          <th>Size</th>
          <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for rec, emp, dtype in rows %}
          <tr>
            <td>{{ loop.index + ((pagination.page-1) * pagination.per_page) }}</td>
            <td>{{ emp.employee_code }}</td>
            <td>{{ emp.full_name }}</td>
            <td>{{ dtype.name }}</td>
            <td>{{ rec.title }}</td>
            <td>{{ rec.issued_on or '-' }}</td>
            <td>{{ (rec.file_size // 1024) }} KB</td>
            <td class="text-nowrap">
              <a class="btn btn-sm btn-outline-primary" href="{{ url_for('docs.download_doc', doc_id=rec.id) }}">Download</a>
              <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('docs.employee_docs', emp_id=emp.id) }}">View All</a>
              <form method="post" action="{{ url_for('docs.delete_doc', doc_id=rec.id) }}" style="display:inline">
                <button class="btn btn-sm btn-outline-danger" onclick="return confirm('Remove this document?')">Delete</button>
              </form>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="8" class="text-center text-muted">No documents found.</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

    {% if pagination.pages > 1 %}
    <div class="card-footer d-flex justify-content-between">
      <div>Page {{ pagination.page }} of {{ pagination.pages }}</div>
      <div class="btn-group">
        {% if pagination.has_prev %}
          <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('docs.list_documents', page=1, per_page=pagination.per_page, employee_id=emp_id, doc_type_id=type_id, q=q, issued_from=issued_from, issued_to=issued_to) }}">&laquo; First</a>
          <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('docs.list_documents', page=pagination.prev_num, per_page=pagination.per_page, employee_id=emp_id, doc_type_id=type_id, q=q, issued_from=issued_from, issued_to=issued_to) }}">Prev</a>
        {% endif %}
        {% if pagination.has_next %}
          <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('docs.list_documents', page=pagination.next_num, per_page=pagination.per_page, employee_id=emp_id, doc_type_id=type_id, q=q, issued_from=issued_from, issued_to=issued_to) }}">Next</a>
          <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('docs.list_documents', page=pagination.pages, per_page=pagination.per_page, employee_id=emp_id, doc_type_id=type_id, q=q, issued_from=issued_from, issued_to=issued_to) }}">Last &raquo;</a>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function () {
  $('#employee_id').select2({
    width: '100%',
    placeholder: $('#employee_id').data('placeholder') || 'Search employee…',
    allowClear: true,
    ajax: {
      url: "{{ url_for('docs.employee_search') }}",
      dataType: 'json',
      delay: 200,
      data: params => ({ q: params.term || '', page: params.page || 1, per_page: 20 }),
      processResults: (data, params) => ({ results: data.results || [] })
    },
    minimumInputLength: 1
  });
});
</script>

<style>
/* Make Select2 look like .form-select (Bootstrap 5) */
.select2-container { width:100% !important; }
.select2-container .select2-selection--single {
  height: calc(2.25rem + 2px); /* default .form-select height */
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: .375rem; /* .form-select radius */
  padding: .375rem .75rem;
  display: flex; align-items: center;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0; line-height: 1.5; color: inherit;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%; right: .5rem;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* bootstrap focus */
  border-color: #86b7fe;
}
.select2-dropdown {
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: .375rem; overflow: hidden;
}
</style>
{% endblock %}