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

{% block pagetitle %}Order #{{ order.id }}{% endblock %}
{% block page_header %}Order #{{ order.id }}{% endblock %}
{% block header_actions %}
  <a class="btn btn-light btn-sm" href="{% url 'admin_orders' %}">Back</a>
{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-12 col-lg-7">
    <div class="mm-soft-card p-3">
      <h2 class="h6 title mb-3">Items</h2>
      <div class="table-responsive">
        <table class="table table-sm align-middle m-0">
          <thead class="table-light">
            <tr>
              <th>Product</th>
              <th class="text-center">Qty</th>
              <th class="text-end">Unit</th>
              <th class="text-end">Subtotal</th>
            </tr>
          </thead>
          <tbody>
            {% for it in order.items.all %}
            <tr>
              <td class="fw-semibold">{{ it.title }}</td>
              <td class="text-center">{{ it.qty }}</td>
              <td class="text-end">$ {{ it.unit_price }}</td>
              <td class="text-end">$ {{ it.line_total }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center text-muted py-4">No items.</td></tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-end"><strong>Total</strong></td>
              <td class="text-end"><strong>$ {{ order.total }}</strong></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-5">
    <div class="mm-soft-card p-3">
      <h2 class="h6 title mb-3">Customer</h2>
      <div class="small">
        <div class="mb-1"><strong>{{ order.name }}</strong></div>
        <div class="text-muted">Email: {{ order.email }}</div>
        <div class="text-muted">Phone: {{ order.phone }}</div>
      </div>
      <hr>
      <h2 class="h6 title mb-2">Shipping</h2>
      <div class="small text-muted">
        {{ order.address_line1 }}{% if order.address_line2 %}, {{ order.address_line2 }}{% endif %}<br>
        {{ order.city }}, {{ order.region }} {{ order.postal_code }}<br>
        {{ order.country }}
      </div>
      {% if order.notes %}
        <div class="mt-2 small"><strong>Notes:</strong> {{ order.notes }}</div>
      {% endif %}

      <hr>
      <h2 class="h6 title mb-2">Status</h2>
      <form method="post" class="d-flex align-items-center gap-2">
        {% csrf_token %}
        {{ form.status|add_class:"form-select form-select-sm" }}
        <button class="btn btn-primary btn-sm" type="submit">Update</button>
      </form>

      <div class="mt-3 text-muted small">
        Created: {{ order.created_at|date:"Y-m-d H:i" }}<br>
        Updated: {{ order.updated_at|date:"Y-m-d H:i" }}
      </div>
    </div>
  </div>
</div>
{% endblock %}