{% extends "base.html" %}
{% load static %}

{% block title %}Orders — {{ vendor.store_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
  .order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .order-card { padding: 16px; }
  .order-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px; gap:8px; }
  .order-num { font-size: 13px; color: var(--accent-light); font-weight: 700; }
  .order-amt { font-size: 17px; font-weight: 700; }
  .order-meta { display:grid; grid-template-columns: 1fr; row-gap: 4px; font-size:12px; color: var(--text-secondary); margin-bottom:10px; }
  .order-items { border-top: 1px solid var(--border); padding-top: 8px; margin-bottom:10px; }
  .order-item { display:flex; justify-content:space-between; font-size:12px; padding:4px 0; }
  .order-actions { display:flex; gap:6px; align-items:center; padding-top:10px; border-top:1px solid var(--border); flex-wrap:wrap; }

  /* Secure payment status pill */
  .sp-pill {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; padding:4px 10px; border-radius:10px;
    white-space:nowrap;
  }
  .sp-held { background:rgba(108,92,231,.15); color:#a29bfe; }
  .sp-delivery_uploaded { background:rgba(253,203,110,.15); color:#fdcb6e; }
  .sp-released,.sp-auto_released,.sp-buyer_confirmed { background:rgba(0,184,148,.15); color:#00b894; }
  .sp-disputed { background:rgba(225,112,85,.15); color:#e17055; }
  .sp-payment_pending { background:rgba(255,255,255,.07); color:var(--text-muted); }

  .payout-amount {
    font-size:13px; color:#00b894; font-weight:600;
    background:rgba(0,184,148,.08); border-radius:6px; padding:3px 8px;
  }

  /* Order status flow steps */
  .status-flow {
    display:flex; align-items:center; gap:4px;
    margin-bottom:10px; flex-wrap:wrap;
  }
  .status-step {
    display:flex; align-items:center; gap:4px;
    font-size:11px; font-weight:600; padding:4px 10px;
    border-radius:10px; white-space:nowrap;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
  }
  .status-step.done { background:rgba(0,184,148,.12); color:#00b894; border-color:rgba(0,184,148,.3); }
  .status-step.current { background:rgba(201,169,110,.12); color:var(--gold); border-color:rgba(201,169,110,.3); }
  .status-step-arrow { color: var(--text-muted); font-size:10px; }

  .btn-status {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 14px; border-radius:var(--radius);
    font-family:var(--font-display); font-size:10px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase;
    cursor:pointer; border:none; transition:all 0.2s;
    text-decoration:none;
  }
  .btn-processing { background:rgba(233,196,106,0.15); color:#e9c46a; border:1px solid rgba(233,196,106,0.3); }
  .btn-processing:hover { background:rgba(233,196,106,0.25); }
  .btn-shipped { background:rgba(108,92,231,0.15); color:#a29bfe; border:1px solid rgba(108,92,231,0.3); }
  .btn-shipped:hover { background:rgba(108,92,231,0.25); }
  .btn-deliver { background:var(--gold); color:var(--black); border:1px solid var(--gold); }
  .btn-deliver:hover { background:var(--gold-light); }

  @media (min-width: 900px) {
    .order-meta { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  }
</style>
{% endblock %}

{% block body %}
<div class="dash">
    <nav class="dash-nav">
        <div class="dash-nav-brand">
            <span class="logo-icon">&#9670;</span>
            <span class="logo-text">ACA Vendor</span>
        </div>
        <div class="dash-nav-links">
            <a href="{% url 'vendors:dashboard' %}" class="nav-link">Dashboard</a>
            <a href="{% url 'vendors:orders' %}" class="nav-link active">Orders</a>
            <a href="{% url 'escrow:payout_setup' %}" class="nav-link">Payout</a>
            <a href="{% url 'vendors:settings' %}" class="nav-link">Settings</a>
            <a href="/whatsapp/" class="nav-link">Chat</a>
        </div>
        <div class="dash-nav-right">
            <span class="nav-user">{{ vendor.store_name }}</span>
            <form method="post" action="{% url 'logout' %}" style="display:inline">
                {% csrf_token %}
                <button type="submit" class="nav-link btn-logout">Logout</button>
            </form>
        </div>
    </nav>

    <main class="dash-main">
        <div class="dash-header">
            <div>
                <h1>Orders</h1>
                <p class="dash-subtitle">Manage and deliver your orders — funds held securely until confirmed</p>
            </div>
            {% if not has_payout_account %}
            <a href="{% url 'escrow:payout_setup' %}" class="btn btn-warning">
                &#9888; Set Up Payout Account
            </a>
            {% endif %}
        </div>

        {% if not has_payout_account %}
        <div style="background:rgba(253,203,110,.08);border:1px solid rgba(253,203,110,.25);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:24px;font-size:14px;color:#fdcb6e;">
            You haven't set up a payout account yet. Your earnings cannot be released until you do.
            <a href="{% url 'escrow:payout_setup' %}" style="color:#fdcb6e;font-weight:700;text-decoration:underline;">Set it up now &rarr;</a>
        </div>
        {% endif %}

        {% if orders %}
        <div class="order-grid">
          {% for vo in orders %}
          <div class="store-card order-card">
            <div class="order-head">
              <div>
                <div class="order-num">{{ vo.order.order_number }}</div>
                <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">{{ vo.created_at|date:"M d, Y H:i" }}</div>
              </div>
              <div style="text-align:right;">
                <div class="order-amt">{{ vo.order.items.first.currency|default:"GHS" }} {{ vo.total_amount }}</div>
                {% if vo.escrow %}
                <div class="payout-amount" style="margin-top:4px;">Payout: GHS {{ vo.escrow.seller_payout }}</div>
                {% endif %}
              </div>
            </div>

            <!-- Secure payment escrow status -->
            {% if vo.escrow %}
            <div style="margin-bottom:8px;">
              <span class="sp-pill sp-{{ vo.escrow.status }}">
                {% if vo.escrow.status == 'held' %}&#128274; Funds Held
                {% elif vo.escrow.status == 'delivery_uploaded' %}&#128337; Awaiting Buyer Confirmation
                {% elif vo.escrow.status == 'buyer_confirmed' %}&#10003; Buyer Confirmed
                {% elif vo.escrow.status == 'released' or vo.escrow.status == 'auto_released' %}&#128176; Paid Out
                {% elif vo.escrow.status == 'disputed' %}&#9888; Disputed
                {% elif vo.escrow.status == 'payment_pending' %}&#9201; Payment Pending
                {% else %}{{ vo.escrow.get_status_display }}
                {% endif %}
              </span>
            </div>
            {% endif %}

            <!-- Order fulfilment status flow (for escrow orders) -->
            {% if vo.escrow and vo.escrow.status == 'held' %}
            <div class="status-flow">
              <span class="status-step done">&#10003; Paid</span>
              <span class="status-step-arrow">&#8250;</span>
              <span class="status-step {% if vo.status == 'processing' or vo.status == 'shipped' or vo.status == 'delivered' %}done{% elif vo.status == 'confirmed' %}current{% endif %}">Processing</span>
              <span class="status-step-arrow">&#8250;</span>
              <span class="status-step {% if vo.status == 'shipped' or vo.status == 'delivered' %}done{% elif vo.status == 'processing' %}current{% endif %}">Shipped</span>
              <span class="status-step-arrow">&#8250;</span>
              <span class="status-step {% if vo.status == 'delivered' %}done{% elif vo.status == 'shipped' %}current{% endif %}">Delivered</span>
            </div>
            {% endif %}

            <div class="order-meta">
              <div>Customer: {{ vo.order.customer_name }}</div>
              <div>Phone: {{ vo.order.customer_phone|default:"—" }}</div>
              <div style="grid-column:1/-1;">Address: {{ vo.order.delivery_address|truncatechars:60 }}</div>
            </div>

            <div class="order-items">
              {% for item in vo.order.items.all %}
              {% if item.vendor_id == vo.vendor_id %}
              <div class="order-item">
                <span>{{ item.product_name }} x{{ item.quantity }}</span>
                <span>{{ item.currency }} {{ item.subtotal }}</span>
              </div>
              {% endif %}
              {% endfor %}
            </div>

            <div class="order-actions">
              {% if vo.escrow %}
                {% if vo.escrow.status == 'held' %}
                  {# Step 1: confirmed → processing #}
                  {% if vo.status == 'confirmed' %}
                  <form method="post" action="{% url 'vendors:update_order_status' vo.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="status" value="processing">
                    <button type="submit" class="btn-status btn-processing">
                      &#9881; Mark Processing
                    </button>
                  </form>

                  {# Step 2: processing → shipped #}
                  {% elif vo.status == 'processing' %}
                  <form method="post" action="{% url 'vendors:update_order_status' vo.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="status" value="shipped">
                    <button type="submit" class="btn-status btn-shipped">
                      &#128666; Mark Shipped
                    </button>
                  </form>

                  {# Step 3: shipped → deliver (uploads proof) #}
                  {% elif vo.status == 'shipped' %}
                  <a href="{% url 'escrow:vendor_deliver' vo.escrow.id %}" class="btn-status btn-deliver">
                    &#10003; Mark Delivered
                  </a>

                  {# Also allow skipping straight to deliver from confirmed/processing #}
                  {% else %}
                  <a href="{% url 'escrow:vendor_deliver' vo.escrow.id %}" class="btn-status btn-deliver">
                    &#10003; Mark Delivered
                  </a>
                  {% endif %}

                {% elif vo.escrow.status == 'delivery_uploaded' %}
                <span style="font-size:12px;color:var(--text-muted);">
                  Awaiting buyer confirmation by {{ vo.escrow.auto_release_after|date:"M d H:i" }}
                </span>

                {% elif vo.escrow.status in 'released,auto_released,buyer_confirmed' %}
                <span style="font-size:12px;color:#00b894;">&#10003; Payment released</span>

                {% endif %}

              {% else %}
              {# Legacy status update for non-secure-payment orders #}
              <form method="post" action="{% url 'vendors:update_order_status' vo.id %}" style="display:flex;gap:6px;align-items:center;width:100%;">
                {% csrf_token %}
                <select name="status" style="flex:1;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px;">
                  <option value="pending" {% if vo.status == "pending" %}selected{% endif %}>Pending</option>
                  <option value="confirmed" {% if vo.status == "confirmed" %}selected{% endif %}>Confirmed</option>
                  <option value="processing" {% if vo.status == "processing" %}selected{% endif %}>Processing</option>
                  <option value="shipped" {% if vo.status == "shipped" %}selected{% endif %}>Shipped</option>
                  <option value="delivered" {% if vo.status == "delivered" %}selected{% endif %}>Delivered</option>
                  <option value="cancelled" {% if vo.status == "cancelled" %}selected{% endif %}>Cancelled</option>
                </select>
                <button type="submit" class="btn btn-sm btn-primary">Update</button>
              </form>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">&#9670;</div>
            <h2>No orders yet</h2>
            <p>When customers order your products, they'll appear here.</p>
        </div>
        {% endif %}
    </main>
</div>
{% endblock %}