{% extends "base.html" %}

{% block title %}Activar Licencia AVANZO ($1 Individual / $5 Sección) | MINEDUCYT El Salvador{% endblock %}

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

  <!-- HEADER -->
  <div class="text-center mb-5" style="max-width: 750px; margin: 0 auto;">
    <span class="badge bg-warning text-dark px-3 py-2 fw-bold text-uppercase mb-2">
      <i class="bi bi-tag-fill me-1 text-danger"></i> Tarifas Populares para Estudiantes Salvadoreños
    </span>
    <h2 class="fw-bold text-dark mb-2">Acceso Universal e Ilimitado a la Prueba AVANZO</h2>
    <p class="text-muted">
      Sin barreras económicas. Paga <strong>$1.00 USD</strong> de forma individual o <strong>$5.00 USD</strong> por toda tu sección de bachillerato. Generación automática e instantánea de claves mediante <strong>Chivo Wallet</strong>, <strong>Strike</strong> o <strong>Blink</strong>.
    </p>
  </div>

  <div class="row g-4 justify-content-center mb-5">
    <!-- PLAN INDIVIDUAL -->
    <div class="col-md-6 col-lg-5">
      <div class="card border-2 border-primary shadow-sm rounded-4 p-4 p-lg-5 bg-white h-100 d-flex flex-column justify-content-between position-relative">
        <span class="position-absolute top-0 end-0 bg-primary text-white text-uppercase fw-bold px-3 py-1 rounded-bottom-start rounded-top-end small" style="font-size: 0.75rem;">
          Individual Universal
        </span>

        <div>
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="icon-box bg-primary-subtle text-primary">
              <i class="bi bi-person-check-fill"></i>
            </div>
            <div>
              <h4 class="fw-bold text-dark mb-0">Pase Individual</h4>
              <span class="text-muted small">1 Estudiante &bull; 1 Dispositivo</span>
            </div>
          </div>

          <div class="my-3">
            <span class="display-4 fw-bold text-primary">$1.00</span>
            <span class="text-muted">USD (Pago Único)</span>
          </div>

          <p class="text-muted small mb-4">
            Equivale a 2 pupusas o a una recarga de saldo. Acceso ilimitado para todo el año de estudio.
          </p>

          <ul class="list-unstyled small mb-4 space-y-2">
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Simulacros ilimitados con cronómetro</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Justificación y resolución paso a paso de cada fallo</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Fichas 3D de fórmulas de física y matemática</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Boletas Oficiales de Resultados PDF con NIE y QR</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> <strong>100% Offline</strong> (funciona sin internet en la laptop)</li>
          </ul>
        </div>

        <button onclick="selectPlan('individual', 1.00)" class="btn btn-primary btn-lg fw-bold w-100 py-3 rounded-3 shadow-sm">
          Pagar $1.00 con Chivo / Strike / Blink
        </button>
      </div>
    </div>

    <!-- PLAN SECCIÓN COMPLETA -->
    <div class="col-md-6 col-lg-5">
      <div class="card border-2 border-warning shadow-sm rounded-4 p-4 p-lg-5 bg-white h-100 d-flex flex-column justify-content-between position-relative">
        <span class="position-absolute top-0 end-0 bg-warning text-dark text-uppercase fw-bold px-3 py-1 rounded-bottom-start rounded-top-end small" style="font-size: 0.75rem;">
          Súper Promo Aula
        </span>

        <div>
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="icon-box bg-warning-subtle text-warning">
              <i class="bi bi-people-fill text-dark"></i>
            </div>
            <div>
              <h4 class="fw-bold text-dark mb-0">Sección Completa</h4>
              <span class="text-muted small">Hasta 45 Alumnos + Cuenta Docente</span>
            </div>
          </div>

          <div class="my-3">
            <span class="display-4 fw-bold text-dark">$5.00</span>
            <span class="text-muted">USD (Toda el Aula)</span>
          </div>

          <p class="text-muted small mb-4">
            Ideal para directivas de grado o docentes. Sale a menos de <strong>$0.15 centavos por estudiante</strong>.
          </p>

          <ul class="list-unstyled small mb-4 space-y-2">
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> <strong>Lote de hasta 45 claves únicas</strong> para cada alumno</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Cada alumno activa su propia laptop con su NIE</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> <strong>1 Licencia de Cortesía para el Docente Guía</strong></li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Hoja de claves imprimible y lista para WhatsApp</li>
            <li class="mb-2"><i class="bi bi-check2-circle text-success me-2 fs-6"></i> Prefijo personalizado con el código de tu sección</li>
          </ul>
        </div>

        <button onclick="selectPlan('seccion', 5.00)" class="btn btn-warning btn-lg fw-bold w-100 py-3 rounded-3 shadow-sm text-dark">
          Pagar $5.00 por Toda la Sección
        </button>
      </div>
    </div>
  </div>

  <!-- CONTENEDOR INTERACTIVO DE CHECKOUT (SE MUESTRA AL ELEGIR PLAN) -->
  <div id="checkout-container" class="card border-0 shadow-lg rounded-4 p-4 p-md-5 bg-white mb-5 d-none" style="max-width: 800px; margin: 0 auto;">
    <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
      <div>
        <span class="badge bg-primary text-uppercase px-2 py-1 small">Pasarela Automática de Pago</span>
        <h4 id="checkout-title" class="fw-bold text-dark mb-0 mt-1">Completar Activación</h4>
      </div>
      <button onclick="closeCheckout()" class="btn-close"></button>
    </div>

    <!-- PASO 1: DATOS BÁSICOS -->
    <div id="checkout-step-details">
      <div class="row g-3 mb-4">
        <div class="col-md-6">
          <label class="form-label fw-semibold small">Nombre de Quien Realiza el Pago:</label>
          <input type="text" id="buyer-name" class="form-control" placeholder="Ej. Juan Pérez">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold small">Teléfono / WhatsApp de Contacto:</label>
          <input type="text" id="buyer-phone" class="form-control" placeholder="Ej. 7265-9216">
        </div>

        <!-- CAMPOS PARA PLAN SECCIÓN -->
        <div id="section-extra-fields" class="row g-3 mt-1 d-none">
          <div class="col-md-6">
            <label class="form-label fw-semibold small">Instituto / Complejo Educativo:</label>
            <input type="text" id="school-name-input" class="form-control" placeholder="Ej. Complejo Educativo Barrio La Cruz">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold small">Grado y Sección:</label>
            <input type="text" id="section-name-input" class="form-control" placeholder="Ej. 2.° Bachillerato General B">
          </div>
        </div>

        <!-- CÓDIGO DE RECOMENDACIÓN (20% COMISIÓN) -->
        <div class="col-12 mt-3">
          <label class="form-label fw-semibold small text-muted">Código de Promotor / Recomendación (Opcional):</label>
          <div class="input-group">
            <span class="input-group-text bg-light"><i class="bi bi-gift-fill text-primary"></i></span>
            <input type="text" id="buyer-ref-code" class="form-control font-monospace text-uppercase" placeholder="Ej. REF-CARLOS2026">
          </div>
          <small class="text-muted" style="font-size: 0.75rem;">Si un compañero o profesor te recomendó el simulador, ingresa su código para asignarle su 20% de comisión.</small>
        </div>
      </div>

      <button onclick="generateQrInvoice()" class="btn btn-primary btn-lg fw-bold w-100 py-3 rounded-3 shadow-sm">
        <i class="bi bi-qr-code me-2"></i> Generar Código QR para Pagar (<span id="btn-amount-disp">$1.00</span>)
      </button>
    </div>

    <!-- PASO 2: QR LIGHTNING Y DETECCIÓN EN VIVO -->
    <div id="checkout-step-qr" class="text-center d-none">
      <div class="alert alert-info py-2 small mb-3">
        <i class="bi bi-info-circle-fill me-1"></i> Abre <strong>Chivo Wallet</strong>, <strong>Strike</strong> o <strong>Blink</strong> y escanea el código para pagar el monto exacto:
      </div>

      <div class="d-flex justify-content-center mb-3">
        <div class="p-3 border rounded-3 bg-light shadow-sm text-center">
          <img id="checkout-qr-img" src="" alt="QR de Pago" class="img-fluid rounded mb-2" style="width: 220px; height: 220px;">
          <h4 id="checkout-amount" class="fw-bold text-primary mb-0">$1.00 USD</h4>
        </div>
      </div>

      <!-- INSTRUCCIONES POR BILLETERA -->
      <div class="row g-2 text-start small mb-4" style="max-width: 600px; margin: 0 auto;">
        <div class="col-md-4">
          <div class="p-2 border rounded bg-light h-100">
            <strong class="d-block text-primary"><i class="bi bi-wallet2 me-1"></i> Chivo Wallet:</strong>
            1. Abre Chivo Wallet.<br>
            2. Toca "Escanear QR".<br>
            3. Escanea y confirma. O transfiere a: <strong>7265-9216</strong>
          </div>
        </div>
        <div class="col-md-4">
          <div class="p-2 border rounded bg-light h-100">
            <strong class="d-block text-success"><i class="bi bi-lightning-charge me-1"></i> Strike:</strong>
            Escanea el QR o envía a: <strong>miltonrb@strike.me</strong>
          </div>
        </div>
        <div class="col-md-4">
          <div class="p-2 border rounded bg-light h-100">
            <strong class="d-block text-warning text-dark"><i class="bi bi-shield-check me-1"></i> Blink:</strong>
            Escanea el QR o envía a: <strong>miltonrb@blink.sv</strong>
          </div>
        </div>
      </div>

      <!-- DETECCIÓN EN VIVO -->
      <div class="p-3 bg-light rounded-3 border d-flex align-items-center justify-content-center gap-3 mb-4">
        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
        <span class="text-muted small">Esperando confirmación en la red Lightning... (Detección automática en segundos)</span>
      </div>

      <!-- BOTÓN DE PRUEBA / SIMULACIÓN INMEDIATA -->
      <div class="border-top pt-3">
        <button onclick="simulateImmediatePayment()" class="btn btn-success fw-bold px-4 py-2 shadow-sm">
          <i class="bi bi-check-circle-fill me-1"></i> Confirmar Pago Exitoso (Desbloqueo Inmediato)
        </button>
        <div class="text-muted small mt-1" style="font-size: 0.75rem;">
          Usa este botón si ya realizaste la transferencia a Chivo (7265-9216) o para validación instantánea.
        </div>
      </div>
    </div>

    <!-- PASO 3: ÉXITO Y ENTREGA DE CLAVE -->
    <div id="checkout-step-success" class="text-center d-none">
      <div class="rounded-circle bg-success text-white p-3 d-inline-flex mb-3 shadow">
        <i class="bi bi-check-lg fs-1"></i>
      </div>
      <h3 class="fw-bold text-success mb-1">¡Pago Confirmado Exitosamente!</h3>
      <p class="text-muted small mb-4">Tu licencia ha sido generada de forma única y vinculada a tu dispositivo.</p>

      <div class="p-4 bg-light rounded-4 border mb-4 text-center" style="max-width: 500px; margin: 0 auto;">
        <span class="text-muted small d-block mb-1 text-uppercase fw-semibold">Tu Clave de Acceso Ilimitado:</span>
        <h2 id="generated-key-display" class="fw-bold text-primary font-monospace tracking-wide mb-2"></h2>
        <button onclick="copyGeneratedKey()" class="btn btn-outline-primary btn-sm fw-semibold">
          <i class="bi bi-clipboard me-1"></i> Copiar Clave
        </button>
      </div>

      <div id="section-keys-container" class="text-start d-none mb-4">
        <h6 class="fw-bold text-dark">Lote de Claves Generadas para la Sección:</h6>
        <p class="text-muted small">Entrega una clave única a cada estudiante para que active su propia laptop:</p>
      </div>

      <div class="d-flex justify-content-center gap-3">
        <a href="{{ url_for('exam_view') }}" class="btn btn-primary btn-lg fw-bold px-4 py-3 shadow-sm rounded-pill">
          <i class="bi bi-play-circle-fill me-2"></i> Comenzar Simulacro Ahora
        </a>
        <a href="{{ url_for('profile_view') }}" class="btn btn-outline-secondary btn-lg fw-semibold px-4 py-3 rounded-pill">
          Ver Mi Perfil
        </a>
      </div>
    </div>
  </div>

  <!-- SECCIÓN "YA TENGO UNA CLAVE" -->
  <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white" style="max-width: 700px; margin: 0 auto;">
    <div class="text-center mb-4">
      <h4 class="fw-bold text-dark mb-1">¿Ya tienes tu Clave Única?</h4>
      <p class="text-muted small mb-0">Si tu profesor te entregó una clave de aula o la compraste por WhatsApp, actívala aquí:</p>
    </div>

    <div class="row g-2 justify-content-center">
      <div class="col-md-8">
        <input type="text" id="direct-key-input" class="form-control form-control-lg font-monospace text-uppercase text-center" placeholder="AVZ-XXXX-XXXX o SEC-XXXX-XXXX">
      </div>
      <div class="col-md-4">
        <button onclick="activateFromDirectInput()" class="btn btn-warning btn-lg fw-bold w-100 text-dark">
          Activar Equipo
        </button>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
  let selectedPlanId = "individual";

  function selectPlan(planId, price) {
    selectedPlanId = planId;
    const container = document.getElementById("checkout-container");
    container.classList.remove("d-none");
    container.scrollIntoView({ behavior: 'smooth' });

    document.getElementById("btn-amount-disp").innerText = `$${price.toFixed(2)}`;
    document.getElementById("checkout-title").innerText = (planId === "seccion") ? "Paquete Sección Completa ($5.00 USD)" : "Pase Individual Ilimitado ($1.00 USD)";

    const secFields = document.getElementById("section-extra-fields");
    if (planId === "seccion") {
      secFields.classList.remove("d-none");
    } else {
      secFields.classList.add("d-none");
    }
  }

  function closeCheckout() {
    document.getElementById("checkout-container").classList.add("d-none");
  }

  document.addEventListener("DOMContentLoaded", () => {
    const params = new URLSearchParams(window.location.search);
    const ref = params.get("ref");
    if (ref) {
      const refInput = document.getElementById("buyer-ref-code");
      if (refInput) refInput.value = ref.toUpperCase();
    }
  });

  function generateQrInvoice() {
    const name = document.getElementById("buyer-name").value.trim() || "Estudiante Bachillerato";
    const phone = document.getElementById("buyer-phone").value.trim() || "";
    const school = document.getElementById("school-name-input").value.trim() || "Complejo Educativo";
    const section = document.getElementById("section-name-input").value.trim() || "2Bach";
    const refCode = document.getElementById("buyer-ref-code").value.trim();

    initiateLightningCheckout(selectedPlanId, name, phone, school, section, refCode);
  }

  function copyGeneratedKey() {
    const key = document.getElementById("generated-key-display").innerText;
    navigator.clipboard.writeText(key);
    alert("¡Clave copiada al portapapeles: " + key + "!");
  }

  function activateFromDirectInput() {
    const key = document.getElementById("direct-key-input").value.trim();
    const name = localStorage.getItem("avanzo_student_name") || "";
    const nie = localStorage.getItem("avanzo_student_nie") || "";
    activateLicenseCode(key, name, nie, (res) => {
      if (res.valid) {
        window.location.href = "/simulador";
      }
    });
  }
</script>
{% endblock %}