<?= $this->extend('layouts/main') ?>

<?= $this->section('title') ?>Membresía<?= $this->endSection() ?>

<?= $this->section('content') ?>
<section class="section-block">
    <div class="section-heading">
        <div>
            <span class="eyebrow">Membresía CinePlex</span>
            <h2>Elige tu plan</h2>
        </div>
    </div>

    <div class="membership-box">
        <p>Elige entre las opciones disponibles. Al seleccionar <strong>Silver</strong> o <strong>Gold</strong> se abrirá un panel de confirmación.</p>
    </div>

    <div class="card-grid">
        <?php $logged = session()->get('isLoggedIn') ? 1 : 0; ?>
        <?php foreach ($membresias as $m): ?>
            <article class="promo-card">
                <h3><?= esc($m->nombre) ?></h3>
                <p>Descuento: <?= esc($m->descuento_pct) ?>%</p>
                <p>Puntos por S/ <?= esc($m->puntos_por_sol) ?></p>
                <p><strong>S/ <?= number_format($m->precio_mensual, 2) ?></strong></p>
                <?php if (strtolower($m->nombre) === 'silver' || strtolower($m->nombre) === 'gold'): ?>
                    <button class="btn btn-primary choose-membership" data-id="<?= $m->id_membresia ?>" data-name="<?= esc($m->nombre) ?>" data-price="<?= $m->precio_mensual ?>" data-logged="<?= $logged ?>">Elegir <?= esc($m->nombre) ?></button>
                <?php else: ?>
                    <a href="<?= base_url('registro') ?>" class="btn btn-primary">Elegir <?= esc($m->nombre) ?></a>
                <?php endif; ?>
            </article>
        <?php endforeach; ?>
    </div>
</section>

<!-- Sidebar overlay -->
<div id="membershipOverlay" class="sidebar-overlay" style="display:none;"></div>
<div id="membershipSidebar" class="membership-sidebar" style="display:none;">
    <button id="closeSidebar" class="close-sidebar">×</button>
    <div class="sidebar-content">
        <h3 id="ms-title">Confirmar membresía</h3>
        <p id="ms-desc">Confirma tu suscripción.</p>
        <p id="ms-price"></p>
        <div class="sidebar-actions">
            <button id="confirmMembership" class="btn btn-primary">Confirmar</button>
            <button id="cancelMembership" class="btn btn-secondary">Cancelar</button>
        </div>
    </div>
</div>  

<script>
document.addEventListener('DOMContentLoaded', function(){
    const overlay = document.getElementById('membershipOverlay');
    const sidebar = document.getElementById('membershipSidebar');
    const closeBtn = document.getElementById('closeSidebar');
    const confirmBtn = document.getElementById('confirmMembership');
    let selectedId = null;
    let selectedName = '';
    let selectedPrice = 0;
    let logged = 0;

    document.querySelectorAll('.choose-membership').forEach(btn => {
        btn.addEventListener('click', function(){
            selectedId = this.dataset.id;
            selectedName = this.dataset.name;
            selectedPrice = this.dataset.price;
            logged = parseInt(this.dataset.logged, 10);
            document.getElementById('ms-title').textContent = 'Confirmar ' + selectedName + ' Membership';
            document.getElementById('ms-desc').textContent = 'Vas a suscribirte al plan ' + selectedName + '.';
            document.getElementById('ms-price').textContent = 'Precio mensual: S/ ' + parseFloat(selectedPrice).toFixed(2);
            overlay.style.display = 'block';
            sidebar.style.display = 'block';
        });
    });

    function closeSidebar(){
        overlay.style.display = 'none';
        sidebar.style.display = 'none';
    }

    closeBtn.addEventListener('click', closeSidebar);
    overlay.addEventListener('click', closeSidebar);
    document.getElementById('cancelMembership').addEventListener('click', closeSidebar);

    confirmBtn.addEventListener('click', function(){
        if(logged === 0){
            // No está logueado → ir a registro
            window.location.href = '<?= base_url('registro') ?>';
            return;
        }
        // Usuario logueado → redirigir a la página de pago simulado de la membresía.
        window.location.href = '<?= base_url('membresia/pago') ?>/' + selectedId;
    });
});
</script>

<?= $this->endSection() ?>
