Tul xxx Tul

Viewing: dashboard.php

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

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


<?php $this->section('content'); ?>
<div class="container mt-5">
    <!-- Título -->
    <h2 class="mb-4 text-center text-primary fw-bold">
        <i class="bi bi-calendar-check-fill"></i> Mis Membresías
    </h2>

    <?php if (empty($memberships)): ?>
        <!-- Sección: Sin membresías -->
        <div class="card text-center shadow-lg border-0 rounded-4 p-4">
            <div class="text-center">
                <img src="https://cdn-icons-png.flaticon.com/512/4076/4076505.png"
                     alt="Sin membresía" width="120" class="mb-3">
            </div>
            <h4 class="fw-bold text-primary">¡Aún no tienes una membresía activa!</h4>
            <p class="text-muted mb-4">
                Disfruta de nuestros beneficios adquiriendo un plan de membresía.
                Accede a clases exclusivas, descuentos y mucho más.
            </p>
            <div class="col-md-4 mx-auto">
                <a href="<?= base_url('planes') ?>" class="btn btn-primary btn-sm">
                    Ver planes <i class="bi bi-arrow-right-circle-fill"></i>
                </a>
            </div>
        </div>

    <?php else: ?>
        <!-- Swiper CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

        <!-- Sección: Slider -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <?php foreach ($memberships as $m): ?>
                    <?php
                        $endDate = new DateTime($m['end_date']);
                        $now = new DateTime();
                        $status = ($endDate >= $now) ? 'Activo' : 'Vencido';
                        $statusClass = ($status === 'Activo') ? 'bg-gradient bg-success' : 'bg-gradient bg-danger';
                        $diasRestantes = $now->diff($endDate)->format('%a');
                    ?>

                    <!-- Tarjeta de Membresía -->
                    <div class="swiper-slide">
                        <div class="card shadow-lg border-0 h-100 rounded-4 overflow-hidden hover-shadow">
                            <!-- Encabezado -->
                            <div class="card-header text-white <?= $statusClass ?> d-flex align-items-center justify-content-between">
                                <h5 class="mb-0 fw-bold">
                                    <i class="bi bi-person-badge-fill me-2"></i>
                                    <?= esc($m['membership_type']) ?> 🎟️
                                </h5>
                                <span class="badge <?= $status === 'Activo' ? 'bg-light text-success' : 'bg-light text-danger' ?> px-3 py-2 rounded-pill fw-bold">
                                    <?= $status === 'Activo' ? '✅ Activo' : '⛔ Vencido' ?>
                                </span>
                            </div>

                            <!-- Cuerpo -->
                            <div class="card-body d-flex flex-column">
                                <p><i class="bi bi-person-fill me-2"></i> <strong>👤 Usuario:</strong> <?= esc($m['user_name']) ?></p>
                                <p><i class="bi bi-calendar-event-fill me-2"></i> <strong>📅 Inicio:</strong> <?= date('d/m/Y', strtotime($m['start_date'])) ?></p>
                                <p><i class="bi bi-calendar-x-fill me-2"></i> <strong>⌛ Fin:</strong> <?= date('d/m/Y', strtotime($m['end_date'])) ?></p>

                                <!-- Descripción -->
                                <?php if (!empty($m['description'])): ?>
                                    <div class="mt-2 p-2 rounded bg-light border">
                                        <p class="text-muted small mb-0">
                                            <i class="bi bi-info-circle me-1"></i> <?= esc($m['description']) ?>
                                        </p>
                                    </div>
                                <?php endif; ?>

                                <!-- Cuenta regresiva -->
                                <?php if ($status === 'Activo'): ?>
                                    <div class="mt-3 p-3 rounded-3 border border-success bg-light text-center">
                                        <strong class="d-block mb-2">⏳ Cuenta regresiva:</strong>
                                        <div class="fs-6 fw-bold text-primary" id="contador-<?= $m['id'] ?>">
                                            🔥 <?= $diasRestantes ?> días restantes
                                        </div>
                                    </div>
                                <?php else: ?>
                                    <p class="text-danger fw-bold mt-3 text-center">❌ Membresía vencida</p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <!-- /Tarjeta de Membresía -->
                <?php endforeach; ?>
            </div>

            <!-- Navegación -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- Paginación -->
            <div class="swiper-pagination"></div>
        </div>
    <?php endif; ?>
</div>
<?php $this->endSection(); ?>


<?php $this->section('js'); ?>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Inicialización del slider -->
<script>
    new Swiper(".mySwiper", {
        slidesPerView: <?= count($memberships) == 1 ? 1 : 1 ?>,
        spaceBetween: 20,
        loop: <?= count($memberships) > 1 ? 'true' : 'false' ?>,
        grabCursor: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            768: { slidesPerView: <?= count($memberships) == 1 ? 1 : 2 ?> },
            1024: { slidesPerView: <?= count($memberships) == 1 ? 1 : 3 ?> }
        }
    });
</script>

<!-- Contadores dinámicos -->
<script>
    <?php foreach ($memberships as $m): ?>
        <?php if (strtotime($m['end_date']) > time()): ?>
        (function() {
            const endDate = new Date("<?= $m['end_date'] ?>").getTime();
            const contador = document.getElementById("contador-<?= $m['id'] ?>");

            const timer = setInterval(() => {
                const now = new Date().getTime();
                const diff = endDate - now;

                if (diff <= 0) {
                    clearInterval(timer);
                    contador.textContent = "¡Vencido!";
                    return;
                }

                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                contador.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s`;
            }, 1000);
        })();
        <?php endif; ?>
    <?php endforeach; ?>
</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