<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/figmaSchoolLab/icone.jpg">
  <title>School Lab UFC</title>
  <link rel="stylesheet" href="../admgeral/pages-styles.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script defer src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
  <script defer src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script defer type="text/javascript" src="/js/admIteracoes.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.2/socket.io.js"></script>
  <script defer type="text/javascript" src="/js/websocket/websocket.js"></script>
</head>

<body>
  <header>
    <%- include('../partials/headerAdm') -%>
  </header>
  <ul class="nav" style="margin-bottom: 30px;margin-left: 0px;">
    <li><a href="#laboratorios">Laboratórios</a></li>
    <li><a href="#computadores">Computadores</a></li>
    <li><a href="#historico">Histórico de Navegação</a></li>
    <li><a href="#contas">Contas</a></li>
  </ul>

  <div id="laboratorios">
    <h1>Adicionar e Remover Laboratórios</h1>
    <p>Digite o nome do laboratório:</p><input type="text" size="40" maxlength="30"><br><br>
    <button class="but" id="btn-add" style="width: 200px;height: 50px;"> Adicionar </button>
    <button class="but" id="btn-remove" style="width: 200px;height: 50px;"> Remover </button><br><br>
    <div style="display: flex;justify-content: center;">
      <button style="width: 300px;height: 40px;"><a href="/views/Aluno/home" style="text-decoration: none;">Ir para a
          página de laboratórios</a></button>
    </div>
  </div>

  <div id="computadores">
    <h1>Buscar Computadores</h1><br>
    <select name="select" style="width: 220px;height: 60px;margin: 10px 0px 10px 10px;">
      <option selected disabled>Laboratórios</option>
      <option id="op1" value="valor1">Laboratório 1</option>
    </select>
    <select name="select" style="width: 220px;height: 60px;margin: 10px 0px 10px 10px;">
      <option selected disabled>Computadores</option>
      <option id="op1" value="valor1">Computador 1</option>
    </select>
    <button id="btn-add" class="but" style="width: 220px;height: 60px;margin: 10px 0px 10px 10px;">
      Adicionar </button>
    <button id="btn-add" class="but" style="width: 220px;height: 60px;margin: 10px 0px 10px 10px;"> Remover
    </button><br>
    <div style="display: flex;justify-content: center;">
      <button style="width: 300px;height: 40px;"><a href="/views/Aluno/home" style="text-decoration: none;">Ir para a
          página de laboratórios</a></button>
    </div>
  </div>

  <div id="historico"><br><br>
    <h1>Histórico</h1>
    <p>Nesta sessão você pode inserir e remover os computadores da página de escolha do usuário.</p>
    <select name="select" style="width: 200px;height: 50px;margin: 5px 0px 5px 0px;">
      <option selected disabled>Laboratórios</option>
      <option id="op1" value="valor1" >Laboratório 1</option>
    </select>
    <select name="select" style="width: 200px;height: 50px;margin: 5px 0px 5px 0px;">
      <option selected disabled>Computadores</option>
      <option id="op1" value="valor1" >Computador 1</option>
    </select>
    <button
      id="btn-add" class="but" 
      style="width: 200px;height: 50px;margin: 5px 0px 5px 0px;">Verificar</button>
    <br><br>
    <table class="table table-dark table-striped">
      <thead>
        <tr>
          <th scope="col">N°</th>
          <th scope="col">Name</th>
          <th scope="col">Curso</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
    </table>
  </div>

  <div id="contas">
    <h1>Contas</h1>
    <p>Nesta sessão você pode analisar e remover a conta dos usuários do site.</p>
    <input type="text" size="50" style="height: 45px;margin-right: 10px;" placeholder="Pesquisar por usuário"><button
      id="btn-add" class="but" 
      style="width: 200px;height: 50px;margin: 5px 0px 5px 0px;">Verificar</button>
    <br><br>
    <table class="table table-dark table-striped">
      <thead>
        <tr>
          <th scope="col">N°</th>
          <th scope="col">Name</th>
          <th scope="col">Curso</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
    </table>
  </div>

  <footer class="footer">
    <%- include('../partials/footer') -%>
  </footer>
</body>

</html>
