{% 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">Categories</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_category %}
<a href="{% url 'category_add' %}" class="btn btn-primary mb-3">Add {{ model_verbose_name }}</a>
{% endif %}
<!-- Bulk Actions Form -->
<form method="post" action="{% url 'category_bulk_delete' %}">
  {% csrf_token %}

  <!-- Bulk Status Update -->

  <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 status --</option>
        <option value="active">Mark as Active</option>
        <option value="inactive">Mark as Inactive</option>
      </select>
    </div>
{% endif %}
{% if perms.website.bulk_status %}
    <div class="col-md-2">
      <button type="submit" formaction="{% url 'category_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="button" class="btn btn-danger w-100" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
      Delete Selected
    </button>
  </div>
{% endif %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-danger">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete the selected categories? This action cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger">Yes, Delete</button>
      </div>
    </div>
  </div>
</div>

<script>
  const deleteBtn = document.querySelector('#bulkDeleteBtn');
  const checkboxes = document.querySelectorAll('input[name="selected_ids"]');

  function updateDeleteButton() {
    const anyChecked = Array.from(checkboxes).some(cb => cb.checked);
    if (deleteBtn) deleteBtn.disabled = !anyChecked;
  }

  checkboxes.forEach(cb => cb.addEventListener('change', updateDeleteButton));
  document.addEventListener('DOMContentLoaded', updateDeleteButton);
</script>

{% if perms.website.download_excel %}      
    <div class="col-md-2">
      <button type="submit" formaction="{% url 'category_export' %}" class="btn btn-outline-success w-100">
        Export to Excel
      </button>
    </div>
{% endif %}
{% if perms.website.download_pdf %}
    <div class="col-md-2">
      <button type="submit" formaction="{% url 'category_export_pdf' %}" class="btn btn-outline-danger w-100">
        Export to PDF
      </button>
    </div>
{% endif %}
  </div>

  <!-- Category Table -->
<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>Name</th>
      <th>Status</th>
      {% if perms.website.change_category or perms.website.delete_category %}
        <th class="text-end">Actions</th>
      {% endif %}
    </tr>
  </thead>
  <tbody>
    {% for item in category %}
      <tr>
        <td><input type="checkbox" name="selected_ids" value="{{ item.id }}"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
          {% if item.status == 'active' %}
            <span class="badge bg-success">Active</span>
          {% else %}
            <span class="badge bg-secondary">Inactive</span>
          {% endif %}
        </td>

        {% if perms.website.change_category or perms.website.delete_category %}
        <td class="text-end">
          {% if perms.website.change_category %}
            <a href="{% url 'category_edit' item.id %}" class="btn btn-sm btn-warning">Edit</a>
          {% endif %}
          {% if perms.website.delete_category %}
            <a href="{% url '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 category.has_other_pages %}
  <nav>
    <ul class="pagination justify-content-center">
      {% if category.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?q={{ search_query }}&page={{ category.previous_page_number }}">Previous</a>
        </li>
      {% endif %}

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

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