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

{% block content %}
<h2 class="mb-3">Expenses</h2>

{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'inventory:admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Expenses</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 by paid_to, description...">
  </div>
  <div class="col-md-3">
    <label class="form-label">Sort</label>
    <select name="sort" class="form-select">
      <option value="newest" {% if sort == 'newest' %}selected{% endif %}>Newest First</option>
      <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>Oldest First</option>
    </select>
  </div>
  <div class="col-md-3">
    <button type="submit" class="btn btn-primary w-100">Apply</button>
  </div>
</form>

<!-- ✅ Unified Form for Buttons + Table -->
<form method="post">
  {% csrf_token %}
  <div class="d-flex justify-content-between mb-3">
    {% if perms.cargo.add_addexpense %}
      <a href="{% url 'inventory:expense_add' %}" class="btn btn-primary">Add Expense</a>
    {% endif %}
  </div>

  <!-- 📋 Expenses Table -->
  <table class="table table-bordered table-hover">
    <thead class="table-light">
      <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>ID</th>
        <th>Category</th>
        <th>Spent By / Approved By</th>
        <th>Amount</th>
        <th>Currency</th>
        <th>Date</th>
        <th class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for item in expenses %}
      <tr>
        <td><input type="checkbox" name="selected_ids" value="{{ item.id }}"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.expense_category }}</td>
        <td>
          <strong>Spent By:</strong> {{ item.spent_by }}<br>
          <strong>Approved By:</strong> {{ item.approved_by }}
        </td>
        <td>{{ item.amount }}</td>
        <td>{{ item.currency }}</td>
        <td>{{ item.date }}</td>
        <td class="text-end">
          {% if perms.fanance.change_addexpense %}
            <a href="{% url 'inventory:expense_edit' item.id %}" class="btn btn-sm btn-warning">Edit</a>
          {% endif %}
          {% if perms.finance.delete_addexpense %}
            <a href="{% url 'inventory:expense_delete' item.id %}" class="btn btn-sm btn-danger">Delete</a>
          {% endif %}
          {% if perms.finance.print_expense_slip %}
            <a href="{% url 'inventory:expense_print' item.id %}" class="btn btn-sm btn-secondary">Print</a>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="8" class="text-center">No expenses found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</form>

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

    {% for num in expenses.paginator.page_range %}
      {% if num == 1 or num == expenses.paginator.num_pages or num >= expenses.number|add:'-1' and num <= expenses.number|add:'1' %}
        <li class="page-item {% if expenses.number == num %}active{% endif %}">
          <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ num }}">{{ num }}</a>
        </li>
      {% elif num == expenses.number|add:'-2' or num == expenses.number|add:'2' %}
        <li class="page-item disabled"><span class="page-link">...</span></li>
      {% endif %}
    {% endfor %}

    {% if expenses.has_next %}
    <li class="page-item">
      <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ expenses.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 %}