{% extends 'admin_pages/base_admin.html' %}
{% block title %}Order #{{ order.id }} | Admin Panel{% endblock %}
{% block content %}
<h2 class="mb-3">Order #{{ order.id }}</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"><a href="{% url 'order_list' %}">Orders</a></li>
    <li class="breadcrumb-item active" aria-current="page">Order #{{ order.id }}</li>
  </ol>
</nav>
{% endblock %}
<div class="row mb-4">
  <div class="col-md-6">
    <p><strong>Customer:</strong> {{ order.full_name }}</p>
    <p><strong>Phone:</strong> {{ order.phone }}</p>
    <p><strong>Address:</strong> {{ order.address }}</p>
  </div>
  <div class="col-md-6">
    <p><strong>Status:</strong> <span class="badge bg-secondary">{{ order.status }}</span></p>
    <p><strong>Payment:</strong> {{ order.payment_method }}</p>
    <p><strong>Date:</strong> {{ order.created_at|date:"Y-m-d H:i" }}</p>
  </div>
</div>

{% if perms.website.change_order %}
<form method="post" class="mb-3 d-flex align-items-center gap-2">
  {% csrf_token %}
  <label for="status" class="me-2"><strong>Status:</strong></label>
  <select name="status" id="status" class="form-select w-auto">
    {% for key, label in order.STATUS_CHOICES %}
      <option value="{{ key }}" {% if order.status == key %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <button type="submit" class="btn btn-sm btn-success">Update</button>
</form>
{% else %}
<p><strong>Status:</strong> <span class="badge bg-secondary">{{ order.status }}</span></p>
{% endif %}


<h5>Items</h5>
<table class="table table-bordered table-hover">
  <thead class="table-light">
    <tr>
      <th>Product</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    {% for item in items %}
    <tr>
      <td>{{ item.product.name }}</td>
      <td>{{ item.quantity }}</td>
      <td>${{ item.price }}</td>
      <td>${{ item.get_total_price }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="text-end">
  <strong>Total:</strong> ${{ order.total_price }}
</div>

<a href="{% url 'order_list' %}" class="btn btn-secondary mt-4">Back to Orders</a>
{% endblock %}