<?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 única do novo JSON
$jsonUrl = 'https://api.tropa.click/sport/XJ14kAtnb.json'; // Ajuste para seu link

// 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 - Tabela</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

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

  <!-- Bootstrap CSS para melhor estilização -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Font Awesome para ícones -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    :root {
      --primary-color: #3a3aff;
      --live-color: limegreen;
      --finished-color: #ff4444;
      --waiting-color: orange;
      --interval-color: #ffbb33;
      --bg-color: #191C26;
      --card-color: #1a1a2e;
      --text-color: #ffffff;
      --highlight-color: #8a2be2;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      padding-bottom: 60px;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    
    .header {
      text-align: center;
      margin: 10px 0;
      padding: 10px;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    
    .header h1 {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 5px;
      color: var(--text-color);
      text-shadow: 0 0 10px var(--highlight-color);
      font-size: clamp(1.2rem, 4vw, 1.8rem);
    }
    
    .date-badge {
      display: inline-block;
      background: var(--primary-color);
      color: white;
      padding: 6px 15px;
      border-radius: 20px;
      font-weight: bold;
      font-size: clamp(0.8rem, 3vw, 1rem);
      margin-bottom: 10px;
      box-shadow: 0 0 15px var(--primary-color);
    }
    
    .section-title {
      font-size: clamp(1rem, 4vw, 1.5rem);
      font-weight: 600;
      margin: 15px 0 10px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--primary-color);
      color: var(--text-color);
      text-shadow: 0 0 5px var(--highlight-color);
    }
    
    /* Estilo da tabela */
    .games-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 8px;
      margin-bottom: 20px;
    }
    
    .games-table thead th {
      background-color: var(--primary-color);
      color: white;
      padding: 10px 8px;
      text-align: center;
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 10;
      font-size: clamp(0.7rem, 3vw, 0.9rem);
    }
    
    .games-table tbody tr {
      background-color: var(--card-color);
      transition: all 0.3s ease;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .games-table tbody tr:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    
    .games-table td {
      padding: 10px 8px;
      text-align: center;
      vertical-align: middle;
      border: none;
      font-size: clamp(0.7rem, 3vw, 0.9rem);
    }
    
    /* Células específicas */
    .competition-cell {
      font-weight: 600;
      color: var(--primary-color);
      text-align: left;
      min-width: 120px;
    }
    
    .time-cell {
      font-weight: bold;
      color: var(--text-color);
      white-space: nowrap;
    }
    
    .team-cell {
      display: flex;
      align-items: center;
      gap: 6px;
      text-align: left;
    }
    
    .team-logo {
      width: 25px;
      height: 25px;
      object-fit: contain;
    }
    
    .score-cell {
      font-weight: bold;
      font-size: clamp(0.9rem, 3vw, 1.2rem);
      color: var(--text-color);
      min-width: 60px;
    }
    
    .status-cell {
      font-weight: bold;
      text-transform: uppercase;
      font-size: clamp(0.6rem, 3vw, 0.85rem);
      padding: 4px 8px;
      border-radius: 20px;
      white-space: nowrap;
    }
    
    /* Cores de status */
    .status-live {
      background-color: var(--live-color);
      color: black;
      animation: pulse 1.5s infinite;
    }
    
    .status-finished {
      background-color: var(--finished-color);
      color: white;
    }
    
    .status-waiting {
      background-color: var(--waiting-color);
      color: black;
    }
    
    .status-interval {
      background-color: var(--interval-color);
      color: black;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(50, 205, 50, 0.7); }
      70% { box-shadow: 0 0 0 10px rgba(50, 205, 50, 0); }
      100% { box-shadow: 0 0 0 0 rgba(50, 205, 50, 0); }
    }
    
    /* Canais de transmissão */
    .channels-cell {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }
    
    .channel-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.1);
      padding: 4px 8px;
      border-radius: 20px;
      font-size: clamp(0.6rem, 3vw, 0.8rem);
    }
    
    .channel-logo {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
      .games-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }
      
      .team-cell {
        flex-direction: row;
        align-items: center;
        gap: 6px;
      }
      
      .channels-cell {
        justify-content: flex-start;
        min-width: 120px;
      }
      
      .container {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    
    /* Ajustes para orientação horizontal */
    @media screen and (orientation: landscape) {
      .header {
        margin: 5px 0;
        padding: 8px;
      }
      
      .games-table td {
        padding: 8px 6px;
      }
      
      .team-logo {
        width: 20px;
        height: 20px;
      }
    }
    
    /* Ajustes para telas muito pequenas */
    @media (max-width: 480px) {
      .team-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }
      
      .team-logo {
        width: 18px;
        height: 18px;
      }
      
      .channel-badge {
        padding: 3px 6px;
      }
    }
    
    /* Rodapé */
    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px;
      text-align: center;
      background-color: #111;
      border-top: 1px solid #333;
      z-index: 100;
      font-size: clamp(0.7rem, 3vw, 0.9rem);
    }
    
    .no-games {
      text-align: center;
      padding: 15px;
      background-color: var(--card-color);
      border-radius: 10px;
      margin-bottom: 15px;
      font-size: clamp(0.8rem, 3vw, 1rem);
    }
    
    /* Melhorias para WebView */
    .container {
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
      margin-bottom: 60px;
    }
    
    /* Prevenir zoom em inputs em iOS */
    input, select, textarea {
      font-size: 16px !important;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Cabeçalho -->
    <div class="header">
      <h1>JOGOS DE FUTEBOL</h1>
      <div class="date-badge"><?php echo $dataHoje; ?></div>
    </div>
    
    <!-- Seção de Jogos ao Vivo/Aguardando -->
    <h2 class="section-title"><i class="fas fa-tv me-2"></i>JOGOS EM ANDAMENTO / AGUARDANDO</h2>
    <div id="live-games-container">
      <!-- Tabela será inserida aqui via JavaScript -->
      <div class="no-games">Carregando jogos ao vivo...</div>
    </div>
    
    <!-- Seção de Jogos Finalizados -->
    <h2 class="section-title"><i class="fas fa-whistle me-2"></i>JOGOS FINALIZADOS</h2>
    <div id="finished-games-container">
      <!-- Tabela será inserida aqui via JavaScript -->
      <div class="no-games">Carregando jogos finalizados...</div>
    </div>
  </div>

  <!-- Rodapé -->
  <footer>
    Copyright &copy; <?php echo date("Y"); ?> - Direitos Reservados a DuckDev.Top
  </footer>

  <!-- Bootstrap JS e dependências -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // Token gerado pelo PHP para validação
  const token = "<?php echo $token; ?>";
  
  // Função para normalizar o status
  function normalizeStatus(status) {
    return (status || "").toUpperCase().replace(/\s+/g, ' ').trim();
  }
  
  // Função para determinar a classe de status
  function getStatusClass(status) {
    const normalized = normalizeStatus(status);
    
    if (normalized === "FIM DE JOGO") {
      return "status-finished";
    } else if (normalized === "INT") {
      return "status-interval";
    } else if (/^\d+'$/.test(normalized.split(' ')[0])) {
      return "status-live";
    } else {
      return "status-waiting";
    }
  }
  
  // Função para formatar o status para exibição
  function formatStatus(status) {
    const normalized = normalizeStatus(status);
    
    if (normalized === "FIM DE JOGO") {
      return "FINALIZADO";
    } else if (normalized === "INT") {
      return "INTERVALO";
    } else if (/^\d+'$/.test(normalized.split(' ')[0])) {
      const minute = normalized.split(' ')[0];
      return `${minute} MIN`;
    } else {
      return normalized || "AGUARDANDO";
    }
  }
  
  // Função para renderizar a tabela de jogos
  function renderGamesTable(games, containerId) {
    const container = document.getElementById(containerId);
    
    if (!games || games.length === 0) {
      container.innerHTML = '<div class="no-games">Nenhum jogo encontrado</div>';
      return;
    }
    
    let html = `
      <div class="table-responsive">
        <table class="games-table">
          <thead>
            <tr>
              <th>Competição</th>
              <th>Horário</th>
              <th>Time Casa</th>
              <th>Placar</th>
              <th>Time Visitante</th>
              <th>Canais</th>
            </tr>
          </thead>
          <tbody>`;
    
    games.forEach(game => {
      const statusClass = getStatusClass(game.status);
      const formattedStatus = formatStatus(game.status);
      
      // Canais de transmissão
      let channelsHtml = '<div class="channels-cell">';
      if (game.canais && Array.isArray(game.canais)) {
        game.canais.forEach(canal => {
          channelsHtml += `
            <div class="channel-badge">
              ${canal.img_url ? `<img src="${canal.img_url}" alt="${canal.nome}" class="channel-logo">` : ''}
              <span>${canal.nome}</span>
            </div>`;
        });
      } else {
        channelsHtml += '<span>N/D</span>';
      }
      channelsHtml += '</div>';
      
      html += `
        <tr>
          <td class="competition-cell">${game.competicao || 'N/D'}</td>
          <td class="time-cell">${game.horario || '--:--'}</td>
          <td>
            <div class="team-cell">
              ${game.img_time1_url ? `<img src="${game.img_time1_url}" alt="${game.time1}" class="team-logo">` : ''}
              <span>${game.time1 || 'Time 1'}</span>
            </div>
          </td>
          <td class="score-cell">
            ${game.placar_time1 || '0'} - ${game.placar_time2 || '0'}
          </td>
          <td>
            <div class="team-cell">
              ${game.img_time2_url ? `<img src="${game.img_time2_url}" alt="${game.time2}" class="team-logo">` : ''}
              <span>${game.time2 || 'Time 2'}</span>
            </div>
          </td>
          <td>${channelsHtml}</td>
        </tr>`;
    });
    
    html += `</tbody></table></div>`;
    container.innerHTML = html;
  }
  
  // Função para atualizar os dados via AJAX
  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
      const liveGames = data.filter(game => normalizeStatus(game.status) !== "FIM DE JOGO");
      const finishedGames = data.filter(game => normalizeStatus(game.status) === "FIM DE JOGO");
      
      // Renderiza as tabelas
      renderGamesTable(liveGames, 'live-games-container');
      renderGamesTable(finishedGames, 'finished-games-container');
    })
    .catch(error => console.error("Erro na requisição:", error));
  }
  
  // Inicializa a atualização dos dados
  updateData();
  setInterval(updateData, 5000);
  
  // Ajuste para webview - previne zoom
  document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
  });
  
  // Força redimensionamento correto em rotação
  window.addEventListener('orientationchange', function() {
    setTimeout(function() {
      window.scrollTo(0, 0);
    }, 100);
  });
</script>
</body>
</html>