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

{% block title %}Pay for {{ plan.name }} – PEZAJOB{% endblock %}

{% block extra_head %}
<style>
.pay-wrap { max-width: 720px; margin: 0 auto; }
.pay-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: 0 8px 28px rgba(44,62,80,0.06); }
.pay-card h1 { color: var(--primary); font-size: 1.5rem; margin-bottom: 8px; }
.pay-card p { color: var(--text-muted); margin-bottom: 20px; }
.pay-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.pay-table th, .pay-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9rem; }
.pay-table th { background: var(--bg); color: var(--primary); }
.pay-total { font-size: 1.15rem; font-weight: 700; color: var(--primary); margin: 16px 0; }
.pay-note { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }
.pay-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; align-items: center; justify-content: center; padding: 20px; }
.pay-modal-backdrop.open { display: flex; }
.pay-modal { background: var(--white); border-radius: 16px; width: 100%; max-width: 520px; padding: 24px; }
.pay-modal h2 { color: var(--primary); font-size: 1.1rem; margin-bottom: 16px; }
.pay-field { margin-bottom: 14px; }
.pay-field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.pay-field select, .pay-field input { width: 100%; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; }
.pay-subform { display: none; background: var(--bg); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.pay-subform.active { display: block; }
.pay-alert { background: #fff8e1; border: 1px solid #ffe082; color: #8a6d00; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 0.88rem; }
</style>
{% endblock %}

{% block content %}
<section class="section" style="padding-top:100px;">
  <div class="container pay-wrap">
    <a href="{% url 'subscriptions:pricing' %}" style="font-size:0.85rem;color:var(--secondary);"><i class="fas fa-arrow-left"></i> Back to pricing</a>

    <div class="pay-card" style="margin-top:18px;">
      <h1>{{ plan.name }}</h1>
      <p>{{ plan.description }}</p>

      <table class="pay-table">
        <thead>
          <tr><th>Product</th><th>Price</th><th>Qty</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ plan.name }}</td>
            <td>K {{ plan.price_monthly|floatformat:0 }}</td>
            <td>1</td>
          </tr>
        </tbody>
      </table>

      <div class="pay-total">Total: K {{ plan.price_monthly|floatformat:0 }}</div>
      <p class="pay-note">Before you pay, make sure you understand and agree to our refund policy and terms and conditions.</p>

      {% if not payment_configured %}
      <div class="pay-alert">Online payment gateway is not configured on this server yet. Set <code>DPO_COMPANY_TOKEN</code> in your environment to enable checkout.</div>
      {% endif %}

      <button type="button" class="btn btn-primary" id="openPayModal"{% if not payment_configured %} disabled{% endif %}>Pay Now</button>
    </div>
  </div>
</section>

<div class="pay-modal-backdrop" id="payModal">
  <div class="pay-modal">
    <h2>Payment confirmation</h2>
    <form method="post" action="{% url 'subscriptions:submit_payment' slug=plan.slug %}">
      {% csrf_token %}
      <div class="pay-field">
        <label for="paymentMethod">Payment method</label>
        <select name="payment_option" id="paymentMethod" required>
          <option value="" selected disabled>Select payment method</option>
          <option value="mobile_money">Mobile money</option>
          <option value="card">Debit / credit card</option>
        </select>
      </div>

      <div class="pay-subform" id="mobileMoneyForm">
        <div class="pay-field">
          <label for="network">Network</label>
          <select name="network" id="network">
            <option value="MTNZM">MTN</option>
            <option value="AirtelZM">Airtel</option>
          </select>
        </div>
        <div class="pay-field">
          <label for="phone_num">Phone number</label>
          <input type="tel" name="phone_num" id="phone_num" maxlength="10" placeholder="0961234567">
          <small style="color:var(--text-muted);">Your 10-digit mobile money number</small>
        </div>
      </div>

      <div class="pay-subform" id="cardForm">
        <p style="font-size:0.88rem;color:var(--text-muted);margin:0;">You will be redirected to DPO Pay to complete your card payment securely.</p>
      </div>

      <div style="display:flex;gap:10px;margin-top:18px;">
        <button type="button" class="btn btn-outline" id="closePayModal">Cancel</button>
        <button type="submit" class="btn btn-primary">Confirm payment</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const modal = document.getElementById('payModal');
  const openBtn = document.getElementById('openPayModal');
  const closeBtn = document.getElementById('closePayModal');
  const paymentMethod = document.getElementById('paymentMethod');
  const mobileForm = document.getElementById('mobileMoneyForm');
  const cardForm = document.getElementById('cardForm');
  const phoneInput = document.getElementById('phone_num');

  function toggleForms() {
    mobileForm.classList.remove('active');
    cardForm.classList.remove('active');
    if (paymentMethod.value === 'mobile_money') mobileForm.classList.add('active');
    if (paymentMethod.value === 'card') cardForm.classList.add('active');
  }

  openBtn?.addEventListener('click', () => {
    modal.classList.add('open');
    paymentMethod.value = 'mobile_money';
    toggleForms();
  });
  closeBtn?.addEventListener('click', () => modal.classList.remove('open'));
  modal?.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('open'); });
  paymentMethod?.addEventListener('change', toggleForms);
  phoneInput?.addEventListener('input', () => {
    phoneInput.value = phoneInput.value.replace(/\D/g, '').slice(0, 10);
  });
})();
</script>
{% endblock %}