<?php
/**
 * Noumbu - Checkout Page
 * Full checkout flow: plan selection, billing details, and payment.
 */
require_once __DIR__ . '/config/app.php';

// ── Auth check (inline, no redirect) ────────────────────────────────────────
$is_authenticated = is_logged_in();
$user = $is_authenticated ? current_user() : null;

// ── Get plan from URL ───────────────────────────────────────────────────────
$plan_slug = trim($_GET['plan'] ?? '');
$periodo   = in_array($_GET['periodo'] ?? '', ['mensual', 'anual'], true)
    ? $_GET['periodo']
    : 'mensual';

// Query plan by slug, or fall back to default (profesional)
$plan = null;
if (!empty($plan_slug)) {
    $stmt = db()->prepare('SELECT * FROM planes WHERE slug = ? AND activo = 1 LIMIT 1');
    $stmt->execute([$plan_slug]);
    $plan = $stmt->fetch();
}

if (!$plan) {
    // If no slug or not found, try to load all active plans and show the popular one
    if (!empty($plan_slug)) {
        // Slug was provided but not found, redirect to pricing
        redirect('/#precios');
    }
    // No slug provided -- load the popular plan by default
    $stmt = db()->prepare('SELECT * FROM planes WHERE activo = 1 ORDER BY es_popular DESC, orden ASC LIMIT 1');
    $stmt->execute();
    $plan = $stmt->fetch();

    if (!$plan) {
        redirect('/#precios');
    }
}

// ── Load all active plans (for plan selector) ───────────────────────────────
$stmt = db()->prepare('SELECT * FROM planes WHERE activo = 1 ORDER BY orden ASC');
$stmt->execute();
$planes = $stmt->fetchAll();

// ── Load all active addons ──────────────────────────────────────────────────
$stmt = db()->prepare('SELECT * FROM addons WHERE activo = 1 ORDER BY precio_mensual ASC');
$stmt->execute();
$addons = $stmt->fetchAll();

// ── Calculate initial pricing ───────────────────────────────────────────────
$plan_price = ($periodo === 'anual') ? (float) $plan['precio_anual'] : (float) $plan['precio_mensual'];
$igv_rate   = (float) $plan['igv_porcentaje'];
$pricing    = calculate_igv($plan_price, $igv_rate);

// ── Decode plan features ────────────────────────────────────────────────────
$servicios  = json_decode($plan['servicios'] ?? '[]', true) ?: [];
$no_incluye = json_decode($plan['no_incluye'] ?? '[]', true) ?: [];

// ── Page vars ───────────────────────────────────────────────────────────────
$page_title = 'Checkout - Noumbu';
$body_class = 'checkout-page';
$extra_head = '
<meta name="robots" content="noindex, nofollow">
<style>
    .checkout-layout { padding: 0 1rem 80px; min-height: 100vh; }

    #checkoutMainContent { padding-top: 2.5rem; }

    /* Step indicator */
    .checkout-steps { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; }
    .checkout-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 0.9375rem; color: var(--gray-dark); position: relative; }
    .checkout-step .step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-lighter); color: var(--gray-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; }
    .checkout-step.active .step-num { background: var(--gold, #c9a961); color: #fff; }
    .checkout-step.active { color: var(--black); font-weight: 600; }
    .checkout-step-arrow { color: var(--gray-light); margin: 0 0.25rem; }

    /* Main grid */
    .checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; max-width: 1080px; margin: 0 auto; }

    /* Plan summary card */
    .plan-summary-card { background: var(--gray-lightest, #f9fafb); border-radius: 12px; padding: 2rem; border: 2px solid var(--gold, #c9a961); margin-bottom: 2rem; }
    .plan-summary-card h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.5rem; }
    .plan-summary-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }
    .plan-summary-price .amount { background: var(--gradient-gold-vivid, linear-gradient(135deg, #c9a961, #e8c547)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .plan-features-list { list-style: none; padding: 0; margin: 0; }
    .plan-features-list li { padding: 0.3rem 0; font-size: 0.9rem; color: var(--gray-darker); }
    .plan-features-list li::before { content: "\2713"; color: var(--gold, #c9a961); margin-right: 0.5rem; font-weight: 700; }

    /* Periodo toggle */
    .periodo-toggle { display: flex; background: var(--gray-lightest, #f3f4f6); border-radius: 8px; padding: 4px; margin-bottom: 2rem; max-width: 300px; }
    .periodo-btn { flex: 1; padding: 0.625rem 1rem; text-align: center; border-radius: 6px; cursor: pointer; font-size: 0.9375rem; font-weight: 500; transition: all 0.2s; border: none; background: transparent; font-family: var(--font-body); }
    .periodo-btn.active { background: var(--black, #1a1f36); color: #fff; font-weight: 600; }
    .periodo-discount { font-size: 0.75rem; color: var(--gold, #c9a961); font-weight: 600; display: block; }

    /* Addons */
    .addons-section { margin-bottom: 2rem; }
    .addons-section h3 { font-family: var(--font-heading); font-size: 1.125rem; margin-bottom: 1rem; }
    .addon-checkbox { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--gray-lighter); border-radius: 8px; margin-bottom: 0.75rem; cursor: pointer; transition: border-color 0.2s; }
    .addon-checkbox:hover { border-color: var(--gold, #c9a961); }
    .addon-checkbox.checked { border-color: var(--gold, #c9a961); background: rgba(201,169,97,0.04); }
    .addon-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold, #c9a961); cursor: pointer; }
    .addon-info { flex: 1; }
    .addon-name { font-weight: 600; font-size: 0.9375rem; }
    .addon-desc { font-size: 0.8125rem; color: var(--gray-dark); margin-top: 0.15rem; }
    .addon-price { font-weight: 700; color: var(--gold, #c9a961); white-space: nowrap; }

    /* Billing form */
    .billing-section { margin-bottom: 2rem; }
    .billing-section h3 { font-family: var(--font-heading); font-size: 1.125rem; margin-bottom: 1rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--black); }
    .form-group input, .form-group select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--gray-light, #d1d5db); border-radius: 8px; font-size: 0.9375rem; font-family: var(--font-body); transition: border-color 0.2s; box-sizing: border-box; }
    .form-group input:focus, .form-group select:focus { border-color: var(--gold, #c9a961); outline: none; box-shadow: 0 0 0 3px rgba(201,169,97,0.15); }

    /* Price summary sidebar */
    .price-summary { background: var(--gray-lightest, #f9fafb); border-radius: 12px; padding: 2rem; border: 1px solid var(--gray-lighter); position: sticky; top: 100px; align-self: start; }
    .price-summary h3 { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 1.5rem; }
    .summary-row { display: flex; justify-content: space-between; padding: 0.625rem 0; font-size: 0.9375rem; border-bottom: 1px solid var(--gray-lighter); }
    .summary-row.addons-row { color: var(--gray-dark); font-size: 0.875rem; }
    .summary-row.total-row { border-bottom: none; border-top: 2px solid var(--black, #1a1f36); margin-top: 0.5rem; padding-top: 1rem; font-size: 1.25rem; font-weight: 700; }
    .summary-total-amount { font-family: var(--font-display); font-size: 1.5rem; background: var(--gradient-gold-vivid, linear-gradient(135deg, #c9a961, #e8c547)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    /* Payment methods */
    .payment-methods { margin-top: 1.5rem; }
    .payment-methods h4 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem; }
    .payment-method { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--gray-lighter); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: border-color 0.2s; }
    .payment-method:hover { border-color: var(--gold, #c9a961); }
    .payment-method.selected { border-color: var(--gold, #c9a961); background: rgba(201,169,97,0.04); }
    .payment-method input[type="radio"] { accent-color: var(--gold, #c9a961); }
    .payment-method-label { font-weight: 500; font-size: 0.9375rem; }
    .payment-method-desc { font-size: 0.8125rem; color: var(--gray-dark); }

    /* Submit button */
    .checkout-submit { width: 100%; padding: 1rem; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; color: #fff; background: var(--black, #1a1f36); border: 2px solid var(--black, #1a1f36); border-radius: 50px; cursor: pointer; transition: all 0.3s; margin-top: 1.5rem; }
    .checkout-submit:hover { background: var(--gradient-gold-vivid, linear-gradient(135deg, #c9a961, #e8c547)); border-color: var(--gold, #c9a961); color: var(--black); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,169,97,0.35); }
    .checkout-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

    .checkout-secure-note { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin-top: 1rem; font-size: 0.8125rem; color: var(--gray-dark); }
    .checkout-legal { text-align: center; margin-top: 1rem; font-size: 0.8125rem; color: var(--gray-dark); }
    .checkout-legal a { color: var(--gold, #c9a961); }

    @media (max-width: 768px) {
        .checkout-grid { grid-template-columns: 1fr; }
        .price-summary { position: static; }
        .form-row { grid-template-columns: 1fr; }
        .checkout-steps { flex-wrap: wrap; }
    }
</style>';

include __DIR__ . '/includes/header.php';
?>

<main class="checkout-layout">
  <div class="container">

    <?php if (!$is_authenticated): ?>
    <!-- Auth Section -->
    <div class="checkout-auth-section" id="checkoutAuthSection">
      <div class="checkout-auth-card">
        <div class="checkout-auth-header">
          <h2>Para continuar, inicia sesion o crea una cuenta</h2>
          <p>Tu informacion esta segura y protegida</p>
        </div>

        <div class="checkout-auth-tabs">
          <button type="button" class="checkout-auth-tab active" data-tab="login">Iniciar Sesion</button>
          <button type="button" class="checkout-auth-tab" data-tab="register">Crear Cuenta</button>
        </div>

        <div class="checkout-auth-alert" id="authAlert" style="display:none;"></div>

        <!-- Login Form -->
        <form class="checkout-auth-form" id="authLoginForm">
          <div class="auth-group">
            <label for="loginEmail">Correo electronico</label>
            <input type="email" id="loginEmail" name="email" required autocomplete="email" placeholder="tu@correo.com">
          </div>
          <div class="auth-group">
            <label for="loginPassword">Contrasena</label>
            <input type="password" id="loginPassword" name="password" required autocomplete="current-password" placeholder="Tu contrasena">
          </div>
          <div class="auth-group" style="text-align:right;">
            <a href="/auth/recuperar.php" class="auth-link" target="_blank" style="font-size:0.875rem;">Olvidaste tu contrasena?</a>
          </div>
          <button type="submit" class="btn-block" id="btnLogin">Iniciar Sesion</button>
        </form>

        <!-- Register Form -->
        <form class="checkout-auth-form" id="authRegisterForm" style="display:none;">
          <div class="auth-row-2">
            <div class="auth-group">
              <label for="regNombre">Nombre</label>
              <input type="text" id="regNombre" name="nombre" required autocomplete="given-name" placeholder="Tu nombre">
            </div>
            <div class="auth-group">
              <label for="regApellido">Apellido</label>
              <input type="text" id="regApellido" name="apellido" required autocomplete="family-name" placeholder="Tu apellido">
            </div>
          </div>
          <div class="auth-group">
            <label for="regEmail">Correo electronico</label>
            <input type="email" id="regEmail" name="email" required autocomplete="email" placeholder="tu@correo.com">
          </div>
          <div class="auth-group">
            <label for="regTelefono">Telefono</label>
            <input type="tel" id="regTelefono" name="telefono" required autocomplete="tel" placeholder="+51 999 999 999">
          </div>
          <div class="auth-row-2">
            <div class="auth-group">
              <label for="regPassword">Contrasena</label>
              <input type="password" id="regPassword" name="password" required autocomplete="new-password" placeholder="Min 8 caracteres">
              <small class="auth-hint">Min 8 caracteres, 1 mayuscula, 1 numero</small>
            </div>
            <div class="auth-group">
              <label for="regConfirmar">Confirmar</label>
              <input type="password" id="regConfirmar" name="confirmar_password" required autocomplete="new-password" placeholder="Repite contrasena">
            </div>
          </div>
          <div class="auth-group">
            <label class="auth-checkbox">
              <input type="checkbox" id="regTerminos" name="acepta_terminos" value="1">
              <span>Acepto los <a href="/terminos-servicio.html" target="_blank" class="auth-link">terminos de servicio</a></span>
            </label>
          </div>
          <div class="auth-group">
            <label class="auth-checkbox">
              <input type="checkbox" id="regPrivacidad" name="acepta_privacidad" value="1">
              <span>Acepto la <a href="/politica-privacidad.html" target="_blank" class="auth-link">politica de privacidad</a></span>
            </label>
          </div>
          <button type="submit" class="btn-block" id="btnRegister">Crear Cuenta y Continuar</button>
        </form>
      </div>
    </div>
    <?php endif; ?>

    <div id="checkoutMainContent" <?= !$is_authenticated ? 'style="display:none;opacity:0;"' : '' ?>>

    <!-- Step Indicator -->
    <div class="checkout-steps">
      <div class="checkout-step active" id="step1">
        <span class="step-num">1</span> Plan
      </div>
      <span class="checkout-step-arrow">&rsaquo;</span>
      <div class="checkout-step" id="step2">
        <span class="step-num">2</span> Datos
      </div>
      <span class="checkout-step-arrow">&rsaquo;</span>
      <div class="checkout-step" id="step3">
        <span class="step-num">3</span> Pago
      </div>
    </div>

    <div class="checkout-grid">

      <!-- LEFT COLUMN: Plan, Addons, Billing -->
      <div class="checkout-left">

        <!-- Plan Summary Card -->
        <div class="plan-summary-card" id="planSummaryCard">
          <h3 id="planNameDisplay"><?= sanitize($plan['nombre']) ?></h3>
          <div class="plan-summary-price">
            <span class="amount" id="planPriceDisplay"><?= format_price($plan_price) ?></span>
            <span id="planPeriodDisplay">/ <?= $periodo === 'anual' ? 'ano' : 'mes' ?></span>
          </div>
          <?php if (!empty($servicios)): ?>
          <ul class="plan-features-list">
            <?php foreach (array_slice($servicios, 0, 6) as $servicio): ?>
              <li><?= sanitize($servicio) ?></li>
            <?php endforeach; ?>
            <?php if (count($servicios) > 6): ?>
              <li>y <?= count($servicios) - 6 ?> servicios mas...</li>
            <?php endif; ?>
          </ul>
          <?php endif; ?>
          <div style="margin-top:1rem;">
            <a href="/#precios" style="font-size:0.875rem;color:var(--gold,#c9a961);">Cambiar plan</a>
          </div>
        </div>

        <!-- Periodo Toggle -->
        <div class="periodo-toggle" id="periodoToggle">
          <button type="button" class="periodo-btn <?= $periodo === 'mensual' ? 'active' : '' ?>" data-periodo="mensual">Mensual</button>
          <button type="button" class="periodo-btn <?= $periodo === 'anual' ? 'active' : '' ?>" data-periodo="anual">
            Anual
            <span class="periodo-discount">Ahorra 20%</span>
          </button>
        </div>

        <!-- Addons Checkboxes -->
        <?php if (!empty($addons)): ?>
        <div class="addons-section">
          <h3>Servicios Adicionales</h3>
          <?php foreach ($addons as $addon): ?>
          <label class="addon-checkbox" data-addon-id="<?= (int) $addon['id'] ?>" data-addon-price="<?= (float) $addon['precio_mensual'] ?>">
            <input type="checkbox" name="addons[]" value="<?= (int) $addon['id'] ?>">
            <div class="addon-info">
              <div class="addon-name"><?= sanitize($addon['nombre']) ?></div>
              <?php if (!empty($addon['descripcion'])): ?>
              <div class="addon-desc"><?= sanitize($addon['descripcion']) ?></div>
              <?php endif; ?>
            </div>
            <div class="addon-price"><?= format_price((float) $addon['precio_mensual']) ?>/mes</div>
          </label>
          <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <!-- Billing Details Form -->
        <div class="billing-section">
          <h3>Datos de Facturacion</h3>
          <div class="form-row">
            <div class="form-group">
              <label for="billingEmpresa">Empresa</label>
              <input type="text" id="billingEmpresa" name="empresa" value="<?= sanitize($user ? ($user['empresa'] ?? '') : '') ?>" placeholder="Nombre de tu empresa">
            </div>
            <div class="form-group">
              <label for="billingTipoDoc">Tipo de Comprobante</label>
              <select id="billingTipoDoc" name="tipo_documento">
                <option value="boleta">Boleta</option>
                <option value="factura">Factura</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="billingRuc">RUC</label>
              <input type="text" id="billingRuc" name="ruc" value="<?= sanitize($user ? ($user['ruc'] ?? '') : '') ?>" placeholder="20XXXXXXXXX" maxlength="11">
            </div>
            <div class="form-group">
              <label for="billingDni">DNI</label>
              <input type="text" id="billingDni" name="dni" value="<?= sanitize($user ? ($user['dni'] ?? '') : '') ?>" placeholder="XXXXXXXX" maxlength="8">
            </div>
          </div>
          <div class="form-group" id="razonSocialGroup" style="display:none;">
            <label for="billingRazonSocial">Razon Social</label>
            <input type="text" id="billingRazonSocial" name="razon_social" placeholder="Razon social de la empresa">
          </div>
        </div>
      </div>

      <!-- RIGHT COLUMN: Price Summary & Payment -->
      <div class="checkout-right">
        <div class="price-summary">
          <h3>Resumen del Pedido</h3>

          <div class="summary-row">
            <span>Plan <strong id="summaryPlanName"><?= sanitize($plan['nombre']) ?></strong></span>
            <span id="summaryPlanPrice"><?= format_price($plan_price) ?></span>
          </div>
          <div class="summary-row addons-row" id="summaryAddonsRow" style="display:none;">
            <span>Addons</span>
            <span id="summaryAddonsPrice">S/ 0.00</span>
          </div>
          <div class="summary-row">
            <span>Subtotal</span>
            <span id="summarySubtotal"><?= format_price($pricing['subtotal']) ?></span>
          </div>
          <div class="summary-row">
            <span>IGV (<?= (int) $igv_rate ?>%)</span>
            <span id="summaryIgv"><?= format_price($pricing['igv']) ?></span>
          </div>
          <div class="summary-row total-row">
            <span>Total</span>
            <span class="summary-total-amount" id="summaryTotal"><?= format_price($pricing['total']) ?></span>
          </div>

          <!-- Payment Method Selection -->
          <div class="payment-methods">
            <h4>Metodo de Pago</h4>
            <label class="payment-method selected" data-method="culqi">
              <input type="radio" name="metodo_pago" value="culqi" checked>
              <div>
                <div class="payment-method-label">Tarjeta de Credito / Debito</div>
                <div class="payment-method-desc">Visa, Mastercard, AmEx, Diners</div>
              </div>
            </label>
            <label class="payment-method" data-method="transferencia">
              <input type="radio" name="metodo_pago" value="transferencia">
              <div>
                <div class="payment-method-label">Transferencia Bancaria</div>
                <div class="payment-method-desc">BCP, BBVA, Interbank, Scotiabank</div>
              </div>
            </label>
            <label class="payment-method" data-method="yape">
              <input type="radio" name="metodo_pago" value="yape">
              <div>
                <div class="payment-method-label">Yape / Plin</div>
                <div class="payment-method-desc">Pago rapido desde tu celular</div>
              </div>
            </label>
          </div>

          <!-- Submit -->
          <button type="button" id="btnCheckout" class="checkout-submit">
            Confirmar Pedido - <span id="btnTotalDisplay"><?= format_price($pricing['total']) ?></span>
          </button>

          <div class="checkout-secure-note">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
            Pago seguro procesado por Culqi
          </div>
          <div class="checkout-legal">
            Al confirmar, aceptas nuestros
            <a href="/terminos-servicio.html">Terminos</a> y
            <a href="/politica-privacidad.html">Politica de Privacidad</a>.
          </div>
        </div>
      </div>

    </div>
    </div><!-- #checkoutMainContent -->
  </div>
</main>

<?php
$extra_js = '
<script src="https://checkout.culqi.com/js/v4"></script>
<script>
/**
 * Noumbu Checkout - Client-side logic
 */
(function() {
    "use strict";

    // ── Plan data from server ─────────────────────────────────────────────
    const plansData = ' . json_encode(array_map(function($p) {
        return [
            'id'              => (int) $p['id'],
            'slug'            => $p['slug'],
            'nombre'          => $p['nombre'],
            'precio_mensual'  => (float) $p['precio_mensual'],
            'precio_anual'    => (float) $p['precio_anual'],
            'igv_porcentaje'  => (float) $p['igv_porcentaje'],
        ];
    }, $planes), JSON_UNESCAPED_UNICODE) . ';

    function getCsrfToken() {
        return document.querySelector("meta[name=csrf-token]")?.content || "";
    }

    // ── State ─────────────────────────────────────────────────────────────
    let state = {
        planId:      ' . (int) $plan['id'] . ',
        periodo:     "' . $periodo . '",
        addons:      [],
        addonsTotal: 0,
        metodoPago:  "culqi",
        tarjetaId:   0,
    };

    // ── Helpers ───────────────────────────────────────────────────────────
    function formatPrice(n) { return "S/ " + n.toFixed(2); }

    function getPlanData() {
        return plansData.find(p => p.id === state.planId) || plansData[0];
    }

    function calculatePricing() {
        const plan = getPlanData();
        const planPrice = state.periodo === "anual" ? plan.precio_anual : plan.precio_mensual;
        const subtotal = planPrice + state.addonsTotal;
        const igv = Math.round(subtotal * plan.igv_porcentaje) / 100;
        const total = Math.round((subtotal + igv) * 100) / 100;
        return { planPrice, subtotal, igv, total };
    }

    function updateUI() {
        const plan = getPlanData();
        const p = calculatePricing();

        document.getElementById("planNameDisplay").textContent = plan.nombre;
        document.getElementById("planPriceDisplay").textContent = formatPrice(p.planPrice);
        document.getElementById("planPeriodDisplay").textContent = "/ " + (state.periodo === "anual" ? "ano" : "mes");

        document.getElementById("summaryPlanName").textContent = plan.nombre;
        document.getElementById("summaryPlanPrice").textContent = formatPrice(p.planPrice);
        document.getElementById("summarySubtotal").textContent = formatPrice(p.subtotal);
        document.getElementById("summaryIgv").textContent = formatPrice(p.igv);
        document.getElementById("summaryTotal").textContent = formatPrice(p.total);
        document.getElementById("btnTotalDisplay").textContent = formatPrice(p.total);

        const addonsRow = document.getElementById("summaryAddonsRow");
        if (state.addonsTotal > 0) {
            addonsRow.style.display = "flex";
            document.getElementById("summaryAddonsPrice").textContent = formatPrice(state.addonsTotal);
        } else {
            addonsRow.style.display = "none";
        }
    }

    // ── Periodo toggle ────────────────────────────────────────────────────
    document.querySelectorAll(".periodo-btn").forEach(btn => {
        btn.addEventListener("click", function() {
            document.querySelectorAll(".periodo-btn").forEach(b => b.classList.remove("active"));
            this.classList.add("active");
            state.periodo = this.dataset.periodo;
            updateUI();
        });
    });

    // ── Addon checkboxes ──────────────────────────────────────────────────
    document.querySelectorAll(".addon-checkbox").forEach(label => {
        const cb = label.querySelector("input[type=checkbox]");
        cb.addEventListener("change", function() {
            const id = parseInt(label.dataset.addonId);
            const price = parseFloat(label.dataset.addonPrice);

            if (this.checked) {
                label.classList.add("checked");
                state.addons.push(id);
                state.addonsTotal += price;
            } else {
                label.classList.remove("checked");
                state.addons = state.addons.filter(a => a !== id);
                state.addonsTotal -= price;
            }
            state.addonsTotal = Math.round(state.addonsTotal * 100) / 100;
            updateUI();
        });
    });

    // ── Payment method selection ──────────────────────────────────────────
    document.querySelectorAll(".payment-method").forEach(method => {
        method.addEventListener("click", function() {
            document.querySelectorAll(".payment-method").forEach(m => m.classList.remove("selected"));
            this.classList.add("selected");
            this.querySelector("input[type=radio]").checked = true;
            state.metodoPago = this.dataset.method;
        });
    });

    // ── Tipo documento toggle ─────────────────────────────────────────────
    const tipoDocSelect = document.getElementById("billingTipoDoc");
    const razonSocialGroup = document.getElementById("razonSocialGroup");
    if (tipoDocSelect) {
        tipoDocSelect.addEventListener("change", function() {
            razonSocialGroup.style.display = this.value === "factura" ? "block" : "none";
        });
    }

    // ── Step indicator ────────────────────────────────────────────────────
    function setActiveStep(n) {
        document.querySelectorAll(".checkout-step").forEach((s, i) => {
            s.classList.toggle("active", i < n);
        });
    }

    // ── Notification ──────────────────────────────────────────────────────
    function showNotification(msg, type) {
        const existing = document.querySelector(".checkout-notification");
        if (existing) existing.remove();

        const el = document.createElement("div");
        el.className = "checkout-notification";
        el.style.cssText = "position:fixed;top:100px;right:20px;padding:1rem 1.5rem;max-width:400px;" +
            "background:" + (type === "success" ? "#121212" : "#ef4444") + ";color:white;" +
            "border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,0.2);z-index:10000;" +
            "font-weight:600;font-size:0.9375rem;border-left:4px solid " + (type === "success" ? "#c9a961" : "#fca5a5") + ";";
        el.textContent = msg;
        document.body.appendChild(el);
        setTimeout(() => { el.style.opacity = "0"; el.style.transition = "opacity 0.3s"; setTimeout(() => el.remove(), 300); }, 6000);
    }

    // ── Submit checkout ───────────────────────────────────────────────────
    const btnCheckout = document.getElementById("btnCheckout");

    btnCheckout.addEventListener("click", async function() {
        setActiveStep(2);

        const tipoDoc = document.getElementById("billingTipoDoc").value;
        const ruc = document.getElementById("billingRuc").value.trim();
        const razonSocial = document.getElementById("billingRazonSocial").value.trim();

        if (tipoDoc === "factura" && (!ruc || ruc.length !== 11)) {
            showNotification("Ingresa un RUC valido de 11 digitos para factura", "error");
            return;
        }
        if (tipoDoc === "factura" && !razonSocial) {
            showNotification("Ingresa la razon social para factura", "error");
            return;
        }

        btnCheckout.disabled = true;
        btnCheckout.textContent = "Procesando...";

        try {
            // Step 1: Create pending order via /api/checkout.php
            const checkoutRes = await fetch("/api/checkout.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": getCsrfToken(),
                },
                body: JSON.stringify({
                    plan_id: state.planId,
                    periodo: state.periodo,
                    addons: state.addons,
                    metodo_pago: state.metodoPago,
                    tipo_documento: tipoDoc,
                    ruc_cliente: ruc,
                    razon_social: razonSocial,
                }),
            });

            const checkoutData = await checkoutRes.json();

            if (!checkoutData.success) {
                showNotification(checkoutData.message || "Error al crear la orden", "error");
                btnCheckout.disabled = false;
                updateUI();
                btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
                return;
            }

            const referencia = checkoutData.referencia;
            setActiveStep(3);

            // Step 2: Process payment based on method
            if (state.metodoPago === "saved_card" && state.tarjetaId > 0) {
                // Charge saved card directly
                processSavedCardCharge(referencia, state.tarjetaId);
            } else if (state.metodoPago === "culqi") {
                // Open Culqi checkout
                initCulqiPayment(referencia, checkoutData.total);
            } else {
                // For transferencia/yape, just show success with reference
                showNotification("Orden creada exitosamente. Referencia: " + referencia + ". Completa el pago y enviaremos confirmacion.", "success");
                btnCheckout.textContent = "Orden creada - " + referencia;
                setTimeout(() => { window.location.href = "/panel/"; }, 4000);
            }

        } catch (err) {
            showNotification("Error de conexion. Intenta de nuevo.", "error");
            btnCheckout.disabled = false;
            btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
        }
    });

    // ── Culqi Payment ─────────────────────────────────────────────────────
    const CULQI_PUBLIC_KEY = ' . json_encode(env('CULQI_PUBLIC_KEY', '')) . ';

    function initCulqiPayment(referencia, total) {
        if (typeof Culqi === "undefined") {
            showNotification("Error: No se pudo cargar la pasarela de pago. Recarga la pagina e intenta de nuevo.", "error");
            btnCheckout.disabled = false;
            btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
            return;
        }

        Culqi.publicKey = CULQI_PUBLIC_KEY;
        Culqi.settings({
            title: "Noumbu",
            currency: "PEN",
            description: "Pago " + referencia,
            amount: Math.round(total * 100),
        });
        Culqi.options({
            lang: "es",
            installments: false,
            style: {
                logo: "https://noumbu.com/logo.png",
                bannerColor: "#121212",
                buttonBackground: "#c9a961",
                menuColor: "#c9a961",
                linksColor: "#c9a961",
                buttonText: "Pagar",
                buttonTextColor: "#ffffff",
                priceColor: "#c9a961",
            },
        });

        // Store referencia for callback
        window._noumbuReferencia = referencia;
        Culqi.open();
    }

    async function processCharge(referencia, token) {
        try {
            const res = await fetch("/api/crear-cargo.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": getCsrfToken(),
                },
                body: JSON.stringify({
                    culqi_token: token,
                    referencia: referencia,
                }),
            });

            const data = await res.json();

            if (data.success) {
                showNotification("Pago procesado exitosamente. Recibiras un email de confirmacion.", "success");
                btnCheckout.textContent = "Pago completado";
                setTimeout(() => { window.location.href = "/panel/suscripcion.php"; }, 3000);
            } else {
                showNotification(data.message || "Error al procesar el pago", "error");
                btnCheckout.disabled = false;
                btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
            }
        } catch (err) {
            showNotification("Error de conexion al procesar el pago.", "error");
            btnCheckout.disabled = false;
            btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
        }
    }

    // Culqi global callback
    window.culqi = function() {
        if (typeof Culqi !== "undefined" && Culqi.token) {
            processCharge(window._noumbuReferencia, Culqi.token.id);
        } else if (typeof Culqi !== "undefined" && Culqi.error) {
            showNotification("Error en el pago: " + (Culqi.error?.user_message || "Intenta de nuevo"), "error");
            btnCheckout.disabled = false;
            btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
        }
    };

    // ── Saved Card Charge ───────────────────────────────────────────────
    async function processSavedCardCharge(referencia, tarjetaId) {
        try {
            const res = await fetch("/api/crear-cargo.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": getCsrfToken(),
                },
                body: JSON.stringify({
                    tarjeta_id: tarjetaId,
                    referencia: referencia,
                }),
            });
            const data = await res.json();
            if (data.success) {
                showNotification("Pago procesado con tu tarjeta guardada.", "success");
                btnCheckout.textContent = "Pago completado";
                setTimeout(() => { window.location.href = "/panel/suscripcion.php"; }, 3000);
            } else {
                showNotification(data.message || "Error al procesar el pago", "error");
                btnCheckout.disabled = false;
                btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
            }
        } catch (err) {
            showNotification("Error de conexion al procesar el pago.", "error");
            btnCheckout.disabled = false;
            btnCheckout.innerHTML = "Confirmar Pedido - <span id=\"btnTotalDisplay\">" + formatPrice(calculatePricing().total) + "</span>";
        }
    }

    // ── Load Saved Cards ────────────────────────────────────────────────
    async function loadSavedCards() {
        try {
            const res = await fetch("/api/tarjetas.php", {
                method: "GET",
                headers: { "Accept": "application/json" },
            });
            const data = await res.json();
            if (data.success && data.tarjetas && data.tarjetas.length > 0) {
                renderSavedCardsOption(data.tarjetas);
            }
        } catch (err) {
            // Silently fail — user can still pay with new card
        }
    }

    function renderSavedCardsOption(cards) {
        const paymentMethods = document.querySelector(".payment-methods");
        if (!paymentMethods) return;

        const defaultCard = cards.find(c => c.es_predeterminada) || cards[0];

        const label = document.createElement("label");
        label.className = "payment-method";
        label.dataset.method = "saved_card";

        let descHtml = (defaultCard.marca || "Tarjeta") + " **** " + defaultCard.ultimos_4;
        let selectHtml = "";
        if (cards.length > 1) {
            selectHtml = " <select id=\"savedCardSelect\" style=\"margin-left:0.5rem;padding:2px 8px;border-radius:4px;border:1px solid #d1d5db;font-size:0.8125rem;\">";
            cards.forEach(c => {
                selectHtml += "<option value=\"" + c.id + "\"" + (c.es_predeterminada ? " selected" : "") + ">";
                selectHtml += (c.marca || "Tarjeta") + " **** " + c.ultimos_4;
                selectHtml += "</option>";
            });
            selectHtml += "</select>";
        }

        label.innerHTML = "<input type=\"radio\" name=\"metodo_pago\" value=\"saved_card\">" +
            "<div><div class=\"payment-method-label\">Tarjeta guardada</div>" +
            "<div class=\"payment-method-desc\">" + descHtml + selectHtml + "</div></div>";

        // Insert as first option
        const firstMethod = paymentMethods.querySelector(".payment-method");
        paymentMethods.insertBefore(label, firstMethod);

        // Auto-select saved card
        label.click();

        label.addEventListener("click", function() {
            document.querySelectorAll(".payment-method").forEach(m => m.classList.remove("selected"));
            this.classList.add("selected");
            this.querySelector("input[type=radio]").checked = true;
            state.metodoPago = "saved_card";
            const sel = document.getElementById("savedCardSelect");
            state.tarjetaId = sel ? parseInt(sel.value) : defaultCard.id;
        });

        // Set initial state
        state.metodoPago = "saved_card";
        state.tarjetaId = defaultCard.id;

        // Update on select change
        const sel = document.getElementById("savedCardSelect");
        if (sel) {
            sel.addEventListener("change", function(e) {
                e.stopPropagation();
                state.tarjetaId = parseInt(this.value);
            });
        }
    }

    // ── Auth Section Logic ──────────────────────────────────────────────
    const authSection = document.getElementById("checkoutAuthSection");
    if (authSection) {
        const mainContent = document.getElementById("checkoutMainContent");

        // Tab switching
        document.querySelectorAll(".checkout-auth-tab").forEach(tab => {
            tab.addEventListener("click", function() {
                document.querySelectorAll(".checkout-auth-tab").forEach(t => t.classList.remove("active"));
                this.classList.add("active");
                const target = this.dataset.tab;
                document.getElementById("authLoginForm").style.display = target === "login" ? "block" : "none";
                document.getElementById("authRegisterForm").style.display = target === "register" ? "block" : "none";
                hideAuthAlert();
            });
        });

        function showAuthAlert(msg, type) {
            const el = document.getElementById("authAlert");
            el.style.display = "block";
            el.className = "checkout-auth-alert " + (type === "error" ? "auth-alert-error" : "auth-alert-success");
            el.textContent = msg;
        }
        function hideAuthAlert() {
            document.getElementById("authAlert").style.display = "none";
        }

        // Login form submit
        document.getElementById("authLoginForm").addEventListener("submit", async function(e) {
            e.preventDefault();
            const btn = document.getElementById("btnLogin");
            btn.disabled = true;
            btn.textContent = "Iniciando sesion...";
            hideAuthAlert();

            try {
                const res = await fetch("/api/auth-login.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": getCsrfToken(),
                    },
                    body: JSON.stringify({
                        email: document.getElementById("loginEmail").value,
                        password: document.getElementById("loginPassword").value,
                    }),
                });
                const data = await res.json();

                if (data.success) {
                    document.querySelector("meta[name=csrf-token]").content = data.csrf_token;
                    onAuthSuccess(data.user);
                } else {
                    showAuthAlert(data.message, "error");
                    btn.disabled = false;
                    btn.textContent = "Iniciar Sesion";
                }
            } catch (err) {
                showAuthAlert("Error de conexion. Intenta de nuevo.", "error");
                btn.disabled = false;
                btn.textContent = "Iniciar Sesion";
            }
        });

        // Register form submit
        document.getElementById("authRegisterForm").addEventListener("submit", async function(e) {
            e.preventDefault();
            const btn = document.getElementById("btnRegister");
            btn.disabled = true;
            btn.textContent = "Creando cuenta...";
            hideAuthAlert();

            try {
                const res = await fetch("/api/auth-register.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": getCsrfToken(),
                    },
                    body: JSON.stringify({
                        nombre: document.getElementById("regNombre").value,
                        apellido: document.getElementById("regApellido").value,
                        email: document.getElementById("regEmail").value,
                        telefono: document.getElementById("regTelefono").value,
                        password: document.getElementById("regPassword").value,
                        confirmar_password: document.getElementById("regConfirmar").value,
                        acepta_terminos: document.getElementById("regTerminos").checked,
                        acepta_privacidad: document.getElementById("regPrivacidad").checked,
                    }),
                });
                const data = await res.json();

                if (data.success) {
                    document.querySelector("meta[name=csrf-token]").content = data.csrf_token;
                    onAuthSuccess(data.user);
                } else {
                    showAuthAlert(data.message, "error");
                    btn.disabled = false;
                    btn.textContent = "Crear Cuenta y Continuar";
                }
            } catch (err) {
                showAuthAlert("Error de conexion. Intenta de nuevo.", "error");
                btn.disabled = false;
                btn.textContent = "Crear Cuenta y Continuar";
            }
        });

        // On successful auth
        function onAuthSuccess(userData) {
            authSection.style.transition = "opacity 0.3s ease, transform 0.3s ease";
            authSection.style.opacity = "0";
            authSection.style.transform = "translateY(-20px)";

            setTimeout(() => {
                authSection.style.display = "none";

                mainContent.style.display = "block";
                mainContent.style.transition = "opacity 0.4s ease";
                requestAnimationFrame(() => {
                    mainContent.style.opacity = "1";
                });

                // Prefill billing fields
                if (userData.empresa) document.getElementById("billingEmpresa").value = userData.empresa;
                if (userData.ruc) document.getElementById("billingRuc").value = userData.ruc;
                if (userData.dni) document.getElementById("billingDni").value = userData.dni;

                // Load saved cards
                loadSavedCards();
            }, 350);
        }
    }

    // If already authenticated, try to load saved cards
    if (!authSection) {
        loadSavedCards();
    }

    // Init
    updateUI();
})();
</script>';

$simple_footer = true;
include __DIR__ . '/includes/footer.php';
?>
