<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voucher Hotspot | <%= settings.company_header || 'Portal ISP' %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="icon" href="/img/logo.png">
  <style>
    body{
      background: radial-gradient(1200px 600px at 10% 0%, rgba(99, 102, 241, 0.22) 0%, rgba(15, 23, 42, 0) 60%),
        radial-gradient(900px 450px at 100% 0%, rgba(59, 130, 246, 0.18) 0%, rgba(15, 23, 42, 0) 55%),
        #0f172a;
      color:#e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    .wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}
    .cardx{background: rgba(30, 41, 59, 0.92);backdrop-filter: blur(10px);border: 1px solid #334155;border-radius: 20px;box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);overflow:hidden;max-width: 720px;width:100%}
    .head{background: linear-gradient(135deg, rgba(99, 102, 241, 0.28) 0%, rgba(59, 130, 246, 0.2) 100%);padding:22px 20px;border-bottom:1px solid rgba(148,163,184,.18)}
    .body{padding:22px 20px}
    .form-control,.form-select{background: rgba(15, 23, 42, 0.6);border: 1px solid #334155;color:#e2e8f0;border-radius: 12px}
    .form-control:focus,.form-select:focus{background: rgba(15, 23, 42, 0.75);border-color: rgba(99, 102, 241, 0.85);box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);color:#e2e8f0}
    .muted{color: rgba(148, 163, 184, 0.9)}
    .btnx{border-radius:12px;font-weight:700}
    .btn-primary{background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);border:none}
    a{color:#a5b4fc}
    .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid rgba(148,163,184,.18)}
    .pill-u{background: rgba(248, 81, 73, .12);color:#fca5a5;border-color: rgba(248, 81, 73, .28)}
    .pill-p{background: rgba(63, 185, 80, .12);color:#86efac;border-color: rgba(63, 185, 80, .28)}
    .voucher-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
    @media (max-width: 576px){.voucher-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}}
    .voucher-radio{position:absolute;opacity:0;pointer-events:none}
    .voucher-card{border:1px solid rgba(148,163,184,.18);background: rgba(15, 23, 42, 0.28);border-radius:14px;padding:12px 12px;cursor:pointer;transition: all .18s ease}
    .voucher-card:hover{transform: translateY(-1px);border-color: rgba(99, 102, 241, 0.6);box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25)}
    .voucher-radio:checked + .voucher-card{border-color: rgba(99, 102, 241, 0.95);box-shadow: 0 18px 34px rgba(99, 102, 241, 0.14)}
    .voucher-title{font-weight:800;font-size:14px;margin:0 0 4px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
    .voucher-meta{margin:0;color: rgba(148, 163, 184, 0.95);font-size:12px;line-height:1.35}
    .voucher-price{font-weight:900}
    .payment-methods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:12px}
    @media (max-width: 768px){.payment-methods-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}
    @media (max-width: 576px){.payment-methods-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
    
    .pm-radio{position:absolute;opacity:0;pointer-events:none}
    .pay-method-item{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 12px;
      background: rgba(15, 23, 42, 0.6);
      border: 2px solid rgba(148, 163, 184, 0.18);
      border-radius: 14px;
      cursor:pointer;
      transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
      flex-direction:column;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .pay-method-item::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
      opacity:0;
      transition: opacity .25s ease;
    }
    .pay-method-item:hover{
      background: rgba(15, 23, 42, 0.8);
      border-color: rgba(99, 102, 241, 0.6);
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.1);
    }
    .pay-method-item:hover::before{opacity:1}
    .pm-radio:checked + .pay-method-item{
      background: rgba(99, 102, 241, 0.15);
      border-color: rgba(99, 102, 241, 0.9);
      box-shadow: 0 8px 25px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.3);
      transform: translateY(-1px);
    }
    .pm-radio:checked + .pay-method-item::after{
      content:'✓';
      position:absolute;
      top:8px;
      right:8px;
      width:20px;
      height:20px;
      background: linear-gradient(135deg, #6366f1, #3b82f6);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:900;
      color:#fff;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
    
    .p-icon{
      width:48px;
      height:48px;
      background: rgba(30, 41, 59, 0.95);
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
      color:#6366f1;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      overflow:hidden;
      flex:0 0 auto;
      margin:0 auto 8px;
      position:relative;
      z-index:1;
    }
    .p-logo{
      width:100%;
      height:100%;
      object-fit:contain;
      padding:8px;
      background: rgba(255, 255, 255, 0.98);
    }
    .p-badge{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      font-weight:800;
    }
    .pb-dana{background: linear-gradient(135deg, #3b82f6, #0ea5e9);color:#fff}
    .pb-ovo{background: linear-gradient(135deg, #a855f7, #6366f1);color:#fff}
    .pb-shopeepay{background: linear-gradient(135deg, #f97316, #f43f5e);color:#fff}
    .pb-linkaja{background: linear-gradient(135deg, #ef4444, #f43f5e);color:#fff}
    .pb-gopay{background: linear-gradient(135deg, #22c55e, #10b981);color:#fff}
    .pb-bank{background: linear-gradient(135deg, #1e293b, #334155);color:#e2e8f0}
    .pb-qris{background: linear-gradient(135deg, #6366f1, #8b5cf6);color:#fff}
    
    .p-info{
      display:flex;
      flex-direction:column;
      min-width:0;
      gap:4px;
      width:100%;
      position:relative;
      z-index:1;
    }
    .p-name{
      font-size:13px;
      font-weight:700;
      color:#f8fafc;
      line-height:1.3;
      word-break:break-word;
    }
    .p-sub{
      font-size:10px;
      color: rgba(148, 163, 184, 0.95);
      display:flex;
      flex-wrap:wrap;
      gap:4px;
      justify-content:center;
      margin-top:2px;
    }
    .p-chip{
      display:inline-flex;
      align-items:center;
      padding:3px 7px;
      border-radius:999px;
      border:1px solid rgba(99, 102, 241, 0.3);
      background: rgba(99, 102, 241, 0.12);
      color: rgba(226, 232, 240, 0.95);
      font-size:9px;
      font-weight:700;
      line-height:1.2;
      white-space:nowrap;
    }
    
    @media (min-width: 769px){
      .pay-method-item{
        flex-direction:row;
        text-align:left;
        gap:14px;
        padding:14px 16px;
      }
      .p-icon{margin:0 0 0 0}
      .p-info{align-items:flex-start}
      .p-sub{justify-content:flex-start}
    }
    @media (max-width: 576px){
      .pay-method-item{padding:12px 10px;gap:10px}
      .p-icon{width:42px;height:42px;font-size:20px;margin-bottom:6px}
      .p-name{font-size:12px}
      .p-sub{font-size:9px}
      .p-chip{padding:2px 6px;font-size:8px}
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="cardx">
      <div class="head">
        <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
          <div>
            <div class="fw-bold" style="font-size:18px">Voucher Hotspot</div>
            <div class="muted small"><%= settings.company_header || 'Portal ISP' %></div>
          </div>
          <a class="btn btn-outline-light btn-sm btnx" href="/customer/login">
            <i class="bi bi-box-arrow-in-right me-1"></i> Login
          </a>
        </div>
      </div>
      <div class="body">
        <% if (error) { %>
          <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle me-2"></i><%= error %>
          </div>
        <% } %>
        <% if (info) { %>
          <div class="alert alert-success">
            <i class="bi bi-check-circle me-2"></i><%= info %>
          </div>
        <% } %>

        <% if (order) { %>
          <div class="mb-3">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
              <div>
                <div class="fw-bold">Status Pesanan</div>
                <div class="muted small">Order #<%= order.id %> • WA: <%= order.buyer_phone %></div>
              </div>
              <div>
                <% const st = String(order.status || 'pending'); %>
                <% if (st === 'fulfilled') { %>
                  <span class="pill pill-p"><i class="bi bi-check-circle"></i> Selesai</span>
                <% } else if (st === 'paid') { %>
                  <span class="pill pill-u"><i class="bi bi-hourglass-split"></i> Diproses</span>
                <% } else { %>
                  <span class="pill pill-u"><i class="bi bi-clock"></i> Menunggu</span>
                <% } %>
              </div>
            </div>
            <div class="mt-2">
              <div class="muted small">Paket: <span class="text-white"><%= order.profile_name %></span> • Durasi: <span class="text-white"><%= order.validity || '-' %></span> • Harga: <span class="text-white">Rp <%= Number(order.price || 0).toLocaleString('id-ID') %></span></div>
              <% if (String(order.status) === 'fulfilled' && order.voucher_code) { %>
                <div class="alert alert-success mt-3 mb-0">
                  <div class="fw-bold mb-1"><i class="bi bi-ticket-perforated me-2"></i>Voucher Siap</div>
                  <div>User: <b><%= order.voucher_code %></b></div>
                  <div>Pass: <b><%= order.voucher_password %></b></div>
                  <% if (Number(order.wa_sent || 0) === 1) { %>
                    <div class="muted small mt-1">Voucher berhasil dikirim ke WhatsApp pembeli.</div>
                  <% } else if (order.wa_error) { %>
                    <div class="text-warning small mt-1">WhatsApp gagal terkirim: <%= order.wa_error %></div>
                    <div class="muted small">Cadangan: simpan kode voucher yang tampil di halaman ini.</div>
                  <% } else { %>
                    <div class="muted small mt-1">Jika WhatsApp gagal terkirim, kode voucher tetap tampil di halaman ini.</div>
                  <% } %>
                </div>
              <% } else if (String(order.status) === 'paid') { %>
                <div class="alert alert-info mt-3 mb-0">
                  <div class="fw-bold mb-1"><i class="bi bi-hourglass-split me-2"></i>Pembayaran Berhasil</div>
                  <div class="muted small">Voucher sedang dibuat di MikroTik. Halaman ini akan diperbarui otomatis.</div>
                </div>
              <% } else if (String(order.status) === 'pending' && (String(order.payment_gateway || '') === 'qris_static' || order.qris_amount_unique)) { %>
                <% if (orderToken) { %>
                  <a class="btn btn-primary btnx mt-3 w-100" href="/customer/voucher/qris/<%= order.id %>?t=<%= encodeURIComponent(orderToken) %>">
                    <i class="bi bi-qr-code-scan me-1"></i> Buka QRIS Statis
                  </a>
                <% } else { %>
                  <div class="alert alert-warning mt-3 mb-0">Link QRIS tidak tersedia.</div>
                <% } %>
              <% } else if (String(order.status) === 'pending' && order.payment_link) { %>
                <a class="btn btn-primary btnx mt-3 w-100" href="<%= order.payment_link %>">
                  <i class="bi bi-credit-card me-1"></i> Lanjutkan Pembayaran
                </a>
              <% } %>
            </div>
          </div>
          <hr style="border-color: rgba(148,163,184,.18)">
        <% } %>

        <form method="POST" action="/customer/public/voucher/create-payment" class="d-grid gap-2">
          <div class="row g-2">
            <div class="col-12 col-lg-7">
              <label class="muted small mb-1">Paket Voucher</label>
              <% if (!profiles || profiles.length === 0) { %>
                <div class="muted small mt-1">Belum ada profile voucher (metadata Mikhmon) di MikroTik.</div>
              <% } else { %>
                <div class="voucher-grid mt-1">
                  <% (profiles || []).forEach((p, idx) => { %>
                    <input
                      class="voucher-radio"
                      type="radio"
                      name="profile_name"
                      id="vprofile_<%= idx %>"
                      value="<%= p.name %>"
                      <%= idx === 0 ? 'required' : '' %>
                    >
                    <label class="voucher-card" for="vprofile_<%= idx %>">
                      <div class="voucher-title">
                        <span><%= p.name %></span>
                        <span class="voucher-price">Rp <%= Number(p.price||0).toLocaleString('id-ID') %></span>
                      </div>
                      <p class="voucher-meta">
                        <i class="bi bi-hourglass-split me-1"></i><%= p.validity %>
                      </p>
                    </label>
                  <% }) %>
                </div>
              <% } %>
            </div>

            <div class="col-12 col-lg-5">
              <label class="muted small mb-1">Metode Pembayaran</label>
              <% const hasStaticQris = (String(settings.qris_static_qr_url || '').trim() || String(settings.qris_static_payload || '').trim()) && (settings.qris_static_enabled !== false && settings.qris_static_enabled !== 'false' && settings.qris_static_enabled !== 0 && settings.qris_static_enabled !== '0'); %>
              <% if (!hasStaticQris && (!paymentChannels || paymentChannels.length === 0)) { %>
                <input type="hidden" name="method" value="QRIS">
                <div class="payment-methods-grid mt-1">
                  <div class="pay-method-item" style="cursor: default">
                    <div class="p-icon"><i class="bi bi-qr-code-scan"></i></div>
                    <div class="p-info">
                      <span class="p-name">QRIS / E-Wallet</span>
                      <span class="p-sub">
                        <span class="p-chip">DANA</span>
                        <span class="p-chip">OVO</span>
                        <span class="p-chip">ShopeePay</span>
                        <span class="p-chip">LinkAja</span>
                      </span>
                    </div>
                  </div>
                </div>
              <% } else { %>
                <div class="payment-methods-grid mt-1">
                  <% if (hasStaticQris) { %>
                    <input
                      class="pm-radio"
                      type="radio"
                      name="method"
                      id="pm_static"
                      value="QRIS_STATIC"
                      checked
                      style="position:absolute;opacity:0;pointer-events:none"
                    >
                    <label class="pay-method-item" for="pm_static">
                      <div class="p-icon"><i class="bi bi-qr-code-scan"></i></div>
                      <div class="p-info">
                        <span class="p-name">QRIS Statis (Scan)</span>
                        <span class="p-sub">
                          <span class="p-chip">Nominal unik</span>
                          <span class="p-chip">E-Wallet</span>
                        </span>
                      </div>
                    </label>
                  <% } %>
                  <% paymentChannels.forEach((ch, idx) => {
                    const code = String(ch.code || '').toUpperCase();
                    const name = ch.name || code;
                    const group = String(ch.group || '').toLowerCase();
                    let icon = 'bi-wallet2';
                    let badgeClass = 'pb-bank';
                    
                    if (code === 'QRIS' || code.includes('QRIS')) {
                      icon = 'bi-qr-code-scan';
                      badgeClass = 'pb-bank';
                    } else if (code.includes('DANA')) {
                      icon = 'bi-wallet2';
                      badgeClass = 'pb-dana';
                    } else if (code.includes('OVO')) {
                      icon = 'bi-wallet2';
                      badgeClass = 'pb-ovo';
                    } else if (code.includes('SHOPEE')) {
                      icon = 'bi-wallet2';
                      badgeClass = 'pb-shopeepay';
                    } else if (code.includes('LINKAJA')) {
                      icon = 'bi-wallet2';
                      badgeClass = 'pb-linkaja';
                    } else if (code.includes('GOPAY')) {
                      icon = 'bi-wallet2';
                      badgeClass = 'pb-gopay';
                    } else if (code.includes('VA') || group.includes('virtual')) {
                      icon = 'bi-bank';
                      badgeClass = 'pb-bank';
                    } else if (code.includes('SNAP') || code.includes('XENDIT') || code.includes('DUITKU')) {
                      icon = 'bi-credit-card';
                      badgeClass = 'pb-bank';
                    }
                  %>
                    <input
                      class="pm-radio"
                      type="radio"
                      name="method"
                      id="pm_<%= idx %>"
                      value="<%= code %>"
                      <%= (!hasStaticQris && idx === 0) ? 'checked' : '' %>
                      style="position:absolute;opacity:0;pointer-events:none"
                    >
                    <label class="pay-method-item" for="pm_<%= idx %>">
                      <div class="p-icon">
                        <% if (ch.icon_url) { %>
                          <img src="<%= ch.icon_url %>" alt="<%= name %>" class="p-logo">
                        <% } else { %>
                          <div class="p-badge <%= badgeClass %>">
                            <i class="<%= icon %>"></i>
                          </div>
                        <% } %>
                      </div>
                      <div class="p-info">
                        <span class="p-name"><%= name %></span>
                        <% if (ch.total_fee && ch.total_fee.flat) { %>
                          <span class="p-sub">
                            <span class="p-chip">Fee: Rp <%= Number(ch.total_fee.flat).toLocaleString('id-ID') %></span>
                          </span>
                        <% } %>
                      </div>
                    </label>
                  <% }) %>
                </div>
              <% } %>
            </div>
          </div>

          <div>
            <label class="muted small mb-1">Nomor WhatsApp Pembeli</label>
            <input class="form-control" name="buyer_phone" placeholder="Contoh: 08xxxxxxxxxx" required>
            <div class="muted small mt-1">Kode voucher akan dikirim ke nomor ini.</div>
          </div>

          <div class="form-check mt-1">
            <input class="form-check-input" type="checkbox" value="1" id="tos_voucher" name="tos" required>
            <label class="form-check-label muted" for="tos_voucher">
              Saya setuju dengan <a href="/customer/tos" target="_blank" rel="noopener">Syarat & Ketentuan (TOS)</a>
            </label>
          </div>

          <button class="btn btn-primary btnx mt-2" type="submit" <%= (!profiles || profiles.length === 0) ? 'disabled' : '' %>>
            <i class="bi bi-credit-card me-1"></i> Bayar & Buat Voucher
          </button>
        </form>

        <div class="muted small mt-4">
          &copy; <%= new Date().getFullYear() %> <%= settings.company_header || '' %>
        </div>
      </div>
    </div>
  </div>
  <% if (order && (String(order.status) === 'paid' || String(order.status) === 'pending') && !order.voucher_code) { %>
  <script>
    setTimeout(() => {
      try { window.location.reload(); } catch (e) {}
    }, 5000);
  </script>
  <% } %>
</body>
</html>
