<?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">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- 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;
			}
			.divi{
			    width: 22%;
			}
			@media (max-width: 992px) {
            .divi{
			    width: 32%;
			}
			@media (max-width: 655px) {
            .divi{
			    width: 98%;
			}
			.divi div{
			    width: 98%;
			}
        }

      </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;">
                    <audio id="bip">
                      <source src="2838_mobile-rington.mp3" type="audio/mpeg">
                      Your browser does not support the audio element.
                    </audio>
                    <i class="fa fa-square fa-2x stopbit" aria-hidden="true" style="margin-top: 10px; margin-right: 15px;cursor: pointer;"></i>
                    <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 pedidos" style="background:#fff;padding: 0;display: flex;flex-direction: row;justify-content: space-around;flex-wrap:wrap;overflow: auto;height:90vh;color: #333;">
                    

                </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(poppedidos, 3600);
			function poppedidos(){
				$.ajax({
						url: 'boxpos/poppedidos.php',
						type: 'GET',
						success: function(data) {
							$(".pedidos").html(data);
							$(".bust").click(entregar);
							$(".pnt").click(prontificar);
						},
						error: function() {
							$(".pedidos").html("Ocorreu um erro ao popular a hora!");
						}
				});
			}
			function entregar(){
			    if (confirm("Deseja efetuar a entrega deste pedido?")) {
            		var mesa = $(this).data("mesa");
                    var datas = $(this).data("datas");
                    var hora = $(this).data("hora");
                    
                    $.ajax({
						url: 'boxpos/entregar.php',
						type: 'POST',
						data: {
						    mesa: mesa,
						    datas: datas,
						    hora: hora
						},
						success: function(data) {
							poppedidos();
						},
						error: function() {
							alert("Ocorreu um erro ao entregar o pedido!");
						}
				    });
            	}
			}
			
			function prontificar(){
			    if (confirm("Deseja informar a prontidao deste pedido?")) {
            		var mesa = $(this).data("mesa");
                    var datas = $(this).data("datas");
                    var hora = $(this).data("hora");
                    
                    $.ajax({
						url: 'boxpos/prontificar.php',
						type: 'POST',
						data: {
						    mesa: mesa,
						    datas: datas,
						    hora: hora
						},
						success: function(data) {
							poppedidos();
						},
						error: function() {
							alert("Ocorreu um erro ao prontificar o pedido!");
						}
				    });
            	}
			}
			

            // Verificar periodicamente novos pedidos
            setInterval(verificarNovosPedidos, 1000); // Verifica a cada 5 segundos
        
            function verificarNovosPedidos() {
                $.ajax({
                    url: 'boxpos/verificar_pedidos.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.novos_registros) { // Verifica se há novos pedidos e se o som ainda não foi reproduzido
                            tocarSom(); 
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }
			
			function tocarSom() {
                document.getElementById('bip').play();
            }
            
            $(".stopbit").click(pararSom);
        
            function pararSom() {
                document.getElementById('bip').pause();
                // Código para atualizar o estado no banco de dados para 1 via AJAX
                $.ajax({
                    url: 'boxpos/atualizar_estado.php',
                    type: 'POST',
                    data: { estado: 1 }, // Atualiza o estado para 1 (som não reproduzido)
                    success: function(response) {
                        console.log("Estado atualizado com sucesso.");
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }
        });
    </script>
    </body>
</html>