{% extends "base.html" %}

{% block title %}Gana 20% Recomendando el Simulador AVANZO | MINEDUCYT El Salvador{% endblock %}

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

  <!-- HERO BANNER -->
  <div class="hero-banner mb-5 text-center text-md-start">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <span class="badge bg-warning text-dark fw-bold px-3 py-2 mb-3 text-uppercase">
          <i class="bi bi-gift-fill me-1 text-danger"></i> Programa de Embajadores y Estudiantes
        </span>
        <h1 class="display-5 fw-bold mb-3 text-white">
          Gana el 20% de Comisión por Cada Recomendación
        </h1>
        <p class="lead text-white-50 mb-4 fs-6" style="max-width: 650px;">
          Ayuda a tus compañeros de bachillerato a prepararse para la Prueba AVANZO y genera ingresos directos. Recibe tu dinero al instante en tu <strong>Chivo Wallet</strong>, <strong>Strike</strong>, <strong>Blink</strong> o <strong>Banco Agrícola</strong>.
        </p>

        <div class="d-flex flex-wrap gap-3 justify-content-center justify-content-md-start">
          <a href="#registro-box" class="btn btn-warning btn-lg fw-bold text-dark px-4 py-3 shadow-sm rounded-pill">
            <i class="bi bi-person-plus-fill me-2"></i> Crear mi Código de Promotor
          </a>
          <a href="#consultar-box" class="btn btn-outline-light btn-lg fw-semibold px-4 py-3 rounded-pill">
            <i class="bi bi-cash-coin me-2"></i> Consultar mis Ganancias
          </a>
        </div>
      </div>

      <div class="col-lg-4 text-center mt-4 mt-lg-0">
        <div class="p-4 bg-white text-dark rounded-4 shadow-lg border text-start">
          <h5 class="fw-bold text-dark mb-3">Tabla de Comisiones (20%)</h5>

          <div class="d-flex justify-content-between align-items-center p-2 mb-2 bg-light rounded border">
            <div>
              <strong class="d-block text-dark small">Pase Individual ($1.00)</strong>
              <span class="text-muted" style="font-size: 0.75rem;">1 Estudiante</span>
            </div>
            <span class="badge bg-success fs-6 fw-bold">+$0.20 USD</span>
          </div>

          <div class="d-flex justify-content-between align-items-center p-2 mb-3 bg-light rounded border">
            <div>
              <strong class="d-block text-dark small">Promo Sección ($5.00)</strong>
              <span class="text-muted" style="font-size: 0.75rem;">Aula Completa (40 alumnos)</span>
            </div>
            <span class="badge bg-warning text-dark fs-6 fw-bold">+$1.00 USD</span>
          </div>

          <p class="text-muted small mb-0" style="font-size: 0.75rem;">
            <i class="bi bi-lightning-charge text-warning"></i> Si recomiendas 5 aulas de tu instituto, ganas <strong>$5.00 USD</strong> directamente a tu cuenta.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4 justify-content-center mb-5">
    <!-- FORMULARIO DE REGISTRO -->
    <div class="col-lg-6" id="registro-box">
      <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white h-100">
        <div class="d-flex align-items-center gap-2 mb-3">
          <i class="bi bi-pencil-square text-primary fs-3"></i>
          <div>
            <h4 class="fw-bold text-dark mb-0">Regístrate como Promotor</h4>
            <span class="text-muted small">Crea tu código único en 30 segundos</span>
          </div>
        </div>

        <form id="form-register-promoter" onsubmit="registerPromoterClient(event)">
          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Tu Nombre Completo:</label>
            <input type="text" id="prom-name" class="form-control" placeholder="Ej. Carlos Antonio Gómez" required>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Tu Teléfono / WhatsApp:</label>
            <input type="text" id="prom-phone" class="form-control" placeholder="Ej. 7265-9216" required>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Código Personal que Deseas (sin espacios):</label>
            <div class="input-group">
              <span class="input-group-text bg-light text-muted font-monospace">REF-</span>
              <input type="text" id="prom-code" class="form-control font-monospace text-uppercase" placeholder="CARLOS2026" required>
            </div>
            <small class="text-muted" style="font-size: 0.75rem;">Tus amigos ingresarán este código al pagar para asignarte el 20%.</small>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">¿Por dónde deseas recibir tus ganancias?</label>
            <select id="prom-method" class="form-select" onchange="updateAccountPlaceholder()" required>
              <option value="chivo">Chivo Wallet (Teléfono o DUI)</option>
              <option value="strike">Strike (Lightning Address, ej. usuario@strike.me)</option>
              <option value="blink">Blink (Lightning Address, ej. usuario@blink.sv)</option>
              <option value="banco">Banco Agrícola / Transferencia 365</option>
            </select>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold small text-muted" id="account-label">Número de Chivo Wallet:</label>
            <input type="text" id="prom-account" class="form-control font-monospace" placeholder="Ej. 7265-9216" required>
          </div>

          <button type="submit" class="btn btn-primary btn-lg fw-bold w-100 py-3 shadow-sm rounded-3">
            <i class="bi bi-check2-circle me-1"></i> Obtener mi Enlace y Empezar a Ganar
          </button>
        </form>

        <!-- CAJA DE ÉXITO POST REGISTRO -->
        <div id="promoter-registered-success" class="mt-4 p-3 bg-success-subtle border border-success rounded-3 d-none">
          <h6 class="fw-bold text-success mb-1"><i class="bi bi-patch-check-fill me-1"></i> ¡Registro Exitoso!</h6>
          <p class="text-secondary small mb-2">Tu código activo es: <strong id="success-code-disp" class="font-monospace text-dark fs-6"></strong></p>
          <button onclick="copyPromoterWhatsAppText()" class="btn btn-success btn-sm fw-bold w-100 mb-2">
            <i class="bi bi-whatsapp me-1"></i> Copiar Mensaje Recomendador para WhatsApp
          </button>
          <small class="text-muted d-block text-center" style="font-size: 0.75rem;">Compártelo en tus grupos de aula y redes sociales.</small>
        </div>
      </div>
    </div>

    <!-- CONSULTAR MIS GANANCIAS -->
    <div class="col-lg-6" id="consultar-box">
      <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white h-100">
        <div class="d-flex align-items-center gap-2 mb-3">
          <i class="bi bi-wallet2 text-success fs-3"></i>
          <div>
            <h4 class="fw-bold text-dark mb-0">Consultar Mis Comisiones</h4>
            <span class="text-muted small">Revisa tus ventas y saldo acumulado</span>
          </div>
        </div>

        <div class="mb-4">
          <label class="form-label fw-semibold small text-muted">Ingresa tu Código de Promotor:</label>
          <div class="input-group">
            <input type="text" id="lookup-code-input" class="form-control font-monospace text-uppercase" placeholder="REF-CARLOS2026" value="{{ search_code or '' }}">
            <button onclick="lookupPromoterStats()" class="btn btn-success fw-bold px-4">
              Consultar
            </button>
          </div>
        </div>

        <div id="lookup-results-box" class="d-none">
          <div class="p-3 bg-light rounded-3 border mb-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="text-muted small">Promotor:</span>
              <strong id="stat-prom-name" class="text-dark"></strong>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="text-muted small">Método de Pago:</span>
              <span id="stat-prom-account" class="badge bg-secondary"></span>
            </div>
            <div class="row g-2 text-center mt-2">
              <div class="col-6">
                <div class="p-2 bg-white rounded border">
                  <span class="text-muted small d-block" style="font-size: 0.7rem;">TOTAL GANADO</span>
                  <h4 id="stat-prom-total" class="fw-bold text-success mb-0">$0.00</h4>
                </div>
              </div>
              <div class="col-6">
                <div class="p-2 bg-white rounded border">
                  <span class="text-muted small d-block" style="font-size: 0.7rem;">SALDO PENDIENTE</span>
                  <h4 id="stat-prom-pending" class="fw-bold text-primary mb-0">$0.00</h4>
                </div>
              </div>
            </div>
          </div>

          <h6 class="fw-bold text-dark small text-uppercase mb-2">Historial de Ventas Recomendadas:</h6>
          <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
            <table class="table table-sm table-bordered small align-middle">
              <thead class="table-light">
                <tr>
                  <th>Fecha</th>
                  <th>Plan</th>
                  <th>Venta</th>
                  <th>Comisión (20%)</th>
                  <th>Estado</th>
                </tr>
              </thead>
              <tbody id="stat-commissions-table"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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

  function updateAccountPlaceholder() {
    const method = document.getElementById("prom-method").value;
    const label = document.getElementById("account-label");
    const input = document.getElementById("prom-account");

    if (method === "chivo") {
      label.innerText = "Número de Chivo Wallet (Teléfono o DUI):";
      input.placeholder = "Ej. 7265-9216 o 05123456-7";
    } else if (method === "strike") {
      label.innerText = "Dirección Lightning Strike:";
      input.placeholder = "Ej. tuusuario@strike.me";
    } else if (method === "blink") {
      label.innerText = "Dirección Lightning Blink:";
      input.placeholder = "Ej. tuusuario@blink.sv";
    } else {
      label.innerText = "Cuenta Banco Agrícola / Transferencia 365:";
      input.placeholder = "Cuenta # 3115009033 o Teléfono 365";
    }
  }

  function registerPromoterClient(e) {
    e.preventDefault();
    const name = document.getElementById("prom-name").value.trim();
    const phone = document.getElementById("prom-phone").value.trim();
    const rawCode = document.getElementById("prom-code").value.trim();
    const method = document.getElementById("prom-method").value;
    const account = document.getElementById("prom-account").value.trim();

    fetch("/api/promoters/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: name,
        phone: phone,
        code: rawCode,
        payment_method: method,
        payment_account: account
      })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        currentRegisteredCode = data.code;
        document.getElementById("success-code-disp").innerText = data.code;
        document.getElementById("promoter-registered-success").classList.remove("d-none");
        alert("¡Felicidades! Tu código " + data.code + " ha sido creado. Ya puedes compartirlo en WhatsApp.");
      } else {
        alert("Atención: " + data.msg);
      }
    });
  }

  function copyPromoterWhatsAppText() {
    const code = currentRegisteredCode || "REF-TUCODIGO";
    const appUrl = window.location.origin + "/comprar?ref=" + code;

    let msg = `🎓 *PREPÁRATE PARA LA PRUEBA AVANZO 2026 - EL SALVADOR*\n\n`;
    msg += `Compañeros, les recomiendo este *Simulador Oficial de la Prueba AVANZO* con cronómetro, explicaciones paso a paso de cada pregunta y Boleta Oficial en PDF con QR.\n\n`;
    msg += `💵 *Precios súper accesibles:*\n`;
    msg += `• Pase Individual Ilimitado: *$1.00 USD*\n`;
    msg += `• Toda la Sección del Aula: *$5.00 USD*\n\n`;
    msg += `📲 *Para activar tu acceso:* Entra al enlace y usa mi código de recomendación:\n`;
    msg += `👉 ${appUrl}\n`;
    msg += `🔑 Código de Promotor: \`${code}\`\n\n`;
    msg += `¡100% recomendado para sacar Nivel Avanzado en bachillerato!`;

    navigator.clipboard.writeText(msg);
    alert("¡Mensaje listo para WhatsApp copiado al portapapeles con tu enlace y código!");
  }

  function lookupPromoterStats() {
    const code = document.getElementById("lookup-code-input").value.trim().toUpperCase();
    if (!code) {
      alert("Ingresa tu código de promotor.");
      return;
    }

    fetch(`/api/promoters/lookup/${encodeURIComponent(code)}`)
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        const p = data.promoter;
        document.getElementById("stat-prom-name").innerText = `${p.name} (${p.code})`;
        document.getElementById("stat-prom-account").innerText = `${p.payment_method.toUpperCase()}: ${p.payment_account}`;
        document.getElementById("stat-prom-total").innerText = `$${p.total_earned_usd.toFixed(2)}`;
        document.getElementById("stat-prom-pending").innerText = `$${p.pending_payout_usd.toFixed(2)}`;

        const tbody = document.getElementById("stat-commissions-table");
        tbody.innerHTML = "";

        if (p.history && p.history.length > 0) {
          p.history.forEach(c => {
            tbody.innerHTML += `
              <tr>
                <td>${c.created_at.substring(5, 16)}</td>
                <td><span class="badge ${c.plan_type === 'seccion' ? 'bg-warning text-dark' : 'bg-primary'}">${c.plan_type}</span></td>
                <td>$${c.sale_amount.toFixed(2)}</td>
                <td class="fw-bold text-success">+$${c.commission_amount.toFixed(2)}</td>
                <td><span class="badge ${c.status === 'PAGADO' ? 'bg-success' : 'bg-warning text-dark'}">${c.status}</span></td>
              </tr>
            `;
          });
        } else {
          tbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted">Aún no registras ventas recomendadas. ¡Comparte tu código para empezar a ganar!</td></tr>`;
        }

        document.getElementById("lookup-results-box").classList.remove("d-none");
      } else {
        alert("No se encontró ningún promotor con ese código. Verifica que esté bien escrito.");
      }
    });
  }
</script>
{% endblock %}