{% extends 'base.html' %}
{% block title %}Buy Extra Verifications — Avighna{% endblock %}

{% block extra_head %}
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<style>
  .pack-card {
    background: white;
    border: 2px solid #e8ecf0;
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
    position: relative;
  }
  .pack-card:hover       { border-color: #1a3c5e; transform: translateY(-3px); }
  .pack-card.selected    { border-color: #1a3c5e; background: #f0f4f8; }
  .pack-card.popular     { border-color: #e8a020; }
  .pack-badge {
    position: absolute; top: -12px; left: 50%;
    transform: translateX(-50%);
    background: #e8a020; color: white;
    font-size: .72rem; font-weight: 700;
    padding: 3px 14px; border-radius: 20px;
    white-space: nowrap;
  }
  .pack-icon  { font-size: 2rem; margin-bottom: 10px; }
  .pack-name  { font-size: .8rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
  .pack-verif { font-size: 2rem; font-weight: 700; color: #1a3c5e; line-height: 1; }
  .pack-verif span { font-size: .9rem; font-weight: 400; color: #888; }
  .pack-price { font-size: 1rem; font-weight: 600; color: #444; margin-top: 6px; }

  .coupon-row { display: flex; gap: 8px; margin-bottom: 6px; }
  .coupon-input {
    flex: 1; padding: 11px 14px;
    border: 1.5px solid #dde0e6; border-radius: 10px;
    font-size: .9rem; font-family: inherit;
    outline: none; text-transform: uppercase;
    transition: border-color .2s;
  }
  .coupon-input:focus  { border-color: #1a3c5e; }
  .coupon-input.valid  { border-color: #1a7a4a; background: #f0faf5; }
  .coupon-input.invalid{ border-color: #d62828; }

  .btn-apply {
    background: #1a3c5e; color: white;
    border: none; border-radius: 10px;
    padding: 11px 18px; font-size: .88rem;
    font-weight: 600; cursor: pointer;
    font-family: inherit;
  }
  .coupon-msg { font-size: .82rem; padding: 3px 0; display: none; }
  .coupon-msg.success { color: #1a7a4a; display: block; }
  .coupon-msg.error   { color: #d62828; display: block; }

  .summary-box {
    background: #f0f4f8; border-radius: 12px;
    padding: 16px; margin: 20px 0;
  }
  .s-row {
    display: flex; justify-content: space-between;
    font-size: .9rem; padding: 6px 0;
    border-bottom: 1px solid #e0e4ea;
  }
  .s-row:last-child { border-bottom: none; font-weight: 700; }
  .s-row .val { font-weight: 600; color: #1a3c5e; }
  .s-row.discount .val { color: #1a7a4a; }

  .btn-pay {
    width: 100%; background: #1a7a4a; color: white;
    border: none; border-radius: 30px; padding: 14px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-pay:hover    { background: #145f39; }
  .btn-pay:disabled { background: #aaa; cursor: not-allowed; }

  .spinner-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 999;
    align-items: center; justify-content: center;
  }
  .spinner-overlay.show { display: flex; }
  .spinner-box { background: white; border-radius: 16px; padding: 32px 40px; text-align: center; }
  .spinner {
    width: 44px; height: 44px;
    border: 4px solid #e0e4ea; border-top-color: #1a3c5e;
    border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 14px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
{% endblock %}

{% block content %}

<div class="mb-4">
  <h4 style="font-weight:700;margin:0;">Buy Extra Verifications</h4>
  <p style="color:#888;font-size:.88rem;margin:0;">
    Current balance: <strong style="color:#1a3c5e;">{{ org.verifications_remaining }}</strong> verifications remaining
  </p>
</div>

<div style="max-width:700px;">

  <!-- Pack Selection -->
  <div class="card mb-4">
    <div style="padding:24px;">
      <h5 style="font-weight:700;margin-bottom:18px;">Select a Pack</h5>
      <div class="row g-3">
        {% for key, pack in packs.items %}
        <div class="col-md-4">
          <div
            class="pack-card {% if key == 'medium' %}popular{% endif %}"
            onclick="selectPack('{{ key }}', {{ pack.total }})"
            id="pack-{{ key }}"
          >
            {% if key == 'medium' %}<div class="pack-badge">Best Value</div>{% endif %}
            <div class="pack-icon">
              {% if key == 'small' %}⚡{% elif key == 'medium' %}🚀{% else %}💎{% endif %}
            </div>
            <div class="pack-name">{{ pack.label }}</div>
            <div class="pack-verif">
              {{ pack.verifications }} <span>verifs</span>
            </div>
            <div class="pack-price">₹{{ pack.price }} + GST</div>
            <div style="font-size:.82rem;color:#888;margin-top:4px;">Total: ₹{{ pack.total }}</div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Coupon + Summary -->
  <div class="card mb-4">
    <div style="padding:24px;">
      <h5 style="font-weight:700;margin-bottom:16px;">Coupon & Payment</h5>

      <label style="font-size:.82rem;font-weight:600;color:#444;display:block;margin-bottom:8px;">
        Have a coupon code?
      </label>
      <div class="coupon-row">
        <input type="text" class="coupon-input" id="couponInput" placeholder="ENTER CODE" maxlength="50">
        <button class="btn-apply" onclick="applyCoupon()">Apply</button>
      </div>
      <div class="coupon-msg" id="couponMsg"></div>

      <!-- Summary -->
      <div class="summary-box" id="summaryBox" style="display:none;">
        <div class="s-row">
          <span>Pack Price</span>
          <span class="val" id="sumOriginal">₹0</span>
        </div>
        <div class="s-row discount" id="sumDiscountRow" style="display:none;">
          <span>Coupon Discount</span>
          <span class="val" id="sumDiscount">-₹0</span>
        </div>
        <div class="s-row">
          <span>GST (18%)</span>
          <span class="val" id="sumGst">₹0</span>
        </div>
        <div class="s-row">
          <span>Total Payable</span>
          <span class="val" id="sumTotal">₹0</span>
        </div>
      </div>

      <button class="btn-pay" id="payBtn" disabled onclick="initiateTopup()">
        🔒 Pay & Add Verifications
      </button>

      <!-- Free form -->
      <form method="POST" action="/topup/activate-free/" id="freeForm" style="display:none;">
        {% csrf_token %}
        <input type="hidden" name="pack"        id="freePack">
        <input type="hidden" name="coupon_code" id="freeCoupon">
        <button type="submit" class="btn-pay" style="background:#1a7a4a;">
          ✅ Add Verifications (Free)
        </button>
      </form>

    </div>
  </div>

</div>

<div class="spinner-overlay" id="spinnerOverlay">
  <div class="spinner-box">
    <div class="spinner"></div>
    <p>Processing payment...<br>Please do not close this window.</p>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
  const CSRF = "{{ csrf_token }}";
  const PACKS = {
    {% for key, pack in packs.items %}
    '{{ key }}': { verifications: {{ pack.verifications }}, price: {{ pack.price }}, gst: {{ pack.gst }}, total: {{ pack.total }}, label: '{{ pack.label }}' },
    {% endfor %}
  };

  let selectedPack   = '';
  let appliedCoupon  = '';
  let currentTotal   = 0;

  function selectPack(key, total) {
    // Deselect all
    document.querySelectorAll('.pack-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('pack-' + key).classList.add('selected');

    selectedPack  = key;
    appliedCoupon = '';
    currentTotal  = total;

    const pack = PACKS[key];
    document.getElementById('couponInput').value     = '';
    document.getElementById('couponInput').className = 'coupon-input';
    document.getElementById('couponMsg').className   = 'coupon-msg';
    document.getElementById('couponMsg').textContent = '';
    document.getElementById('sumDiscountRow').style.display = 'none';

    document.getElementById('sumOriginal').textContent = '₹' + pack.price;
    document.getElementById('sumGst').textContent      = '₹' + pack.gst;
    document.getElementById('sumTotal').textContent    = '₹' + pack.total;
    document.getElementById('summaryBox').style.display= 'block';

    document.getElementById('payBtn').style.display   = 'flex';
    document.getElementById('freeForm').style.display = 'none';
    document.getElementById('payBtn').disabled        = false;
    document.getElementById('payBtn').textContent     = '🔒 Pay ₹' + total + ' & Add ' + pack.verifications + ' Verifications';
  }

  function applyCoupon() {
    if (!selectedPack) {
      alert('Please select a pack first.');
      return;
    }
    const code  = document.getElementById('couponInput').value.trim().toUpperCase();
    const input = document.getElementById('couponInput');
    const msg   = document.getElementById('couponMsg');

    if (!code) { showMsg('Please enter a coupon code.', 'error'); return; }

    const fd = new FormData();
    fd.append('code', code);
    fd.append('pack', selectedPack);
    fd.append('csrfmiddlewaretoken', CSRF);

    fetch('/topup/apply-coupon/', { method: 'POST', body: fd })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          appliedCoupon = code;
          currentTotal  = data.total;
          input.classList.add('valid');
          input.classList.remove('invalid');
          showMsg(data.message, 'success');

          if (data.discount > 0) {
            document.getElementById('sumDiscountRow').style.display = 'flex';
            document.getElementById('sumDiscount').textContent = '-₹' + data.discount;
          }
          document.getElementById('sumGst').textContent   = '₹' + data.gst;
          document.getElementById('sumTotal').textContent = '₹' + data.total;

          if (data.is_free || data.total === 0) {
            document.getElementById('payBtn').style.display   = 'none';
            document.getElementById('freeForm').style.display = 'block';
            document.getElementById('freePack').value   = selectedPack;
            document.getElementById('freeCoupon').value = code;
          } else {
            const pack = PACKS[selectedPack];
            document.getElementById('payBtn').textContent = '🔒 Pay ₹' + data.total + ' & Add ' + pack.verifications + ' Verifications';
          }
        } else {
          input.classList.add('invalid');
          input.classList.remove('valid');
          showMsg(data.error, 'error');
          appliedCoupon = '';
        }
      });
  }

  function showMsg(text, type) {
    const el = document.getElementById('couponMsg');
    el.textContent = (type === 'success' ? '✅ ' : '❌ ') + text;
    el.className   = 'coupon-msg ' + type;
  }

  function initiateTopup() {
    if (!selectedPack) { alert('Please select a pack.'); return; }
    document.getElementById('spinnerOverlay').classList.add('show');
    document.getElementById('payBtn').disabled = true;

    const fd = new FormData();
    fd.append('pack',        selectedPack);
    fd.append('coupon_code', appliedCoupon);
    fd.append('csrfmiddlewaretoken', CSRF);

    fetch('/topup/create-order/', { method: 'POST', body: fd })
      .then(r => r.json())
      .then(data => {
        document.getElementById('spinnerOverlay').classList.remove('show');
        if (!data.success) {
          document.getElementById('payBtn').disabled = false;
          alert(data.error || 'Failed. Please try again.');
          return;
        }
        if (data.is_free) {
          document.getElementById('freePack').value   = selectedPack;
          document.getElementById('freeCoupon').value = appliedCoupon;
          document.getElementById('freeForm').submit();
          return;
        }
        const cashfree = Cashfree({ mode: "{{ cashfree_env|default:'sandbox' }}" });
        cashfree.checkout({ paymentSessionId: data.payment_session_id, redirectTarget: '_self' });
      })
      .catch(() => {
        document.getElementById('spinnerOverlay').classList.remove('show');
        document.getElementById('payBtn').disabled = false;
        alert('Connection error. Please try again.');
      });
  }

  document.getElementById('couponInput').addEventListener('keydown', e => {
    if (e.key === 'Enter') applyCoupon();
  });
</script>
{% endblock %}