{% extends "base.html" %}
{% block title %}Recharge | BancaNet{% endblock %}
{% block content %}
{% set pay_methods = recharge_payment_methods if recharge_payment_methods is defined and recharge_payment_methods else [
  {"id": "a", "label": "Payment A", "min": 10, "max": 20000, "quick_amounts": [10, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000]},
  {"id": "b", "label": "Payment B", "min": 100, "max": 50000, "quick_amounts": [100, 200, 500, 1000, 2000, 5000, 10000, 25000, 50000]}
] %}
{% set pay_default = recharge_payment_default if recharge_payment_default is defined and recharge_payment_default else pay_methods[0].id %}
{% set start_method = pay_methods|selectattr('id', 'equalto', pay_default)|list|first or pay_methods[0] %}
{% set start_amounts = start_method.quick_amounts %}
{% set start_min = start_method.min %}
{% set start_max = start_method.max %}
<div class="rch-kia">
  <section class="rch-kia__card">
    <h2>Metodo de pago</h2>
    <div class="rch-kia__payopts" role="radiogroup" aria-label="Metodo de pago">
      {% for method in pay_methods %}
      <button
        type="button"
        class="rch-kia__payopt{% if method.id == pay_default %} is-active{% endif %}"
        data-pay-method="{{ method.id }}"
        data-min="{{ method.min }}"
        data-max="{{ method.max }}"
        data-amounts="{{ method.quick_amounts|join(',') }}"
        role="radio"
        aria-checked="{{ 'true' if method.id == pay_default else 'false' }}"
      >
        <strong>{{ method.label }}</strong>
        <span>Min MX$ {{ "%.0f"|format(method.min) }} · Max MX$ {{ "%.0f"|format(method.max) }}</span>
      </button>
      {% endfor %}
    </div>
  </section>

  <section class="rch-kia__card">
    <h2>Monto</h2>
    <p class="rch-kia__avail">Disponible: <strong>MX$ {{ "%.2f"|format(total_balance or 0) }}</strong></p>
    <form class="rch-kia__form" id="recharge-form">
      <input type="hidden" name="payment_method" id="payment-method" value="{{ pay_default }}">
      <label class="rch-kia__field" for="amount">
        <span>MXN</span>
        <input
          id="amount"
          name="amount"
          type="number"
          min="{{ start_min }}"
          max="{{ start_max }}"
          step="0.01"
          required
          placeholder="Ingresa el monto"
          value="{{ start_amounts[0] if start_amounts else '' }}"
        >
      </label>
      <div class="rch-kia__chips" id="recharge-chips">
        {% for amount in start_amounts %}
        <button class="rch-kia__chip{% if loop.first %} is-active{% endif %}" type="button" data-amount="{{ amount }}">{{ amount }}</button>
        {% endfor %}
      </div>
      <p class="rch-kia__hint" id="recharge-hint">
        Minimo MX$ {{ "%.0f"|format(start_min) }} · Maximo MX$ {{ "%.0f"|format(start_max) }}
      </p>
      <button class="rch-kia__submit" type="submit">Continuar al pago</button>
    </form>
  </section>

  <section class="rch-kia__note">
    <p>Despues veras los datos bancarios para transferir. El saldo se acredita cuando la recarga sea aprobada.</p>
    <a href="{{ url_for('user.reports') }}">Ver historial de recargas</a>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const form = document.getElementById("recharge-form");
  const input = document.getElementById("amount");
  const methodInput = document.getElementById("payment-method");
  const chipsWrap = document.getElementById("recharge-chips");
  const hint = document.getElementById("recharge-hint");
  const payButtons = document.querySelectorAll("[data-pay-method]");
  if (!form || !input || !methodInput || !chipsWrap) return;

  const formatMoney = (value) => Number(value).toLocaleString("es-MX", { maximumFractionDigits: 0 });

  const bindChips = () => {
    const chips = chipsWrap.querySelectorAll("[data-amount]");
    chips.forEach((btn) => {
      btn.addEventListener("click", () => {
        input.value = btn.dataset.amount || "";
        chips.forEach((c) => c.classList.remove("is-active"));
        btn.classList.add("is-active");
      });
    });
  };

  const applyMethod = (btn) => {
    if (!btn) return;
    const min = Number(btn.dataset.min || 0);
    const max = Number(btn.dataset.max || 0);
    const amounts = String(btn.dataset.amounts || "")
      .split(",")
      .map((v) => v.trim())
      .filter(Boolean);

    methodInput.value = btn.dataset.payMethod || "a";
    input.min = String(min);
    input.max = String(max);
    if (hint) {
      hint.textContent = `Minimo MX$ ${formatMoney(min)} · Maximo MX$ ${formatMoney(max)}`;
    }

    payButtons.forEach((item) => {
      const on = item === btn;
      item.classList.toggle("is-active", on);
      item.setAttribute("aria-checked", on ? "true" : "false");
    });

    chipsWrap.innerHTML = amounts
      .map((amount, index) => (
        `<button class="rch-kia__chip${index === 0 ? " is-active" : ""}" type="button" data-amount="${amount}">${amount}</button>`
      ))
      .join("");
    input.value = amounts[0] || "";
    bindChips();
  };

  payButtons.forEach((btn) => {
    btn.addEventListener("click", () => applyMethod(btn));
  });

  input.addEventListener("input", () => {
    const value = input.value.trim();
    chipsWrap.querySelectorAll("[data-amount]").forEach((c) => {
      c.classList.toggle("is-active", c.dataset.amount === value);
    });
  });

  bindChips();

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const amount = input.value.trim();
    const paymentMethod = methodInput.value || "a";
    const button = form.querySelector('button[type="submit"]');
    const min = Number(input.min || 0);
    const max = Number(input.max || 0);
    const numeric = Number(amount);

    if (!amount) { input.focus(); return; }
    if (!Number.isFinite(numeric) || numeric < min || numeric > max) {
      alert(`Para este metodo el monto debe ser entre MX$ ${formatMoney(min)} y MX$ ${formatMoney(max)}.`);
      input.focus();
      return;
    }

    button.disabled = true;
    try {
      const response = await fetch('{{ url_for("user.recharge_request") }}', {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams({
          csrf_token: document.querySelector('meta[name="csrf-token"]').content,
          amount,
          payment_method: paymentMethod,
        }),
      });
      const data = await response.json();
      if (!response.ok || !data.ok) {
        alert(data.message || "No se pudo crear la solicitud.");
        return;
      }
      location.href = data.pay_url || ('/pay/' + encodeURIComponent(data.order_code || ''));
    } catch (_) {
      alert("No se pudo conectar. Intentalo de nuevo.");
    } finally {
      button.disabled = false;
    }
  });
})();
</script>
{% endblock %}