<?php 
    session_start();
    if(!isset($_SESSION['idUsuario'])){
    	header("location:../");
    }
    include_once '../conexao/index.php';
    error_reporting(E_ALL);
    $_SESSION['idUsuario'] = $_SESSION['idUsuario'];
    $_SESSION['nomeUsuario'] = $_SESSION['nomeUsuario'];
    $_SESSION['categoriaUsuario'] = $_SESSION['categoriaUsuario']; 
?>
<html>
    <head>
      <meta charset="utf-8">
      <title>iVone POS</title>
      <link rel="shorcut icon"  href="../img/config/5087847.png">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
      <script language="JavaScript" src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
      <!-- Adicione o Select2 ao seu projeto -->
    
      <style>
          *{
              font-family: system-ui;
              font-size: 10pt;
              
          }
          body{
              background: #eee;
          }
          .pdt img{
              max-width: 100%;
              width: 60%;
          }
          
          .some{
				position: relative;
				z-index: 4;
				top: -40px;
				left: 120px;
			}
			.relogio{
			    font-size:16pt;
			}
      </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row sticky-header">
                <div class="col-sm-1 text-center p-3" style="background: #31B3D0;color: #fff;">
                    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
                </div>
                <div class="col-sm-11" style="background: #38D0ED;color:#fff;display:flex;flex-direction:row;justify-content:flex-end;">
                    <p class="relogio mt-2">
        				<?php 
        					$data_hora = date("Y-m-d H:i:s");
        					echo $data_hora;
        				?>
        			</p>
                </div>
            </div>
            <div class="row">
        
                <!-- Segunda Coluna -->
                <div class="col-sm-12 pt-4" style="background:#fff;padding: 0;display: flex;flex-direction: row;flex-wrap:wrap;overflow: auto;height:90vh;color: #333;">
                    <?php 
					$sql = "SELECT * FROM mesas";
					$rs = mysqli_query($db, $sql);
					while ($dados = mysqli_fetch_array($rs)) {
				?>
					<a href="pos.php?mesa=<?php echo $dados['numero']; ?>" class="col-md-2 text-center" style="text-decoration: none;color: #333;">
						<span>
							<?php 
								$status = $dados['status'];
								if ($status == 1) {
							?>
								<img class="some" src="../img/71025_radio_on_icon.png" style="width: 40px;">
							<?php
								}
							?>
						</span>
						<img src="../img/Mesa_Cadeiras.png" style="max-width: 100%;width: 40%;">
						<p style="font-size: 14pt;font-weight: bold;"><?php echo $dados['numero']; ?></p>
					</a>
				<?php
					}
				?>
                </div>
            </div>
        </div>






    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script>
        $(function(){
            setInterval(lg, 1000);

			function lg(){
				$.ajax({
						url: 'relogio.php',
						type: 'GET',
						success: function(data) {
							$(".relogio").html(data);
						},
						error: function() {
							$(".relogio").html("Ocorreu um erro ao popular a hora!");
						}
				});
			}
        });
    </script>
    </body>
</html>