<?php
session_start();
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// Gera um token único se não existir
if (!isset($_SESSION['token'])) {
    $_SESSION['token'] = bin2hex(random_bytes(16));
}
$token = $_SESSION['token'];

// Verifica se é uma requisição AJAX
$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';

if ($isAjax) {
    // (1) Verifica se há Referer e se corresponde ao host da aplicação
    if (!isset($_SERVER['HTTP_REFERER'])) {
        header('HTTP/1.1 403 Forbidden');
        exit('Acesso negado: Referer ausente.');
    }
    $refererHost = parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST);
    $serverHost  = $_SERVER['HTTP_HOST'];
    if ($refererHost !== $serverHost) {
        header('HTTP/1.1 403 Forbidden');
        exit('Acesso negado: Referer inválido.');
    }

    // (2) Verifica se o token enviado via POST é válido
    if (!isset($_POST['token']) || $_POST['token'] !== $token) {
        header('HTTP/1.1 403 Forbidden');
        echo json_encode(['error' => 'Token inválido']);
        exit;
    }
}

// Define o timezone para São Paulo e captura a data atual
date_default_timezone_set('America/Sao_Paulo');
$dataHoje = date('d/m/Y');

// Função para buscar o JSON via cURL
function fetch_json($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    // Ajuste conforme a necessidade de SSL
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
    
    $response = curl_exec($ch);
    if (curl_errno($ch)) {
        curl_close($ch);
        return false;
    }
    $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);
    if ($http_code !== 200) {
        return false;
    }
    return $response;
}

// URL do JSON
$jsonUrl = 'https://xsender.painelmaster.lol/retorno.json'; 

// Busca o JSON
$jsonData = fetch_json($jsonUrl);
if ($jsonData === false) {
    die('<h2>Erro ao recuperar os dados do JSON</h2>');
}

// Decodifica o JSON
$games = json_decode($jsonData, true);
if ($games === null) {
    die('<h2>Erro ao processar o JSON</h2>');
}

// Caso retorne apenas um item (objeto único), coloca dentro de um array
if (isset($games['time1'])) {
    $games = [$games];
}

// Se for requisição AJAX, retorna os dados em JSON
if ($isAjax) {
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($games);
    exit;
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="google" content="notranslate">
  <title>Jogos de Futebol - Protegido</title>
  <script>
        // Executa silenciosamente o salvar_jogos.php em segundo plano
        window.addEventListener('DOMContentLoaded', function() {
            fetch('salvar_jogos.php')
                .catch(error => {}); // Ignora completamente qualquer erro
        });
    </script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <!-- Favicon -->
  <link rel="icon" href="https://i.imgur.com/9aOuYxZ.png">

  <!-- Meta Tags (Open Graph / Twitter) -->
  <meta property="og:title" content="Jogos de Futebol - Protegido">
  <meta property="og:description" content="Confira os jogos de futebol atualizados.">
  <meta property="og:image" content="https://i.imgur.com/9aOuYxZ.png">
  <meta property="og:url" content="https://i.imgur.com/9aOuYxZ.png">
  <meta property="og:type" content="website">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Jogos de Futebol - Protegido">
  <meta name="twitter:description" content="Confira os jogos de futebol atualizados.">
  <meta name="twitter:image" content="https://i.imgur.com/9aOuYxZ.png">

  <!-- Fonte opcional -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">

    <style>
    /* Reset e estilo básico */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: "Montserrat", sans-serif;
      background: #191C26;
      color: #fff;
      text-align: center;
      padding: 20px;
      padding-bottom: 60px; /* Espaço para o rodapé fixo */
    }
    /* Header com a imagem */
    header {
      margin-bottom: 20px;
    }
    header img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
      filter: drop-shadow(0 0 10px #8a2be2)
              drop-shadow(0 0 20px #8a2be2)
              drop-shadow(0 0 30px #8a2be2);
    }
    /* Título */
    h1 {
      font-size: 2.2rem;
      text-transform: uppercase;
      margin-bottom: 15px;
      color: #fff;
      text-shadow:
        0 0 10px #8a2be2,
        0 0 20px #8a2be2,
        0 0 30px #8a2be2;
    }
    /* Bolha da data */
    .date-bubble {
      display: inline-block;
      background: #3a3aff;
      padding: 12px 20px;
      border-radius: 20px;
      margin-bottom: 20px;
      color: #fff;
      font-weight: bold;
      font-size: 1rem;
      text-shadow:
        0 0 5px #3a3aff,
        0 0 10px #3a3aff;
      box-shadow:
        0 0 10px #3a3aff,
        0 0 20px #3a3aff;
    }
    /* GRID com 3 colunas */
    .cards-container {
      display: grid;
      grid-template-columns: repeat(3, minmax(320px, 1fr));
      gap: 25px;
      max-width: 1800px;
      margin: 0 auto;
    }
    /* Card principal */
    .card {
      position: relative;
      background: #111;
      border-radius: 15px;
      padding: 20px;
      overflow: hidden;
      transition: transform 0.3s;
    }
    .card:hover {
      transform: scale(1.02);
    }
    /* Classes de status para bordas vibrantes */
    .card.encerrado {
      border: 2px solid red;
      box-shadow: 0 0 15px 3px red;
      animation: pulsarVermelho 1.5s infinite;
    }
    @keyframes pulsarVermelho {
      0%, 100% { box-shadow: 0 0 15px 3px red; }
      50% { box-shadow: 0 0 25px 8px red; }
    }
    .card.ao-vivo {
      border: 2px solid limegreen;
      box-shadow: 0 0 15px 3px limegreen;
      animation: pulsarVerde 1.5s infinite;
    }
    @keyframes pulsarVerde {
      0%, 100% { box-shadow: 0 0 15px 3px limegreen; }
      50% { box-shadow: 0 0 25px 8px limegreen; }
    }
    .card.aguardando {
      border: 2px solid orange;
      box-shadow: 0 0 15px 3px orange;
      animation: pulsarLaranja 1.5s infinite;
    }
    @keyframes pulsarLaranja {
      0%, 100% { box-shadow: 0 0 15px 3px orange; }
      50% { box-shadow: 0 0 25px 8px orange; }
    }
    /* Badge de status (topo direito) */
    .status-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #ff0000;
      color: #fff;
      padding: 5px 10px;
      border-radius: 10px;
      font-weight: bold;
      font-size: 12px;
      text-transform: uppercase;
      z-index: 2;
    }
    .badge-green {
      background: limegreen;
      color: #000;
    }
    /* Badge lateral esquerda para exibir 1T, 2T, Intervalo etc. */
    .status-badge-left {
      position: absolute;
      top: 10px;
      left: 10px;
      background: limegreen;
      color: #000;
      padding: 5px 10px;
      border-radius: 10px;
      font-weight: bold;
      font-size: 12px;
      text-transform: uppercase;
      z-index: 2;
    }
    /* Exibição invertida: hora na div .championship e campeonato na .time-bubble */
    .championship {
      font-weight: bold;
      text-transform: uppercase;
      font-size: 20px;
      margin-bottom: 5px;
      text-align: center;
    }
    .time-bubble {
      display: inline-block;
      background: #1f1f3a;
      padding: 8px 14px;
      border-radius: 20px;
      margin-bottom: 15px;
      color: #50b3ff;
      font-weight: bold;
      font-size: 16px;
      box-shadow: 0 0 8px rgba(0,0,0,0.3);
    }
    /* Seção do placar */
    .score-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #181818;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 10px;
    }
    .team-box {
      flex: 1;
      text-align: center;
    }
    .team-logo {
      width: 50px;
      height: 50px;
      object-fit: contain;
      margin-bottom: 5px;
    }
    .team-name {
      font-size: 13px;
      font-weight: bold;
      color: #ccc;
    }
    .score-center {
      flex: 1;
      text-align: center;
      color: #ffcc00;
      font-size: 24px;
      font-weight: bold;
    }
    .score-center span {
      display: block;
      margin-top: 5px;
      font-size: 12px;
      color: #bbb;
      font-weight: normal;
    }
    /* Canal de transmissão */
    .channel-info {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      position: relative;
    }
    .channel-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .channel-logo {
      width: 40px;
      margin-bottom: 5px;
    }
    .channel-name {
      font-size: 12px;
      color: #bbb;
      font-weight: bold;
      font-size: 9px;
      color: #FFD700;
      background: rgba(255, 255, 255, 0.1);
      padding: 5px 10px;
      border-radius: 5px;
    }
    /* Responsividade para telas menores */
    @media (max-width: 600px) {
      .cards-container {
        grid-template-columns: 1fr;
      }
    }
    /* Rodapé fixo */
    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px;
      text-align: center;
      font-size: 0.9rem;
      color: #bbb;
      background: #191C26;
      border-top: 1px solid #333;
      z-index: 999;
    }
    .badge-orange {
      background: orange;
      color: #000;
      font-weight: bold;
      box-shadow: 0 0 5px orange, 0 0 10px orange;
    }
  </style>
</head>
<body>
  <!-- TÍTULO -->
  <h1>JOGOS DE HOJE</h1>

  <!-- Seção de Jogos em Andamento/Aguardando -->
  <h1>Jogos em Andamento/Aguardando</h1>
  <br>
  <div id="cards-container-live" class="cards-container"></div>

  <!-- Seção de Jogos Finalizados -->
  <br>
  <h1>Jogos Finalizados</h1>
  <div id="cards-container-finished" class="cards-container"></div>
<script>
  // Token gerado pelo PHP para validação
  const token = "<?php echo $token; ?>";
  
  // Índices globais para o slider
  let sliderIndexLive = 0;
  let sliderIndexFinished = 0;
  
  // Índices para o slider de canais por jogo
  const channelIndices = {};
  
  // Função para normalizar o status
  function normalizeStatus(status) {
    return (status || "").toUpperCase().replace(/\s+/g, ' ').trim();
  }
  
  // Função para renderizar os cards de uma categoria (tipo) a partir de um índice inicial
  function renderCardsForCategory(filteredGames, containerId, tipo, startIndex) {
    const container = document.getElementById(containerId);
    
    // Se for "live" e não houver jogos disponíveis, oculta o container e retorna
    if (tipo === 'live' && filteredGames.length === 0) {
      container.style.display = 'none';
      return;
    } else {
      container.style.display = 'grid';
    }
    
    let html = '';
    let totalCards = 3;
    
    // Se houver menos de 3 jogos, exibe somente os disponíveis
    if (filteredGames.length < totalCards) {
      totalCards = filteredGames.length;
    }
    
    for (let i = 0; i < totalCards; i++) {
      let index = (startIndex + i) % filteredGames.length;
      let game = filteredGames[index];
      let status = (game.status || "AGUARDANDO INICIO").replace(/\n/g, '').trim();
      let placar1 = parseInt(game.placar_time1 || 0, 10);
      let placar2 = parseInt(game.placar_time2 || 0, 10);
      let horario = game.horario || "--:--";
      let cardExtraClass = "";
      let badgeHtml = "";
      let badgeLeftHtml = "";
      let statusNormalized = normalizeStatus(status);
      
      // Gerar um ID único para o jogo
      const gameId = `game-${tipo}-${index}`;
      
      // Inicializar índice de canal para este jogo se não existir
      if (!channelIndices[gameId] && game.canais && game.canais.length > 0) {
        channelIndices[gameId] = 0;
      }
      
      // 1) Se status for "FIM DE JOGO" → Encerrado (vermelho)
      if (statusNormalized === "FIM DE JOGO") {
        cardExtraClass = "encerrado";
        badgeHtml = '<div class="status-badge">Encerrado</div>';
      } 
      // 2) Se for minutos do jogo (ex.: "29'") e/ou destaque
      else if (/^\d+'$/.test(statusNormalized.split(' ')[0]) || statusNormalized.includes("DESTAQUE")) {
        if (/^\d+'$/.test(statusNormalized.split(' ')[0])) {
          cardExtraClass = "ao-vivo";
          // Badge "Ao Vivo" (direita)
          badgeHtml = '<div class="status-badge badge-green">Ao Vivo</div>';
          
          // Extraímos o número de minutos para decidir 1º ou 2º Tempo (esquerda)
          let minute = parseInt(statusNormalized.split(' ')[0], 10);
          if (!isNaN(minute)) {
            if (minute <= 45) {
              badgeLeftHtml = '<div class="status-badge-left">1º Tempo</div>';
            } else {
              badgeLeftHtml = '<div class="status-badge-left">2º Tempo</div>';
            }
          }
        }
        // Verifica se o status contém "DESTAQUE"
        if (statusNormalized.includes("DESTAQUE")) {
          // Força o estilo de aguardando para manter o neon com borda laranja
          cardExtraClass = "aguardando";
          // Renderiza o badge sem estilos extras, assumindo que no CSS a classe .status-badge em conjunto com .aguardando já possui o efeito neon desejado
          badgeHtml += '<div class="status-badge">Destaque</div>';
        }
      } 
      // 3) Se status for "INT" → Intervalo
      else if (statusNormalized === "INT") {
        cardExtraClass = "ao-vivo";
        badgeHtml = '<div class="status-badge" style="background: orange; color: #000;">Intervalo</div>';
        badgeLeftHtml = '<div class="status-badge-left" style="background: orange; color: #000;">Intervalo</div>';
      }
      // 4) Caso não caia em nenhum acima, assume "Aguardando" (laranja)
      else {
        cardExtraClass = "aguardando";
        badgeHtml = '<div class="status-badge">Aguardando</div>';
      }
      
      // Prepara o HTML do canal
      let channelHtml = '';
      if (game.canais && Array.isArray(game.canais) && game.canais.length > 0) {
        // Mostra apenas um canal por vez
        const currentIndex = channelIndices[gameId];
        const canal = game.canais[currentIndex];
        
        channelHtml = `
          <div class="channel-container" data-game-id="${gameId}" data-canais='${JSON.stringify(game.canais)}'>
            <img class="channel-logo" src="${canal.img_url || ''}" alt="${canal.nome}">
            <div class="channel-name">${canal.nome}</div>
          </div>`;
      } else {
        channelHtml = `<div class="channel-name">N/D</div>`;
      }
      
      // Monta o HTML do card – observe a ordem: primeiro badgeHtml (direita) e depois badgeLeftHtml (esquerda)
      html += `
        <div class="card ${cardExtraClass}">
          ${badgeHtml}
          ${badgeLeftHtml}
          <div class="championship">${horario}</div>
          <div class="time-bubble">${game.competicao}</div>
          <div class="score-section">
            <div class="team-box">
              <img class="team-logo" src="${game.img_time1_url || ''}" alt="${game.time1 || 'Time 1'}">
              <div class="team-name">${game.time1 || 'Time 1'}</div>
            </div>
            <div class="score-wrapper" style="display: flex; flex-direction: column; align-items: center;">
              <div class="score-center" style="display: flex; align-items: center;">
                <div>${placar1}</div>
                <div style="margin: 0 30px;">X</div>
                <div>${placar2}</div>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: ${
                  /^\d+'$/.test(statusNormalized.split(' ')[0])
                    ? 'limegreen'
                    : (statusNormalized === 'AGUARDANDO INICIO'
                        ? 'red'
                        : (statusNormalized === 'INT'
                            ? 'orange'
                            : (statusNormalized === 'FIM DE JOGO' ? 'red' : 'inherit')))
                }; font-weight: bold; font-size: 16px;">
                  ${ statusNormalized === 'INT'
                      ? 'INTERVALO'
                      : ( /^\d+'$/.test(statusNormalized.split(' ')[0])
                          ? (parseInt(statusNormalized.split(' ')[0], 10) + " MIN DE JOGO")
                          : (statusNormalized === 'FIM DE JOGO' ? 'FIM DE JOGO' : status) )
                  }
                </span>
              </div>
            </div>
            <div class="team-box">
              <img class="team-logo" src="${game.img_time2_url || ''}" alt="${game.time2 || 'Time 2'}">
              <div class="team-name">${game.time2 || 'Time 2'}</div>
            </div>
          </div>
          <div class="channel-info">
            ${channelHtml}
          </div>
        </div>`;
    }
    container.innerHTML = html;
    
    // Iniciar o slider de canais para cada jogo
    initChannelSliders();
  }
  
  // Função para inicializar o slider de canais
  function initChannelSliders() {
    const channelContainers = document.querySelectorAll('.channel-container');
    
    channelContainers.forEach(container => {
      if (container.hasAttribute('data-canais')) {
        const gameId = container.getAttribute('data-game-id');
        const canais = JSON.parse(container.getAttribute('data-canais'));
        
        // Se tiver mais de um canal, configurar o intervalo para alternar
        if (canais.length > 1) {
          if (!channelIndices[gameId] && channelIndices[gameId] !== 0) {
            channelIndices[gameId] = 0;
          }
          
          // Configura intervalo para trocar o canal a cada 3 segundos
          setInterval(() => {
            channelIndices[gameId] = (channelIndices[gameId] + 1) % canais.length;
            const canal = canais[channelIndices[gameId]];
            
            const img = container.querySelector('.channel-logo');
            const name = container.querySelector('.channel-name');
            
            if (img && name) {
              img.src = canal.img_url || '';
              img.alt = canal.nome;
              name.textContent = canal.nome;
            }
          }, 3000);
        }
      }
    });
  }
  
  // Função para atualizar os dados via AJAX e atualizar os sliders
  function updateData() {
    fetch(window.location.href, {
      method: 'POST',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: 'token=' + encodeURIComponent(token)
    })
    .then(response => response.json())
    .then(data => {
      // Filtra os jogos para cada categoria
      let liveGames = data.filter(game => normalizeStatus(game.status) !== "FIM DE JOGO");
      let finishedGames = data.filter(game => normalizeStatus(game.status) === "FIM DE JOGO");
      
      // Renderiza os cards de cada categoria, a partir do índice atual do slider
      renderCardsForCategory(liveGames, 'cards-container-live', 'live', sliderIndexLive);
      renderCardsForCategory(finishedGames, 'cards-container-finished', 'finished', sliderIndexFinished);
      
      // Atualiza os índices do slider se houver mais de 3 jogos
      if (liveGames.length > 3) {
        sliderIndexLive = (sliderIndexLive + 3) % liveGames.length;
      } else {
        sliderIndexLive = 0;
      }
      if (finishedGames.length > 3) {
        sliderIndexFinished = (sliderIndexFinished + 3) % finishedGames.length;
      } else {
        sliderIndexFinished = 0;
      }
    })
    .catch(error => console.error("Erro na requisição:", error));
  }
  
  // Inicializa a atualização dos dados a cada 5 segundos
  updateData();
  setInterval(updateData, 5000);
</script>
<script>
  // Probabilidade de exibir o GIF (0.5 = 50%)
  if (Math.random() < 0.5) {
    const gif = document.createElement("img");
    gif.src = "https://i.imgur.com/guEbKhH.gif"; // Substitua pela URL do seu GIF
    gif.style.position = "fixed";
    gif.style.bottom = "20px";
    gif.style.right = "20px";
    gif.style.width = "80px";
    gif.style.zIndex = "9999";
    document.body.appendChild(gif);
  }
</script>

  <!-- Rodapé fixo -->
<h1 style="position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px; text-align: center; font-size: 0.9rem; color: #bbb; background: #191C26; border-top: 1px solid #333; z-index: 999;">
  Copyright &copy; <?php echo date("Y"); ?> -
  Direitos Reservados
</h1>
</body>
</html>