<!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>Detail Order - 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> <%= order.orderId %></h1>
          <p class="admin-page-subtitle">Detail transaksi pembelian</p>
        </div>
        <a href="/<%= adminPath %>/orders" class="btn-admin-secondary">
          <i class="fa-solid fa-arrow-left"></i> Kembali
        </a>
      </div>

      <div class="admin-form-grid cols-2">
        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-box"></i> Detail Produk</div>
          <div style="font-size:13px; color:var(--text-secondary); line-height:2;">
            <div style="display:flex; justify-content:space-between;"><span>Produk</span><b style="color:var(--text-primary);"><%= order.productName %></b></div>
            <div style="display:flex; justify-content:space-between;"><span>Varian</span><b style="color:var(--text-primary);"><%= order.variantLabel || '-' %></b></div>
            <div style="display:flex; justify-content:space-between;"><span>Quantity</span><b style="color:var(--text-primary);"><%= order.qty %></b></div>
            <div style="display:flex; justify-content:space-between;"><span>Harga/item</span><b style="color:var(--text-primary);">Rp <%= order.pricePerItem.toLocaleString('id-ID') %></b></div>
            <div style="display:flex; justify-content:space-between;"><span>Total Bayar</span><b style="color:var(--gold-primary); font-size:16px;">Rp <%= order.totalAmount.toLocaleString('id-ID') %></b></div>
          </div>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-user"></i> Detail Customer</div>
          <div style="font-size:13px; color:var(--text-secondary); line-height:2;">
            <div style="display:flex; justify-content:space-between;"><span>Nama</span><b style="color:var(--text-primary);"><%= order.customerName %></b></div>
            <div style="display:flex; justify-content:space-between;"><span>Email</span><b style="color:var(--text-primary);"><%= order.email %></b></div>
            <div style="display:flex; justify-content:space-between;"><span>Tanggal Order</span><b style="color:var(--text-primary);"><%= new Date(order.createdAt).toLocaleString('id-ID') %></b></div>
            <% if (order.paidAt) { %>
              <div style="display:flex; justify-content:space-between;"><span>Tanggal Bayar</span><b style="color:var(--success);"><%= new Date(order.paidAt).toLocaleString('id-ID') %></b></div>
            <% } %>
          </div>
        </div>
      </div>

      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-circle-info"></i> Status</div>
        <% if (order.status === 'paid') { %>
          <span class="table-badge success" style="font-size:13px; padding:8px 16px;">Paid</span>
        <% } else if (order.status === 'pending' || order.status === 'processing') { %>
          <span class="table-badge warning" style="font-size:13px; padding:8px 16px;">Pending</span>
        <% } else { %>
          <span class="table-badge danger" style="font-size:13px; padding:8px 16px;"><%= order.status %></span>
        <% } %>

        <% if (order.status === 'pending' || order.status === 'processing') { %>
          <div style="margin-top:16px;">
            <p style="font-size:12px; color:var(--text-muted); margin-bottom:10px;">
              Jika webhook gagal tapi pembayaran sudah terkonfirmasi diterima, tandai manual di bawah ini. Key akan otomatis di-assign.
            </p>
            <form action="/<%= adminPath %>/orders/<%= order.orderId %>/mark-paid" method="POST" onsubmit="return confirm('Tandai order ini sebagai Paid dan kirim key?')">
              <button type="submit" class="btn-admin-primary">
                <i class="fa-solid fa-check"></i> Tandai Sebagai Paid (Manual)
              </button>
            </form>
          </div>
        <% } %>
      </div>

      <% if (order.deliveredKeys && order.deliveredKeys.length > 0) { %>
      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-key"></i> Key Terkirim</div>
        <div class="key-pool-list">
          <% order.deliveredKeys.forEach(key => { %>
            <div class="key-pool-item">
              <div class="key-pool-item-value"><%= key %></div>
            </div>
          <% }) %>
        </div>
      </div>
      <% } %>
    </main>
  </div>
</body>
</html>
