{% extends "base.html" %}
{% block title %}Checkout{% endblock %}
{% block content %}
<h1>Upgrade to {{ plan.name }}</h1>
<p class="sub">${{ plan.price }}/month, cancel anytime. Payments are handled securely by Paddle, our merchant of record; taxes are added at checkout where applicable.</p>
<div id="checkout-status" class="small muted" style="margin:16px 0">Opening secure checkout…</div>
<p><button class="btn primary" id="reopen" hidden>Open checkout again</button> <a class="btn" href="/app/billing">Back to billing</a></p>
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script>
(function () {
  var status = document.getElementById('checkout-status');
  var reopen = document.getElementById('reopen');
  {% if environment == 'sandbox' %}Paddle.Environment.set('sandbox');{% endif %}
  Paddle.Initialize({
    token: {{ client_token|tojson }},{% if paddle_customer_id %}
    pwCustomer: { id: {{ paddle_customer_id|tojson }} },{% endif %}
    eventCallback: function (ev) {
      if (!ev || !ev.name) return;
      if (ev.name === 'checkout.completed') {
        status.textContent = 'Payment received. Activating your plan…';
        setTimeout(function () { window.location = {{ success_url|tojson }}; }, 2500);
      } else if (ev.name === 'checkout.closed') {
        status.textContent = 'Checkout closed. You have not been charged.';
        reopen.hidden = false;
      } else if (ev.name === 'checkout.error') {
        status.textContent = 'Checkout could not load. Please try again or email hello@puzaricloud.in.';
        reopen.hidden = false;
      }
    }
  });
  function open() {
    Paddle.Checkout.open({
      transactionId: {{ txn_id|tojson }},
      settings: { displayMode: 'overlay', theme: 'dark', successUrl: {{ success_url|tojson }} }
    });
  }
  reopen.addEventListener('click', open);
  open();
})();
</script>
{% endblock %}