<?php 
    include_once '../conexao/index.php';
    error_reporting(E_ALL);
?>


<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="https://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%;
          }
          
          .sticky-left {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            height: 90vh;
        }
        .pdt, .lista li{
            transition: all .2s ease-in-out;
        }
        .pdt:hover{
            background: #eee;
            cursor: pointer;
            border-radius: 15px;
        }
        
        .lista li:hover{
            background: #fff;
            cursor: pointer;
        }

        /* Adiciona um estilo para a coluna fixa 脿 direita */
        .sticky-right {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            height: 90vh;
        }
        .sticky-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000; 
    }
    
    #valorPago{
        height: 70px; /* Defina a altura desejada em pixels */
    }
    #qrcode{
        height: 40px; /* Defina a altura desejada em pixels */
        width: 100%;
    }
    
    .select2-container--default .select2-selection--single {
        height: 40px; /* Ajuste a altura conforme necessário */
    }
    
    /* Seletor específico para a lista suspensa do Select2 */
    .select2-container--default .select2-dropdown--below {
        max-height: 200px; /* Ajuste a altura máxima da lista suspensa conforme necessário */
    }
      </style>
    </head>
    <body>
        <input type="hidden" id="mesa" value="<?php echo $_GET['mesa']?>">


        <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:space-between;">
                    <div class="col-sm-3">
                        <select class="form-control mt-3 ela" style="color:#ccc;border:none;">
                            <option value="111000">Selecionar Categoria</option>
                            <?php
                            $sql = "SELECT * FROM categoria_produtos";
                                $rs = mysqli_query($db, $sql);
                                while ($dados = mysqli_fetch_array($rs)) {
                            ?>
                                <option value="<?php echo $dados['id'] ?>"><?php echo $dados['categoria'] ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="col-sm-6">
                       <input type="text" class="form-control mt-3 busca" placeholder="Escreva o nome do artigo" style="border:none" name="busca">
                       
                    </div>
                </div>

            </div>
            <div class="row">
                <!-- Primeira Coluna -->

        
                <!-- Segunda Coluna -->
                <div class="col-sm-8 segunda1" style="background:#fff;padding: 0;display: flex;flex-direction: row;flex-wrap:wrap;overflow: auto;height:90vh;color: #333;">
                    
                </div>
                <div class="col-sm-7 segunda2" style="padding: 0;display: flex;flex-direction: row;flex-wrap:wrap;overflow: auto;height:90vh;display:none;background: #fff;">
                    <div class="col-sm-12">
                        <h2 style="margin-left: 4%;margin-top: 2%;">Caixa</h2>
                    </div>
                    <div class="col-sm-12" style="padding: 0;display: flex;flex-direction: row;justify-content: space-around;flex-wrap:wrap;">
                        <div class="card col-sm-5 p-2">
                          <div class="card-body">
                            <h5 class="card-title">Valor em caixa</h5>
                            <h6 class="card-subtitle mb-2 text-muted">Abertura</h6>
                            <h2 class="card-title" id="valorAbertura"></h2>
                          </div>
                          <div style="display: flex;flex-direction: row;justify-content: space-around;">
                              <input type="number" class="form-control text-center" value="1" style="width: 240px;" id="valorAberturaCaixa">
                              <button class="btn btn-danger" id="btnOpenCaixa"><i class="fa fa-inbox" aria-hidden="true"></i> Abrir</button>
                          </div>
                          <div class="msgOpenCaixa">
                          </div>
                        </div>
                        <div class="card col-sm-5 p-2">
                          <div class="card-body">
                            <h5 class="card-title">Valor em caixa</h5>
                            <h6 class="card-subtitle mb-2 text-muted">Fecho</h6>
                            <h2 class="card-title" id="valorFecho"></h2>
                          </div>
                          <div style="display: flex;flex-direction: row;justify-content: flex-end;">
                              <button class="btn btn-danger"><i class="fa fa-print" aria-hidden="true"></i> Imprimir</button>
                              <button class="btn btn-danger" style="margin-left: 10px;" id="btnCloseCaixa"><i class="fa fa-inbox" aria-hidden="true"></i> Fechar</button>
                          </div>
                          <div class="msgCloseCaixa">
                          </div>
                        </div>
                    </div>
                    <div class="col-sm-12 mt-4">
                        <!-- Image and text -->
                        <nav class="navbar navbar-light bg-light col-sm-11 mt-1" style="margin-left: 4%;color:#333">
                            <div class="col-sm-8" style="display: flex;flex-direction: row;justify-content: flex-start;">
                                <img src="https://img.freepik.com/vetores-premium/saco-de-dinheiro-com-moedas-de-dolar_677805-1139.jpg?w=360" width="50" height="50" class="d-inline-block align-top" alt="" style="margin: auto 10px;">
                            <h4 class="mt-3">Numerario</h4>
                            </div>
                            <div class="col-sm-4">
                                <h2>300.00</h2>
                            </div>
                        </nav>
                        <nav class="navbar navbar-light bg-light col-sm-11 mt-1" style="margin-left: 4%;color:#333">
                            <div class="col-sm-8" style="display: flex;flex-direction: row;justify-content: flex-start;">
                                <img src="https://cdn-icons-png.flaticon.com/128/2534/2534219.png" width="50" height="50" class="d-inline-block align-top" alt="" style="margin: auto 10px;">
                            <h4 class="mt-3">Transferencia Bancaria</h4>
                            </div>
                            <div class="col-sm-4">
                                <h2>300.00</h2>
                            </div>
                        </nav>
                        <nav class="navbar navbar-light bg-light col-sm-11 mt-1" style="margin-left: 4%;color:#333">
                            <div class="col-sm-8" style="display: flex;flex-direction: row;justify-content: flex-start;">
                                <img src="data:image/png;base64,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" width="50" height="50" class="d-inline-block align-top" alt="" style="margin: auto 10px;">
                            <h4 class="mt-3">M-pesa</h4>
                            </div>
                            <div class="col-sm-4">
                                <h2>300.00</h2>
                            </div>
                        </nav>
                        <nav class="navbar navbar-light bg-light col-sm-11 mt-1" style="margin-left: 4%;color:#333">
                            <div class="col-sm-8" style="display: flex;flex-direction: row;justify-content: flex-start;">
                                <img src="data:image/png;base64, " width="50" height="50" class="d-inline-block align-top" alt="" style="margin: auto 10px;">
                            <h4 class="mt-3">Emola</h4>
                            </div>
                            <div class="col-sm-4">
                                <h2>300.00</h2>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="col-sm-7 segunda3" style="padding: 0;display: flex;flex-direction: row;flex-wrap:wrap;overflow: auto;height:90vh;display:none;">
                    
                </div>
        
                <!-- Terceira Coluna -->
                <div class="col-sm-4 sticky-right" style="padding: 0;background: #eee;">
                    <div class="col-sm-12 text-center p-2" style="display: flex;flex-direction: row;justify-content: center">
                        <h3 id="nrpedido" style="font-size: 14pt;"></h3>
                    </div>
                    <div class="col-sm-12 p-2" style="background:#fff;height:70vh;overflow:auto;" id="poptempart">
                        
                    </div>
                    <div class="col-sm-12 text-center" style="display:flex; flex-direction:row;justify-content: space-between;background:#38D0ED;height:13vh;color:#fff;">
                        <div id="contas" class="col-sm-6" style="display:flex; flex-direction:column;justify-content: center;align-items: center;cursor:pointer;">
                            <i class="fa fa-print fa-3x" aria-hidden="true"></i>
                            <h4>Conta</h4>
                        </div>
                        <div class="col-sm-6" style="display:flex; flex-direction:column;justify-content: center;align-items: center;border-left: 1px solid #fff;cursor:pointer;" data-bs-toggle="modal" data-bs-target="#exampleModal3">
                            <h4>Total</h4>
                            <h2 class="ttl"></h2>
                        </div>
                    </div>
                </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 src="boxpos/scripts.js"></script>
    <script>
        $(function(){
            setInterval(nrpedido, 1000);
            setInterval(popprodtables, 5000);
			function nrpedido(){
				$.ajax({
						url: 'boxpos/nrpedido.php',
						type: 'GET',
						success: function(data) {
							$("#nrpedido").html(data);
						},
						error: function() {
							$("#nrpedido").html("Ocorreu um erro ao popular o numero do pedido!");
						}
				});
			}
            popprod();
            showtot();
            $(".ela").on('change', function(){
                var id = $(this).val();
                if(id == 111000){
                    popprod();
                }else{
                    $.ajax({
                        url: 'popprod.php',
                        type: 'GET',
                        data: {id: id},
                        success: function(data){
                            $(".segunda1").html(data);
                            $(".pdt").click(handleClick);
                            showtot();
                            qrcodefocus();
                        }
                    });
                }
            });
            function popprod(){
                $.ajax({
                    url: 'popprod.php',
                    type: 'GET',
                    success: function(data){
                        $(".segunda1").html(data);
                        $(".pdt").click(handleClick);
                        showtot();
                    }
                });
            }
            $('.busca').on('input', function() {
                var searchTerm = $(this).val();
                $.ajax({
                    url: 'boxpos/buscar_produtos.php',
                    type: 'POST',
                    data: { search: searchTerm },
                    success: function(data) {
                        $(".segunda1").html(data);
                        $(".pdt").click(handleClick);
                    }
                });
            });
            $("#contas").click(function(){
                ticket();
            });
            function ticket(){
                var mesa = $("#mesa").val();
                // Concatene a variável mesa à URL do arquivo ticket.php
                var url = "ticket_cliente.php?mesa=" + mesa;
            
                // Abra o arquivo ticket.php em uma nova aba do navegador
                window.open(url, '_blank');
            }
            

            
            function increaseQuantity(idProduto) {
                $.ajax({
                    url: 'boxpos/qtd_increase_cliente.php',
                    type: 'POST',
                    data: {
                            id: idProduto
                    },
                    success: function(data){
                        popprodtables();
                        showtot();
                    }
                });
            }
            

            
            function showtot() {
                var mesa = $("#mesa").val();
                $.ajax({
                    url: 'boxpos/show_tot_cliente.php',
                    type: 'GET',
                    data: {
                        mesa: mesa
                    },
                    success: function(data){
                        $(".ttl").html(data);
                    }
                });
            }
            
            function handleClick() {
                if (confirm("Tem certeza de que deseja adicionar este item?")) {
                    var idProduto = $(this).find("#id_produto").val(); // Obtém o valor do input dentro da div clicada
                    var mesa = $("#mesa").val();
                    console.log(idProduto+""+mesa);
                    $.ajax({
                        type: "POST",
                        url: "boxpos/addarttemp_cliente.php", // Especifique o arquivo PHP desejado
                        data: { idProduto: idProduto, mesa: mesa }, // Passa o valor do input como um parâmetro
                        success: function(response){
                            if(response == 1){
                                alert("O caixa encontra-se fechado para este usuario! Abra o caixa na seccao caixa no menu lateral esquerdo.");
                            } else if(response == 2){
                                alert("O stock deste artigo e inferior ou igual a quantidade solicitada");
                            } else if(response == 3){
                                popprodtables();
                                showtot();
                            } else if(response == 31){
                                alert("Ocorreu um erro ao adicionar o artigo! Contacte o administrador  do sistema.");
                            } else if(response == 40){
                                alert("Nao foram enviados parametros para a devida requisicao.");
                            } else if(response == 10){
                                alert("Nao foi possivel encontrar um artigo com este id.");
                            }
                            console.log(response);
                        }
                    });
                }
            }
        
            // Atribua a função ao manipulador de evento de clique

            $('#datatable').dataTable();
    
            $("[data-toggle=tooltip]").tooltip();
            
            function btnremover(idProduto){
                // Exiba uma caixa de diálogo de confirmação
                if (confirm("Tem certeza de que deseja remover este item?")) {
                    // Obtenha o ID do produto associado a este botão
                    var idProduto = idProduto;
                    
                    // Enviar requisição Ajax para remover o item
                    $.ajax({
                        url: 'boxpos/artremove.php', // Seu arquivo PHP para remover o item
                        method: 'POST',
                        data: { idProduto: idProduto },
                        success: function(response) {
                            popprodtables();
                            showtot();
                            console.log(response); // Exemplo de saída de resposta do servidor
                        },
                        error: function(xhr, status, error) {
                            // Lidar com erros de requisição Ajax, se necessário
                            console.error(xhr.responseText);
                        }
                    });
                }
            }
            
            
        });
    </script>
    </body>
</html>