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


{% block content %}
<h2 class="mb-3">Product List</h2>
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'admin_page' %}">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Products</li>
  </ol>
</nav>
{% endblock %}
<!-- Search Form -->
<form method="get" class="mb-3">
  <div class="input-group">
    <input type="text" name="q" value="{{ search_query }}" placeholder="Search..." class="form-control" />
    <button class="btn btn-outline-secondary" type="submit">Search</button>
  </div>
</form>

<!-- Add Button -->
{% if perms.website.add_product %}
<a href="{% url 'product_add' %}" class="btn btn-primary mb-3">Add Product</a>
{% endif %}

<!-- Bulk Actions Form -->
<form method="post" action="{% url 'product_bulk_delete' %}">
  {% csrf_token %}
  <div class="row mb-3 align-items-center">
    {% if perms.website.bulk_status %}
    <div class="col-md-3">
      <select name="bulk_status" class="form-select">
        <option value="">-- Change Featured Status --</option>
        <option value="True">Mark as Featured</option>
        <option value="False">Mark as Not Featured</option>
      </select>
    </div>
    <div class="col-md-2">
      <button type="submit" formaction="{% url 'product_bulk_status' %}" class="btn btn-secondary w-100">
        Update Status
      </button>
    </div>
    {% endif %}
    {% if perms.website.bulk_delete %}
    <div class="col-md-2">
      <button type="submit" class="btn btn-danger w-100" onclick="return confirm('Are you sure?')">
        Delete Selected
      </button>
    </div>
    {% endif %}
    {% if perms.website.download_excel %}
    <div class="col-md-2">
      <button type="submit" formaction="{% url 'product_export' %}" class="btn btn-outline-success w-100">
        Export Excel
      </button>
    </div>
    {% endif %}
    {% if perms.website.download_pdf %}
    <div class="col-md-2">
      <button type="submit" formaction="{% url 'product_export_pdf' %}" class="btn btn-outline-danger w-100">
        Export PDF
      </button>
    </div>
    {% endif %}
  </div>

  <!-- Product Table -->
  <table class="table table-bordered table-hover">
    <thead class="table-light">
      <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>ID</th>
        <th>Name</th>
        <th>Category</th>
        <th>Price</th>
        <th>Stock</th>
        <th>Featured</th>
        <th class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for item in product %}
        <tr>
          <td><input type="checkbox" name="selected_ids" value="{{ item.id }}"></td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.category }}</td>
          <td>${{ item.price }}</td>
          <td>{{ item.stock }}</td>
          <td>
            {% if item.is_featured %}
              <span class="badge bg-success">Yes</span>
            {% else %}
              <span class="badge bg-secondary">No</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if perms.website.change_product %}
            <a href="{% url 'product_edit' item.id %}" class="btn btn-sm btn-warning">Edit</a>
            {% endif %}
            {% if perms.website.delete_product %}
            <a href="{% url 'product_delete' item.id %}" class="btn btn-sm btn-danger">Delete</a>
            {% endif %}
          </td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="8" class="text-center">No products found.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</form>

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

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

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

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