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

{% block content %}
<h2 class="mb-3">Item 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">Items</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 title or details...">
  </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>

<!-- Actions + Table in one form -->
<form method="post">
  {% csrf_token %}
  <div class="d-flex justify-content-between mb-3">
    {% if perms.cargo.add_item %}
      <a href="{% url 'item_add' %}" class="btn btn-primary">Add Item</a>
    {% endif %}
    <div class="d-flex gap-2">
      {% if perms.cargo.bulk_delete_item %}
        <button type="submit" formaction="{% url 'item_bulk_delete' %}" class="btn btn-danger">Delete Selected</button>
      {% endif %}
      {% if perms.cargo.download_excel_item %}
        <button type="submit" formaction="{% url 'item_export_excel' %}" class="btn btn-outline-success">Export Excel</button>
      {% endif %}
      {% if perms.cargo.download_pdf_item %}
        <button type="submit" formaction="{% url 'item_export_pdf' %}" class="btn btn-outline-danger">Export PDF</button>
      {% endif %}
    </div>
  </div>

  <!-- Item Table -->
  <table class="table table-bordered table-hover">
    <thead class="table-light">
      <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>ID</th>
        <th>Title</th>
        <th>Measurement Unit</th>
        <th>Details</th>
        {% if perms.cargo.change_item or perms.cargo.delete_item %}
          <th class="text-end">Actions</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td><input type="checkbox" name="selected_ids" value="{{ item.id }}"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.measurement_unit }}</td>
        <td>{{ item.details }}</td>
        {% if perms.cargo.change_item or perms.cargo.delete_item %}
        <td class="text-end">
          {% if perms.cargo.change_item %}
            <a href="{% url 'item_edit' item.id %}" class="btn btn-sm btn-warning">Edit</a>
          {% endif %}
          {% if perms.cargo.delete_item %}
            <a href="{% url 'item_delete' item.id %}" class="btn btn-sm btn-danger">Delete</a>
          {% endif %}
        </td>
        {% endif %}
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="text-center">No items found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</form>

<!-- Pagination -->
{% if items.has_other_pages %}
<nav>
  <ul class="pagination justify-content-center">
    {% if items.has_previous %}
    <li class="page-item">
      <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ items.previous_page_number }}">Previous</a>
    </li>
    {% endif %}
    {% for num in items.paginator.page_range %}
      {% if num == items.number or num <= 2 or num > items.paginator.num_pages|add:'-2' or num == items.paginator.num_pages %}
        <li class="page-item {% if items.number == num %}active{% endif %}">
          <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ num }}">{{ num }}</a>
        </li>
      {% elif num == 3 or num == items.paginator.num_pages|add:'-3' %}
        <li class="page-item disabled"><span class="page-link">...</span></li>
      {% endif %}
    {% endfor %}
    {% if items.has_next %}
    <li class="page-item">
      <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ items.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 %}