{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>Orders</h3>
  <a href="{{ url_for('orders_new') }}" class="btn btn-primary">New Order</a>
</div>

<form class="row row-cols-lg-auto g-3 align-items-center mb-3">
  <div class="col-12">
    <select class="form-select" name="status">
      <option value="">Status: All</option>
      {% for s in ['pending','accepted','rejected','done','cancelled'] %}
      <option value="{{ s }}" {% if status==s %}selected{% endif %}>{{ s|capitalize }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-12">
    <button class="btn btn-outline-secondary">Filter</button>
  </div>
</form>

<div class="table-responsive">
<table class="table table-striped align-middle">
  <thead>
    <tr>
      <th>ID</th><th>Client</th><th>Product</th><th>Qty</th><th>Total</th><th>Status</th><th>Created</th><th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for r in rows %}
    <tr>
      <td>{{ r.id }}</td>
      <td>{{ r.user_name }}</td>
      <td>{{ r.product_name }}</td>
      <td>{{ r.quantity }}</td>
      <td>${{ '%.2f'|format(r.total_price) }}</td>
      <td><span class="badge text-bg-secondary">{{ r.status }}</span></td>
      <td>{{ r.created_at }}</td>
      <td>
        <form action="{{ url_for('orders_accept', order_id=r.id) }}" method="post" class="d-inline">
          <button class="btn btn-sm btn-success">Accept</button>
        </form>
        <form action="{{ url_for('orders_reject', order_id=r.id) }}" method="post" class="d-inline">
          <button class="btn btn-sm btn-warning">Reject</button>
        </form>
        <form action="{{ url_for('orders_done', order_id=r.id) }}" method="post" class="d-inline">
          <button class="btn btn-sm btn-primary">Done</button>
        </form>
        <form action="{{ url_for('orders_cancel', order_id=r.id) }}" method="post" class="d-inline">
          <button class="btn btn-sm btn-danger">Cancel</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endblock %}