Tul xxx Tul

Viewing: buy.php

<?= $this->extend('layout/principal'); ?>

<?php $this->section('title'); ?>
Bienvenido
<?php $this->endSection(); ?>

<?php $this->section('css'); ?>
<link rel="stylesheet" href="<?= base_url('assets/frontend/css/show.css') ?>">
<?php $this->endSection(); ?>

<?php $this->section('content'); ?>

<!-- ====== Portada Parallax ====== -->
<section class="hero-parallax d-flex align-items-center text-white" id="inicio">
    <div class="container text-center">
        <h5 class="fw-light mb-3">Paga de forma segura y rápida</h5>
        <h1 class="display-3 fw-bold mb-4">
            <span id="typewriter" class="text-warning"></span>
        </h1>
        <p class="lead mb-5">
        Aceptamos tarjetas de crédito, transferencias y pagos digitales. Gestiona tus membresías fácilmente y sin complicaciones.
        </p>
        <a href="<?= base_url() . '#planes'; ?>" class="btn btn-warning btn-lg px-5 me-3">Planes</a>
        <a href="<?= base_url() . '#contact-section'; ?>" class="btn btn-outline-light btn-lg px-5">Contáctanos</a>
    </div>
</section>

<!-- ====== Bloque Plan ====== -->

<section class="planes-section" id="section-payment">
    <div class="container-grid">

        <!-- ✅ Columna Plan -->
        <div class="plan-column">
            <span class="tag">💪 Planes</span>
            <div class="plan-card">
                <div class="plan-header">
                    <h3><i class="fas fa-dumbbell"></i> <?= esc($plan['name']) ?></h3>
                </div>
                <div class="plan-body">
                    <div><?= $plan['description'] ?></div>

                    <div class="price-box">
                        <span class="duration"><i class="far fa-clock"></i> <?= esc($plan['duration']) ?> días</span>
                        <div class="price">
                            <h3>
                                <?php
                                $currency = get_currency();
                                $amount = (float) $plan['amount'];
                                if (!empty($plan['discount_type']) && !empty($plan['discount_value'])) {
                                    if ($plan['discount_type'] === 'percent') {
                                        $amount -= $amount * ((float) $plan['discount_value'] / 100);
                                    } elseif ($plan['discount_type'] === 'fixed') {
                                        $amount -= (float) $plan['discount_value'];
                                    }
                                }
                                ?>
                                <?= $currency ?> <?= number_format($amount, 2) ?>
                            </h3>
                            <?php if (!empty($plan['discount_value'])): ?>
                                <small><s><?= $currency ?> <?= number_format($plan['amount'], 2) ?></s></small>
                            <?php endif; ?>
                        </div>
                    </div>

                    <?php if (!empty($plan['discount_value'])): ?>
                        <div class="discount">
                            <i class="fas fa-tag"></i>
                            <?= ($plan['discount_type'] === 'percent')
                                ? 'Ahorra ' . esc($plan['discount_value']) . '%'
                                : 'Descuento de ' . $currency . ' ' . number_format($plan['discount_value'], 2) ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- ✅ Columna Login/Register -->
        <div class="auth-column">
            <div class="auth-box">
                <div class="forms-container">

                    <!-- Mercado Pago -->
                    <div class="card mb-3 shadow-sm">
                        <div class="card-header">
                            Mercado Pago
                        </div>
                        <div class="card-body">
                            <div id="walletBrick_container" class="w-100"></div>
                        </div>
                    </div>

                    <!-- PayPal -->
                    <div class="card shadow-sm">
                        <div class="card-header">
                            PayPal
                        </div>
                        <div class="card-body">
                            <div id="paypal-button-container" class="w-100"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


    </div>
</section>

<?php $this->endSection(); ?>

<?php $this->section('js'); ?>
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script src="https://www.paypal.com/sdk/js?client-id=<?= env('PAYPAL_CLIENT_ID'); ?>&currency=<?= env('PAYPAL_MONEDA'); ?>"></script>
<script>
    // Efecto máquina de escribir
    const typewriterText = ["Entrena Fuerte", "Vive Mejor", "Transforma tu Cuerpo"];
    let typeIndex = 0,
        charIndex = 0;
    const typeElement = document.getElementById("typewriter");

    function type() {
        if (charIndex < typewriterText[typeIndex].length) {
            typeElement.textContent += typewriterText[typeIndex].charAt(charIndex);
            charIndex++;
            setTimeout(type, 100);
        } else {
            setTimeout(erase, 2000);
        }
    }

    function erase() {
        if (charIndex > 0) {
            typeElement.textContent = typewriterText[typeIndex].substring(0, charIndex - 1);
            charIndex--;
            setTimeout(erase, 50);
        } else {
            typeIndex = (typeIndex + 1) % typewriterText.length;
            setTimeout(type, 200);
        }
    }

    document.addEventListener("DOMContentLoaded", () => {
        type();
    });

    // Parallax
    window.addEventListener("scroll", () => {
        const scrolled = window.scrollY;
        document.querySelector(".hero-parallax").style.backgroundPositionY = `${scrolled * 0.5}px`;
    });

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    <?php if (!empty($preferenceId)) { ?>

        document.addEventListener('DOMContentLoaded', function() {
            // Configure sua chave pública do Mercado Pago
            const publicKey = "<?= env('MERCADOPAGO_PUBLIC_KEY'); ?>";
            // Configure o ID de preferência que você deve receber do seu backend
            const preferenceId = "<?= $preferenceId; ?>";

            // Inicializa o SDK do Mercado Pago
            const mp = new MercadoPago(publicKey);

            // Cria o botão de pagamento
            const bricksBuilder = mp.bricks();
            const renderWalletBrick = async (bricksBuilder) => {
                await bricksBuilder.create("wallet", "walletBrick_container", {
                    initialization: {
                        preferenceId: preferenceId,
                    }
                });
            };

            renderWalletBrick(bricksBuilder);
        });

    <?php } ?>

    paypal.Buttons({
        // Configura la transacción
        createOrder: (data, actions) => {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        currency_code: '<?= env('PAYPAL_MONEDA') ?>',
                        value: '<?= number_format($amount, 2, ".", "") ?>',
                        breakdown: {
                            item_total: {
                                currency_code: '<?= env('PAYPAL_MONEDA') ?>',
                                value: '<?= number_format($amount, 2, ".", "") ?>'
                            }
                        }
                    },
                    items: [{
                        name: '<?= esc($plan['name']) ?>',
                        unit_amount: {
                            currency_code: '<?= env('PAYPAL_MONEDA') ?>',
                            value: '<?= number_format($amount, 2, ".", "") ?>'
                        },
                        quantity: '1'
                    }]
                }]
            });
        },
        onApprove: (data, actions) => {
            return actions.order.capture().then(function(orderData) {
                registrarPedido(orderData);
            });
        }
    }).render('#paypal-button-container');

    // Función con Fetch
    function registrarPedido(datos) {
        fetch('<?= base_url('membresias/storePaypal'); ?>', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    pedidos: datos,
                    membershipId: '<?= $plan['id'] ?>'
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Error en la petición');
                }
                return response.json();
            })
            .then(data => {
                if (data.status == 'success') {
                    window.location = '<?= base_url('dashboard'); ?>';
                }
                Toast.fire({
                    icon: data.status,
                    title: data.message
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
</script>


<?php $this->endSection(); ?>
User / IP	: 216.73.216.191
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64