{% extends 'home/base.html' %}

{% block title %}Confirming payment – PEZAJOB{% endblock %}

{% block extra_head %}
<style>
.pay-status-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.pay-status-alert { background: #e8f4fd; border: 1px solid #90caf9; color: #1565c0; padding: 14px 18px; border-radius: 12px; margin-bottom: 24px; font-size: 0.92rem; line-height: 1.55; }
.pay-status-spinner { width: 72px; height: 72px; border: 6px solid var(--border); border-top-color: var(--secondary); border-radius: 50%; animation: paySpin 0.9s linear infinite; margin: 0 auto 20px; }
@keyframes paySpin { to { transform: rotate(360deg); } }
.pay-status-message { color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; margin-bottom: 8px; }
.pay-status-result { font-size: 1.1rem; font-weight: 700; margin: 18px 0; }
.pay-status-result.success { color: #2e7d32; }
.pay-status-result.error { color: #c62828; }
</style>
{% endblock %}

{% block content %}
<section class="section" style="padding-top:120px;">
  <div class="container pay-status-wrap">
    <div class="pay-status-alert">
      <strong>Do not close this page</strong> until it automatically redirects you.
    </div>

    <h1 style="color:var(--primary);font-size:1.4rem;margin-bottom:12px;">Confirming your payment</h1>
    <p style="color:var(--text-muted);margin-bottom:20px;">Transaction <strong>{{ txn }}</strong></p>

    <div id="statusPanel">
      <div class="pay-status-spinner" id="statusSpinner" aria-hidden="true"></div>
      <div class="pay-status-message" id="statusMessage">
        {% if method_slug == 'mobile_money' %}
        A push request has been sent to your mobile number. Enter your mobile money PIN on your phone to complete payment.
        {% else %}
        We are verifying your payment with DPO. This usually takes a few seconds after you finish checkout.
        {% endif %}
      </div>
    </div>

    <p style="color:var(--text-muted);font-size:0.82rem;margin-top:24px;">
      Checking again automatically every 5 seconds…
    </p>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const pollUrl = "{% url 'subscriptions:payment_status_poll' txn=txn %}";
  const successUrl = "{% url 'subscriptions:payment_success' %}";
  const cancelUrl = "{% url 'subscriptions:payment_cancel' %}";
  const panel = document.getElementById('statusPanel');
  const spinner = document.getElementById('statusSpinner');
  const message = document.getElementById('statusMessage');
  let stopped = false;

  function showResult(kind, text) {
    stopped = true;
    if (spinner) spinner.remove();
    panel.innerHTML = '<div class="pay-status-result ' + kind + '">' + text + '</div>';
  }

  function handleStatus(status) {
    if (status === 'success') {
      showResult('success', 'Payment successful! Redirecting…');
      setTimeout(function () { window.location.href = successUrl; }, 3000);
      return;
    }
    if (status === 'rejected') {
      showResult('error', 'Payment failed or was cancelled. Redirecting…');
      setTimeout(function () { window.location.href = cancelUrl; }, 3000);
      return;
    }
    setTimeout(checkStatus, 5000);
  }

  function checkStatus() {
    if (stopped) return;
    fetch(pollUrl, {
      method: 'GET',
      headers: { 'Accept': 'application/json' },
      credentials: 'same-origin',
    })
      .then(function (response) {
        if (!response.ok) throw new Error('status check failed');
        return response.json();
      })
      .then(function (data) { handleStatus(data.tran_status); })
      .catch(function () { setTimeout(checkStatus, 5000); });
  }

  document.addEventListener('DOMContentLoaded', checkStatus);
})();
</script>
{% endblock %}