<%- include('partials/header') %>
<section class="page-header">
  <div class="container">
    <h1>My Orders</h1>
    <p><%= orders.length %> order(s) placed</p>
  </div>
</section>
<section class="section">
  <div class="container">
    <div class="admin-section">
      <% if (orders.length > 0) { %>
      <table class="orders-table">
        <thead>
          <tr>
            <th>Order #</th>
            <th>Items</th>
            <th>Subtotal</th>
            <th>Delivery</th>
            <th>Total</th>
            <th>Payment</th>
            <th>Status</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          <% orders.sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).forEach(function(o) { %>
          <tr>
            <td>#<%= o.id %></td>
            <td style="max-width:200px;font-size:12px;"><%= o.items.map(i => i.name + ' x' + i.qty).join(', ') %></td>
            <td>BDT <%= o.subtotal.toLocaleString() %></td>
            <td><%= o.delivery === 0 ? 'Free' : 'BDT ' + o.delivery.toLocaleString() %></td>
            <td><strong>BDT <%= o.total.toLocaleString() %></strong></td>
            <td><%= o.paymentMethod %></td>
            <td><span class="status-badge status-<%= o.status %>"><%= o.status %></span></td>
            <td style="font-size:11px;"><%= new Date(o.createdAt).toLocaleDateString('en-BD') %></td>
          </tr>
          <% }); %>
        </tbody>
      </table>
      <% } else { %>
      <p style="color:#6a5a4a;font-size:16px;text-align:center;padding:40px;">You haven't placed any orders yet. <a href="/shop" style="color:#d4a574;">Start shopping!</a></p>
      <% } %>
    </div>
  </div>
</section>
<%- include('partials/footer') %>
