<!DOCTYPE html>
<html lang="id" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Orders - BuzzMart Admin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
  <div class="admin-body">
    <%- include('_sidebar', { adminPath, currentPath: 'orders' }) %>

    <main class="admin-main">
      <button class="admin-mobile-toggle" onclick="document.getElementById('adminSidebar').classList.toggle('show')">
        <i class="fa-solid fa-bars"></i>
      </button>

      <div class="admin-page-header-row">
        <div>
          <h1 class="admin-page-title"><i class="fa-solid fa-receipt"></i> Orders</h1>
          <p class="admin-page-subtitle">Riwayat semua transaksi pembelian</p>
        </div>
      </div>

      <div class="filter-bar" style="padding:0; margin-bottom:18px;">
        <a href="/<%= adminPath %>/orders?status=all" class="filter-tab <%= statusFilter === 'all' ? 'active' : '' %>">All</a>
        <a href="/<%= adminPath %>/orders?status=paid" class="filter-tab <%= statusFilter === 'paid' ? 'active' : '' %>">Paid</a>
        <a href="/<%= adminPath %>/orders?status=pending" class="filter-tab <%= statusFilter === 'pending' ? 'active' : '' %>">Pending</a>
        <a href="/<%= adminPath %>/orders?status=failed" class="filter-tab <%= statusFilter === 'failed' ? 'active' : '' %>">Failed</a>
        <a href="/<%= adminPath %>/orders?status=expired" class="filter-tab <%= statusFilter === 'expired' ? 'active' : '' %>">Expired</a>
      </div>

      <div class="admin-card">
        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead>
              <tr>
                <th>Order ID</th>
                <th>Produk</th>
                <th>Varian</th>
                <th>Customer</th>
                <th>Email</th>
                <th>Qty</th>
                <th>Total</th>
                <th>Status</th>
                <th>Tanggal</th>
              </tr>
            </thead>
            <tbody>
              <% if (orders.length === 0) { %>
                <tr><td colspan="9" style="text-align:center; color:var(--text-muted);">Belum ada order</td></tr>
              <% } %>
              <% orders.forEach(o => { %>
                <tr onclick="window.location.href='/<%= adminPath %>/orders/<%= o.orderId %>'" style="cursor:pointer;">
                  <td><%= o.orderId %></td>
                  <td><%= o.productName %></td>
                  <td><%= o.variantLabel || '-' %></td>
                  <td><%= o.customerName %></td>
                  <td><%= o.email %></td>
                  <td><%= o.qty %></td>
                  <td>Rp <%= o.totalAmount.toLocaleString('id-ID') %></td>
                  <td>
                    <% if (o.status === 'paid') { %><span class="table-badge success">Paid</span>
                    <% } else if (o.status === 'pending' || o.status === 'processing') { %><span class="table-badge warning">Pending</span>
                    <% } else { %><span class="table-badge danger"><%= o.status %></span><% } %>
                  </td>
                  <td><%= new Date(o.createdAt).toLocaleString('id-ID', { dateStyle: 'short', timeStyle: 'short' }) %></td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</body>
</html>
