<?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/iCone.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;
			}
			.icone-pronto {
                position: relative;
                top: -10px;
                left: 5px;
                z-index: 1; /* Certifique-se de que o z-index seja maior que o das tags <a> */
                color: #00FF00; /* Cor do ícone */
                font-size: 24px; /* Tamanho do ícone */
                padding: 5px; /* Espaçamento interno do ícone */
            }
            .icone-prontos {
                position: relative;
                top: 0;
                left: 5px;
                z-index: 1; /* Certifique-se de que o z-index seja maior que o das tags <a> */
                color: #00FF00; /* Cor do ícone */
                font-size: 24px; /* Tamanho do ícone */
                padding: 5px; /* Espaçamento interno do ícone */
            }
      </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row sticky-header">
                <div class="col-sm-1 text-center p-1" style="background: #31B3D0;color: #fff;">
                    <img src="iConewhite.png" style="max-width: 100%; width: 40%;">
                </div>
                <div class="col-sm-11" style="background: #38D0ED;color:#fff;display:flex;flex-direction:row;justify-content:flex-end;">
                    <audio id="bip">
                      <source src="2838_mobile-rington.mp3" type="audio/mpeg">
                      Your browser does not support the audio element.
                    </audio>
                    <audio id="bipss">
                      <source src="2360_mobile-rington.mp3" type="audio/mpeg">
                      Your browser does not support the audio element.
                    </audio>
                    
                    <p class="relogio mt-2">
        				<?php 
        					$data_hora = date("Y-m-d H:i:s");
        					echo $data_hora;
        				?>
        			</p>
        			<a href="../" style="margin-top: 10px; margin-left: 15px;cursor: pointer;color: #fff;" title="Sair"><i class="fa fa-arrow-circle-right fa-2x" aria-hidden="true" ></i></a>
                </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 mesa-<?php echo $dados['numero']; ?>" 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: 20px;">
							<?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!");
						}
				});
			}
			setInterval(verificarItensProntos, 1000); // Verificar a cada 30 segundos

            function verificarItensProntos(){
                $.ajax({
                    url: 'boxpos/verificar_itens_prontos.php',
                    type: 'GET',
                    success: function(data) {
                        console.log(data); // Imprime os dados recebidos no console
                        var itensProntos = JSON.parse(data);
                        itensProntos.forEach(function(item){
                            var mesa = item.mesa;
                            var qtdItensProntos = item.qtdItensProntos;
        
                            // Atualizar visualmente a mesa se houver itens prontos
                            if (qtdItensProntos > 0) {
                                if (!$(".mesa-" + mesa).hasClass("icone-pronto")) {
                                    $(".mesa-" + mesa).addClass("icone-pronto");
                                    
        
                                    // Adicionar o ícone
                                    $(".mesa-" + mesa).prepend('<i class="fa fa-thumbs-up icone-pronto" aria-hidden="true"></i>');
                                }
                            }
        
                            // Reproduzir o som de alerta se houver itens prontos
                            if (qtdItensProntos > 0) {
                                document.getElementById('bip').play();
                            }
                        });
                    },
                    error: function() {
                        console.log("Ocorreu um erro ao verificar itens prontos.");
                    }
                });
            }
            
            setInterval(tabelasteme, 1000);
			function tabelasteme(){
				$.ajax({
						url: 'boxpos/tabelastememais.php',
						type: 'GET',
						success: function(data) {
                            console.log(data); // Imprime os dados recebidos no console
                            var itensProntos = JSON.parse(data);
                            itensProntos.forEach(function(item){
                                var mesa = item.mesa;
                                var qtdItensProntos = item.qtdItensProntos;
            
                                // Atualizar visualmente a mesa se houver itens prontos
                                if (qtdItensProntos > 0) {
                                    if (!$(".mesa-" + mesa).hasClass("icone-prontos")) {
                                        $(".mesa-" + mesa).addClass("icone-prontos");
                                        
            
                                        // Adicionar o ícone
                                        $(".mesa-" + mesa).prepend('<i class="fa fa-user icone-prontos" aria-hidden="true"></i>');
                                    }
                                }
            
                                // Reproduzir o som de alerta se houver itens prontos
                                if (qtdItensProntos > 0) {
                                    document.getElementById('bipss').play();
                                }
                            });
                        }
				});
			}
        });
    </script>
    </body>
</html>