<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Isi Saldo (Top-Up) - <%= settings.company_header || 'ISP App' %></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Outfit',sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}
    
    .topbar{background:#1e293b;border-bottom:1px solid #334155;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
    .topbar a{color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}
    .topbar a:hover{color:#38bdf8}
    .topbar h1{font-size:18px;font-weight:700;color:#f1f5f9;display:flex;align-items:center;gap:8px}
    
    .container{max-width:800px;margin:0 auto;padding:24px 16px}
    
    /* Alert Styles */
    .alert{padding:14px 18px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
    .alert-success{background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:#34d399}
    .alert-danger{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#f87171}
    
    /* Balance Summary Card */
    .balance-card{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border:1px solid #334155;border-radius:20px;padding:24px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center}
    .balance-info h2{font-size:32px;font-weight:800;color:#f8fafc;margin-top:6px}
    .balance-info p{font-size:13px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:1px}

    /* Layout */
    .topup-grid{display:grid;grid-template-columns:1fr;gap:24px}
    
    .card-panel{background:#1e293b;border:1px solid #334155;border-radius:20px;padding:24px;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
    .card-panel h3{font-size:16px;font-weight:700;color:#f1f5f9;margin-bottom:20px;display:flex;align-items:center;gap:8px}
    
    /* Nominal Presets */
    .preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
    .preset-btn{background:#0f172a;border:1px solid #334155;color:#cbd5e1;border-radius:12px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif}
    .preset-btn:hover,.preset-btn.active{border-color:#0ea5e9;color:#fff;background:rgba(14,165,233,0.1)}
    
    .form-group{margin-bottom:20px}
    .form-group label{display:block;font-size:13px;font-weight:600;color:#94a3b8;margin-bottom:8px}
    .form-group input{width:100%;background:#0f172a;border:1px solid #334155;border-radius:12px;padding:14px 16px;font-size:18px;font-weight:700;color:#fff;outline:none;transition:all .2s;font-family:'Outfit',sans-serif}
    .form-group input:focus{border-color:#0ea5e9;box-shadow:0 0 0 2px rgba(14,165,233,0.2)}
    
    .btn-submit{width:100%;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;border:none;border-radius:14px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif;box-shadow:0 10px 15px -3px rgba(14,165,233,0.2)}
    .btn-submit:hover{opacity:.95;transform:translateY(-1px)}
    
    /* History Table */
    .history-card{background:#1e293b;border:1px solid #334155;border-radius:20px;padding:24px;margin-top:24px}
    .history-card h3{font-size:16px;font-weight:700;color:#f1f5f9;margin-bottom:16px}
    .table-responsive{overflow-x:auto}
    table{width:100%;border-collapse:collapse;text-align:left}
    th{padding:12px 16px;font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;border-bottom:1px solid #334155}
    td{padding:14px 16px;font-size:13px;border-bottom:1px solid #334155;color:#e2e8f0}
    tr:last-child td{border-bottom:none}
    
    .badge-status{padding:4px 8px;border-radius:6px;font-size:11px;font-weight:700;display:inline-block}
    .badge-success{background:rgba(16,185,129,0.15);color:#34d399}
    .badge-pending{background:rgba(245,158,11,0.15);color:#fbbf24}
    
    .btn-pay{background:#0ea5e9;color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;text-decoration:none;display:inline-block;transition:all .15s}
    .btn-pay:hover{background:#0284c7}
    
    .no-data{text-align:center;padding:40px 20px;color:#64748b}

    @media(max-width:576px){
      .preset-grid{grid-template-columns:repeat(2,1fr)}
    }
    
    /* Payment Method Styles */
    .payment-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
      gap:12px;
      margin-top:10px;
    }
    @media(max-width:576px){
      .payment-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    }
    
    .payment-radio{position:absolute;opacity:0;pointer-events:none}
    .payment-card{
      background:#0f172a;
      border:2px solid #334155;
      border-radius:14px;
      padding:14px 12px;
      cursor:pointer;
      transition:all .25s cubic-bezier(0.4,0,0.2,1);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .payment-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:linear-gradient(135deg,rgba(14,165,233,0.05) 0%,rgba(6,182,212,0.05) 100%);
      opacity:0;
      transition:opacity .25s ease;
    }
    .payment-card:hover{
      border-color:#0ea5e9;
      transform:translateY(-2px);
      box-shadow:0 12px 30px rgba(0,0,0,0.3),0 0 0 1px rgba(14,165,233,0.2);
    }
    .payment-card:hover::before{opacity:1}
    .payment-radio:checked + .payment-card{
      border-color:#0ea5e9;
      background:rgba(14,165,233,0.12);
      box-shadow:0 8px 20px rgba(14,165,233,0.3);
    }
    .payment-radio:checked + .payment-card::after{
      content:'✓';
      position:absolute;
      top:8px;
      right:8px;
      width:20px;
      height:20px;
      background:linear-gradient(135deg,#0ea5e9,#06b6d4);
      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(14,165,233,0.4);
    }
    
    .payment-icon{
      width:48px;
      height:48px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
      box-shadow:0 6px 16px rgba(0,0,0,0.3);
      position:relative;
      z-index:1;
    }
    .badge-qris{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
    .badge-dana{background:linear-gradient(135deg,#3b82f6,#0ea5e9);color:#fff}
    .badge-ovo{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff}
    .badge-shopee{background:linear-gradient(135deg,#f97316,#f43f5e);color:#fff}
    .badge-linkaja{background:linear-gradient(135deg,#ef4444,#f43f5e);color:#fff}
    .badge-gopay{background:linear-gradient(135deg,#22c55e,#10b981);color:#fff}
    .badge-bank{background:linear-gradient(135deg,#1e293b,#334155);color:#e2e8f0}
    
    .payment-name{
      font-size:13px;
      font-weight:700;
      color:#f1f5f9;
      line-height:1.3;
      position:relative;
      z-index:1;
    }
    .payment-fee{
      font-size:10px;
      color:#64748b;
      font-weight:600;
      position:relative;
      z-index:1;
    }
    
    @media(max-width:576px){
      .payment-card{padding:12px 10px;gap:6px}
      .payment-icon{width:42px;height:42px;font-size:20px}
      .payment-name{font-size:12px}
      .payment-fee{font-size:9px}
    }
  </style>
</head>
<body>
  <div class="topbar">
    <a href="/customer/ppob"><i class="bi bi-arrow-left"></i> Kembali</a>
    <h1><i class="bi bi-wallet2" style="color:#0ea5e9"></i> Top-Up Saldo</h1>
  </div>

  <div class="container">
    <% if(error){ %>
    <div class="alert alert-danger"><i class="bi bi-exclamation-circle"></i> <%= error %></div>
    <% } %>
    <% if(info){ %>
    <div class="alert alert-success"><i class="bi bi-check-circle"></i> <%= info %></div>
    <% } %>

    <!-- Balance Card -->
    <div class="balance-card">
      <div class="balance-info">
        <p>Saldo Anda Saat Ini</p>
        <h2>Rp <%= Number(customer.balance || 0).toLocaleString('id-ID') %></h2>
      </div>
    </div>

    <div class="topup-grid">
      <!-- Form Panel -->
      <div class="card-panel">
        <h3><i class="bi bi-cash-coin" style="color:#0ea5e9"></i> Masukkan Nominal Top-Up</h3>
        
        <!-- Nominal Presets -->
        <div class="preset-grid">
          <button type="button" class="preset-btn" onclick="setAmount(10000)">Rp 10.000</button>
          <button type="button" class="preset-btn" onclick="setAmount(20000)">Rp 20.000</button>
          <button type="button" class="preset-btn" onclick="setAmount(50000)">Rp 50.000</button>
          <button type="button" class="preset-btn" onclick="setAmount(100000)">Rp 100.000</button>
          <button type="button" class="preset-btn" onclick="setAmount(200000)">Rp 200.000</button>
          <button type="button" class="preset-btn" onclick="setAmount(500000)">Rp 500.000</button>
        </div>

        <form method="POST" action="/customer/topup/create" id="topupForm">
          <div class="form-group">
            <label for="amountInput">Nominal Kustom (Min. Rp 10.000)</label>
            <input type="number" name="amount" id="amountInput" min="10000" step="1000" placeholder="0" required>
          </div>

          <% if (paymentChannels && paymentChannels.length > 0) { %>
            <div class="form-group">
              <label>Pilih Metode Pembayaran</label>
              <div class="payment-grid">
                <% 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 = 'badge-bank';
                  
                  if (code === 'QRIS' || code.includes('QRIS')) {
                    icon = 'bi-qr-code-scan';
                    badgeClass = 'badge-qris';
                  } else if (code.includes('DANA')) {
                    icon = 'bi-wallet2';
                    badgeClass = 'badge-dana';
                  } else if (code.includes('OVO')) {
                    icon = 'bi-wallet2';
                    badgeClass = 'badge-ovo';
                  } else if (code.includes('SHOPEE')) {
                    icon = 'bi-wallet2';
                    badgeClass = 'badge-shopee';
                  } else if (code.includes('LINKAJA')) {
                    icon = 'bi-wallet2';
                    badgeClass = 'badge-linkaja';
                  } else if (code.includes('GOPAY')) {
                    icon = 'bi-wallet2';
                    badgeClass = 'badge-gopay';
                  } else if (code.includes('VA') || group.includes('virtual')) {
                    icon = 'bi-bank';
                    badgeClass = 'badge-bank';
                  } else if (code.includes('SNAP') || code.includes('XENDIT') || code.includes('DUITKU')) {
                    icon = 'bi-credit-card';
                    badgeClass = 'badge-bank';
                  }
                %>
                  <input type="radio" name="method" id="method_<%= idx %>" value="<%= code %>" <%= idx === 0 ? 'checked' : '' %> class="payment-radio">
                  <label for="method_<%= idx %>" class="payment-card">
                    <div class="payment-icon <%= badgeClass %>">
                      <% if (ch.icon_url) { %>
                        <img src="<%= ch.icon_url %>" alt="<%= name %>" style="width:100%;height:100%;object-fit:contain;padding:6px">
                      <% } else { %>
                        <i class="<%= icon %>"></i>
                      <% } %>
                    </div>
                    <div class="payment-name"><%= name %></div>
                    <% if (ch.total_fee && ch.total_fee.flat) { %>
                      <div class="payment-fee">Fee: Rp <%= Number(ch.total_fee.flat).toLocaleString('id-ID') %></div>
                    <% } %>
                  </label>
                <% }) %>
              </div>
            </div>
          <% } %>

          <button type="submit" class="btn-submit" id="btnSubmit">
            <i class="bi bi-qr-code-scan"></i> Buat Pembayaran
          </button>
          <p style="text-align:center;font-size:12px;color:#64748b;margin-top:12px">Anda akan diarahkan ke gerbang pembayaran aman untuk menyelesaikan pengisian saldo.</p>
        </form>
      </div>

      <!-- History Table -->
      <div class="history-card">
        <h3><i class="bi bi-clock-history" style="color:#0ea5e9"></i> Riwayat Pengisian Saldo</h3>
        <div class="table-responsive">
          <% if (history.length === 0) { %>
            <div class="no-data">
              <i class="bi bi-clipboard-x" style="font-size:32px;display:block;margin-bottom:8px"></i>
              <p>Belum ada riwayat top-up.</p>
            </div>
          <% } else { %>
            <table>
              <thead>
                <tr>
                  <th>Tanggal</th>
                  <th>Nominal</th>
                  <th>Gateway</th>
                  <th>Status</th>
                  <th>Aksi</th>
                </tr>
              </thead>
              <tbody>
                <% history.forEach(req => { %>
                  <tr>
                    <td><%= new Date(req.created_at).toLocaleString('id-ID', {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}) %></td>
                    <td><strong>Rp <%= Number(req.amount).toLocaleString('id-ID') %></strong></td>
                    <td><small style="text-transform:uppercase;color:#94a3b8"><%= req.payment_gateway || '-' %></small></td>
                    <td>
                      <span class="badge-status <%= req.status === 'paid' ? 'badge-success' : 'badge-pending' %>">
                        <%= req.status === 'paid' ? 'BERHASIL' : 'PENDING' %>
                      </span>
                    </td>
                    <td>
                      <% if (req.status === 'pending' && req.payment_link) { %>
                        <a href="<%= req.payment_link %>" target="_blank" class="btn-pay">Bayar Sekarang</a>
                      <% } else { %>
                        -
                      <% } %>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          <% } %>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setAmount(val) {
      document.getElementById('amountInput').value = val;
      
      // Toggle active state
      document.querySelectorAll('.preset-btn').forEach(btn => {
        if (parseInt(btn.textContent.replace(/\D/g, '')) === val) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    document.getElementById('topupForm').addEventListener('submit', function() {
      const btn = document.getElementById('btnSubmit');
      btn.disabled = true;
      btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Menghubungkan ke Gerbang Pembayaran...';
    });
  </script>
</body>
</html>
