<!DOCTYPE html>
<html lang="{{HTML_LANG}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{BOOTSTRAP_CSS}}
  <style>{{DIALOG_CSS}}</style>
  <style>
    body { font-size: 13px; }
    .upgrade-amount { font-size: 1.2rem; font-weight: 700; color: #0f766e; }
    .subtitle { font-size: 12px; margin-bottom: 6px; }
    .vietqr-wrapper { display: flex; justify-content: center; margin: 4px 0; }
    .vietqr-img { max-width: 180px; width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
    .upgrade-instructions { text-align: left; font-size: 12px; color: #495057; margin-top: 8px; }
    .upgrade-instructions ol { margin-bottom: 4px; }
    #stripe-qr-wrapper { display: flex; justify-content: center; margin: 8px 0; min-height: 60px; align-items: center; }
    #stripe-qr-wrapper canvas, #stripe-qr-wrapper img { border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
    .stripe-logo { color: #635bff; font-weight: 700; }
    .nav-tabs .nav-link { font-size: 12px; padding: 4px 10px; }
    .tab-content { padding-top: 6px; }
  </style>
</head>
<body class="p-3">
  <div class="container-fluid">
    <h2 class="h6 mb-0">{{UPGRADE_TITLE}}</h2>
    <p class="text-muted subtitle">{{UPGRADE_SUBTITLE}} — <strong class="upgrade-amount">{{AMOUNT_DISPLAY}} ₫</strong></p>

    <ul class="nav nav-tabs mb-0" id="paymentTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-bank-btn" data-bs-toggle="tab" data-bs-target="#tab-bank" type="button" role="tab">{{UPGRADE_BANK_TAB}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-stripe-btn" data-bs-toggle="tab" data-bs-target="#tab-stripe" type="button" role="tab">{{UPGRADE_STRIPE_TAB}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-gumroad-btn" data-bs-toggle="tab" data-bs-target="#tab-gumroad" type="button" role="tab">{{UPGRADE_GUMROAD_TAB}}</button>
      </li>
    </ul>

    <div class="tab-content" id="paymentTabContent">
      <div class="tab-pane fade show active" id="tab-bank" role="tabpanel">
        <p class="small text-muted mb-1 mt-1">{{UPGRADE_BANK_HINT}}</p>
        <div class="vietqr-wrapper">
          {{VIETQR_IMG}}
        </div>
        <div class="upgrade-instructions border-top pt-1">
          <strong>{{UPGRADE_TRANSFER_NO_QR}}</strong>
          <ol class="mb-0 mt-1 ps-3">
            <li>{{UPGRADE_TRANSFER_STEP_HTML}}</li>
          </ol>
          <p class="mb-0 mt-1"><strong>{{UPGRADE_BANK_LABEL}}</strong> {{BANK_NAME}}</p>
          <p class="mb-0"><strong>{{UPGRADE_ACCOUNT_LABEL}}</strong> {{BANK_ACCOUNT}}</p>
          {{BANK_ACCOUNT_NAME_ROW}}
          {{BANK_BRANCH_ROW}}
          <p class="mt-1 mb-0 small">{{UPGRADE_TRANSFER_MSG}} <code>{{TOKEN}}</code></p>
        </div>
      </div>

      <div class="tab-pane fade" id="tab-stripe" role="tabpanel">
        <p class="small text-muted mb-1 mt-1">{{UPGRADE_STRIPE_HINT}}</p>
        <div id="stripe-qr-wrapper">
          <span class="text-muted small" id="stripe-placeholder">{{UPGRADE_QR_CLICK_HINT}}</span>
        </div>
        <div class="text-center mb-1">
          <button class="btn btn-sm btn-primary" id="btn-gen-stripe" onclick="loadStripeQR()">{{UPGRADE_GEN_QR_BTN}}</button>
          <p class="text-muted small mt-1 mb-0" id="stripe-hint"></p>
        </div>
        <div class="upgrade-instructions border-top pt-1">
          <ol class="mb-0 mt-1 ps-3">
            <li>{{UPGRADE_STRIPE_STEP1}}</li>
            <li>{{UPGRADE_STRIPE_STEP2}}</li>
            <li>{{UPGRADE_STRIPE_STEP3}}</li>
            <li>{{UPGRADE_STRIPE_STEP4}}</li>
          </ol>
        </div>
      </div>

      <div class="tab-pane fade" id="tab-gumroad" role="tabpanel">
        <p class="small text-muted mb-1 mt-1">{{UPGRADE_GUMROAD_HINT}}</p>
        <div id="gumroad-qr-wrapper" style="display:flex;justify-content:center;margin:6px 0;"></div>
        <div class="text-center mb-1">
          <a class="btn btn-sm btn-success" id="btn-open-gumroad" href="#" onclick="openGumroad();return false;">{{UPGRADE_GUMROAD_OPEN_BTN}}</a>
        </div>
        <div class="upgrade-instructions border-top pt-1">
          <ol class="mb-0 mt-1 ps-3">
            <li>{{UPGRADE_GUMROAD_STEP1}}</li>
            <li>{{UPGRADE_GUMROAD_STEP2}}</li>
            <li>{{UPGRADE_GUMROAD_STEP3}}</li>
          </ol>
        </div>
        <div class="border-top pt-2 mt-1">
          <div class="d-flex gap-2 align-items-center">
            <input id="gumroad-promo-input" type="text" class="form-control form-control-sm"
                   placeholder="{{UPGRADE_GUMROAD_PROMO_PLACEHOLDER}}"
                   style="max-width:160px;text-transform:uppercase;"
                   oninput="this.value=this.value.toUpperCase()">
            <button type="button" class="btn btn-sm btn-success" onclick="upgradeUi.redeemPromo()">{{UPGRADE_GUMROAD_PROMO_REDEEM}}</button>
          </div>
          <span id="gumroad-promo-status" class="small mt-1 d-block"></span>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" crossorigin="anonymous"></script>
  {{BOOTSTRAP_JS}}
  <script>
    var TOKEN = {{TOKEN_JSON}};
    var GUMROAD_URL = {{GUMROAD_URL_JSON}};
    var GG_UPGRADE_STRINGS = {
      generating: {{UPGRADE_GENERATING_JSON}},
      qr_valid: {{UPGRADE_QR_VALID_JSON}},
      gumroad_scan: {{UPGRADE_GUMROAD_SCAN_JSON}},
      promo_enter_code: {{UPGRADE_GUMROAD_PROMO_ENTER_CODE_JSON}},
      promo_applying: {{UPGRADE_GUMROAD_PROMO_APPLYING_JSON}}
    };

    window.upgradeUi = {
      redeemPromo: function() {
        var inp = document.getElementById('gumroad-promo-input');
        var st  = document.getElementById('gumroad-promo-status');
        if (!inp) return;
        var code = inp.value.trim();
        if (!code) { if (st) { st.className = 'small text-danger'; st.textContent = GG_UPGRADE_STRINGS.promo_enter_code; } return; }
        if (st) { st.className = 'small text-muted'; st.textContent = GG_UPGRADE_STRINGS.promo_applying; }
        sketchup.on_redeem_promo(code);
      },
      showPromoResult: function(ok, msg) {
        var st = document.getElementById('gumroad-promo-status');
        if (!st) return;
        st.className = 'small ' + (ok ? 'text-success' : 'text-danger');
        st.textContent = msg;
      }
    };

    (function() {
      var url = GUMROAD_URL;
      if (!url) return;
      var wrap = document.getElementById('gumroad-qr-wrapper');
      if (!wrap) return;
      new QRCode(wrap, {
        text: url,
        width: 160,
        height: 160,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M
      });
      var lbl = document.createElement('p');
      lbl.className = 'text-muted small mt-1 mb-0 text-center';
      lbl.textContent = GG_UPGRADE_STRINGS.gumroad_scan;
      wrap.parentNode.insertBefore(lbl, wrap.nextSibling);
      var btn = document.getElementById('btn-open-gumroad');
      if (btn) btn.href = url;
    })();

    function openGumroad() {
      if (GUMROAD_URL) sketchup.on_open_gumroad(GUMROAD_URL);
    }
    var stripeQrReady = false;
    var stripeEl = {
      btn: document.getElementById('btn-gen-stripe'),
      hint: document.getElementById('stripe-hint'),
      placeholder: document.getElementById('stripe-placeholder'),
      wrapper: document.getElementById('stripe-qr-wrapper')
    };

    function loadStripeQR() {
      if (stripeQrReady) return;
      stripeEl.btn.disabled = true;
      stripeEl.hint.textContent = GG_UPGRADE_STRINGS.generating;
      stripeEl.placeholder.textContent = '';
      sketchup.on_open_stripe_tab(TOKEN);
    }

    function showStripeQR(url) {
      stripeQrReady = true;
      stripeEl.btn.style.display = 'none';
      stripeEl.hint.textContent = GG_UPGRADE_STRINGS.qr_valid;
      stripeEl.wrapper.innerHTML = '';
      new QRCode(stripeEl.wrapper, {
        text: url,
        width: 180,
        height: 180,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M
      });
    }

    function showStripeError(msg) {
      stripeEl.btn.disabled = false;
      stripeEl.hint.textContent = '\u26A0 ' + msg;
      stripeEl.placeholder.textContent = '';
    }
  </script>
</body>
</html>
