<?php
require_once("controladores/checkout.php");

// Parametros de origen (precarga desde el landing del producto)
$slugProducto = strtolower(trim($_GET['producto'] ?? ''));
$planInicial  = strtolower(trim($_GET['plan'] ?? ''));
$periodoInicial = strtolower(trim($_GET['periodo'] ?? 'mensual'));
if (!in_array($periodoInicial, ['mensual', 'anual'])) {
    $periodoInicial = 'mensual';
}

$productos = productosActivos();

// Producto preseleccionado (por slug) o el primero activo
$productoSel = productoPorSlug($slugProducto);
if (empty($productoSel) && !empty($productos)) {
    $productoSel = $productos[0];
}
$idProductoSel = $productoSel['id'] ?? 0;

// Planes activos agrupados por producto (para render dinamico en cliente)
$planesPorProducto = [];
try {
    $planes = $database->select('planes', [
        'id', 'id_producto', 'clave', 'nombre', 'periodo', 'precio', 'recomendado', 'caracteristicas'
    ], [
        'activo' => 1,
        'ORDER' => ['orden' => 'ASC']
    ]);
    foreach ($planes as $p) {
        $planesPorProducto[$p['id_producto']][] = [
            'id'        => intval($p['id']),
            'clave'     => $p['clave'],
            'nombre'    => $p['nombre'],
            'periodo'   => $p['periodo'],
            'precio'    => floatval($p['precio']),
            'recomendado' => intval($p['recomendado']),
            'features'  => $p['caracteristicas'] != '' ? explode('|', $p['caracteristicas']) : []
        ];
    }
} catch (Exception $e) {
    $planesPorProducto = [];
}

$productosJs = [];
foreach ($productos as $p) {
    $productosJs[] = ['id' => intval($p['id']), 'nombre' => $p['nombre'], 'icono' => $p['icono']];
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>Alkes · Contratación</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
  <link rel="stylesheet" href="assets/css/checkout.css">
  <?php echo $jaxon->getScript(true); ?>
</head>
<body>

  <nav class="cko-nav">
    <div class="container" style="max-width:980px;margin:0 auto;padding-left:16px;padding-right:16px;">
      <a class="cko-brand" href="#"><img src="assets/img/logohd.png" alt="Alkes" onerror="this.style.display='none'"> Alkes</a>
      <span class="secure"><i class="bi bi-shield-lock"></i> Contratación segura</span>
    </div>
  </nav>

  <div class="cko-head">
    <h1>Crea tu cuenta y elige tu plan</h1>
    <p>Confirma tu correo, elige el plan y listo. Pago seguro con Stripe.</p>
  </div>

  <!-- Stepper -->
  <div class="cko-steps">
    <div class="cko-step active" id="step1"><span class="dot">1</span><span class="lbl d-none">Cuenta</span></div>
    <div class="cko-bar" id="bar1"></div>
    <div class="cko-step" id="step2"><span class="dot">2</span></div>
    <div class="cko-bar" id="bar2"></div>
    <div class="cko-step" id="step3"><span class="dot">3</span></div>
  </div>

  <div class="cko-wrap">
    <div class="cko-grid">
      <div>

        <!-- PASO 1: Cuenta + confirmar correo -->
        <div class="paso activo card-cko" id="paso-cuenta">
          <h3>Tu cuenta</h3>
          <p class="sub">Con estos datos crearemos tu cuenta una vez confirmado el pago.</p>
          <form id="formCuenta" autocomplete="off" onsubmit="return false;">
            <div class="f-group">
              <label class="f-label" for="nombre">Nombre / Empresa</label>
              <input class="f-control" type="text" id="nombre" name="nombre" placeholder="Mi empresa S.A. de C.V.">
            </div>
            <div class="f-group">
              <label class="f-label" for="correo">Correo</label>
              <input class="f-control" type="email" id="correo" name="correo" placeholder="tu@correo.com">
            </div>
            <div class="f-row">
              <div class="f-group">
                <label class="f-label" for="password">Contraseña</label>
                <input class="f-control" type="password" id="password" name="password" placeholder="Mínimo 8 caracteres">
              </div>
              <div class="f-group">
                <label class="f-label" for="password2">Confirmar contraseña</label>
                <input class="f-control" type="password" id="password2" name="password2" placeholder="Repite la contraseña">
              </div>
            </div>
            <div class="f-group">
              <label class="f-check">
                <input type="checkbox" id="terminos" name="terminos">
                <span>Acepto los <a href="#" target="_blank">términos</a> y el <a href="#" target="_blank">aviso de privacidad</a>.</span>
              </label>
            </div>
            <div class="paso-nav">
              <span></span>
              <button type="button" class="btn-cko btn-primary-cko" id="btnContinuarCuenta" onclick="continuarCuenta();">
                Continuar <i class="bi bi-arrow-right"></i>
              </button>
            </div>
          </form>
        </div>

        <!-- PASO 1b: PIN -->
        <div class="paso card-cko" id="paso-pin">
          <h3>Confirma tu correo</h3>
          <p class="sub">Enviamos un código de 6 dígitos a <strong id="pinCorreo"></strong>.</p>
          <div class="pin-boxes" id="pinBoxes">
            <input maxlength="1" inputmode="numeric" pattern="[0-9]*">
            <input maxlength="1" inputmode="numeric" pattern="[0-9]*">
            <input maxlength="1" inputmode="numeric" pattern="[0-9]*">
            <input maxlength="1" inputmode="numeric" pattern="[0-9]*">
            <input maxlength="1" inputmode="numeric" pattern="[0-9]*">
            <input maxlength="1" inputmode="numeric" pattern="[0-9]*">
          </div>
          <div class="pin-resend">¿No llegó? <a onclick="reenviarPin();">Reenviar código</a></div>
          <div class="paso-nav">
            <button type="button" class="btn-cko btn-ghost-cko" onclick="irAPaso(1);"><i class="bi bi-arrow-left"></i> Volver</button>
            <button type="button" class="btn-cko btn-accent-cko" onclick="confirmarPin();">Confirmar <i class="bi bi-check2"></i></button>
          </div>
        </div>

        <!-- PASO 2: Producto + plan + cupón -->
        <div class="paso card-cko" id="paso-plan">
          <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;">
            <span class="prod-chip"><i class="bi bi-box"></i> <span id="chipProducto">Producto</span></span>
            <div class="periodo-toggle" id="periodoToggle">
              <button type="button" data-periodo="mensual" class="on">Mensual</button>
              <button type="button" data-periodo="anual">Anual −17%</button>
            </div>
          </div>

          <p class="sub" style="margin-bottom:10px;">Elige el producto y el plan que mejor te queda.</p>
          <div class="prod-grid" id="prodGrid"></div>

          <div class="planes-grid" id="planesGrid"></div>

          <div class="cupon-row">
            <input class="f-control" type="text" id="cupon" placeholder="¿Tienes un cupón?">
            <button type="button" class="btn-cko btn-ghost-cko" onclick="aplicarCupon();">Aplicar</button>
          </div>
          <div id="cuponMsg"></div>

          <div class="paso-nav">
            <button type="button" class="btn-cko btn-ghost-cko" onclick="irAPaso(1);"><i class="bi bi-arrow-left"></i> Volver</button>
            <button type="button" class="btn-cko btn-primary-cko" id="btnIrPago" onclick="irAPaso(3);">Continuar <i class="bi bi-arrow-right"></i></button>
          </div>
        </div>

        <!-- PASO 3: Pago -->
        <div class="paso card-cko" id="paso-pago">
          <h3>Pago</h3>
          <p class="sub">Te llevamos a la página segura de Stripe para completar el pago.</p>
          <div style="display:flex;align-items:center;gap:10px;background:#f3f6fd;border-radius:12px;padding:14px;margin-bottom:14px;">
            <i class="bi bi-credit-card-2-front" style="font-size:1.6rem;color:var(--primary);"></i>
            <div style="font-size:.9rem;color:#3a3f4a;">Aceptamos tarjetas de crédito y débito. Tus datos de tarjeta los procesa <strong>Stripe</strong>; nunca tocan nuestros servidores.</div>
          </div>
          <div class="paso-nav">
            <button type="button" class="btn-cko btn-ghost-cko" onclick="irAPaso(2);"><i class="bi bi-arrow-left"></i> Volver</button>
            <button type="button" class="btn-cko btn-accent-cko" onclick="pagar();"><i class="bi bi-lock"></i> Pagar ahora</button>
          </div>
        </div>

      </div>

      <!-- Resumen -->
      <div>
        <div class="card-cko resumen">
          <h4>Resumen</h4>
          <div class="linea"><span id="rProducto">Producto</span><span id="rPlan">—</span></div>
          <div class="linea muted"><span>Periodo</span><span id="rPeriodo">Mensual</span></div>
          <div class="linea"><span>Subtotal</span><span id="rSubtotal">$0</span></div>
          <div class="linea desc" id="rDescWrap" style="display:none;"><span id="rDescLbl">Cupón</span><span id="rDesc">−$0</span></div>
          <hr>
          <div class="total"><span>Total</span><span id="rTotal">$0</span></div>
          <button type="button" class="btn-cko btn-accent-cko btn-block" style="margin-top:14px;" onclick="avanzarDesdeResumen();">Continuar</button>
          <div class="trust"><i class="bi bi-lock"></i> Pago seguro con Stripe</div>
        </div>
      </div>

    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
  <script>
    var PRODUCTOS = <?php echo json_encode($productosJs, JSON_UNESCAPED_UNICODE); ?>;
    var PLANES = <?php echo json_encode($planesPorProducto, JSON_UNESCAPED_UNICODE); ?>;

    var estado = {
      paso: 1,
      idProducto: <?php echo intval($idProductoSel); ?>,
      idPlan: 0,
      planClave: <?php echo json_encode($planInicial); ?>,
      periodo: <?php echo json_encode($periodoInicial); ?>,
      idRegistro: 0,
      correoVerificado: false,
      cupon: null
    };

    function money(n) { return '$' + Number(n).toLocaleString('es-MX', {minimumFractionDigits: 0, maximumFractionDigits: 2}); }

    // ── Stepper ──
    function pintarStepper() {
      var s = estado.paso;
      [1,2,3].forEach(function(i){
        var el = document.getElementById('step'+i);
        el.classList.remove('active','done');
        if (i < s) el.classList.add('done');
        else if (i === s) el.classList.add('active');
      });
      document.getElementById('bar1').classList.toggle('fill', s >= 2);
      document.getElementById('bar2').classList.toggle('fill', s >= 3);
    }

    function irAPaso(n) {
      // Gating: no avanzar a plan/pago sin lo previo (se reforzará en backend)
      if (n >= 2 && !estado.correoVerificado) { mostrarSoloPaso('cuenta'); estado.paso = 1; pintarStepper(); return; }
      if (n === 3 && !estado.idPlan) { Swal.fire({icon:'info',title:'Elige un plan',confirmButtonColor:'#061c6b'}); return; }
      estado.paso = n;
      mostrarSoloPaso(n === 1 ? 'cuenta' : (n === 2 ? 'plan' : 'pago'));
      pintarStepper();
      window.scrollTo({top:0,behavior:'smooth'});
    }

    function mostrarSoloPaso(id) {
      ['cuenta','pin','plan','pago'].forEach(function(p){
        document.getElementById('paso-'+p).classList.toggle('activo', p === id);
      });
    }

    // ── Producto + planes ──
    function pintarProductos() {
      var g = document.getElementById('prodGrid');
      g.innerHTML = '';
      PRODUCTOS.forEach(function(p){
        var div = document.createElement('div');
        div.className = 'prod-card' + (p.id === estado.idProducto ? ' sel' : '');
        div.innerHTML = '<i class="bi ' + (p.icono || 'bi-box') + '"></i><span class="pn">' + p.nombre + '</span>';
        div.onclick = function(){ estado.idProducto = p.id; estado.idPlan = 0; pintarProductos(); pintarPlanes(); pintarResumen(); };
        g.appendChild(div);
        if (p.id === estado.idProducto) {
          document.getElementById('chipProducto').textContent = p.nombre;
          document.getElementById('rProducto').textContent = p.nombre;
        }
      });
    }

    function planesVisibles() {
      var lista = PLANES[estado.idProducto] || [];
      return lista.filter(function(pl){
        if (pl.periodo === 'unico') return true;
        return pl.periodo === estado.periodo;
      });
    }

    function pintarPlanes() {
      var g = document.getElementById('planesGrid');
      g.innerHTML = '';
      var lista = planesVisibles();
      if (!lista.length) {
        g.innerHTML = '<p style="color:#6c757d;font-size:.9rem;">Aún no hay planes configurados para este producto.</p>';
        return;
      }
      // Preselección por clave si viene del landing
      if (!estado.idPlan && estado.planClave) {
        var pre = lista.find(function(pl){ return pl.clave === estado.planClave; });
        if (pre) estado.idPlan = pre.id;
      }
      lista.forEach(function(pl){
        var card = document.createElement('div');
        card.className = 'plan-card' + (pl.id === estado.idPlan ? ' sel' : '');
        var per = pl.periodo === 'unico' ? ' único' : (pl.periodo === 'anual' ? '/año' : '/mes');
        var feats = (pl.features || []).slice(0,6).map(function(f){ return '<li><i class="bi bi-check-circle-fill"></i>' + f + '</li>'; }).join('');
        card.innerHTML =
          (pl.recomendado ? '<span class="badge-rec">Recomendado</span>' : '') +
          '<div class="pname">' + pl.nombre + '</div>' +
          '<div class="pprice">' + money(pl.precio) + '<small>' + per + '</small></div>' +
          (pl.periodo === 'anual' ? '<span class="ahorro">Ahorra 17%</span>' : '') +
          '<ul>' + feats + '</ul>';
        card.onclick = function(){ estado.idPlan = pl.id; pintarPlanes(); pintarResumen(); };
        g.appendChild(card);
      });
      pintarResumen();
    }

    function planActual() {
      var lista = PLANES[estado.idProducto] || [];
      return lista.find(function(pl){ return pl.id === estado.idPlan; }) || null;
    }

    function pintarResumen() {
      var pl = planActual();
      document.getElementById('rPeriodo').textContent = estado.periodo === 'anual' ? 'Anual' : 'Mensual';
      if (!pl) {
        document.getElementById('rPlan').textContent = '—';
        document.getElementById('rSubtotal').textContent = money(0);
        document.getElementById('rTotal').textContent = money(0);
        document.getElementById('rDescWrap').style.display = 'none';
        return;
      }
      document.getElementById('rPlan').textContent = pl.nombre;
      document.getElementById('rPeriodo').textContent = pl.periodo === 'unico' ? 'Pago único' : (pl.periodo === 'anual' ? 'Anual' : 'Mensual');
      var subtotal = pl.precio;
      var desc = 0;
      if (estado.cupon) {
        desc = estado.cupon.tipo === 'porcentaje' ? subtotal * (estado.cupon.valor/100) : Math.min(estado.cupon.valor, subtotal);
        document.getElementById('rDescWrap').style.display = 'flex';
        document.getElementById('rDescLbl').textContent = 'Cupón ' + estado.cupon.codigo;
        document.getElementById('rDesc').textContent = '−' + money(desc);
      } else {
        document.getElementById('rDescWrap').style.display = 'none';
      }
      document.getElementById('rSubtotal').textContent = money(subtotal);
      document.getElementById('rTotal').textContent = money(Math.max(0, subtotal - desc));
    }

    // ── Toggle periodo ──
    document.getElementById('periodoToggle').addEventListener('click', function(e){
      var b = e.target.closest('button'); if (!b) return;
      estado.periodo = b.getAttribute('data-periodo');
      this.querySelectorAll('button').forEach(function(x){ x.classList.toggle('on', x === b); });
      estado.idPlan = 0;
      pintarPlanes();
    });

    // ── PIN: auto-avance ──
    (function(){
      var boxes = document.querySelectorAll('#pinBoxes input');
      boxes.forEach(function(inp, i){
        inp.addEventListener('input', function(){
          this.value = this.value.replace(/[^0-9]/g,'');
          if (this.value && i < boxes.length-1) boxes[i+1].focus();
        });
        inp.addEventListener('keydown', function(e){
          if (e.key === 'Backspace' && !this.value && i > 0) boxes[i-1].focus();
        });
        inp.addEventListener('paste', function(e){
          var t = (e.clipboardData.getData('text')||'').replace(/[^0-9]/g,'').slice(0,6);
          if (t) { e.preventDefault(); t.split('').forEach(function(c,k){ if(boxes[k]) boxes[k].value=c; }); boxes[Math.min(t.length,5)].focus(); }
        });
      });
    })();
    function leerPin() { return Array.from(document.querySelectorAll('#pinBoxes input')).map(function(b){return b.value;}).join(''); }

    // ── Acciones (server: Tandas 2-4) ──
    function continuarCuenta() {
      var f = jaxon.getFormValues('formCuenta');
      f.id_producto = estado.idProducto;
      Jaxoncheckout.registrarPaso1(f);
      // En Tanda 2, registrarPaso1 (al éxito) llamará: mostrarPasoPin(correo, idRegistro)
    }
    window.mostrarPasoPin = function(correo, idRegistro) {
      estado.idRegistro = idRegistro;
      document.getElementById('pinCorreo').textContent = correo;
      mostrarSoloPaso('pin');
    };
    function reenviarPin() { Jaxoncheckout.reenviarPin({id_registro: estado.idRegistro}); }
    function confirmarPin() {
      var pin = leerPin();
      if (pin.length !== 6) { Swal.fire({icon:'warning',title:'Código incompleto',confirmButtonColor:'#061c6b'}); return; }
      Jaxoncheckout.verificarPin({id_registro: estado.idRegistro, pin: pin});
      // En Tanda 2, al éxito: window.correoConfirmado()
    }
    window.correoConfirmado = function() { estado.correoVerificado = true; irAPaso(2); };

    function aplicarCupon() {
      var c = document.getElementById('cupon').value.trim();
      if (!c) return;
      Jaxoncheckout.validarCupon(c, estado.idPlan);
      // En Tanda 3, al éxito: window.cuponAplicado({codigo,tipo,valor})
    }
    window.cuponAplicado = function(cupon) {
      estado.cupon = cupon;
      document.getElementById('cuponMsg').innerHTML = '<span class="chip-ok"><i class="bi bi-check-circle"></i> ' + cupon.codigo + ' aplicado</span>';
      pintarResumen();
    };
    window.cuponInvalido = function(msg) {
      estado.cupon = null;
      document.getElementById('cuponMsg').innerHTML = '<span class="chip-err"><i class="bi bi-x-circle"></i> ' + (msg||'Cupón inválido') + '</span>';
      pintarResumen();
    };

    function avanzarDesdeResumen() {
      if (!estado.correoVerificado) { irAPaso(1); return; }
      if (!estado.idPlan) { irAPaso(2); return; }
      irAPaso(3);
    }
    function pagar() {
      if (!estado.idPlan) { Swal.fire({icon:'info',title:'Elige un plan',confirmButtonColor:'#061c6b'}); return; }
      Jaxoncheckout.crearSesionPago(estado.idPlan);
      // En Tanda 4: redirige a Stripe Checkout
    }

    // ── Init ──
    pintarStepper();
    pintarProductos();
    pintarPlanes();
    pintarResumen();
  </script>
</body>
</html>
