<!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>Produk - 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: 'products' }) %>

    <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-box"></i> Produk</h1>
          <p class="admin-page-subtitle">Kelola produk, varian durasi, dan status operasional</p>
        </div>
        <a href="/<%= adminPath %>/products/new" class="btn-admin-primary">
          <i class="fa-solid fa-plus"></i> Tambah Produk
        </a>
      </div>

      <div class="admin-card">
        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead>
              <tr>
                <th>Produk</th>
                <th>Kategori</th>
                <th>Mulai Dari</th>
                <th>Varian</th>
                <th>Stok</th>
                <th>Terjual</th>
                <th>Status Operasional</th>
                <th>Aktif</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody>
              <% if (products.length === 0) { %>
                <tr><td colspan="9" style="text-align:center; color:var(--text-muted);">Belum ada produk</td></tr>
              <% } %>
              <% products.forEach(p => { %>
                <tr>
                  <td>
                    <div style="display:flex; align-items:center; gap:10px;">
                      <img src="<%= p.icon %>" alt="" style="width:32px;height:32px;border-radius:6px;object-fit:cover;" onerror="this.style.display='none'">
                      <span style="font-weight:700;"><%= p.name %></span>
                    </div>
                  </td>
                  <td><%= p.category %></td>
                  <td>Rp <%= p.lowestPrice.toLocaleString('id-ID') %></td>
                  <td><%= p.variants.length %> varian</td>
                  <td>
                    <span class="table-badge <%= p.totalStock <= 3 ? 'warning' : 'success' %>">
                      <%= p.totalStock %> available
                    </span>
                  </td>
                  <td><%= p.soldCount %></td>
                  <td>
                    <% if (p.status === 'online') { %><span class="table-badge success"><i class="fa-solid fa-circle" style="font-size:8px;"></i> Online</span>
                    <% } else if (p.status === 'offline') { %><span class="table-badge danger"><i class="fa-solid fa-circle" style="font-size:8px;"></i> Offline</span>
                    <% } else { %><span class="table-badge neutral"><i class="fa-solid fa-circle" style="font-size:8px;"></i> Unknown</span><% } %>
                  </td>
                  <td>
                    <% if (p.isActive) { %><span class="table-badge success">Aktif</span>
                    <% } else { %><span class="table-badge neutral">Nonaktif</span><% } %>
                  </td>
                  <td>
                    <div style="display:flex; gap:6px;">
                      <a href="/<%= adminPath %>/products/<%= p.id %>/variants" class="table-action-btn" title="Kelola Varian & Stok"><i class="fa-solid fa-layer-group"></i></a>
                      <a href="/<%= adminPath %>/products/<%= p.id %>/edit" class="table-action-btn" title="Edit"><i class="fa-solid fa-pen"></i></a>
                      <form action="/<%= adminPath %>/products/<%= p.id %>/delete" method="POST" onsubmit="return confirm('Hapus produk ini beserta semua varian dan stoknya?')" style="display:inline;">
                        <button type="submit" class="table-action-btn danger" title="Hapus"><i class="fa-solid fa-trash"></i></button>
                      </form>
                    </div>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</body>
</html>
