{# templates/adminpanel/order_list.html #}
{% extends "adminpanel/base.html" %}

{% block pagetitle %}Orders{% endblock %}
{% block page_header %}Orders{% endblock %}
{% block header_actions %}
  <form method="get" action="" class="d-flex align-items-center gap-2">
    <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm" placeholder="Search id, name, email...">
    <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
      <option value="">All statuses</option>
      <option value="pending" {% if status == 'pending' %}selected{% endif %}>Pending</option>
      <option value="paid" {% if status == 'paid' %}selected{% endif %}>Paid</option>
      <option value="canceled" {% if status == 'canceled' %}selected{% endif %}>Canceled</option>
    </select>
    <button class="btn btn-light btn-sm" type="submit">Filter</button>
  </form>
{% endblock %}

{% block content %}
<div class="mm-soft-card p-0">
  <div class="table-responsive">
    <table class="table table-hover table-sm m-0 align-middle">
      <thead class="table-light sticky-top">
        <tr>
          <th>ID</th>
          <th>Customer</th>
          <th>Email</th>
          <th class="text-end">Total</th>
          <th class="text-center">Status</th>
          <th class="text-end">Created</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for o in page_obj.object_list %}
        <tr>
          <td>#{{ o.id }}</td>
          <td class="fw-semibold">{{ o.name }}</td>
          <td class="text-muted small">{{ o.email }}</td>
          <td class="text-end">$ {{ o.total }}</td>
          <td class="text-center">
            {% if o.status == 'paid' %}
              <span class="badge bg-success">Paid</span>
            {% elif o.status == 'canceled' %}
              <span class="badge bg-secondary">Canceled</span>
            {% else %}
              <span class="badge bg-warning text-dark">Pending</span>
            {% endif %}
          </td>
          <td class="text-end"><span class="small">{{ o.created_at|date:"Y-m-d H:i" }}</span></td>
          <td class="text-end">
            <a class="btn btn-outline-secondary btn-sm" href="{% url 'admin_order_detail' o.id %}">Open</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted py-4">No orders found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<nav class="mt-3">
  <ul class="pagination pagination-sm mb-0">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{ q }}{% endif %}{% if status %}&status={{ status }}{% endif %}">Prev</a></li>
    {% else %}<li class="page-item disabled"><span class="page-link">Prev</span></li>{% endif %}

    <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>

    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if q %}&q={{ q }}{% endif %}{% if status %}&status={{ status }}{% endif %}">Next</a></li>
    {% else %}<li class="page-item disabled"><span class="page-link">Next</span></li>{% endif %}
  </ul>
</nav>
{% endblock %}