<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

// 1. Inclui o seu arquivo de configuração real
include_once('../config.php'); 

// 2. IMPORTANTE: Troque '$conexao' pelo nome da variável que está no seu config.php
// Se no seu config estiver '$conn', mude a linha abaixo para: $conexao = $conn;
$conexao = $conexao; 

if (!$conexao) {
    die("Erro: A variável de conexão não foi encontrada ou falhou. Verifique o arquivo config.php.");
}

include_once('../header.php');

$grupos = range('A', 'L'); 
$dadosGrupos = [];

// Busca os jogos do banco
$res_jogos = mysqli_query($conexao, "SELECT * FROM jogos_copa ORDER BY grupo, id");

if (!$res_jogos || mysqli_num_rows($res_jogos) == 0) {
    echo "<div style='padding:50px; text-align:center;'><h2>⚠️ BANCO DE DADOS VAZIO OU TABELA INEXISTENTE</h2><p>Certifique-se de ter criado a tabela 'jogos_copa' e inserido dados.</p></div>";
    exit;
}

// Organiza os jogos por grupo no PHP
while ($row = mysqli_fetch_assoc($res_jogos)) {
    $dadosGrupos[$row['grupo']][] = $row;
}
?>

<style>
    .tabela-container { padding: 15px; font-family: 'Segoe UI', sans-serif; text-transform: uppercase; background-color: #f0f0f0; min-height: 88vh; }
    .grupo-wrapper { display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
    .grupo-box { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: 1px solid #ccc; }
    .secao-jogos { flex: 2; min-width: 450px; }
    .secao-classificacao { flex: 1.2; min-width: 350px; }
    .titulo-grupo { background: #1e4d2b; color: white; padding: 12px; font-weight: bold; border-bottom: 3px solid #f1b400; display: flex; justify-content: space-between; }
    table { width: 100%; border-collapse: collapse; font-size: 11px; }
    th { background: #eee; padding: 10px; border-bottom: 1px solid #ddd; }
    td { padding: 10px 5px; text-align: center; border-bottom: 1px solid #eee; }
    .destaque-brasil { background-color: #f1b400 !important; color: #1e4d2b !important; font-weight: bold; }
    .col-pontos { background-color: #e8f5e9; font-weight: bold; color: #1e4d2b; border: 1px solid #c8e6c9 !important; }
</style>

<div class="tabela-container">
    <?php foreach ($grupos as $letra): 
        if (!isset($dadosGrupos[$letra])) continue; 
        
        $times = [];
        foreach($dadosGrupos[$letra] as $j) {
            if(!in_array($j['time_a'], $times)) $times[] = $j['time_a'];
            if(!in_array($j['time_b'], $times)) $times[] = $j['time_b'];
        }
    ?>
    <div class="grupo-wrapper">
        <div class="grupo-box secao-jogos">
            <div class="titulo-grupo"><span>🏆 GRUPO <?php echo $letra; ?></span></div>
            <table>
                <thead><tr><th>DATA</th><th>HORA</th><th>TIME A</th><th colspan="2">GOLS</th><th>TIME B</th></tr></thead>
                <tbody>
                    <?php foreach ($dadosGrupos[$letra] as $jogo): ?>
                    <tr class="linha-jogo">
                        <td><?php echo $jogo['data_jogo']; ?></td>
                        <td><?php echo $jogo['hora_jogo']; ?></td>
                        <td class="time-a <?php echo (strtoupper($jogo['time_a'])=='BRASIL'?'destaque-brasil':''); ?>"><?php echo $jogo['time_a']; ?></td>
                        <td style="font-weight:bold; background:#fafafa; width:30px;" class="gols-a"><?php echo $jogo['gols_a']; ?></td>
                        <td style="font-weight:bold; background:#fafafa; width:30px;" class="gols-b"><?php echo $jogo['gols_b']; ?></td>
                        <td class="time-b <?php echo (strtoupper($jogo['time_b'])=='BRASIL'?'destaque-brasil':''); ?>"><?php echo $jogo['time_b']; ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <div class="grupo-box secao-classificacao">
            <div class="titulo-grupo"><span>📊 CLASSIFICAÇÃO</span></div>
            <table class="tabela-pontos">
                <thead><tr><th style="text-align:left">TIME</th><th class="col-pontos">P</th><th>J</th><th>V</th><th>E</th><th>D</th><th>GP</th><th>GC</th><th>SG</th></tr></thead>
                <tbody>
                    <?php foreach($times as $t): ?>
                    <tr data-time="<?php echo $t; ?>">
                        <td style="text-align:left; font-weight:bold;"><?php echo $t; ?></td>
                        <td class="col-pontos pts">0</td><td class="pj">0</td><td class="v">0</td><td class="e">0</td><td class="d">0</td><td class="gp">0</td><td class="gc">0</td><td class="sg">0</td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.grupo-wrapper').forEach(container => {
        const stats = {};
        container.querySelectorAll('.tabela-pontos tbody tr').forEach(tr => {
            stats[tr.getAttribute('data-time')] = { p:0, j:0, v:0, e:0, d:0, gp:0, gc:0, sg:0 };
        });

        container.querySelectorAll('.linha-jogo').forEach(jogo => {
            const tA = jogo.querySelector('.time-a').innerText.trim();
            const tB = jogo.querySelector('.time-b').innerText.trim();
            const gA = parseInt(jogo.querySelector('.gols-a').innerText) || 0;
            const gB = parseInt(jogo.querySelector('.gols-b').innerText) || 0;

            stats[tA].j++; stats[tB].j++;
            stats[tA].gp += gA; stats[tA].gc += gB;
            stats[tB].gp += gB; stats[tB].gc += gA;
            if(gA > gB) { stats[tA].p += 3; stats[tA].v++; stats[tB].d++; }
            else if(gA < gB) { stats[tB].p += 3; stats[tB].v++; stats[tA].d++; }
            else { stats[tA].p += 1; stats[tB].p += 1; stats[tA].e++; stats[tB].e++; }
            stats[tA].sg = stats[tA].gp - stats[tA].gc;
            stats[tB].sg = stats[tB].gp - stats[tB].gc;
        });

        for (let t in stats) {
            const tr = container.querySelector(`tr[data-time="${t}"]`);
            if(tr) {
                tr.querySelector('.pts').innerText = stats[t].p;
                tr.querySelector('.pj').innerText = stats[t].j;
                tr.querySelector('.v').innerText = stats[t].v;
                tr.querySelector('.e').innerText = stats[t].e;
                tr.querySelector('.d').innerText = stats[t].d;
                tr.querySelector('.gp').innerText = stats[t].gp;
                tr.querySelector('.gc').innerText = stats[t].gc;
                tr.querySelector('.sg').innerText = stats[t].sg;
            }
        }
    });
});
</script>