<?php
session_start();

 //Verifica se o usuário está logado
if (!isset($_SESSION['login']) || empty($_SESSION['login'])) {
   header("Location: login.php");
    exit;
}

$userlogin = $_SESSION['login'];
$user = $_SESSION['nome_usuario'];

$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%; 
}
.header-bar {
            width: 100%;
            padding: 10px;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1000;
        }
        .header-bar .header-content {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .header-bar .welcome {
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
        }
        .header-bar .btn {
            margin-left: 5px;
        }
        .container {
            padding-top: 10px; /* espaço pro header fixo */
        }
    </style>
</head>

<body>
<div class="header-bar">
    <div class="container header-content">
        <span class="welcome text-uppercase">Seja bem-vindo, <?php echo htmlspecialchars($user); ?></span>
        <a href="/desenvolvimento/dashboard.php" class="btn btn-primary btn-sm">Principal</a>
        <a href="/desenvolvimento/alterarsenha.php" class="btn btn-warning btn-sm">Alterar Senha</a>
        <a href="/desenvolvimento/logout.php" class="btn btn-danger btn-sm">Sair</a>
        <a class="btn btn-danger btn-sm">Tempo restante da sessão: <span id="session-timer"></span></a>
    </div>
</div>
<br><br><br><br>   
    <label for="busca">BUSCA POR 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>
<script>
    const loginTime = <?= $_SESSION['login_time'] ?? time(); ?>;
    const sessionDuration = <?= $_SESSION['session_duration'] ?? 3600; ?>;
</script>
<script>
    function formatTime(seconds) {
        const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
        const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
        const s = (seconds % 60).toString().padStart(2, '0');
        return `${h}:${m}:${s}`;
    }

    const display = document.getElementById('session-timer');
    const endTime = loginTime + sessionDuration;

    function updateTimer() {
        const now = Math.floor(Date.now() / 1000);
        const remaining = endTime - now;

        if (remaining <= 0) {
            display.textContent = 'Sessão expirada';
            clearInterval(timer);
            // Opcional: redirecionar para login
            window.location.href = 'logout.php';
        } else {
            display.textContent = formatTime(remaining);
        }
    }

    updateTimer();
    const timer = setInterval(updateTimer, 1000);

function filtrarNF() {
  const linhas = document.querySelectorAll("table tbody tr");
  linhas.forEach(linha => {
    let mostrar = false;
    const inputs = linha.querySelectorAll("input[name^='t']");
    inputs.forEach(input => {
      const valor = input.value.trim().toUpperCase();
      if (valor === "N" || valor === "F") {
        mostrar = true;
      }
    });
    linha.style.display = mostrar ? "" : "none";
  });
}

function mostrarTodos() {
  const linhas = document.querySelectorAll("table tbody tr");
  linhas.forEach(linha => {
    linha.style.display = "";
  });
}
</script>

</body>
</html>
