<section class="mx-auto max-w-5xl px-4 sm:px-6 py-6 sm:py-10">
  <a href="/ea/<%= ea.slug %>" class="text-sm text-muted hover:text-white inline-flex items-center gap-2 mb-5 sm:mb-6">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
    Kembali ke detail EA
  </a>

  <div class="text-xs sm:text-sm uppercase tracking-[0.28em] text-gold-300/70">Detail Order</div>
  <h1 class="mt-2 text-2xl sm:text-3xl md:text-4xl font-display font-semibold leading-tight">Selesaikan Pembelian — <%= ea.name %></h1>

  <form action="/checkout/<%= ea.slug %>" method="post" enctype="multipart/form-data" class="grid lg:grid-cols-[1fr_.95fr] gap-5 sm:gap-6 mt-6 sm:mt-8">

    <!-- LEFT: order form -->
    <div class="space-y-4">
      <div class="card p-6">
        <div class="flex items-center justify-between">
          <span class="pill pill-gold"><%= ea.code %></span>
          <span class="text-sm text-muted">Produk</span>
        </div>
        <div class="mt-3 flex items-end justify-between">
          <div>
            <div class="text-lg font-medium"><%= ea.name %></div>
            <div class="text-sm text-muted mt-1"><%= ea.pair || '' %></div>
          </div>
          <div class="text-right">
            <div class="text-xs text-muted">Total</div>
            <div class="text-2xl font-display text-gold-200 mt-1"><%= ea.price_label || ('Rp' + Number(ea.price).toLocaleString('id-ID')) %></div>
          </div>
        </div>
      </div>

      <!-- ==== License & Account Info ==== -->
      <div class="card p-6 space-y-4">
        <div>
          <h3 class="font-display font-semibold flex items-center gap-2 mb-1">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 text-gold-300"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            Lisensi & Akun Broker
          </h3>
          <p class="text-xs text-muted">Data ini admin pakai untuk men-lock EA ke akun Anda. Pastikan akurat.</p>
        </div>

        <!-- license lock type -->
        <div>
          <label class="text-sm text-muted">Tipe Lock Lisensi <span class="text-red-400">*</span></label>
          <select name="license_lock" class="input mt-2" required>
            <option value="account_number">🔒 Lock ke Nomor Akun (paling umum)</option>
            <option value="account_name">🔒 Lock ke Nama Akun</option>
            <option value="none">🔓 Tanpa Lock (bebas pindah akun)</option>
          </select>
          <div class="text-xs text-muted-2 mt-1.5">Pilih sesuai kebutuhan. Default lock ke nomor akun.</div>
        </div>

        <div class="grid md:grid-cols-2 gap-3">
          <div>
            <label class="text-sm text-muted">Nomor Akun (MT4/MT5)</label>
            <input name="broker_account" class="input mt-2 mono" placeholder="1234567 (opsional)" />
            <div class="text-xs text-muted-2 mt-1.5">Boleh kosong — isi nanti via WhatsApp/Telegram.</div>
          </div>
          <div>
            <label class="text-sm text-muted">Platform <span class="text-red-400">*</span></label>
            <select name="platform" class="input mt-2" required>
              <option value="MT4">MT4</option>
              <option value="MT5" selected>MT5</option>
              <option value="BOTH">MT4 & MT5 (2 lisensi)</option>
            </select>
          </div>
          <div class="md:col-span-2">
            <label class="text-sm text-muted">Nama Pemilik Akun</label>
            <input name="account_name" class="input mt-2" placeholder="Sesuai pendaftaran di broker (opsional)" />
          </div>
        </div>

        <!-- Under IB toggle -->
        <label class="flex items-start gap-3 cursor-pointer card-soft p-4 hover:bg-white/[0.06] transition">
          <input type="checkbox" name="under_ib" value="1" class="w-5 h-5 mt-0.5 accent-gold-400 cursor-pointer" />
          <div class="min-w-0">
            <div class="font-medium text-sm">Saya member di bawah IB Trader Rebahan</div>
            <div class="text-xs text-muted mt-1 leading-relaxed">Centang kalau Anda terdaftar sebagai client di bawah IB Trader Rebahan. Akan dapat benefit tambahan.</div>
          </div>
        </label>
      </div>

      <!-- ==== Payment Method Selector ==== -->
      <div class="card p-6">
        <h3 class="font-display font-semibold flex items-center gap-2 mb-1">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 text-gold-300"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
          Metode Pembayaran
        </h3>
        <p class="text-xs text-muted mb-4">Pilih metode, lihat detail rekening/QRIS di kanan, lalu transfer & upload bukti di bawah.</p>

        <% if (paymentMethods && paymentMethods.length) { %>
          <select name="payment_method" class="input" required>
            <option value="">— Pilih metode bayar —</option>
            <% paymentMethods.forEach(function(p){
                 const icon = {bank:'🏦',ewallet:'📱',qris:'🔲',crypto:'₿',other:'⚙️'}[p.type] || '💳'; %>
              <option value="<%= p.type %>:<%= p.name %>"><%= icon %> <%= p.name %><% if (p.account_number) { %> — <%= p.account_number %><% } %></option>
            <% }); %>
          </select>
        <% } else { %>
          <div class="card-soft p-3 text-sm text-red-300">⚠ Admin belum mengatur metode pembayaran. Hubungi admin.</div>
        <% } %>
      </div>

      <!-- ==== Catatan ==== -->
      <div class="card p-6">
        <label class="text-sm text-muted">Catatan untuk admin (opsional)</label>
        <textarea name="notes" rows="3" class="input mt-2" placeholder="Misal: tolong setting risk 1%, atau detail khusus akun saya"></textarea>
      </div>

      <!-- ==== Bukti bayar ==== -->
      <div class="card p-6">
        <div class="font-medium mb-1">Bukti Pembayaran <span class="text-red-400">*</span></div>
        <div class="text-sm text-muted mb-3">Upload bukti transfer / screenshot pembayaran. JPG/PNG/PDF, maks 10MB.</div>
        <input type="file" name="payment_proof" accept=".jpg,.jpeg,.png,.webp,.pdf" class="input cursor-pointer" required data-preview="#proof-preview" />
        <div id="proof-preview" class="mt-3"></div>
      </div>

      <button type="submit" class="btn btn-gold h-12 w-full rounded-full">
        Kirim & Tunggu Verifikasi Admin
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
    </div>

    <!-- RIGHT: payment info (dynamic from payment_methods table) -->
    <aside class="space-y-4 lg:sticky lg:top-6 lg:h-fit">

      <% if (paymentMethods && paymentMethods.length) { %>
        <% paymentMethods.forEach(function(p){
             const icon = {bank:'🏦',ewallet:'📱',qris:'🔲',crypto:'₿',other:'⚙️'}[p.type] || '💳';
             const typeLabel = {bank:'Transfer Bank',ewallet:'E-Wallet',qris:'QRIS',crypto:'Crypto',other:'Lainnya'}[p.type] || p.type;
        %>
          <div class="card p-5">
            <div class="flex items-center gap-3 mb-3">
              <div class="grid h-10 w-10 place-items-center rounded-xl bg-gold-300/10 text-gold-300 text-xl"><%= icon %></div>
              <div class="min-w-0">
                <div class="text-xs text-muted"><%= typeLabel %></div>
                <div class="font-medium truncate"><%= p.name %></div>
              </div>
            </div>

            <% if (p.image_path) { %>
              <img src="<%= p.image_path %>" class="rounded-xl w-full max-h-56 object-contain border border-white/10 mb-3" alt="<%= p.name %>" />
            <% } %>

            <div class="text-sm space-y-1.5">
              <% if (p.account_number) { %>
                <div class="flex justify-between gap-3">
                  <span class="text-muted shrink-0">Nomor:</span>
                  <span class="mono text-gold-200 break-all text-right"><%= p.account_number %></span>
                </div>
              <% } %>
              <% if (p.account_holder) { %>
                <div class="flex justify-between gap-3">
                  <span class="text-muted shrink-0">Atas Nama:</span>
                  <span class="text-right"><%= p.account_holder %></span>
                </div>
              <% } %>
            </div>

            <% if (p.instructions) { %>
              <div class="mt-3 pt-3 border-t border-white/5 text-xs text-muted-2 italic">
                <%= p.instructions %>
              </div>
            <% } %>
          </div>
        <% }); %>
      <% } %>

      <% if (settings.whatsapp_admin || settings.telegram_admin) { %>
        <div class="card p-5">
          <div class="font-medium mb-3">Butuh bantuan?</div>
          <div class="grid grid-cols-2 gap-2">
            <% if (settings.whatsapp_admin) { %>
              <a href="https://wa.me/<%= settings.whatsapp_admin %>?text=Halo%20admin,%20saya%20mau%20konfirmasi%20pembayaran%20EA%20<%= ea.code %>"
                 target="_blank" rel="noopener"
                 class="btn btn-outline rounded-full py-2.5 text-sm gap-2">
                <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 text-emerald-300"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413"/></svg>
                <span>WhatsApp</span>
              </a>
            <% } %>
            <% if (settings.telegram_admin) { %>
              <% let tgUser = String(settings.telegram_admin).replace(/^@/, ''); %>
              <a href="https://t.me/<%= tgUser %>?text=Halo%20admin,%20saya%20mau%20konfirmasi%20pembayaran%20EA%20<%= ea.code %>"
                 target="_blank" rel="noopener"
                 class="btn btn-outline rounded-full py-2.5 text-sm gap-2">
                <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 text-sky-300"><path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0Zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295l.213-3.053 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.643.135-.953l11.566-4.458c.538-.196 1.006.128.832.938Z"/></svg>
                <span>Telegram</span>
              </a>
            <% } %>
          </div>
          <div class="text-xs text-muted mt-3">Konfirmasi pembayaran atau tanya seputar EA ini.</div>
        </div>
      <% } %>
    </aside>
  </form>
</section>
