<!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>Stok Key - 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-key"></i> Stok Key - <%= product.name %> (<%= variant.label %>)</h1>
          <p class="admin-page-subtitle">
            <%= variant.keys.filter(k => k.status === 'available').length %> available -
            <%= variant.keys.filter(k => k.status === 'used').length %> terpakai
          </p>
        </div>
        <a href="/<%= adminPath %>/products/<%= product.id %>/variants" class="btn-admin-secondary">
          <i class="fa-solid fa-arrow-left"></i> Kembali ke Varian
        </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> Cara Menambah Stok Key</div>
        <ol style="font-size:13px; color:var(--text-secondary); line-height:2; padding-left:18px; margin:0;">
          <li>Siapkan daftar license key/lisensi mod dari sumbermu (misal hasil generate dari panel mod, atau key yang kamu beli grosir)</li>
          <li>Tulis <b style="color:var(--text-primary);">satu key per baris</b> di kotak teks di bawah ini — jangan pakai koma atau pemisah lain, cukup tekan Enter untuk pindah baris</li>
          <li>Klik <b style="color:var(--gold-primary);">"Tambahkan ke Stok"</b> — semua key otomatis masuk dengan status <span class="table-badge success" style="font-size:10px;">Available</span></li>
          <li>Saat ada customer beli varian <b style="color:var(--text-primary);"><%= variant.label %></b> ini, sistem otomatis ambil <b>1 key teratas yang masih Available</b> dan mengirimkannya — kamu tidak perlu kirim manual</li>
          <li>Key yang sudah terpakai akan berubah jadi status <span class="table-badge neutral" style="font-size:10px;">Used</span> dan tercatat nomor Order-nya, supaya kamu bisa lacak key mana dipakai siapa</li>
        </ol>
        <div style="margin-top:14px; padding:12px 14px; background:var(--bg-surface); border-radius:8px; border:1px dashed var(--border-gold);">
          <div style="font-size:11px; color:var(--text-muted); margin-bottom:6px;">CONTOH FORMAT YANG BENAR:</div>
          <div style="font-family:'Courier New',monospace; font-size:12px; color:var(--text-primary); line-height:1.8;">
            FF-A1B2-C3D4<br>
            FF-E5F6-G7H8<br>
            FF-I9J0-K1L2
          </div>
        </div>
      </div>

      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-plus"></i> Tambah Key Baru untuk Varian "<%= variant.label %>"</div>
        <form action="/<%= adminPath %>/products/<%= product.id %>/variants/<%= variant.id %>/stock/add" method="POST">
          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-list"></i> Daftar Key (satu key per baris)</label>
            <textarea name="keys" class="form-input" placeholder="FF-XXXX-0001&#10;FF-XXXX-0002&#10;FF-XXXX-0003" rows="6" required></textarea>
          </div>
          <button type="submit" class="btn-admin-primary">
            <i class="fa-solid fa-upload"></i> Tambahkan ke Stok
          </button>
        </form>
      </div>

      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-list-check"></i> Daftar Key (<%= variant.keys.length %>)</div>

        <% if (variant.keys.length === 0) { %>
          <p style="color:var(--text-muted); font-size:13px;">Belum ada stok key untuk varian ini.</p>
        <% } else { %>
          <div class="key-pool-list">
            <% variant.keys.slice().reverse().forEach(k => { %>
              <div class="key-pool-item <%= k.status === 'used' ? 'used' : '' %>">
                <div>
                  <div class="key-pool-item-value"><%= k.key %></div>
                  <% if (k.status === 'used') { %>
                    <div style="font-size:11px; color:var(--text-muted); margin-top:2px;">Order: <%= k.orderId %></div>
                  <% } %>
                </div>
                <div style="display:flex; align-items:center; gap:10px;">
                  <% if (k.status === 'available') { %>
                    <span class="table-badge success">Available</span>
                    <form action="/<%= adminPath %>/products/<%= product.id %>/variants/<%= variant.id %>/stock/remove" method="POST" onsubmit="return confirm('Hapus key ini?')">
                      <input type="hidden" name="key" value="<%= k.key %>">
                      <button type="submit" class="table-action-btn danger"><i class="fa-solid fa-trash"></i></button>
                    </form>
                  <% } else { %>
                    <span class="table-badge neutral">Used</span>
                  <% } %>
                </div>
              </div>
            <% }) %>
          </div>
        <% } %>
      </div>
    </main>
  </div>
</body>
</html>
