{% extends "pos/base.html" %}
{% block title %}Staff Certificates{% endblock %}
{% block heading %}Staff Certificates{% endblock %}

{% block stylesheets %}
<style>
  .filter-bar { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.25rem; }
  .filter-bar .form-label { font-weight: 500; color: #333; margin-bottom: 0.25rem; font-size: 0.85rem; }
  .badge-active { background: #198754; }
  .badge-void { background: #6c757d; }
  table.cert-table th { white-space: nowrap; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-end align-items-center mb-3">
  <a href="{% url 'payroll:certificate_add' %}" class="btn btn-primary">
    <i class="bi bi-plus-lg"></i> New certificate
  </a>
</div>

<form method="get" class="filter-bar">
  <div class="row g-2 align-items-end">
    <div class="col-md-3">
      <label class="form-label">Search</label>
      <input type="text" class="form-control form-control-sm" name="search" value="{{ search }}" placeholder="Certificate no, name, employee code">
    </div>
    <div class="col-md-2">
      <label class="form-label">Type</label>
      <select class="form-select form-select-sm" name="certificate_type">
        <option value="">All types</option>
        {% for ct in certificate_types %}
          <option value="{{ ct.pk }}" {% if selected_type == ct.pk|stringformat:"s" %}selected{% endif %}>{{ ct.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2">
      <label class="form-label">Status</label>
      <select class="form-select form-select-sm" name="status">
        <option value="active" {% if status_filter == "active" %}selected{% endif %}>Active</option>
        <option value="void" {% if status_filter == "void" %}selected{% endif %}>Void</option>
        <option value="all" {% if status_filter == "all" %}selected{% endif %}>All</option>
      </select>
    </div>
    <div class="col-md-2">
      <label class="form-label">From</label>
      <input type="date" class="form-control form-control-sm" name="date_from" value="{{ date_from }}">
    </div>
    <div class="col-md-2">
      <label class="form-label">To</label>
      <input type="date" class="form-control form-control-sm" name="date_to" value="{{ date_to }}">
    </div>
    <div class="col-md-1">
      <button type="submit" class="btn btn-sm btn-outline-primary w-100">Filter</button>
    </div>
  </div>
</form>

<div class="table-responsive">
  <table class="table table-hover align-middle cert-table">
    <thead class="table-light">
      <tr>
        <th>Certificate no</th>
        <th>Staff</th>
        <th>Type</th>
        <th>Issue date</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for cert in page_obj %}
      <tr>
        <td>{{ cert.certificate_no }}</td>
        <td>{{ cert.staff_name }}{% if cert.employee_code %} <span class="text-muted small">({{ cert.employee_code }})</span>{% endif %}</td>
        <td>{{ cert.certificate_type.name }}</td>
        <td>{{ cert.issue_date|date:"d M Y" }}</td>
        <td>
          {% if cert.status == 'active' %}
            <span class="badge badge-active">Active</span>
          {% else %}
            <span class="badge badge-void">Void</span>
          {% endif %}
        </td>
        <td class="text-end">
          <a href="{% url 'payroll:certificate_pdf' cert.pk %}" class="btn btn-sm btn-outline-secondary" target="_blank" title="Print / view PDF">
            <i class="bi bi-file-earmark-pdf"></i>
          </a>
          {% if cert.status == 'active' %}
          <a href="{% url 'payroll:certificate_edit' cert.pk %}" class="btn btn-sm btn-outline-secondary" title="Edit">
            <i class="bi bi-pencil"></i>
          </a>
          <a href="{% url 'payroll:certificate_void' cert.pk %}" class="btn btn-sm btn-outline-danger" title="Void">
            <i class="bi bi-x-circle"></i>
          </a>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="6" class="text-center text-muted py-4">No certificates found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if page_obj.paginator.num_pages > 1 %}
<nav>
  <ul class="pagination pagination-sm">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&search={{ search|urlencode }}&certificate_type={{ selected_type|urlencode }}&status={{ status_filter|urlencode }}&date_from={{ date_from|urlencode }}&date_to={{ date_to|urlencode }}">Previous</a></li>
    {% endif %}
    <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&search={{ search|urlencode }}&certificate_type={{ selected_type|urlencode }}&status={{ status_filter|urlencode }}&date_from={{ date_from|urlencode }}&date_to={{ date_to|urlencode }}">Next</a></li>
    {% endif %}
  </ul>
</nav>
{% endif %}
{% endblock %}