<?php 
    session_start();
    include_once '../conexao/index.php';
    error_reporting(E_ALL);
?>
<html>
    <head>
      <meta charset="utf-8">
      <title>iVone POS</title>
      <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">
      <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;
        }

        /* 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; 
    }
      </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row sticky-header">
                <div class="col-sm-1 text-center" style="background: #31B3D0;color: #fff;">
                    <i class="fa fa-bars fa-2x mt-3" aria-hidden="true"></i>
                </div>
                <div class="col-sm-7" 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" style="color:#ccc;border:none;">
                            <option>Categoria</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                       <input type="text" class="form-control mt-3" placeholder="Escreva o nome do artigo" style="border:none">
                       
                    </div>
                </div>
                <div class="col-sm-4" style="background: #fff;">
                    <ul class="list-unstyled mt-2" style="display:flex;flex-direction:row;justify-content:flex-end;">
                        <li>
                            <i class="fa fa-qrcode fa-3x" aria-hidden="true"></i>
                        </li>
                        <li style="margin-left: 8%;">
                            <i class="fa fa-users fa-3x" aria-hidden="true"></i>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <!-- Primeira Coluna -->
                <div class="col-sm-1 sticky-left" style="padding: 0;">
                    <ul class="list-unstyled text-center lista">
                        <li class="p-2 artigo">
                            <i class="fa fa-th-large fa-3x mb-2 mt-2" aria-hidden="true"></i>
                            <p>Artigos</p>
                        </li>
                        <li class="p-2 caixa">
                            <i class="fa fa-inbox fa-3x mb-2" aria-hidden="true"></i>
                            <p>Caixa</p>
                        </li>
                        <li class="p-2 relatorio">
                            <i class="fa fa-file fa-3x mb-2" aria-hidden="true"></i>
                            <p>Relat贸rios</p>
                        </li>
                    </ul>
                </div>
        
                <!-- Segunda Coluna -->
                <div class="col-sm-7 segunda1" style="padding: 0;display: flex;flex-direction: row;flex-wrap:wrap;overflow: auto;height:90vh">
                    <?php 
    					if (isset($_GET['id_categoria'])) {
    						$idd = $_GET['id_categoria'];
    						$sql = "SELECT * FROM produto WHERE id_catgeoria = '$idd'";
    						$rs = mysqli_query($db, $sql);
    						while ($dados = mysqli_fetch_array($rs)) {
    					?>
    						<div class="col-sm-3 text-center pdt" style="background:#fff; display:flex; flex-direction:column; align-items: center;justify-content: center;">
                                <img src="../img/imageProduto/<?php echo $dados['img'] ?>" style="width: 100%;">
                                <p class="h"><?php echo $dados['nomeproduto'] ?></p>
                            </div>
    					<?php
    						}
    					}else{
    						$sql = "SELECT * FROM produto";
    						$rs = mysqli_query($db, $sql);
    						while ($dados = mysqli_fetch_array($rs)) {
    					?>
    						<div class="col-sm-3 text-center pdt" style="background:#fff; display:flex; flex-direction:column; align-items: center;justify-content: center;">
                                <img src="../img/imageProduto/<?php echo $dados['img'] ?>" style="width: 100%;">
                                <p class="h"><?php echo $dados['nomeproduto'] ?></p>
                            </div>
    			<?php }} ?>
                </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">0.00</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: 250px;">
                              <button class="btn btn-danger">Abrir</button>
                          </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">3000.00</h2>
                          </div>
                          <div style="display: flex;flex-direction: row;justify-content: flex-end;">
                              <button class="btn btn-danger">Fechar</button>
                          </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;">
                    cfg
                </div>
        
                <!-- Terceira Coluna -->
                <div class="col-sm-4 sticky-right" style="padding: 0">
                    <div class="col-sm-12 text-center p-2">
                        <h3>Pedido(34)</h3>
                    </div>
                    <div class="col-sm-12 p-2" style="background:#fff;height:70vh;overflow:auto;">
                        <div class="container mt-2 col-sm-12">
                            <div class="card">
                                <!-- Div 1: Nome do Produto e Valor Total -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">UM QUARTO DE FRANGO/ BATATA/SALADA</h6>
                                        </div>
                                        <div class="col-md-4" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <h4 class="card-text">100000,00</h4>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Div 2: Botões de Ação -->
                                <div class="card-body" style="margin-top: -25px;">
                                    <div class="row">
                                        <div class="col-md-8" style="display:flex;flex-direction:row">
                                            <button class="btn btn-outline-secondary" type="button">-</button>
                                            <input type="text" class="form-control text-center" value="1" style="width: 50px;">
                                            <button class="btn btn-outline-secondary" type="button">+</button>
                                        </div>
                                        <div class="col-md-4 text-right" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <button class="btn btn-danger">Remover</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-2 col-sm-12">
                            <div class="card">
                                <!-- Div 1: Nome do Produto e Valor Total -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">UM QUARTO DE FRANGO/ BATATA/SALADA</h6>
                                        </div>
                                        <div class="col-md-4" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <h4 class="card-text">100000,00</h4>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Div 2: Botões de Ação -->
                                <div class="card-body" style="margin-top: -25px;">
                                    <div class="row">
                                        <div class="col-md-8" style="display:flex;flex-direction:row">
                                            <button class="btn btn-outline-secondary" type="button">-</button>
                                            <input type="text" class="form-control text-center" value="1" style="width: 50px;">
                                            <button class="btn btn-outline-secondary" type="button">+</button>
                                        </div>
                                        <div class="col-md-4 text-right" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <button class="btn btn-danger">Remover</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-2 col-sm-12">
                            <div class="card">
                                <!-- Div 1: Nome do Produto e Valor Total -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">UM QUARTO DE FRANGO/ BATATA/SALADA</h6>
                                        </div>
                                        <div class="col-md-4" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <h4 class="card-text">100000,00</h4>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Div 2: Botões de Ação -->
                                <div class="card-body" style="margin-top: -25px;">
                                    <div class="row">
                                        <div class="col-md-8" style="display:flex;flex-direction:row">
                                            <button class="btn btn-outline-secondary" type="button">-</button>
                                            <input type="text" class="form-control text-center" value="1" style="width: 50px;">
                                            <button class="btn btn-outline-secondary" type="button">+</button>
                                        </div>
                                        <div class="col-md-4 text-right" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <button class="btn btn-danger">Remover</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-2 col-sm-12">
                            <div class="card">
                                <!-- Div 1: Nome do Produto e Valor Total -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">UM QUARTO DE FRANGO/ BATATA/SALADA</h6>
                                        </div>
                                        <div class="col-md-4" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <h4 class="card-text">100000,00</h4>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Div 2: Botões de Ação -->
                                <div class="card-body" style="margin-top: -25px;">
                                    <div class="row">
                                        <div class="col-md-8" style="display:flex;flex-direction:row">
                                            <button class="btn btn-outline-secondary" type="button">-</button>
                                            <input type="text" class="form-control text-center" value="1" style="width: 50px;">
                                            <button class="btn btn-outline-secondary" type="button">+</button>
                                        </div>
                                        <div class="col-md-4 text-right" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <button class="btn btn-danger">Remover</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-2 col-sm-12">
                            <div class="card">
                                <!-- Div 1: Nome do Produto e Valor Total -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">UM QUARTO DE FRANGO/ BATATA/SALADA</h6>
                                        </div>
                                        <div class="col-md-4" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <h4 class="card-text">100000,00</h4>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Div 2: Botões de Ação -->
                                <div class="card-body" style="margin-top: -25px;">
                                    <div class="row">
                                        <div class="col-md-8" style="display:flex;flex-direction:row">
                                            <button class="btn btn-outline-secondary" type="button">-</button>
                                            <input type="text" class="form-control text-center" value="1" style="width: 50px;">
                                            <button class="btn btn-outline-secondary" type="button">+</button>
                                        </div>
                                        <div class="col-md-4 text-right" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <button class="btn btn-danger">Remover</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container mt-2 col-sm-12">
                            <div class="card">
                                <!-- Div 1: Nome do Produto e Valor Total -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">UM QUARTO DE FRANGO/ BATATA/SALADA</h6>
                                        </div>
                                        <div class="col-md-4" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <h4 class="card-text">100000,00</h4>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Div 2: Botões de Ação -->
                                <div class="card-body" style="margin-top: -25px;">
                                    <div class="row">
                                        <div class="col-md-8" style="display:flex;flex-direction:row">
                                            <button class="btn btn-outline-secondary" type="button">-</button>
                                            <input type="text" class="form-control text-center" value="1" style="width: 50px;">
                                            <button class="btn btn-outline-secondary" type="button">+</button>
                                        </div>
                                        <div class="col-md-4 text-right" style="display:flex;flex-direction:row;justify-content:flex-end;">
                                            <button class="btn btn-danger">Remover</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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 class="col-sm-6" style="display:flex; flex-direction:column;justify-content: center;align-items: center;">
                            <h4>Guardar</h4>
                        </div>
                        <div class="col-sm-6" style="display:flex; flex-direction:column;justify-content: center;align-items: center;border-left: 1px solid #fff;">
                            <h4>Pagar</h4>
                            <h2>1380,56</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>
    <script>
        $(function(){
            
            $(".artigo").click(function(){
                $(".segunda1").css({
                    display: "flex"
                });
                $(".segunda2").css({
                    display: "none"
                });
                $(".segunda3").css({
                    display: "none"
                });
            });
            $(".caixa").click(function(){
                $(".segunda1").css({
                    display: "none"
                });
                $(".segunda2").css({
                    display: "block"
                });
                $(".segunda3").css({
                    display: "none"
                });
            });
            $(".relatorio").click(function(){
                $(".segunda1").css({
                    display: "none"
                });
                $(".segunda2").css({
                    display: "none"
                });
                $(".segunda3").css({
                    display: "block"
                });
            });
            $(".pdt").hover(
                function(){
                    $(this).css({
                        background: "#EEEEEE",
                        cursor: "pointer",
                        borderRadius: "15px"
                    });
                },
                function(){
                    $(this).css({
                        background: "#fff",
                        borderRadius: "0"
                    });
                }
            );
            $(".lista li").hover(
                function(){
                    $(this).css({
                        background: "#fff",
                        cursor: "pointer"
                    });
                },
                function(){
                    $(this).css({
                        background: "#EEEEEE"
                    });
                }
            );
        });
    </script>
    </body>
</html>