<?php
session_start();
if((!isset ($_SESSION['nome']) == true))
{
  header('location:https://agenda.kaltekgoiania.com.br/');
  }
$logado = $_SESSION['nome'];
//echo "<center><img src='https://colegioavila.com.br/wp-content/uploads/2018/11/logo-com-sombra2.png' width='200px'></center>";
//echo "<center style='text-transform: uppercase; font-size: 14px;'>Olá, $logado&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='logout.php'>SAIR</a></center>";
?>
<?php
$servername = "localhost";
$username = "kaltekgo_admin"; // Usuário do banco
$password = "kaltek@2024"; // Senha do banco
$database = "kaltekgo_avila"; // Nome do banco de dados

$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
    die("Erro de conexão: " . $conn->connect_error);
}
?>

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Busca de Aluno</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

    <style>
        body { 
            font-family: Arial, sans-serif; 
            text-align: center; font-family: Arial, sans-serif;
      background-color: #ffffff;
      margin: 20px;
      color: #000000;
        }
        
        /* Responsividade do campo de busca */
        input { 
            padding: 8px; 
            width: 90%; 
            max-width: 1195px; 
        }
        
        @media (max-width: 768px) {
            input { 
                max-width: 350px; 
            }
        }

        /* Contêiner da tabela com rolagem */
        .tabela-container {
            width: 90%;
            margin: auto;
            overflow-x: auto; /* Adiciona rolagem horizontal se necessário */
            margin-top: 20px;
            display: none; /* Oculta a tabela inicialmente */
        }

        table {
      white-space: nowrap;
      width: 100%;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      text-transform: uppercase;
      min-width: 700px;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
      font-size: 12px;
      border: 1px solid #000;
      vertical-align: middle !important;
    }

    th {
      background-color: #000;
      color: #fff;
    }

    tr:nth-child(even) {
      background-color: #f4f4f4;
    }

    tr:hover {
      background-color: #e0e0e0;
    }
  img {
  max-width: 200px;
  height: auto;
  position: relative;
  margin-left: 1000px;
}
p {
  position: relative;
  margin-left: 980px;
}

h4 {
  position: relative;
  margin-right: 1050px;
} 
label{
  width: 100%; 
}

    </style>
</head>
<?php
echo "<img class='topo-logo' src='https://colegioavila.com.br/wp-content/uploads/2018/11/logo-com-sombra2.png' width='200px'>";
//echo "<center style='text-transform: uppercase; font-size: 14px;'>Olá, $logado&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-success btn-sm' href='logout.php'>SAIR</a></center>";
?>
<body>
    
    
    <?php echo "<!--h4 class='text-uppercase'>Buscar Aluno</h4--><p style='text-transform: uppercase; font-size: 14px;'>Olá, $logado&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-success btn-sm' href='logout.php'>SAIR</a></p>";?>
    <label style="display: inline-block; margin-left: -1070px;" for="busca">BUSCAR ALUNO</label><br>
    <input type="text" id="busca" placeholder="Digite o nome do aluno...">
    
    <br><br>

    <div class="tabela-container" id="tabela-container">
        <table>
            <thead>
                <tr>
                    <th>Nome Aluno</th>
                    <th>Turma</th>
                    <th>Nome pai</th>
                    <th>Telefone Pai</th>
                    <th>Nome Mãe</th>
                    <th>Telefone Mãe</th>
                    <th>Telefone Resp. Legal</th>
                </tr>
            </thead>
            <tbody id="resultado">
                <!-- Os dados buscados aparecerão aqui -->
            </tbody>
        </table>
    </div>

   <script>
$(document).ready(function(){
    $("#busca").keyup(function(){
        var nome = $(this).val();
        if (nome.length > 1) {
            $.post("buscar.php", {nome: nome}, function(data){
                if (data.trim() !== "") {
                    $("#resultado").html(data);
                    $("#tabela-container").fadeIn(); // Mostra a tabela se houver resultado
                    
                    // Aplica a máscara apenas se o valor for um número válido
                    $(".telefone").each(function(){
                        var telefone = $(this).text().trim();
                        if (telefone !== "Não encontrado" && telefone !== "") {
                            $(this).mask("(00) 00000-0000");
                        }
                    });
                } else {
                    $("#resultado").html("");
                    $("#tabela-container").fadeOut(); // Oculta a tabela se não houver resultado
                }
            });
        } else {
            $("#resultado").html("");
            $("#tabela-container").fadeOut(); // Oculta a tabela se a busca for apagada
        }
    });
});
</script>


</body>
</html>
