{% extends "base.html" %}
{% block title %}سفارش‌ها{% endblock %}
{% block content %}
<div class="topbar" style="margin:-24px -28px 24px; border-radius:0;">
  <h1>سفارش‌ها</h1>
  <p>{{ orders|length }} سفارش</p>
</div>

<div style="margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between;">
  <div style="display:flex; gap:8px;">
    <a class="btn {% if not status_filter %}btn-primary{% else %}btn-outline{% endif %} btn-sm" href="{{ url_for('orders_list', q=q) }}">همه</a>
    <a class="btn {% if status_filter=='pending' %}btn-primary{% else %}btn-outline{% endif %} btn-sm" href="{{ url_for('orders_list', status='pending', q=q) }}">در انتظار پرداخت</a>
    <a class="btn {% if status_filter=='paid' %}btn-primary{% else %}btn-outline{% endif %} btn-sm" href="{{ url_for('orders_list', status='paid', q=q) }}">پرداخت‌شده</a>
    <a class="btn {% if status_filter=='done' %}btn-primary{% else %}btn-outline{% endif %} btn-sm" href="{{ url_for('orders_list', status='done', q=q) }}">تکمیل‌شده</a>
    <a class="btn {% if status_filter=='cancelled' %}btn-primary{% else %}btn-outline{% endif %} btn-sm" href="{{ url_for('orders_list', status='cancelled', q=q) }}">لغوشده</a>
  </div>
  <form method="GET" style="max-width:260px; width:100%;">
    {% if status_filter %}<input type="hidden" name="status" value="{{ status_filter }}">{% endif %}
    <input type="text" name="q" value="{{ q }}" placeholder="🔍 جستجوی نام یا شماره مشتری..."
           style="width:100%; padding:9px 14px; border:1px solid var(--line); border-radius:9px; font-family:inherit; background:var(--surface);">
  </form>
</div>

{% if orders %}
<div class="table-wrap">
  <table>
    <thead>
      <tr><th>کد</th><th>مشتری</th><th>تماس</th><th>آدرس تحویل</th><th>اقلام</th><th>مبلغ کل</th><th>فیش پرداخت</th><th>پلتفرم</th><th>وضعیت</th><th></th></tr>
    </thead>
    <tbody>
      {% for o in orders %}
      <tr>
        <td>#{{ o.id }}</td>
        <td>{{ o.customer_name }}</td>
        <td>{{ o.phone }}</td>
        <td style="max-width:220px;">
          {{ o.address or '—' }}
          {% if o.postal_code %}<div style="font-size:0.78rem; color:var(--ink-muted);">کدپستی: {{ o.postal_code }}</div>{% endif %}
          {% if o.plate %}<div style="font-size:0.78rem; color:var(--ink-muted);">پلاک: {{ o.plate }}</div>{% endif %}
        </td>
        <td>
          {% for it in o.order_items %}
            <div>{{ it.name }} × {{ it.qty }}</div>
          {% endfor %}
        </td>
        <td class="num">{{ "{:,}".format(o.total_price) }} تومان</td>
        <td>
          {% if o.receipt_filename %}
            <a href="{{ url_for('uploaded_file', filename=o.receipt_filename) }}" target="_blank">
              <img src="{{ url_for('uploaded_file', filename=o.receipt_filename) }}" style="width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line);">
            </a>
          {% else %}
            <span style="color:var(--ink-muted); font-size:0.8rem;">ارسال نشده</span>
          {% endif %}
        </td>
        <td>{{ "تلگرام" if o.platform == "telegram" else "بله" }}</td>
        <td>
          <form method="POST" action="{{ url_for('order_update_status', order_id=o.id) }}">
            <select name="status" onchange="this.form.submit()">
              <option value="pending" {% if o.status=='pending' %}selected{% endif %}>در انتظار پرداخت</option>
              <option value="paid" {% if o.status=='paid' %}selected{% endif %}>پرداخت‌شده</option>
              <option value="done" {% if o.status=='done' %}selected{% endif %}>تکمیل‌شده</option>
              <option value="cancelled" {% if o.status=='cancelled' %}selected{% endif %}>لغوشده</option>
            </select>
          </form>
        </td>
        <td>
          {% if o.status == 'pending' %}
          <form method="POST" action="{{ url_for('order_confirm_payment', order_id=o.id) }}"
                onsubmit="return confirm('پرداخت این سفارش تایید بشه؟ به مشتری پیام خودکار ارسال میشه.');">
            <button class="btn btn-primary btn-sm" type="submit">✅ تایید پرداخت</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="empty-state">
  <div class="icon">📦</div>
  سفارشی با این وضعیت پیدا نشد.
</div>
{% endif %}
{% endblock %}