<?php

require_once '../app/Controllers/sessions.php';
require_once '../app/Controllers/security_access.php';
require_once '../app/models/user.php';
require_once '../app/Controllers/checkInController.php';
require_once '../app/Controllers/controller_investments.php';
require '../app/Controllers/layouts.php';
ini_set("display_errors", 0);

$transactions = []; // Array para armazenar os dados do banco

// Seleciona as colunas pedidas. Limitei a 20 transações para não sobrecarregar.
$stmtTrans = $pdo->query("SELECT user_id, value FROM transactions WHERE status = 'paid' ORDER BY created_at DESC");
$transactions = $stmtTrans->fetchAll(PDO::FETCH_ASSOC);


// Se o array de transações estiver vazio, adicionamos um aviso para que o slider não fique vazio
if (empty($transactions)) {
    $transactions[] = ['user_id' => 0, 'value' => 0.00, 'message' => 'Nenhuma transação encontrada no banco de dados.'];
}

$cardColors = ['bg-blue-500', 'bg-green-500', 'bg-red-500', 'bg-yellow-500', 'bg-purple-500', 'bg-pink-500'];
$numCards = count($transactions);
?>
<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider de Transações com Autoplay</title>
    <!-- Inclui o CDN do Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        :root {
            --color-primary-dynamic: <?= htmlspecialchars($stmtConfigsPlatformResult['color_primary'] ?: '#FFD65A') ?>;
            --vip-gold: #FFD65A;
            --vip-gold-deep: #B8930C;
            --vip-glow: rgba(255, 214, 90, 0.18);
            --dark-card: rgba(26, 26, 26, 0.86);
            --dark-bg-start: #0a0a0a;
            --dark-bg-end: #050505;
            --card-bg-light: rgba(255, 255, 255, 0.04);
            --muted: #A6A6A6;
            --text-light: #EAEAEA;
            --border-soft: rgba(255, 214, 90, 0.12);
            --color-error: #EF4444;

            /* Novas variáveis para o Check-in */
            --timer-bg: rgba(255, 214, 90, 0.05);
            --timer-text: var(--vip-gold);
        }

        /* Estilo para a pista do slider para garantir a transição suave */
        #slider-track {
            /* Tempo de transição reduzido para 0.7s para um movimento mais fluido no autoplay */
            transition: transform 0.7s ease-in-out;
            will-change: transform;
            /* Otimização de performance */
        }

        /* --- Estilos para cards MENORES e mais juntos --- */
        .card-item {
            /* Em telas pequenas, ocupa 80% da largura (mostra 1 centralizado) */
            min-width: 80%;
            margin-left: 10%;
            margin-right: 10%;
        }

        /* Desktop (a partir de 1024px - 'lg') */
        @media (min-width: 1024px) {
            .card-item {
                /* Exibe 6 cards por vez: 100% / 6 ≈ 16.666% */
                min-width: 16.666%;
                /* Padding interno menor */
                margin: 0;
            }
        }

        /* Tablet/Desktop Pequeno (a partir de 768px - 'md') */
        @media (min-width: 768px) and (max-width: 1023px) {
            .card-item {
                /* Exibe 4 cards por vez em telas médias */
                min-width: 25%;
                margin: 0;
            }
        }

        /* Fim dos ajustes para cards menores */

        /* Estilo para o container dos dados (fundo do card) */
        .card-content {
            height: 100%;
            padding: 1rem;
            /* Padding interno do card */
            border-radius: 0.5rem;
            /* Rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }


        /* VIP Card (top) */
        .vip-top-card {
            background: linear-gradient(90deg, rgba(255, 214, 90, 0.12), rgba(129, 140, 248, 0.08));
            border-radius: 16px;
            padding: 18px;
            margin-bottom: 18px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 214, 90, 0.06);
            border: 1px solid rgba(255, 214, 90, 0.12);
        }

        .vip-top-card .balance {
            font-size: 28px;
            font-weight: 800;
            color: #fff;
        }

        .vip-top-card p {
            margin: 0;
            color: rgba(255, 255, 255, 0.9);
        }

        /* professional-card style (translucent VIP) */
        .professional-card {
            background: var(--dark-card);
            border-radius: 14px;
            border: 1px solid rgba(255, 214, 90, 0.08);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
        }

        .professional-card.small {
            padding: 12px;
        }

        /* --- CHECKIN CARD STYLES (Restaurado) --- */
        .new-card.professional-card {
            background: linear-gradient(180deg, #1f1f1f, var(--dark-card));
            border: 1px solid var(--border-soft);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
            padding: 15px;
        }

        .teste-legal {
            opacity: 1;
            /* VIPs alcançados em destaque total */
            box-shadow: 0 0 15px rgba(255, 214, 90, 0.4);
            /* Brilho dourado */
            border: 2px solid var(--vip-gold);
            background: rgba(255, 214, 90, 0.1);
            padding: 8px;
            border-radius: 10px;
        }
    </style>
</head>

<body class="">

    <div class="max-w-7xl mx-auto">
        <!-- Container do Slider -->
        <div class="">

            <!-- Janela de visualização (esconde o que está fora) -->
            <div id="slider-container" class="overflow-hidden rounded-xl shadow-2xl mb-6 professional-card py-2">

                <h2 class="pl-4 font-bold pb-3">Últimos Depósitos</h2>

                <!-- Pista dos Cards (onde a mágica da translação acontece) -->
                <div id="slider-track" class="flex flex-row flex-nowrap items-stretch">

                    <?php
                    $i = 0;
                    foreach ($transactions as $transaction):
                        $color = $cardColors[$i % count($cardColors)]; // Roda pelas 6 cores disponíveis
                    ?>
                        <!-- Card dinâmico -->
                        <div class="card-item flex-shrink-0 p-1 ">

                            <div class="card-content rounded-xl teste-legal p-2 relative overflow-hidden flex items-center gap-2">

                                <!-- Selo chinês dourado -->
                                <div class="w-9 h-9 flex items-center justify-center rounded-full bg-gradient-to-br from-[#b8860b] to-[#8a6500] shadow-[0_0_6px_#b8860b]">
                                    <span class="text-xs font-bold text-[#190000] tracking-widest">福</span>
                                </div>

                                <div class="flex flex-col leading-tight">

                                    <!-- Texto chinês + português -->
                                    <p class="text-[10px] text-[#ffcc66] font-semibold mb-[2px]">
                                        恭喜发财 — Parabéns! 🎉
                                    </p>

                                    <!-- Usuário -->
                                    <p class="text-[9px] text-[#d6b98d] -mb-0.5">Usuário</p>
                                    <h2 class="text-sm font-bold text-[#ffe9c4] truncate">
                                        #<?php echo htmlspecialchars($transaction['user_id']); ?>
                                    </h2>

                                    <?php if (isset($transaction['message'])): ?>
                                        <p class="text-[10px] text-[#f8d7a3] truncate">
                                            <?php echo htmlspecialchars($transaction['message']); ?>
                                        </p>
                                    <?php else: ?>
                                        <p class="text-[9px] text-[#d6b98d]">Depósito</p>
                                        <p class="text-lg font-extrabold text-[#ffcc66] drop-shadow-[0_0_4px_#b8860b]">
                                            R$<?php echo number_format($transaction['value'], 2, ',', '.'); ?>
                                        </p>
                                    <?php endif; ?>

                                </div>

                            </div>
                        </div>


                    <?php
                        $i++;
                    endforeach;
                    ?>

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

    <script>
        const sliderTrack = document.getElementById('slider-track');
        const cards = document.querySelectorAll('.card-item');
        const totalCards = cards.length;
        let currentIndex = 0;
        const autoplayIntervalTime = 1000; // Tempo de espera reduzido para 2 segundos para maior dinamismo

        // Função para calcular a largura de translação
        function getSlideWidth() {
            // Se a tela for lg (1024px) ou maior, a largura é do primeiro card (16.666% do container)
            if (window.innerWidth >= 1024) {
                return cards[0].offsetWidth;
            }
            // Se a tela for md (768px) ou maior, a largura é do card (25% do container)
            if (window.innerWidth >= 768) {
                return cards[0].offsetWidth;
            }
            // Em telas menores, a largura inclui o card (80%) + as margens (10% + 10%)
            return cards[0].offsetWidth + (cards[0].offsetLeft * 2);
        }

        // Função para atualizar a posição do slider
        function updateSlider() {
            const slideWidth = getSlideWidth();
            const offset = -currentIndex * slideWidth;
            sliderTrack.style.transform = `translateX(${offset}px)`;
        }

        // Determina o número máximo de slides baseado na responsividade
        function getMaxIndex() {
            // Tela LG: Exibe 6 cards -> Desliza até (totalCards - 6)
            if (window.innerWidth >= 1024) {
                return totalCards - 6;
            }
            // Tela MD: Exibe 4 cards -> Desliza até (totalCards - 4)
            if (window.innerWidth >= 768) {
                return totalCards - 4;
            }
            // Tela Mobile: Exibe 1 card -> Desliza até (totalCards - 1)
            return totalCards - 1;
        }

        // Função para ir para o próximo card (com looping)
        function nextCard() {
            const maxIndex = getMaxIndex();

            if (maxIndex <= 0 || currentIndex >= maxIndex) {
                // Se chegamos ao final ou não há slides suficientes para rolar, voltamos ao início
                currentIndex = 0;
            } else {
                // Avança para o próximo índice
                currentIndex++;
            }
            updateSlider();
        }

        // Inicia o autoplay
        let autoplay = setInterval(nextCard, autoplayIntervalTime);

        // Opcional: Pausar o autoplay ao passar o mouse/tocar (para dispositivos touch)
        const sliderParent = sliderTrack.parentNode;

        // Mouse events
        sliderParent.addEventListener('mouseenter', () => clearInterval(autoplay));
        sliderParent.addEventListener('mouseleave', () => {
            autoplay = setInterval(nextCard, autoplayIntervalTime);
        });

        // Touch events (para dispositivos móveis)
        sliderParent.addEventListener('touchstart', (e) => {
            clearInterval(autoplay);
        });
        sliderParent.addEventListener('touchend', (e) => {
            autoplay = setInterval(nextCard, autoplayIntervalTime);
        });

        // Recalcula e atualiza o slider ao redimensionar a janela para manter a responsividade
        window.addEventListener('resize', () => {
            const maxIndex = getMaxIndex();
            // Garante que o índice não exceda o limite após o redimensionamento
            if (currentIndex > maxIndex) {
                currentIndex = Math.max(0, maxIndex);
            }
            updateSlider();
        });

        // Inicializa o slider na primeira carga
        window.onload = () => {
            updateSlider();
        };
    </script>
</body>

</html>