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

{% block content %}
<h2 class="mb-4">Orders</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">Orders</li>
  </ol>
</nav>
{% endblock %}
<!-- 🔍 Filter Form -->
<form method="get" class="row g-3 mb-4 align-items-end">
  <div class="col-md-3">
    <label class="form-label">Search</label>
    <input type="text" name="q" value="{{ search_query }}" class="form-control" placeholder="Search by name or phone...">
  </div>

  <div class="col-md-3">
    <label class="form-label">Status</label>
    <select name="status" class="form-select">
      <option value="">All</option>
      {% for value, label in orders.paginator.object_list.model.STATUS_CHOICES %}
        <option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label">Sort By</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">Filter</button>
  </div>
</form>


<!-- Bulk Status Update -->
{% if perms.website.bulk_status %}
<form method="post" action="{% url 'order_bulk_status' %}">
  {% csrf_token %}
  <div class="row mb-3 align-items-center">
    <div class="col-md-4">
      <select name="bulk_status" class="form-select">
        <option value="">-- Change status --</option>
        {% for value, label in orders.paginator.object_list.model.STATUS_CHOICES %}
          <option value="{{ value }}">{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2">
      <button type="submit" class="btn btn-secondary w-100">Update Selected</button>
    </div>
    {% if perms.website.download_excel %}
    <div class="col-md-2">
        <button type="submit" formaction="{% url 'order_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 'order_export_pdf' %}" class="btn btn-outline-danger w-100">
        Export to PDF
        </button>
    </div>
    {% endif %}
  </div>
{% endif %}

<!-- Orders Table -->
<table class="table table-bordered table-hover">
  <thead class="table-light">
    <tr>
      {% if perms.website.bulk_status %}
        <th><input type="checkbox" id="selectAll"></th>
      {% endif %}
      <th>ID</th>
      <th>Customer</th>
      <th>Phone</th>
      <th>Total</th>
      <th>Status</th>
      <th>Date</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for order in orders %}
      <tr>
        {% if perms.website.bulk_status %}
          <td><input type="checkbox" name="selected_ids" value="{{ order.id }}"></td>
        {% endif %}
        <td>{{ order.id }}</td>
        <td>{{ order.full_name }}</td>
        <td>{{ order.phone }}</td>
        <td>${{ order.total_price }}</td>
        <td>
          <span class="badge 
            {% if order.status == 'Pending' %}bg-warning text-dark
            {% elif order.status == 'Processing' %}bg-info text-dark
            {% elif order.status == 'Shipped' %}bg-primary
            {% elif order.status == 'Delivered' %}bg-success
            {% elif order.status == 'Cancelled' %}bg-danger
            {% else %}bg-secondary{% endif %}
          ">{{ order.status }}</span>
        </td>
        <td>{{ order.created_at|date:"Y-m-d H:i" }}</td>
        <td class="text-end">
        {% if perms.website.view_order_details %}
          <a href="{% url 'order_details' order.id %}" class="btn btn-sm btn-outline-success">View</a>
        {% endif %}
        {% if perms.website.download_invoice_pdf %}
          <a href="{% url 'order_invoice' order.id %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-print me-1"></i> Print</a>
        {% endif %}
        </td>
      </tr>
    {% empty %}
      <tr>
        <td colspan="{% if perms.website.bulk_status %}8{% else %}7{% endif %}" class="text-center">No orders found.</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if perms.website.bulk_status %}
</form>
{% endif %}

<!-- 🔄 Pagination -->
{% if orders.has_other_pages %}
  <nav>
    <ul class="pagination justify-content-center">
      {% if orders.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?q={{ search_query }}&status={{ request.GET.status }}&page={{ orders.previous_page_number }}">Previous</a>
        </li>
      {% endif %}
      {% for num in orders.paginator.page_range %}
        <li class="page-item {% if orders.number == num %}active{% endif %}">
          <a class="page-link" href="?q={{ search_query }}&status={{ request.GET.status }}&page={{ num }}">{{ num }}</a>
        </li>
      {% endfor %}
      {% if orders.has_next %}
        <li class="page-item">
          <a class="page-link" href="?q={{ search_query }}&status={{ request.GET.status }}&page={{ orders.next_page_number }}">Next</a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}
{% if perms.website.bulk_status %}
<script>
  document.getElementById('selectAll').addEventListener('click', function () {
    const checkboxes = document.querySelectorAll('input[name="selected_ids"]');
    checkboxes.forEach(cb => cb.checked = this.checked);
  });
</script>
{% endif %}
{% endblock %}