<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Kelola Pesanan</h1>
  <p class="text-muted text-sm mt-1">Verifikasi pembayaran & kirim file EA ke member.</p>
</div>

<!-- Filter pills -->
<div class="flex items-center gap-2 text-sm mb-6 overflow-x-auto no-scrollbar pb-2">
  <a href="/admin/orders" class="pill <%= !filter ? 'pill-gold' : '' %> px-4 py-1.5 shrink-0">Semua</a>
  <a href="/admin/orders?status=pending" class="pill <%= filter==='pending' ? 'pill-gold' : '' %> px-4 py-1.5 shrink-0">Pending</a>
  <a href="/admin/orders?status=approved" class="pill <%= filter==='approved' ? 'pill-green' : '' %> px-4 py-1.5 shrink-0">Approved</a>
  <a href="/admin/orders?status=rejected" class="pill <%= filter==='rejected' ? 'pill-red' : '' %> px-4 py-1.5 shrink-0">Rejected</a>
</div>

<% if (orders && orders.length) { %>

  <!-- Desktop table -->
  <div class="card p-0 overflow-hidden tbl-mobile-hide">
    <div class="tbl-wrap">
      <table class="tbl">
        <thead>
          <tr>
            <th>Kode</th>
            <th>Member</th>
            <th>EA</th>
            <th>Akun</th>
            <th>Total</th>
            <th>Bukti</th>
            <th>Status</th>
            <th>Tanggal</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% orders.forEach(function(o){ %>
            <tr>
              <td class="mono text-xs"><%= o.code %></td>
              <td>
                <div class="font-medium"><%= o.user_name %></div>
                <div class="text-xs text-muted"><%= o.user_email %></div>
              </td>
              <td>
                <div><%= o.ea_name %></div>
                <div class="text-xs text-muted"><%= o.platform %></div>
              </td>
              <td class="text-sm mono"><%= o.broker_account || '-' %></td>
              <td class="mono">Rp<%= Number(o.amount).toLocaleString('id-ID') %></td>
              <td>
                <% if (o.payment_proof) { %>
                  <a href="<%= o.payment_proof %>" target="_blank" rel="noopener" class="text-gold-300 hover:text-gold-200 text-sm">Lihat →</a>
                <% } else { %>
                  <span class="text-muted-2 text-xs">—</span>
                <% } %>
              </td>
              <td><span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %>"><%= o.status %></span></td>
              <td class="text-xs whitespace-nowrap"><%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) %></td>
              <td><a href="/admin/orders/<%= o.id %>" class="text-gold-300 hover:text-gold-200 text-sm whitespace-nowrap">Detail →</a></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Mobile cards -->
  <div class="tbl-mobile-cards space-y-3">
    <% orders.forEach(function(o){ %>
      <a href="/admin/orders/<%= o.id %>" class="block card p-4 hover:bg-white/[0.06] transition">
        <div class="flex items-start justify-between gap-3 mb-3">
          <div class="min-w-0 flex-1">
            <div class="font-medium text-sm truncate"><%= o.user_name %></div>
            <div class="text-xs text-muted truncate"><%= o.user_email %></div>
          </div>
          <span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0">
            <%= o.status %>
          </span>
        </div>

        <div class="text-xs text-muted mono mb-2"><%= o.code %></div>

        <div class="grid grid-cols-2 gap-3 text-xs">
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">EA</div>
            <div class="mt-1 truncate"><%= o.ea_name %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Total</div>
            <div class="mono text-gold-200 mt-1 font-medium">Rp<%= Number(o.amount).toLocaleString('id-ID') %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Akun</div>
            <div class="mono mt-1 truncate"><%= o.broker_account || '-' %></div>
          </div>
          <div>
            <div class="text-muted-2 uppercase tracking-wide" style="font-size:10px">Platform</div>
            <div class="mt-1"><%= o.platform %></div>
          </div>
        </div>

        <div class="mt-3 pt-3 border-t border-white/5 flex items-center justify-between text-xs">
          <span class="text-muted"><%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) %></span>
          <span class="text-gold-300">Detail →</span>
        </div>
      </a>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state">
    <div class="empty-icon">📭</div>
    <h2>Tidak ada pesanan<% if (filter) { %> "<%= filter %>"<% } %></h2>
    <p>Pesanan baru akan muncul di sini begitu member checkout.</p>
  </div>
<% } %>
