<div class="flex items-start justify-between flex-wrap gap-3 mb-6 sm:mb-8">
  <div>
    <h1 class="text-2xl sm:text-3xl font-display font-semibold">Request Kode Aktivasi IB</h1>
    <p class="text-muted text-sm mt-1">Minta kode aktivasi untuk akun yang sudah terdaftar di bawah IB Trader Rebahan.</p>
  </div>
</div>

<%
  // Cek apakah ada pending
  const pending = (requests || []).find(r => r.status === 'pending');
%>

<div class="grid lg:grid-cols-[1fr_1fr] gap-5 sm:gap-6">

  <!-- FORM REQUEST -->
  <div>
    <% if (pending) { %>
      <!-- Ada pending, tidak bisa kirim baru -->
      <div class="card p-5 sm:p-6 border-gold-300/30 bg-gold-300/[0.05]">
        <div class="flex items-start gap-3">
          <div class="grid h-10 w-10 place-items-center rounded-xl bg-gold-300/20 text-gold-300 text-xl shrink-0">⏳</div>
          <div class="flex-1 min-w-0">
            <h2 class="font-display font-semibold mb-1">Request Anda sedang diproses</h2>
            <p class="text-sm text-muted">Mohon tunggu admin memproses request sebelum kirim yang baru.</p>
            <div class="mt-4 card-soft p-3 text-sm space-y-1.5">
              <div class="flex justify-between"><span class="text-muted">Akun:</span><span class="mono"><%= pending.account_number %></span></div>
              <div class="flex justify-between"><span class="text-muted">Broker:</span><span><%= pending.broker_name %></span></div>
              <div class="flex justify-between"><span class="text-muted">Kontak:</span><span class="mono"><%= pending.contact_value %></span></div>
              <div class="flex justify-between"><span class="text-muted">Dikirim:</span><span><%= new Date(pending.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}) %></span></div>
            </div>
          </div>
        </div>
      </div>
    <% } else { %>
      <div class="card p-5 sm:p-6">
        <h2 class="text-base sm:text-lg font-display font-semibold mb-1">Form Request</h2>
        <p class="text-xs text-muted mb-5">Isi data akun broker Anda. Admin akan verifikasi & kirim kode aktivasi.</p>

        <form action="/member/ib-request" method="post" class="space-y-4">
          <div>
            <label class="text-sm text-muted">Jenis Kontak <span class="text-red-400">*</span></label>
            <div class="grid grid-cols-2 gap-2 mt-2">
              <label class="card-soft p-3 cursor-pointer hover:bg-white/[0.06] transition flex items-center gap-2.5">
                <input type="radio" name="contact_type" value="whatsapp" checked class="accent-gold-400">
                <span class="text-sm font-medium">📱 WhatsApp</span>
              </label>
              <label class="card-soft p-3 cursor-pointer hover:bg-white/[0.06] transition flex items-center gap-2.5">
                <input type="radio" name="contact_type" value="telegram" class="accent-gold-400">
                <span class="text-sm font-medium">✈ Telegram</span>
              </label>
            </div>
          </div>

          <div>
            <label class="text-sm text-muted">Nomor WhatsApp / Username Telegram <span class="text-red-400">*</span></label>
            <input type="text" name="contact_value" class="input mt-2" required
                   placeholder="08xxxxxxx atau @username"
                   value="<%= userDetail && userDetail.phone || userDetail && userDetail.telegram || '' %>" />
            <div class="text-xs text-muted-2 mt-1.5">Admin akan menghubungi Anda di nomor ini bila ada konfirmasi tambahan.</div>
          </div>

          <div>
            <label class="text-sm text-muted">Nama Broker <span class="text-red-400">*</span></label>
            <input type="text" name="broker_name" class="input mt-2" required
                   placeholder="Exness / FBS / XM / Octa / dll" />
          </div>

          <div>
            <label class="text-sm text-muted">Nomor Akun <span class="text-red-400">*</span></label>
            <input type="text" name="account_number" class="input mt-2 mono" required
                   placeholder="1234567" inputmode="numeric" pattern="[0-9]+" />
            <div class="text-xs text-muted-2 mt-1.5">Nomor akun MT4/MT5 Anda. Harus terdaftar di bawah IB Trader Rebahan.</div>
          </div>

          <div class="card-soft p-3 text-xs text-muted leading-relaxed flex gap-2.5">
            <span class="text-gold-300 shrink-0">ℹ</span>
            <span>Pastikan Anda sudah daftar di broker dengan link IB Trader Rebahan. Admin akan verifikasi sebelum kirim kode. Proses 1-24 jam.</span>
          </div>

          <button class="btn btn-gold w-full h-12 rounded-full">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><circle cx="7" cy="15" r="4"/><path d="M21 4l-2 2m-3 3l-3.5-3.5"/><path d="m9.5 12.5 6.5-6.5"/></svg>
            Kirim Request
          </button>
        </form>
      </div>
    <% } %>
  </div>

  <!-- RIWAYAT REQUEST -->
  <div>
    <div class="card p-5 sm:p-6">
      <h2 class="text-base sm:text-lg font-display font-semibold mb-4">Riwayat Request</h2>

      <% if (requests && requests.length) { %>
        <div class="space-y-3">
          <% requests.forEach(function(r){ %>
            <div class="card-soft p-4">
              <div class="flex items-start justify-between gap-3 mb-2">
                <div class="min-w-0 flex-1">
                  <div class="font-medium text-sm"><%= r.broker_name %> · <span class="mono text-xs">#<%= r.account_number %></span></div>
                  <div class="text-xs text-muted mt-1"><%= new Date(r.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}) %></div>
                </div>
                <span class="pill <%= r.status==='approved' ? 'pill-green' : (r.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0">
                  <%= r.status.toUpperCase() %>
                </span>
              </div>

              <% if (r.status === 'approved' && r.activation_code) { %>
                <div class="mt-3 p-3 rounded-xl bg-gold-300/[0.08] border border-gold-300/25">
                  <div class="text-[10px] text-muted-2 uppercase tracking-wide">Kode Aktivasi Anda</div>
                  <button type="button" class="mt-1 mono text-2xl font-bold text-gold-200 hover:text-gold-100 transition flex items-center gap-2" data-copy="<%= r.activation_code %>" title="Tap untuk copy">
                    <%= r.activation_code %>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 opacity-50"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  </button>
                </div>
                <% if (r.admin_note) { %>
                  <div class="mt-2 text-xs text-muted border-l-2 border-gold-300/40 pl-2">📝 <%= r.admin_note %></div>
                <% } %>
              <% } else if (r.status === 'rejected') { %>
                <div class="mt-2 text-xs text-red-300/80 card-soft p-2.5">
                  ⚠ <b>Alasan reject:</b> <%= r.admin_note || 'Tidak terdaftar sebagai IB' %>
                </div>
              <% } else { %>
                <div class="text-xs text-muted-2 mt-1">⏳ Menunggu admin verifikasi...</div>
              <% } %>
            </div>
          <% }); %>
        </div>
      <% } else { %>
        <p class="text-sm text-muted text-center py-8">Belum ada riwayat request.</p>
      <% } %>
    </div>
  </div>
</div>
