<?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>Contrata en unos pasos</h1>
    <p>Elige el producto y el plan, confirma tu correo y paga de forma segura con Stripe.</p>
  </div>

  <!-- Stepper (4 pasos) -->
  <div class="cko-steps">
    <div class="cko-step active" id="step1"><span class="dot">1</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 class="cko-bar" id="bar3"></div>
    <div class="cko-step" id="step4"><span class="dot">4</span></div>
  </div>

  <div class="cko-wrap">
    <div class="cko-grid">
      <div>

        <!-- PASO 1: Producto -->
        <div class="paso activo card-cko" id="paso-producto">
          <h3>Elige tu producto</h3>
          <p class="sub">Selecciona el servicio que quieres contratar.</p>
          <div class="prod-grid" id="prodGrid"></div>
          <div class="paso-nav">
            <span></span>
            <button type="button" class="btn-cko btn-primary-cko" onclick="irAPaso(2);">Continuar <i class="bi bi-arrow-right"></i></button>
          </div>
        </div>

        <!-- PASO 2: 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>

          <h3>Elige tu plan</h3>
          <p class="sub" style="margin-bottom:10px;">El plan que mejor se ajuste a ti. Puedes cambiarlo después.</p>
          <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" onclick="irAPaso(3);">Continuar <i class="bi bi-arrow-right"></i></button>
          </div>
        </div>

        <!-- PASO 3: Cuenta (identificar -> login/registro -> OTP) -->
        <div class="paso card-cko" id="paso-cuenta">

          <!-- 3a: correo -->
          <div class="sub-cuenta activo" id="cuenta-correo">
            <h3>Tu cuenta</h3>
            <p class="sub">Ingresa tu correo. Si ya tienes cuenta, inicias sesión; si no, la creamos.</p>
            <div class="f-group">
              <label class="f-label" for="idCorreo">Correo</label>
              <input class="f-control" type="email" id="idCorreo" name="correo" placeholder="tu@correo.com" value="<?php echo htmlspecialchars($_SESSION['checkout_correo'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
            </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-primary-cko" onclick="identificar();">Continuar <i class="bi bi-arrow-right"></i></button>
            </div>
          </div>

          <!-- 3b: iniciar sesión -->
          <div class="sub-cuenta" id="cuenta-login">
            <h3>Inicia sesión</h3>
            <p class="sub">Reconocimos tu correo <strong id="loginCorreo"></strong>. Escribe tu contraseña.</p>
            <form id="formLogin" autocomplete="off" onsubmit="return false;">
              <div class="f-group">
                <label class="f-label" for="logPassword">Contraseña</label>
                <input class="f-control" type="password" id="logPassword" name="password" placeholder="Tu contraseña">
              </div>
            </form>
            <div class="paso-nav">
              <button type="button" class="btn-cko btn-ghost-cko" onclick="mostrarSubCuenta('correo');"><i class="bi bi-arrow-left"></i> Otro correo</button>
              <button type="button" class="btn-cko btn-primary-cko" onclick="continuarLogin();">Continuar <i class="bi bi-arrow-right"></i></button>
            </div>
          </div>

          <!-- 3b: registro -->
          <div class="sub-cuenta" id="cuenta-registro">
            <h3>Crea tu cuenta</h3>
            <p class="sub">Crearemos tu cuenta para <strong id="regCorreo"></strong>.</p>
            <form id="formRegistro" 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-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="regTerminos" 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>
            </form>
            <div class="paso-nav">
              <button type="button" class="btn-cko btn-ghost-cko" onclick="mostrarSubCuenta('correo');"><i class="bi bi-arrow-left"></i> Otro correo</button>
              <button type="button" class="btn-cko btn-primary-cko" onclick="crearCuenta();">Crear cuenta <i class="bi bi-arrow-right"></i></button>
            </div>
          </div>

          <!-- 3c: OTP -->
          <div class="sub-cuenta" id="cuenta-otp">
            <h3>Confirma tu correo</h3>
            <p class="sub">Enviamos un código de 6 dígitos a <strong id="otpCorreo"></strong>.</p>
            <div class="pin-boxes" id="otpBoxes">
              <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="reenviarOtp();">Reenviar código</a></div>
            <div class="paso-nav">
              <button type="button" class="btn-cko btn-ghost-cko" onclick="mostrarSubCuenta('correo');"><i class="bi bi-arrow-left"></i> Volver</button>
              <button type="button" class="btn-cko btn-accent-cko" onclick="confirmarOtp();">Confirmar <i class="bi bi-check2"></i></button>
            </div>
          </div>

        </div>

        <!-- PASO 4: 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(3);"><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); ?>,
      modo: '',
      suscriptorListo: false,
      cupon: null
    };

    function money(n) { return '$' + Number(n).toLocaleString('es-MX', {minimumFractionDigits: 0, maximumFractionDigits: 2}); }

    // ── Stepper (4 pasos) ──
    function pintarStepper() {
      var s = estado.paso;
      [1,2,3,4].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);
      document.getElementById('bar3').classList.toggle('fill', s >= 4);
    }

    function irAPaso(n) {
      if (n >= 3 && !estado.idPlan) { Swal.fire({icon:'info',title:'Elige un plan',confirmButtonColor:'#061c6b'}); return; }
      if (n === 4 && !estado.suscriptorListo) { irAPaso(3); return; }
      estado.paso = n;
      mostrarSoloPaso(n === 1 ? 'producto' : (n === 2 ? 'plan' : (n === 3 ? 'cuenta' : 'pago')));
      if (n === 3 && !estado.suscriptorListo) { mostrarSubCuenta('correo'); }
      pintarStepper();
      window.scrollTo({top:0,behavior:'smooth'});
    }

    function mostrarSoloPaso(id) {
      ['producto','plan','cuenta','pago'].forEach(function(p){
        document.getElementById('paso-'+p).classList.toggle('activo', p === id);
      });
    }

    function mostrarSubCuenta(cual) {
      ['correo','login','registro','otp'].forEach(function(p){
        document.getElementById('cuenta-'+p).classList.toggle('activo', p === cual);
      });
    }

    // ── 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;
      }
      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();
    });

    // ── OTP: auto-avance ──
    (function(){
      var boxes = document.querySelectorAll('#otpBoxes 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 leerOtp() { return Array.from(document.querySelectorAll('#otpBoxes input')).map(function(b){return b.value;}).join(''); }

    // ── Cuenta: identificar / login / registro / OTP ──
    function identificar() {
      var correo = (document.getElementById('idCorreo').value || '').trim();
      if (!correo) { Swal.fire({icon:'warning',title:'Escribe tu correo',confirmButtonColor:'#061c6b'}); return; }
      Jaxoncheckout.identificar(correo);
    }
    window.identificacionResuelta = function(modo, correo) {
      estado.modo = modo;
      if (modo === 'login') {
        document.getElementById('loginCorreo').textContent = correo;
        mostrarSubCuenta('login');
      } else {
        document.getElementById('regCorreo').textContent = correo;
        mostrarSubCuenta('registro');
      }
    };
    function continuarLogin() {
      Jaxoncheckout.iniciarSesion(jaxon.getFormValues('formLogin'));
    }
    function crearCuenta() {
      Jaxoncheckout.registrarSuscriptor(jaxon.getFormValues('formRegistro'));
    }
    window.mostrarOtp = function(correo) {
      document.getElementById('otpCorreo').textContent = correo;
      mostrarSubCuenta('otp');
    };
    function reenviarOtp() { Jaxoncheckout.reenviarOtp(); }
    function confirmarOtp() {
      var pin = leerOtp();
      if (pin.length !== 6) { Swal.fire({icon:'warning',title:'Código incompleto',confirmButtonColor:'#061c6b'}); return; }
      Jaxoncheckout.verificarOtp({pin: pin});
    }
    window.sesionIniciada = function() {
      estado.suscriptorListo = true;
      irAPaso(4);
    };

    // ── Cupón ──
    function aplicarCupon() {
      var c = document.getElementById('cupon').value.trim();
      if (!c) return;
      Jaxoncheckout.validarCupon(c, estado.idPlan);
    }
    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();
    };

    // ── Resumen / pago ──
    function avanzarDesdeResumen() {
      if (!estado.idPlan) { irAPaso(2); return; }
      if (!estado.suscriptorListo) { irAPaso(3); return; }
      irAPaso(4);
    }
    function pagar() {
      if (!estado.idPlan) { Swal.fire({icon:'info',title:'Elige un plan',confirmButtonColor:'#061c6b'}); return; }
      Jaxoncheckout.crearSesionPago(estado.idPlan);
    }

    // ── Init ──
    pintarStepper();
    pintarProductos();
    pintarPlanes();
    pintarResumen();
  </script>
</body>
</html>
