<?php
// URL da API com os dados dos jogos
$api_url = 'https://meusjogos.shop/dados_api.json';

// Busca os dados da API
$json_data = file_get_contents($api_url);

// Verifica se a busca foi bem-sucedida
if ($json_data === FALSE) {
    die('Erro ao carregar os dados dos jogos.');
}

// Decodifica o JSON para um array PHP
$jogos = json_decode($json_data, true);

// Verifica se o JSON é válido
if ($jogos === NULL) {
    die('Erro ao processar os dados dos jogos.');
}

// Conta a quantidade de jogos do dia
$quantidade_jogos = is_array($jogos) ? count($jogos) : 0;
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogos do Dia</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #32CD32 0%, #2E8B57 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: #fff;
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            letter-spacing: 1px;
        }

        .quantidade-jogos {
            color: #fff;
            font-size: 1.2em;
            background: rgba(0,0,0,0.2);
            display: inline-block;
            padding: 8px 20px;
            border-radius: 50px;
            backdrop-filter: blur(5px);
        }

        .jogos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            padding: 10px;
            max-height: calc(100vh - 180px);
            overflow-y: auto;
            scroll-behavior: smooth;
        }

        /* Estilizando a barra de rolagem */
        .jogos-grid::-webkit-scrollbar {
            width: 10px;
        }

        .jogos-grid::-webkit-scrollbar-track {
            background: rgba(46, 139, 86, 0.3);
            border-radius: 10px;
        }

        .jogos-grid::-webkit-scrollbar-thumb {
            background: #32CD32;
            border-radius: 10px;
        }

        .jogos-grid::-webkit-scrollbar-thumb:hover {
            background: #228B22;
        }

        .card-jogo {
            background: linear-gradient(135deg, #9ACD32 0%, #2E8B57 100%);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 2px solid #32CD32;
            backdrop-filter: blur(5px);
        }

        .card-jogo:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }

        .competicao {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(50, 205, 50, 0.5);
        }

        .competicao img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .competicao h3 {
            color: #fff;
            font-size: 1em;
            font-weight: 600;
            flex: 1;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .times {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15px 0;
        }

        .time {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
            text-align: center;
        }

        .time img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 5px;
        }

        .time-nome {
            font-size: 0.9em;
            font-weight: 500;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .placar {
            font-size: 1.8em;
            font-weight: 700;
            color: #fff;
            min-width: 80px;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .info-jogo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0;
            color: #fff;
            font-size: 0.9em;
        }

        .horario {
            background: rgba(50, 205, 50, 0.3);
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 600;
            backdrop-filter: blur(5px);
        }

        .status {
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8em;
        }

        .status.ao-vivo {
            background: #ff4757;
            color: white;
            animation: pulse 1.5s infinite;
        }

        .status.adiado {
            background: #ffa502;
            color: #333;
        }

        .status.finalizado {
            background: #2ed573;
            color: #fff;
        }

        @keyframes pulse {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }

        .canais {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px solid rgba(50, 205, 50, 0.5);
        }

        .canais h4 {
            color: #fff;
            font-size: 0.9em;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .canais-lista {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .canal-item {
            display: flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8em;
            backdrop-filter: blur(5px);
        }

        .canal-item img {
            width: 16px;
            height: 16px;
            object-fit: contain;
        }

        .canal-item span {
            color: #fff;
        }

        .sem-canais {
            color: rgba(255, 255, 255, 0.7);
            font-style: italic;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2em;
            }
            
            .jogos-grid {
                grid-template-columns: 1fr;
                max-height: calc(100vh - 160px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>⚽ Jogos do Dia ⚽</h1>
            <div class="quantidade-jogos">
                📊 Total de Jogos: <?php echo $quantidade_jogos; ?>
            </div>
        </div>
        
        <div class="jogos-grid">
            <?php if (empty($jogos)): ?>
                <p style="color: white; text-align: center; grid-column: 1/-1;">Nenhum jogo encontrado para hoje.</p>
            <?php else: ?>
                <?php foreach ($jogos as $jogo): ?>
                    <div class="card-jogo">
                        <!-- Competição -->
                        <div class="competicao">
                            <?php if (!empty($jogo['img_competicao_url'])): ?>
                                <img src="<?php echo htmlspecialchars($jogo['img_competicao_url']); ?>" 
                                     alt="<?php echo htmlspecialchars($jogo['competicao']); ?>"
                                     onerror="this.style.display='none'">
                            <?php endif; ?>
                            <h3><?php echo htmlspecialchars($jogo['competicao']); ?></h3>
                        </div>

                        <!-- Times e Placar -->
                        <div class="times">
                            <div class="time">
                                <?php if (!empty($jogo['img_time1_url'])): ?>
                                    <img src="<?php echo htmlspecialchars($jogo['img_time1_url']); ?>" 
                                         alt="<?php echo htmlspecialchars($jogo['time1']); ?>"
                                         onerror="this.src='https://via.placeholder.com/50?text=Time'">
                                <?php endif; ?>
                                <span class="time-nome"><?php echo htmlspecialchars($jogo['time1']); ?></span>
                            </div>
                            
                            <div class="placar">
                                <?php 
                                if ($jogo['placar_time1'] !== '' && $jogo['placar_time2'] !== '') {
                                    echo htmlspecialchars($jogo['placar_time1'] . ' - ' . $jogo['placar_time2']);
                                } else {
                                    echo 'vs';
                                }
                                ?>
                            </div>
                            
                            <div class="time">
                                <?php if (!empty($jogo['img_time2_url'])): ?>
                                    <img src="<?php echo htmlspecialchars($jogo['img_time2_url']); ?>" 
                                         alt="<?php echo htmlspecialchars($jogo['time2']); ?>"
                                         onerror="this.src='https://via.placeholder.com/50?text=Time'">
                                <?php endif; ?>
                                <span class="time-nome"><?php echo htmlspecialchars($jogo['time2']); ?></span>
                            </div>
                        </div>

                        <!-- Informações do Jogo -->
                        <div class="info-jogo">
                            <span class="horario">⏰ <?php echo htmlspecialchars($jogo['horario']); ?></span>
                            <?php 
                            $status_class = '';
                            $status_texto = htmlspecialchars($jogo['status']);
                            
                            if (stripos($status_texto, 'ao vivo') !== false || is_numeric($status_texto)) {
                                $status_class = 'ao-vivo';
                                $status_texto = '🔴 AO VIVO ' . ($status_texto ?: '');
                            } elseif (stripos($status_texto, 'adiado') !== false) {
                                $status_class = 'adiado';
                            } elseif (stripos($status_texto, 'final') !== false) {
                                $status_class = 'finalizado';
                            }
                            
                            if (!empty($status_texto)): ?>
                                <span class="status <?php echo $status_class; ?>">
                                    <?php echo $status_texto; ?>
                                </span>
                            <?php endif; ?>
                        </div>

                        <!-- Canais de Transmissão -->
                        <div class="canais">
                            <h4>📺 Onde assistir</h4>
                            <div class="canais-lista">
                                <?php if (!empty($jogo['canais'])): ?>
                                    <?php foreach ($jogo['canais'] as $canal): ?>
                                        <div class="canal-item">
                                            <?php if (!empty($canal['img_url'])): ?>
                                                <img src="<?php echo htmlspecialchars($canal['img_url']); ?>" 
                                                     alt="<?php echo htmlspecialchars($canal['nome']); ?>"
                                                     onerror="this.style.display='none'">
                                            <?php endif; ?>
                                            <span><?php echo htmlspecialchars($canal['nome']); ?></span>
                                        </div>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <span class="sem-canais">Informação não disponível</span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</body>
</html>