<!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>Kelola Varian - 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-layer-group"></i> Varian - <%= product.name %></h1>
          <p class="admin-page-subtitle">Atur durasi, harga, dan stok key untuk tiap varian produk ini</p>
        </div>
        <a href="/<%= adminPath %>/products" class="btn-admin-secondary">
          <i class="fa-solid fa-arrow-left"></i> Kembali
        </a>
      </div>

      <div class="admin-card" style="border-color: var(--gold-primary); background: rgba(255,215,0,0.04);">
        <div class="admin-card-title" style="color: var(--gold-primary);"><i class="fa-solid fa-circle-info"></i> Alur Kerja Singkat</div>
        <p style="font-size:13px; color:var(--text-secondary); line-height:1.8; margin:0;">
          <b style="color:var(--text-primary);">Langkah 1:</b> Tambah varian (misal "1 Day" Rp 6.000, "7 Days" Rp 25.000) di bawah ini.
          <b style="color:var(--text-primary);">Langkah 2:</b> Klik tombol <b style="color:var(--gold-primary);">"Kelola Stok"</b> pada varian yang sudah dibuat untuk isi daftar key (lengkap dengan contoh format & panduan di halaman tersebut).
          Tanpa stok key, produk akan tampil <b style="color:var(--danger);">"Stok Habis"</b> di toko walau variannya sudah ada.
        </p>
      </div>

      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-plus"></i> Tambah Varian Baru</div>
        <form action="/<%= adminPath %>/products/<%= product.id %>/variants/new" method="POST">
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-clock"></i> Label Durasi</label>
              <input type="text" name="label" class="form-input" placeholder="contoh: 1 Day, 7 Days, 30 Days" required>
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-money-bill"></i> Harga (Rp)</label>
              <input type="number" name="price" class="form-input" placeholder="6000" required min="0">
            </div>
          </div>
          <button type="submit" class="btn-admin-primary">
            <i class="fa-solid fa-plus"></i> Tambah Varian
          </button>
        </form>
      </div>

      <div class="admin-card-title" style="margin: 24px 0 14px; padding-left:4px;">
        <i class="fa-solid fa-list"></i> Varian Tersedia (<%= product.variants.length %>)
      </div>

      <% if (product.variants.length === 0) { %>
        <div class="admin-card">
          <p style="color:var(--text-muted); font-size:13px; text-align:center;">Belum ada varian. Tambahkan minimal 1 varian supaya produk bisa dibeli di toko.</p>
        </div>
      <% } %>

      <% product.variants.forEach(variant => { %>
        <% const stockAvailable = variant.keys.filter(k => k.status === 'available').length; %>
        <% const stockUsed = variant.keys.filter(k => k.status === 'used').length; %>
        <div class="admin-card">
          <form action="/<%= adminPath %>/products/<%= product.id %>/variants/<%= variant.id %>/edit" method="POST">
            <div class="admin-form-grid cols-2" style="align-items:end;">
              <div class="form-group" style="margin-bottom:0;">
                <label class="form-label"><i class="fa-solid fa-clock"></i> Label Durasi</label>
                <input type="text" name="label" class="form-input" value="<%= variant.label %>" required>
              </div>
              <div class="form-group" style="margin-bottom:0;">
                <label class="form-label"><i class="fa-solid fa-money-bill"></i> Harga (Rp)</label>
                <input type="number" name="price" class="form-input" value="<%= variant.price %>" required min="0">
              </div>
            </div>

            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:16px; flex-wrap:wrap; gap:10px;">
              <div style="display:flex; gap:10px;">
                <span class="table-badge <%= stockAvailable <= 3 ? 'warning' : 'success' %>">
                  <i class="fa-solid fa-key"></i> <%= stockAvailable %> available
                </span>
                <span class="table-badge neutral">
                  <%= stockUsed %> terjual
                </span>
              </div>

              <div style="display:flex; gap:8px;">
                <button type="submit" class="btn-admin-secondary" style="font-size:12px; padding:8px 14px;">
                  <i class="fa-solid fa-floppy-disk"></i> Simpan
                </button>
                <a href="/<%= adminPath %>/products/<%= product.id %>/variants/<%= variant.id %>/stock" class="btn-admin-primary" style="font-size:12px; padding:8px 14px;">
                  <i class="fa-solid fa-key"></i> Kelola Stok
                </a>
              </div>
            </div>
          </form>

          <form action="/<%= adminPath %>/products/<%= product.id %>/variants/<%= variant.id %>/delete" method="POST" onsubmit="return confirm('Hapus varian ini beserta semua stok key di dalamnya?')" style="margin-top:10px;">
            <button type="submit" class="btn-admin-danger" style="font-size:11px;">
              <i class="fa-solid fa-trash"></i> Hapus Varian Ini
            </button>
          </form>
        </div>
      <% }) %>
    </main>
  </div>
</body>
</html>
