{% extends 'admin_pages/base_admin.html' %}
{% block title %}{{ model_verbose_name }} List | Admin Panel{% endblock %}

{% block content %}
<h2 class="mb-3">{{ model_verbose_name }} List</h2>
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Expense Categories</li>
  </ol>
</nav>
{% endblock %}

<!-- Search & Sort Form -->
<form method="get" class="row g-3 mb-4 align-items-end">
  <div class="col-md-6">
    <label class="form-label">Search</label>
    <input type="text" name="q" value="{{ search_query }}" class="form-control" placeholder="Search...">
  </div>
  <div class="col-md-6">
    <button type="submit" class="btn btn-primary w-100">Apply</button>
  </div>
</form>

<div class="row mb-3 align-items-center">
  {% if perms.cargo.add_expensecategory %}
    <div class="col-md-3">
      <a href="{% url 'expense_category_add' %}" class="btn btn-outline-success w-100">Add {{ model_verbose_name }}</a>
    </div>
  {% endif %}

  {% if perms.cargo.bulk_delete %}
    <div class="col-md-3">
      <button type="submit" formaction="{% url 'expense_category_bulk_delete' %}" class="btn btn-outline-danger w-100">
        Delete Selected
      </button>
    </div>
  {% endif %}

  {% if perms.cargo.download_excel %}
    <div class="col-md-3">
      <button type="submit" formaction="{% url 'expense_category_export' %}" class="btn btn-outline-success w-100">
        Export to Excel
      </button>
    </div>
  {% endif %}

  {% if perms.cargo.download_pdf %}
    <div class="col-md-3">
      <button type="submit" formaction="{% url 'expense_category_export_pdf' %}" class="btn btn-outline-warning w-100">
        PDF Export
      </button>
    </div>
  {% endif %}
</div>


<table class="table table-bordered table-hover">
  <thead class="table-light">
    <tr>
      <th style="width: 40px;"><input type="checkbox" id="selectAll"></th>
      <th>ID</th>
      <th>Title</th>
      <th>Remarks</th>
      {% if perms.cargo.change_expensecategory or perms.cargo.delete_expensecategory %}
        <th class="text-end">Actions</th>
      {% endif %}
    </tr>
  </thead>
  <tbody>
    {% for item in expense_categories %}
      <tr>
        <td><input type="checkbox" name="selected_ids" value="{{ item.id }}"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.remarks }}</td>
        {% if perms.cargo.change_expensecategory or perms.cargo.delete_expensecategory %}
          <td class="text-end">
            {% if perms.cargo.change_expensecategory %}
              <a href="{% url 'expense_category_edit' item.id %}" class="btn btn-sm btn-warning">Edit</a>
            {% endif %}
            {% if perms.cargo.delete_expensecategory %}
              <a href="{% url 'expense_category_delete' item.id %}" class="btn btn-sm btn-danger">Delete</a>
            {% endif %}
          </td>
        {% endif %}
      </tr>
    {% empty %}
      <tr>
        <td colspan="5" class="text-center">No {{ model_verbose_name|lower }} found.</td>
      </tr>
    {% endfor %}
  </tbody>
</table>
</form>

<!-- Pagination -->
{% if expense_categories.has_other_pages %}
  <nav>
    <ul class="pagination justify-content-center">
      {% if expense_categories.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ expense_categories.previous_page_number }}">Previous</a>
        </li>
      {% endif %}

      {% for num in expense_categories.paginator.page_range %}
        <li class="page-item {% if expense_categories.number == num %}active{% endif %}">
          <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ num }}">{{ num }}</a>
        </li>
      {% endfor %}

      {% if expense_categories.has_next %}
        <li class="page-item">
          <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ expense_categories.next_page_number }}">Next</a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}

<!-- Select All Script -->
<script>
  document.getElementById('selectAll').addEventListener('click', function () {
    const checkboxes = document.querySelectorAll('input[name="selected_ids"]');
    checkboxes.forEach(cb => cb.checked = this.checked);
  });
</script>
{% endblock %}