<%- include('../partials/head') %>

<div class="topbar">
  <div>
    <h2>Billing</h2>
    <small>Aktifkan langganan WhatsApp Gateway</small>
  </div>
  <a class="btn secondary" href="/dashboard">Dashboard</a>
</div>

<div class="content">
  <div class="card billing-hero">
    <div>
      <h2>Beli Langganan WhatsApp Gateway</h2>
      <p>
        Harga promo aktif untuk user Cutiezy Gateway.
      </p>

      <div class="price-box compact">
        <div>
          <small>Mulai dari</small>
          <div class="price-main">
            Rp7.000<span>/bulan</span>
          </div>
          <div class="price-old">
            Normal <s>Rp50.000</s>
          </div>
        </div>

        <div class="discount-pill">
          Promo
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <h2>Pilih Paket</h2>

    <% if (typeof error !== 'undefined' && error) { %>
      <p class="error"><%= error %></p>
    <% } %>

    <form method="post" action="/billing/pay">
      <label>Pilih Durasi
        <select name="months" required>
          <option value="1">1 bulan - Rp7.000</option>
          <option value="6">6 bulan - Rp42.000</option>
          <option value="12">1 tahun - Rp84.000</option>
        </select>
      </label>

      <button class="btn full-mobile">Buat QRIS</button>
    </form>
  </div>

  <% if (typeof payment !== 'undefined' && payment) { %>
    <div class="card payment-card" id="payment-box" data-transaction-id="<%= payment.transaction_id %>">
      <h2>Scan QRIS</h2>

      <div class="payment-status-box">
        <span>Status Pembayaran</span>
        <b id="payment-status"><%= payment.status || 'pending' %></b>
      </div>

      <p>
        Transaction ID:
        <code><%= payment.transaction_id %></code>
      </p>

      <% if (payment.qris_image_url) { %>
        <div class="qris-wrap">
          <img class="qris" src="<%= payment.qris_image_url %>" alt="QRIS Payment">
        </div>
      <% } %>

      <% if (payment.expired_at) { %>
        <p class="note">Expired: <%= payment.expired_at %></p>
      <% } %>

      <button class="btn full-mobile" type="button" id="check-payment-btn">
        Cek Status Pembayaran
      </button>

      <p class="note" id="payment-note">
        Sistem akan cek status pembayaran otomatis setiap 10 detik selama halaman ini dibuka.
      </p>
    </div>

    <script>
      const box = document.getElementById('payment-box')
      const btn = document.getElementById('check-payment-btn')
      const statusEl = document.getElementById('payment-status')
      const noteEl = document.getElementById('payment-note')
      const transactionId = box?.dataset?.transactionId

      async function checkPaymentStatus() {
        if (!transactionId) return

        btn.disabled = true
        noteEl.textContent = 'Mengecek status pembayaran...'

        try {
          const res = await fetch('/billing/check/' + encodeURIComponent(transactionId), {
            headers: { 'Accept': 'application/json' }
          })

          const json = await res.json()

          if (!json.success) {
            noteEl.textContent = json.message || 'Gagal cek status pembayaran.'
            btn.disabled = false
            return
          }

          statusEl.textContent = json.status

          if (json.status === 'paid') {
            noteEl.textContent = 'Pembayaran sukses. Langganan sudah diaktifkan.'
            btn.textContent = 'Pembayaran Sukses'
            btn.disabled = true

            setTimeout(() => {
              window.location.href = '/dashboard'
            }, 2000)

            return
          }

          if (json.status === 'expired' || json.status === 'cancel' || json.status === 'cancelled') {
            noteEl.textContent = 'Pembayaran sudah tidak aktif. Silakan buat QRIS baru.'
            btn.disabled = false
            return
          }

          noteEl.textContent = 'Belum dibayar. Sistem akan cek lagi otomatis.'
          btn.disabled = false
        } catch (err) {
          noteEl.textContent = 'Gagal cek status: ' + err.message
          btn.disabled = false
        }
      }

      btn.addEventListener('click', checkPaymentStatus)

      const timer = setInterval(async () => {
        if (statusEl.textContent.trim() === 'paid') {
          clearInterval(timer)
          return
        }

        await checkPaymentStatus()
      }, 10000)

      setTimeout(checkPaymentStatus, 2000)
    </script>
  <% } %>
</div>

<%- include('../partials/foot') %>