<!DOCTYPE html>
<html lang="pt-BR">
<?php
function getOnlineStreams($client_id, $access_token, $twitch_users) {
    $url = 'https://api.twitch.tv/helix/streams?user_login=' . implode('&user_login=', $twitch_users);

    $headers = [
        'Client-ID: ' . $client_id,
        'Authorization: Bearer ' . $access_token
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($ch);
    curl_close($ch);

    $data = json_decode($response, true);

    $online_users = [];
    if (isset($data['data'])) {
        foreach ($data['data'] as $stream) {
            $online_users[] = $stream['user_name'];  // Guardar apenas o nome do canal
        }
    }
    return $online_users;
}


    $domain = $_SERVER['HTTP_HOST'];


?>


<head>
    <?= __seo() ?>
    <title><?= $this->e($title); ?></title>
    <!-- Style's -->
    <link rel="stylesheet" href="<?= __files('css/web.css') ?>">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="<?= __files('css/swiper-bundle.min.css') ?>" rel="stylesheet">
    <link href="<?= __files('css/slick.css') ?>" rel="stylesheet">
    <link href="<?= __files('css/style.css') ?>" rel="stylesheet">
    <link href="<?= __files('css/mobile-style.css') ?>" rel="stylesheet">
    <link href="<?= __resources('assets/css/mini.css') ?>" rel="stylesheet">
    <link rel="icon" href="<?= __files('images/logo.png') ?>" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    


<style>
    .stream-panel {
        position: fixed; /* Fixa no canto inferior direito */
        bottom: 65px; /* Distância do fundo */
        right: -200px; /* Começa fora da tela */
        display: flex; /* Coloca as streams lado a lado */
        gap: 10px; /* Espaço entre as streams */
        z-index: 1000; /* Fixa acima de outros elementos */
        transition: right 0.3s ease; /* Transição suave para a entrada e saída */
    }

    .stream-panel.active {
        right: 20px; /* Move para dentro da tela quando ativo */
    }

    .twitch-embed {
        position: relative; /* Para o posicionamento absoluto do iframe */
    }

    .twitch-embed iframe {
        pointer-events: none; /* Permite clicar no link pai */
    }

    .twitch-embed a {
        display: block; /* Faz o link ocupar todo o espaço do contêiner */
        height: 120px; /* Altura do iframe */
        width: 120px; /* Largura do iframe */
    }

    .toggle-button {
        position: fixed;
        bottom: 20px;
        right: 20px; /* Ajuste conforme necessário */
        background-color: #6441a5; /* Cor do botão */
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 1001; /* Acima do painel */
    }
</style>

</head>

<?php
$client_id = '43iym7qzsbiq3a1h7qdepfy9w0cfr3'; // Substitua pela sua Client ID
$access_token = 'go64kdwb1259gb6dve7ae5jnbga7hu'; // Substitua pelo seu Access Token

$twitch_users = ['vtxezyy',];

$online_users2 = getOnlineStreams($client_id, $access_token, $twitch_users);

?>

<body>
    
    <div class="wrapper">
        <header>
            <div class="topPanel">
                <div class="btn btn-drop" data-class="topPanel-left">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="topPanel-wrapper flex-c">
                    <div class="topPanel-left flex-c">
                       
                        <ul class="nav">
                            <li><a href="<?= __redirect("") ?>">Home</a></li>
                            <li><a href="<?= __redirect("download") ?>">Downloads</a></li>
                            <li><a href="<?= __redirect("register") ?>">Register</a></li>
                            <li><a href="<?= __redirect("info") ?>">Infos</a></li>
                            <li><a href="<?= __redirect("rankings") ?>">Rankings</a></li>
                            <li class="sub-menu"><a href="javascript:void(0)">More</a>
                                <ul>
                                    <li><a href="<?= __redirect("vip") ?>">Vip</a></li>
                                    <li><a href="<?= __redirect("coin") ?>">Coins</a></li>
                                    <?php if (plugin()->packages) : ?>
                                        <li><a href="<?= __redirect("packages") ?>">Packages</a></li>
                                    <?php endif; ?>
                                    <?php if (plugin()->auctions) : ?>
                                        <li><a href="<?= __redirect("auction") ?>">Auctions</a></li>
                                    <?php endif; ?>
                                    <?php if (plugin()->market) : ?>
                                        <li><a href="<?= __redirect("market/all/items") ?>">Market Items</a></li>
                                        <li><a href="<?= __redirect("market/view/characters") ?>">Market Char</a></li>
                                    <?php endif; ?>
                                </ul>
                            </li>
                        </ul>
                    </div><!--topPanel-left-->
                    <div class="topPanel-right">
                        <?php if (__login()) : ?>
                            <a href="#register" class="sign-in open_modal">
                                My Account
                            </a>
                        <?php else : ?>
                            <a href="#register" class="sign-in open_modal">
                                Sign In
                            </a>
                        <?php endif; ?>
                    </div><!--topPanel-right-->
                </div>
            </div><!--topPanel-->
            <!--<div class="hand-animation">
                <div class="light-hand"></div>
                <div class="rune-hand"></div>
            </div>
            <div class="sparks">
                <div class="spark_1"></div>
                <div class="spark_2"></div>
                <div class="spark_3"></div>
                <div class="spark_4 spark-big"></div>
            </div>
            -->
			
			 <div class="logo">
                <a href="" class="bright"><img style="width:600px; height:300px; margin-left:-57px;" src="<?= __files('images/logo.png') ?>" alt="Logo"></a>
            </div>
            
            <div class="online flex-c-c">
			
			
                <!--<span style="position:relative; top:45px;" class="line"></span> -->
            
                <!--<div class="light-animation">
                    <div class="blue-light"></div>
                    <div class="yellow-light"></div>
                </div>
                <div class="onlineBlock">
                    Online <span><?= web()->players_online ?></span>
                </div> -->
                <div class="onlineReg flex-c-c">
                    <?php
                    $accounts = amwdeveloper()->table("Character")->count()->amount;
                    $guilds = amwdeveloper()->table("Guild")->count()->amount;
                    $onlineusers = web()->players_online 
                    ?>
                    <div class="onlineReg-block onlineReg-block-player">
                        <span><?= $onlineusers ?></span>
                        Online
                    </div>
                    <div class="onlineReg-block onlineReg-block-player">
                        <span><?= $accounts ?></span>
                        Players
                    </div>
                    <div class="onlineReg-block onlineReg-block-clans">
                        <span><?= $guilds ?></span>
                        Guilds
                    </div>
                </div>
            </div><!--online-->
            <div class="download">
               <a href="/register" class="socButton facebook" style="margin-right:6px">
					<i class="fa-solid fa-user-plus"></i>
					<div class="text-content">
						Registro
						<span>Crie sua conta</span>
					</div>
				</a>
			   <a href="/download" class="socButton instagram">
					<i class="fa-solid fa-cloud-arrow-down"></i>
					<div class="text-content">
						Baixar
						<span>Cliente Completo</span>
					</div>
				</a>
				
            </div>
        </header>
        <div class="box-center">
            <?= $this->section('content') ?>
        </div>

    </div><!--wrapper-->
    

    <footer>
        <div class="wrapper">
             <div class="footerMenu flex">
                <div class="footerMenu-block">
                    <div class="h2-title flex-s-c">
                        <span>Information</span>
                    </div>
                    <ul class="f-menu">
                        <li><a href="#">About the Game</a></li>
                        <li><a href="">Game Wiki</a></li>
                       
                        
                    </ul>
                </div>
                <div class="footerMenu-block">
                    <div class="h2-title flex-s-c">
                        <span>How to Start</span>
                    </div>
                    <ul class="f-menu">
                        <li><a href="#">Registration</a></li>
                        <li><a href="#">Downloads</a></li>
                      
                        
                    </ul>
                </div>
                <div class="footerMenu-block">
                    <div class="h2-title flex-s-c">
                        <span>Community</span>
                    </div>
                    <ul class="f-menu">
                        <li><a href="">Forum</a></li>
                        <li><a href="#">Rankings</a></li>
                        
                    </ul>
                </div>
                <div class="footerMenu-block">
                    <div class="h2-title flex-s-c">
                        <span>Support</span>
                    </div>
                    <ul class="f-menu">
                        <li><a href="">Support</a></li>
                       
                        <a href="#"></a>
                    </ul>
                </div>
            </div>
            <span class="line"></span>
            <div class="footerInfo">

                <div class="f-text">
                    Este site não tem afiliação ou endosso da Webzen Inc. Todas as outras marcas registradas e nomes de produtos são registrados e de propriedade de seus respectivos titulares. Quaisquer assuntos relacionados ao Mu Barion devem ser tratados através dos canais de suporte mencionados neste site.
                
                
                <?php
// Nome do arquivo onde as visitas serão armazenadas
$arquivo = 'contador.txt';

// Verifica se o cookie de visita única já está definido
if (!isset($_COOKIE['visitante'])) {
    // Lê o número atual de visitas do arquivo
    if (file_exists($arquivo)) {
        $visitas = (int)file_get_contents($arquivo);
    } else {
        $visitas = 0; // Se o arquivo não existir, inicia com 0
    }

    // Incrementa o contador de visitas únicas
    $visitas++;

    // Salva o novo número de visitas no arquivo
    file_put_contents($arquivo, $visitas);

    // Define o cookie para 1 dia
    setcookie("visitante", "true", time() + 365*86400); // 86400 segundos = 1 dia
}

// Lê e exibe o total de visitas únicas
$visitas = (int)file_get_contents($arquivo);
echo "<p>Visitas: " . $visitas. "</p>";
?>

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

    
    <div class="toTop">
        <span>Go to Top</span>
    </div>

    <div class="web-alerts">
        <div class="message"></div>
    </div>

    <?= $this->insert("includes/login_user"); ?>

    
<div class="stream-panel" id="streamPanel">
    <?php if (!empty($online_users2)): ?>
        <?php foreach ($online_users2 as $index => $user): ?>
            <div class="twitch-embed fade" id="slide-<?= $index ?>">
                <a href="https://www.twitch.tv/<?= $user ?>" target="_blank" rel="noopener noreferrer">
                    <span style="position: fixed; width: 120px;  text-align: center; height: 20px; display: flex; background: purple; align-items: center; align-content: center; justify-content: center;"><?=$user?></span>
                    <iframe
                        src="https://player.twitch.tv/?channel=<?= $user ?>&parent=<?=$domain?>&muted=true&controls=false" 
                        height="120" 
                        width="120" 
                        frameborder="0" 
                        scrolling="no" 
                        allowfullscreen="true">
                    </iframe>
                    
                </a>
            </div>
            <button class="toggle-button" id="toggleButton">Expandir Streams</button>

        <?php endforeach; ?>
    <?php else: ?>
        
    <?php endif; ?>
</div>

<script>
    const toggleButton = document.getElementById('toggleButton');
    const streamPanel = document.getElementById('streamPanel');

    // Adiciona um evento de clique ao botão
    toggleButton.addEventListener('click', function() {
        streamPanel.classList.toggle('active'); // Alterna a classe 'active' no painel
        
        // Verifica se o painel está ativo e altera o texto do botão
        if (streamPanel.classList.contains('active')) {
            toggleButton.textContent = 'Esconder Streams'; // Muda o texto para "Esconder Streams"
        } else {
            toggleButton.textContent = 'Expandir Streams'; // Muda o texto para "Expandir Streams"
        }
    });
</script>


    <div id="overlay"></div>
    <script src="<?= __files('js/jquery-3.5.1.min.js') ?>"></script>
    <script src="<?= __files('js/swiper-bundle.min.js') ?>"></script>
    <script src="<?= __files('js/slick.min.js') ?>"></script>
    <script src="<?= __files('js/global.js') ?>"></script>
    <script src="<?= __files('js/webevents.js') ?>"></script>
    <script src="<?= __resources('assets/js/web.js') ?>"></script>
    <script>
        var swiper = new Swiper(".modalSlide", {
            loop: true,
            pagination: {
                el: ".swiper-pagination",
            },
            autoplay: {
                delay: 15000,
                disableOnInteraction: false,
            },
        });

        $(document).ready(function() {
            var store = localStorage.getItem('modal_status');
            var store_hours = localStorage.getItem('modal_hours');

            if (store != null && store_hours != null) {
                let now = Date.now(),
                    diff = (now - store_hours),
                    minutes = 10,
                    seconds = 60,
                    milliseconds = 1000,
                    delay = (minutes * seconds * milliseconds);

                if (diff >= delay) {
                    localStorage.removeItem('modal_status');
                    localStorage.removeItem('modal_hours');
                    $(".modal").addClass("active");
                }
            }

            if (store == null) {
                $(".modal").addClass("active");
            }
        });

        $(document).on("click", ".modal .closed-modal", function(e) {
            e.preventDefault();
            $(".modal").removeClass("active");
            localStorage.setItem('modal_status', 'no-active');
            localStorage.setItem('modal_hours', Date.now());
        });
    </script>
</body>

</html>
<script>
    var images = document.querySelectorAll(".preview .image");
    images.forEach(e => {
        e.onmousemove = event => {
            var x = event.clientX,
                y = event.clientY;

            var preview = event.target.parentElement.querySelector(".informations");
            preview.style.top = (y + 15) + 'px';
            preview.style.left = (x + 15) + 'px';
            preview.style.display = "block";
        }

        e.onmouseout = event => {
            var preview = event.target.parentElement.querySelector('.informations');
            preview.style.top = '0px';
            preview.style.left = '0px';
            preview.style.display = "none";
        }
    });
    
    $('.border-right').on('click', function() {
        if ($('.live-preview').hasClass('view')) {
            $('.live-preview').removeClass('view')
            $('.lives').css({
                width: 0
            });
        } else {
            $('.live-preview').addClass('view')
            $('.lives').css({
                width: 'auto'
            });
        }
    })
</script>
    <script>
        function startWeeklyCountdown() {
            const now = new Date();
            
            // Define o próximo domingo às 20h
            let nextSunday = new Date(now);
            nextSunday.setDate(now.getDate() + ((7 - now.getDay()) % 7)); // Define o próximo domingo
            nextSunday.setHours(19, 0, 0, 0); // Define para 19h (7 PM)

            // Se o horário atual já passou do domingo às 19h desta semana, ajusta para o próximo domingo
            if (now > nextSunday) {
                nextSunday.setDate(nextSunday.getDate() + 7); // Avança para o domingo seguinte
            }

            // Atualiza o countdown a cada segundo
            setInterval(function () {
                const now = new Date();
                const timeRemaining = nextSunday - now;

                // Converte o tempo restante em dias, horas, minutos e segundos
                const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
                const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

                // Exibe o countdown
                document.getElementById("countdown").innerHTML =
                    days + ":" + hours + ":" + minutes + ":" + seconds + "";

                // Reinicia o contador quando o tempo chega a zero
                if (timeRemaining < 0) {
                    nextSunday.setDate(nextSunday.getDate() + 7); // Define o próximo domingo às 20h
                }
            }, 1000);
        }

        // Inicia o countdown ao carregar a página
        startWeeklyCountdown();
    </script>