{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<title>MISRY AYUR Orders</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{--black:#090704;--gold:#C9A84C;--gold-light:#E8C96A;--cream:#F8F0DC;--muted:rgba(248,240,220,.62);--line:rgba(201,168,76,.16)}
*{box-sizing:border-box}body{margin:0;background:var(--black);color:var(--cream);font-family:"Nunito Sans",sans-serif}a{color:var(--gold-light)}.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.4rem;background:rgba(9,7,4,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:.9rem}.brand img{width:82px}.brand h1{font-family:Cinzel,serif;font-size:1.1rem;margin:0;color:var(--gold-light);letter-spacing:.1em}.toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px 150px auto;gap:.8rem;padding:1rem 1.4rem;background:#0f0b06;border-bottom:1px solid var(--line)}input,select,button{font:inherit;border-radius:8px;border:1px solid var(--line);background:#151008;color:var(--cream);padding:.72rem .82rem}button{cursor:pointer;font-weight:700;color:var(--black);background:linear-gradient(135deg,var(--gold-light),var(--gold));border:0}.ghost{background:transparent;color:var(--gold-light);border:1px solid var(--line);text-decoration:none;padding:.72rem .82rem;border-radius:8px}.content{padding:1.4rem}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:rgba(17,13,7,.84)}table{width:100%;border-collapse:collapse;min-width:1180px}th,td{padding:.85rem;text-align:left;border-bottom:1px solid rgba(201,168,76,.1);vertical-align:top;font-size:.9rem}th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(201,168,76,.06)}td small{display:block;color:var(--muted);line-height:1.45}.amount{font-weight:800;color:var(--gold-light)}.actions{display:flex;gap:.45rem;flex-wrap:wrap}.inline-form{display:flex;gap:.45rem;flex-wrap:wrap}.messages{padding:0 1.4rem}.messages p{border:1px solid var(--line);background:rgba(201,168,76,.07);padding:.7rem .9rem;border-radius:8px}.empty{padding:3rem;text-align:center;color:var(--muted)}@media(max-width:800px){.topbar{align-items:flex-start;flex-direction:column}.toolbar{grid-template-columns:1fr}.content{padding:.8rem}}
</style>
</head>
<body>
<header class="topbar">
  <div class="brand">
    <img src="{% static 'orders/assets/misry-ayur-logo-gold.png' %}" alt="MISRY AYUR">
    <h1>Orders Admin</h1>
  </div>
  <div class="actions">
    <a class="ghost" href="{% url 'orders:home' %}">View Landing Page</a>
    <a class="ghost" href="{% url 'admin:index' %}">Django Admin</a>
  </div>
</header>
{% if messages %}
<div class="messages">{% for message in messages %}<p>{{ message }}</p>{% endfor %}</div>
{% endif %}
<form class="toolbar" method="get">
  <input name="q" type="search" placeholder="Search name, phone, or order ID" value="{{ query }}">
  <select name="order_status">
    <option value="">All order statuses</option>
    {% for value,label in order_status_choices %}<option value="{{ value }}" {% if order_status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
  </select>
  <select name="payment_status">
    <option value="">All payments</option>
    {% for value,label in payment_status_choices %}<option value="{{ value }}" {% if payment_status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
  </select>
  <button type="submit">Filter</button>
</form>
<main class="content">
  <div class="table-wrap">
    <table>
      <thead><tr><th>Order</th><th>Customer</th><th>Address</th><th>Product</th><th>Total</th><th>Status</th><th>Invoice</th></tr></thead>
      <tbody>
      {% for order in orders %}
        <tr>
          <td><strong>{{ order.order_id }}</strong><small>{{ order.created_at|date:"d M Y, h:i A" }}</small></td>
          <td>{{ order.full_name }}<small>{{ order.phone }}{% if order.whatsapp_number %} / WA {{ order.whatsapp_number }}{% endif %}</small></td>
          <td>{{ order.address }}<small>{{ order.district }}, {{ order.state }} - {{ order.pincode }}</small>{% if order.order_notes %}<small>Note: {{ order.order_notes }}</small>{% endif %}</td>
          <td>Misry Lehyam<small>Qty {{ order.quantity }} x ₹1699</small></td>
          <td class="amount">₹{{ order.total_amount }}</td>
          <td>
            <form class="inline-form" method="post" action="{% url 'orders:update_order_status' order.order_id %}">
              {% csrf_token %}
              <select name="order_status">{% for value,label in order_status_choices %}<option value="{{ value }}" {% if order.order_status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select>
              <select name="payment_status">{% for value,label in payment_status_choices %}<option value="{{ value }}" {% if order.payment_status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select>
              <button type="submit">Update</button>
            </form>
            <small>{{ order.payment_method }}</small>
          </td>
          <td><a class="ghost" href="{% url 'orders:invoice_pdf' order.order_id %}">PDF</a></td>
        </tr>
      {% empty %}
        <tr><td colspan="7"><div class="empty">No orders found.</div></td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</main>
</body>
</html>
