<%- include('_head') %>
  <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;">
    <h1 style="font-size:24px;">Order <%= order.order_number %></h1>
    <a class="btn btn-dark btn-sm" href="/admin/orders">← Back to orders</a>
  </div>

  <% if (query.saved) { %><div class="panel" style="background:var(--gold-soft); border-color:rgba(212,175,55,.35); margin-bottom:14px;">Order updated.</div><% } %>

  <div style="display:grid; grid-template-columns: 1.4fr 1fr; gap:20px; align-items:start;">
    <div class="panel">
      <h3>Items</h3>
      <% items.forEach(function(i){ %>
        <div style="display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line);">
          <% if (i.image) { %><img class="admin-thumb" src="/public/images/products/<%= i.image %>" alt=""><% } %>
          <div style="flex:1;">
            <div style="font-weight:700;"><%= i.name %><% if (i.size) { %> <span class="di-size"><%= i.size %></span><% } %></div>
            <div style="color:var(--muted); font-size:12.5px;">Qty <%= i.qty %> × <%= money(i.price) %></div>
          </div>
          <b style="color:var(--gold-2);"><%= money(i.price * i.qty) %></b>
        </div>
      <% }); %>
      <div class="summary-row" style="margin-top:12px;"><span>Subtotal</span><span><%= money(order.subtotal) %></span></div>
      <% if (order.discount_amount > 0) { %><div class="summary-row"><span>Discount (<%= order.coupon_code %>)</span><span style="color:var(--green);">−<%= money(order.discount_amount) %></span></div><% } %>
      <div class="summary-row"><span>Shipping</span><span><%= order.shipping_fee === 0 ? 'FREE' : money(order.shipping_fee) %></span></div>
      <div class="summary-row total"><span>Total</span><span><%= money(order.total) %></span></div>
    </div>

    <div>
      <form method="post" action="/admin/orders/<%= order.id %>">
        <div class="panel">
          <h3>Update order</h3>
          <div class="form-field"><label for="status">Order status</label>
            <select id="status" name="status">
              <% ['pending','confirmed','shipped','delivered','cancelled'].forEach(function(s){ %><option value="<%= s %>" <%= order.status === s ? 'selected' : '' %>><%= s %></option><% }); %>
            </select>
          </div>
          <div class="form-field"><label for="payment_status">Payment status</label>
            <select id="payment_status" name="payment_status">
              <% ['unpaid','paid','refunded'].forEach(function(s){ %><option value="<%= s %>" <%= order.payment_status === s ? 'selected' : '' %>><%= s %></option><% }); %>
            </select>
          </div>
          <button class="btn btn-gold" type="submit">Save changes</button>
        </div>
      </form>

      <div class="panel">
        <h3>Customer</h3>
        <p style="font-size:14px; line-height:1.7;">
          <b><%= order.name %></b><br>
          <a href="mailto:<%= order.email %>" style="color:var(--gold-2);"><%= order.email %></a><br>
          <a href="tel:<%= order.phone.replace(/\s/g,'') %>" style="color:var(--gold-2);"><%= order.phone %></a>
        </p>
        <h3 style="margin-top:16px;">Delivery</h3>
        <p style="font-size:14px; line-height:1.6; color:var(--ink-2);">
          <%= order.address_line1 %><%= order.address_line2 ? ', ' + order.address_line2 : '' %><br>
          <%= order.city %>, <%= order.province %> <%= order.postal_code %><br>
          <%= order.country %>
        </p>
        <% if (order.notes) { %><h3 style="margin-top:16px;">Notes</h3><p style="color:var(--ink-2); font-size:14px;"><%= order.notes %></p><% } %>
        <p style="color:var(--muted); font-size:12.5px; margin-top:14px;">Placed <%= new Date(order.created_at + 'Z').toLocaleString() %></p>
        <a class="btn btn-dark btn-sm" style="margin-top:8px;" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20<%= encodeURIComponent(order.name.split(' ')[0] || '') %>%2C%20regarding%20your%20order%20<%= order.order_number %>." target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> WhatsApp customer</a>
      </div>
    </div>
  </div>
<%- include('_foot') %>
