<?php
session_start();
$game = '7';
$gamee = '7';
?>

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Definindo estilos para o tabuleiro */
        .map {
            display: grid;
            grid-template-columns: repeat(3, 100px); /* 3 colunas com 100px cada */
            grid-gap: 5px; /* Espaço entre as células do tabuleiro */
        }

        /* Estilos para os quadrados do tabuleiro */
        .square {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Estilos para os tipos de quadrados */
        .type-0 {
            background-color: white;
        }

        .type-1 {
            background-color: gray;
        }

        /* Estilos para as informações das colunas */
        #infoColunas {
            margin-top: 20px;
            font-size: 16px;
        }
    </style>
    
</head>

<body>
    <!-- Div que contém o tabuleiro -->
    <div class="map">
        <?php
        
        
        include 'conexao.php';

        try {
            $stmt = $pdo->query("SELECT game, id2, peca, player, n, l, s, o, tipo FROM tabuleiro");
            $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

            foreach ($rows as $row) {
                $game = $row['game'];
                $id2 = $row['id2'];
                $peca = $row['peca'];
                $player = $row['player'];
                $n = $row['n'];
                $l = $row['l'];
                $s = $row['s'];
                $o = $row['o'];
                $tipo = $row['tipo'];
                echo "<div class='square type-$tipo' data-peca='$peca' data-game='$game' data-id2='$id2' data-player='$player' data-n='$n' data-l='$l' data-s='$s' data-o='$o'>$peca</div>";
            }
        } catch (PDOException $e) {
            echo "Erro na consulta: " . $e->getMessage();
        }
        ?>
    </div>
    
    <!-- Div que exibirá as informações da peça clicada -->
    <div id="infoPeca">
        <!-- As informações da peça clicada serão exibidas aqui -->
    </div>
    
    
    
    
    
    
    
    
    
    <!-- Formulário contendo os botões -->
<form method="post">
    <!-- Botão para mover a peça -->
    <button type="submit" name="moverBotao">Mover</button>
    <!-- Botão para zerar o valor de $move -->
    <button type="submit" name="zerarBotao">Zerar</button>
</form>

<?php
// Inicializa a variável $move
$move = 0;

// Verifica qual botão foi clicado
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['moverBotao'])) {
        // Define o valor da variável $move para 1 se o botão "Mover" foi clicado
        $_SESSION['move'] = 1;
    } elseif (isset($_POST['zerarBotao'])) {
        // Define o valor da variável $move para 0 se o botão "Zerar" foi clicado
        $_SESSION['move'] = 0;
    }

}

?>


    
    
    
    <?php
    // Aqui você pode acessar as informações da peça clicada e exibi-las
    if (isset($_POST['pecaSelecionada'])) {
    
  
        $game = $_POST['game'];
        $id2 = $_POST['id2'];
        $peca = $_POST['peca'];
        $player = $_POST['player'];
        $n = $_POST['n'];
        $l = $_POST['l'];
        $s = $_POST['s'];
        $o = $_POST['o'];
        
        
        
        
        
        $_SESSION['game'] = $_POST['game'];
    $_SESSION['id2'] = $_POST['id2'];
    $_SESSION['peca'] = $_POST['peca'];
    $_SESSION['player'] = $_POST['player'];
    $_SESSION['n'] = $_POST['n'];
    $_SESSION['l'] = $_POST['l'];
    $_SESSION['s'] = $_POST['s'];
    $_SESSION['o'] = $_POST['o'];

        
        
        echo "<p>Game: $game</p>";
        echo "<p>ID2: $id2</p>";
        echo "<p>Peca: $peca</p>";
        echo "<p>Player: $player</p>";
        echo "<p>N: $n</p>";
        echo "<p>L: $l</p>";
        echo "<p>S: $s</p>";
        echo "<p>O: $o</p>";
        } 
        
        
        
        ?>
        
        
        <hr>
        
        Sbc
        <?php
        
        $GM = $_SESSION['game'];
        echo $GM;
        echo $gamee;
        
        ?>
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
    
    
    
    
    
    <script>
    // Evento que é executado quando a página termina de carregar
    document.addEventListener("DOMContentLoaded", function() {
        // Seleciona todos os quadrados do tabuleiro
        const squares = document.querySelectorAll(".square");
        // Seleciona o botão "Mover"
        const moverBotao = document.querySelector("button[name='moverBotao']");
        // Seleciona a div onde serão exibidas as informações da peça clicada
        const infoPecaDiv = document.getElementById("infoPeca");

        // Para cada quadrado, adiciona um evento de clique
        squares.forEach(square => {
            square.addEventListener("click", function() {
                // Obtém os valores dos atributos "data"
                const gameValue = this.getAttribute("data-game");
                const id2Value = this.getAttribute("data-id2");
                const pecaValue = this.getAttribute("data-peca");
                const playerValue = this.getAttribute("data-player");
                const nValue = this.getAttribute("data-n");
                const lValue = this.getAttribute("data-l");
                const sValue = this.getAttribute("data-s");
                const oValue = this.getAttribute("data-o");
                // Monta o HTML com as informações da peça clicada
                const infoHTML = `
                    <p>Game: ${gameValue}</p>
                    <p>ID2: ${id2Value}</p>
                    <p>Peca: ${pecaValue}</p>
                    <p>Player: ${playerValue}</p>
                    <p>N: ${nValue}</p>
                    <p>L: ${lValue}</p>
                    <p>S: ${sValue}</p>
                    <p>O: ${oValue}</p>
                `;
                // Exibe as informações na div infoPecaDiv
                infoPecaDiv.innerHTML = infoHTML;
            });
        });

        // Adiciona um evento de clique para o botão "Mover"
        moverBotao.addEventListener("click", function() {
            // Aqui você deve implementar a lógica para mover a peça para outro quadrado no banco de dados
            
            // Defina o valor do campo "pecaSelecionada" para a peça que foi selecionada
            document.querySelector("input[name='pecaSelecionada']").value = pecaSelecionada;
        });
    });
    </script>
</body>
</html>
