{% extends 'base.html' %}

{% block title %}
{{ _('Proceso de Pago') }} - {{ _('BackTestingMarket') }}
{% endblock %}

{% block content %}
<div class="container py-5">

  <h2 class="text-center mb-4">{{ _('Suscríbete a BackTestingMarket') }}</h2>

  <!-- PLANES -->
  <div class="row g-4 mb-4">
    <!-- Mensual -->
    <div class="col-12 col-md-6">
      <div class="card shadow-sm rounded h-100">
        <div class="p-4 text-start bg-primary text-white">
          <h3>{{ _('Servicio Mensual') }}</h3>
          <p>{{ _('Obtendrás acceso total a BackTestingMarket.') }}</p>
          <ul class="list-unstyled">
            <li>
              <strong>{{ _('Costo:') }}</strong>
              <span class="js-monthly-price">USD 39.99</span>
              / {{ _('mes') }}
              <span id="monthly-discount" class="badge bg-success ms-2 d-none">{{ _('DESCUENTO APLICADO') }}</span>
            </li>
            <li><strong>{{ _('Acceso:') }}</strong> {{ _('Total al sitio web') }}</li>
            <li><strong>{{ _('Beneficios:') }}</strong> {{ _('Herramientas avanzadas, análisis de tendencias y más') }}
            </li>

            <li>
              <span class="badge bg-warning text-dark px-2 py-1">
                {{ _('Incluye 7 días de prueba gratis') }}
              </span>
            </li>

          </ul>
        </div>
        <div class="p-4 text-center">
          <button id="btn-monthly" class="btn btn-success">{{ _('Suscribirse Plan Mensual') }}</button>
        </div>
      </div>
    </div>

    <!-- Anual -->
    <div class="col-12 col-md-6">
      <div class="card shadow-sm rounded h-100">
        <div class="p-4 text-start bg-light text-dark">
          <h3>{{ _('Servicio Anual') }}</h3>
          <p>{{ _('Obtén más de 2 meses gratis con la suscripción anual.') }}</p>
          <ul class="list-unstyled">
            <li>
              <strong>{{ _('Costo:') }}</strong>
              <span class="js-annual-price">USD 399.99</span>
              / {{ _('año') }}
              <span id="annual-discount" class="badge bg-success ms-2 d-none">{{ _('DESCUENTO APLICADO') }}</span>
            </li>
            <li><strong>{{ _('Acceso:') }}</strong> {{ _('Total al sitio web') }}</li>
            <li><strong>{{ _('Beneficio:') }}</strong> {{ _('Descuento equivalente a más de 2 meses gratis') }}</li>

            <li>
              <span class="badge bg-warning text-dark px-2 py-1">
                {{ _('Incluye 15 días de prueba gratis') }}
              </span>
            </li>
          </ul>
        </div>
        <div class="p-4 text-center">
          <button id="btn-annual" class="btn btn-success">{{ _('Suscribirse Plan Anual') }}</button>
        </div>
      </div>
    </div>
  </div>





  <!-- Bono especial para primeros suscriptores -->
  <!-- <div class="alert alert-success fw-bold mt-4 text-center" role="alert">
    <i class="fas fa-user-graduate"></i>
    {{ _('¡BONO ESPECIAL! Los primeros suscriptores reciben una sesión personalizada de una hora para aprender a usar
    la plataforma y aprovecharla al máximo.') }}
    <br>
    <small class="d-block mt-2">*{{ _('Sujeto a disponibilidad y cupo limitado.') }}</small>
  </div> -->


  <!-- Aviso de seguridad -->
  <div class="mt-5 px-3 text-center">
    <div class="alert alert-secondary text-dark bg-opacity-75 border-0 rounded small dark-mode-override">
      🔒 {{ _('Las transacciones se procesan de forma segura a través de Stripe, una plataforma de pagos líder a nivel
      mundial.') }}
    </div>
  </div>

</div>

<!-- Stripe.js -->
<script src="https://js.stripe.com/v3/"></script>
<script>
  // ---- Utilidad para formatear USD (centavos -> $X.XX) ----
  function formatUsd(cents) {
    const n = (cents ?? 0) / 100;
    return new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 2
    }).format(n);
  }

  // ---- Cargar precios efectivos desde el servidor según ref del usuario ----
  async function loadEffectivePrices() {
    const refFromServer = "{{ (current_user.referrer_code or '') if current_user.is_authenticated else '' }}";
    const refFromUrl = new URLSearchParams(window.location.search).get('ref') || '';
    const refCode = refFromServer || refFromUrl || '';

    try {
      const res = await fetch("/api/get-prices", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ref_code: refCode })
      });
      const data = await res.json();

      // Mostrar precios mensuales
      if (data?.monthly?.amount_cents !== undefined) {
        document.querySelectorAll('.js-monthly-price').forEach(el => {
          el.textContent = formatUsd(data.monthly.amount_cents);
        });
        const md = document.getElementById("monthly-discount");
        if (md) md.classList.toggle("d-none", !data.monthly.discounted);
      }

      // Mostrar precios anuales
      if (data?.annual?.amount_cents !== undefined) {
        document.querySelectorAll('.js-annual-price').forEach(el => {
          el.textContent = formatUsd(data.annual.amount_cents);
        });
        const ad = document.getElementById("annual-discount");
        if (ad) ad.classList.toggle("d-none", !data.annual.discounted);
      }

    } catch (e) {
      console.warn("No se pudieron cargar precios dinámicos. Se muestran los de la plantilla.", e);
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    if (typeof initThemeToggle === 'function') initThemeToggle();

    // Pintar precios correctos (con o sin ref)
    loadEffectivePrices();

    const stripe = Stripe("pk_live_51NmhXeEiGxFFi4pPyQ2A5NxbX4TDsUHTQwWNYjgpNcecgPOdgGaspSErqSGFku7dhPfIXWKUOJggSdsXsB2tTpDx00E06k3t1G");

    document.getElementById("btn-monthly").addEventListener("click", () => {
      fetch("/create-checkout-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ plan_type: "mensual" })
      })
        .then(res => res.json())
        .then(data => stripe.redirectToCheckout({ sessionId: data.id }))
        .catch(err => console.error(err));
    });

    document.getElementById("btn-annual").addEventListener("click", () => {
      fetch("/create-checkout-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ plan_type: "anual" })
      })
        .then(res => res.json())
        .then(data => stripe.redirectToCheckout({ sessionId: data.id }))
        .catch(err => console.error(err));
    });

  });
</script>


<style>
  body.dark-mode .dark-mode-override {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
  }
</style>
{% endblock %}