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

{% block content %}
<h2 class="mb-3">Invoice 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">Invoices</li>
  </ol>
</nav>
{% endblock %}

<!-- Search & Sort -->
<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 sender, receiver or destination...">
  </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>


<form method="post">
  {% csrf_token %}

  <!-- Actions Row -->
  <div class="d-flex justify-content-between mb-3">
    {% if perms.cargo.add_invoice %}
      <a href="{% url 'invoice_create' %}" class="btn btn-outline-primary">Add Invoice</a>
    {% endif %}
    <div class="d-flex gap-2">
      {% if perms.cargo.invoice_bulk_delete %}
        <button type="submit" formaction="{% url 'invoice_bulk_delete' %}" class="btn btn-danger">Delete Selected</button>
      {% endif %}
      {% if perms.cargo.invoice_download_excel %}
        <button type="submit" formaction="{% url 'invoice_export_excel' %}" class="btn btn-outline-success">Export Excel</button>
      {% endif %}
      {% if perms.cargo.invoice_download_pdf %}
        <button type="submit" formaction="{% url 'invoice_export_pdf' %}" class="btn btn-outline-danger">Export PDF</button>
      {% endif %}
    </div>
  </div>

  <!-- Invoice Table -->
  <table class="table table-bordered table-hover">
    <thead class="table-light">
      <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>ID</th>
        <th>Sender</th>
        <th>Receiver</th>
        <th>Total</th>
        <th>Paid</th>
        <th>Remain</th>
        <th>Date</th>
        <th class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for invoice in invoices %}
      <tr>
        <td><input type="checkbox" name="selected_ids" value="{{ invoice.id }}"></td>
        <td>{{ invoice.id }}</td>
        <td>{{ invoice.sender }}</td>
        <td>{{ invoice.receiver }}</td>
        <td>{{ invoice.total_amount }}</td>
        <td>{{ invoice.amount_paid }}</td>
        <td>{{ invoice.remain_amount }}</td>
        <td>{{ invoice.created_at|date:"Y-m-d" }}</td>
        <td class="text-end">
          {% if perms.cargo.change_invoice %}
            <a href="{% url 'invoice_edit' invoice.id %}" class="btn btn-sm btn-warning">
              <i class="fas fa-pen-to-square me-1"></i> Edit
            </a>
          {% endif %}
          {% if perms.cargo.delete_invoice %}
            <a href="{% url 'invoice_delete' invoice.id %}" class="btn btn-sm btn-danger">
              <i class="fas fa-trash me-1"></i> Delete
            </a>
          {% endif %}
          {% if perms.cargo.print_slip %}
          <a href="{% url 'cargo:print_delivery_details' invoice.id %}" class="btn btn-sm btn-success" title="Delivery Slip">
            <i class="fas fa-file-lines me-1"></i> D-Slip
          </a>
          {% endif %}
          {% if perms.cargo.print_invoice %}
          <a href="{% url 'invoice_print' invoice.id %}" class="btn btn-sm btn-secondary"><i class="fas fa-print me-1"></i>Print</a>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="9" class="text-center">No invoices found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</form>


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

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

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


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