 <!-- Modal PRODUCTOS-->
 <!--  -->
<style>
    .modalF{
        max-width: 90% !important;
    }
</style>

<div class="modal fade  justify-content-center" id="productos" tabindex="-1" role="dialog" data-keyboard="true">
    <div
        class="modal-dialog <?php if($_SESSION["TipoNecocio"]==1){echo("modal-fullscreen");}else{echo("modalF");} ?>  modal-fullscreen-xl-down">
        <div class="modal-content" style="overflow-y: auto; ">

            <!-- Modal Header -->
            <div class=" modal-header">
                <h4 class="modal-title">PRODUCTOS |</h4>

                <button href="#productos" id="salir" rel="modal:close" type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">Salir</button>

                <div class="d-flex col-md-4">
                    <div class="col-md-3"> </div>
                    <h1 class="col-md-10  bg-success" id="idmensajeMesa"></h1>
                </div>

                <div class=" row  justify-content-end " <?php if($_SESSION["TipoNecocio"]==0){echo("hidden");} ?> >

                    <label class="col-md-8 col-xl-6 col-sm-8 col-10"> <input class="totalCuadro col-12"
                            style=" height:55px;" type="text" id="totalfact2" name="totalfactura"
                            placeholder="$000.000.000" disabled="gc_disable"></input> </label>
                    <input class="col-md-4 col-sm-6 col-8 col-xl-3 facturar" type="button"
                        style="font-size: 1.5rem;  height:55px; cursor: pointer;" id="facturarr" value="Facturar">
                    </input>
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="d-flex flex-wrap justify-content-center" id="busss" style=" padding-top:10px; ">
            <div class="form-check col-md-2">
  <input class="form-check-input" type="checkbox" value="" id="idCerosInclui">
  <label class="form-check-label" for="flexCheckDefault">
   Incluir_Ceros
  </label>
</div>
                <label class="col-md-6 col-sm-12 col-lg-4 col-12" for=""><input id="busproducto"
                        class="searchProductos col-12" value="" type="search"
                        placeholder="Escribe el producto"></input></label>
                <label for="" class="col-md-2 col-sm-4 col-lg-1 m-1 col-4"><button type="button" class="btn btn-success"
                        id="buscarp">Buscar</button></label>
                <label for="" class="col-md-3 col-sm-4 col-lg-2 col-4" style=""
                    <?php if($tipoMenus==0||$tipoMenus=="0"){ echo($Activo);}else{echo("hidden");};?>>
                    <select name="" class="form-control-sm selectStyle" id="listPrecioMes">
                        <option value="lista1">list-1</option>
                        <option value="lista2">list-2</option>
                        <option value="lista3">list-3</option>
                    </select>
                </label>
            </div>

            <div class="row d-flex " style="max-height: 69vh;">

                <!-- aca -->
                <div class="accordion col-lg-2   col-sm-12" <?php if($tipoMenus=="1"){echo("hidden");} ?>
                    id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button " type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                CATEGORIAS
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show " aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">

                            <div <?php if($tipoMenus=="1"){echo("hidden");} ?> class="overflow-auto "
                                id="categoriasProd">

                                <?php
                           
                           $categ= new marcacategoria();
                           $dtosca=$categ->categoria();
                       while($fila=mysqli_fetch_object($dtosca)){
                       
                           
                           echo("<button   type='button' class='btn btn-info m-1  col-12 categoriasProductos' value='$fila->codcategoria' >$fila->nomcategoria</button>");

                           
                       }                                
                                   
                ?>

                            </div>

                        </div>
                    </div>
                </div>

                <!-- aca -->

                <!-- Modal body -->
                <div id="items"
                    class="modal-body   <?php if($tipoMenus=="1"){echo("col-lg-12");}else{echo(" col-lg-10");} ?> ">
                    <table id="tablep" <?php if($tipoMenus=="0"){echo("hidden");} ?>
                        class="table table-hover  table-wrapper-scroll-y my-custom-scrollbar col-md-12">
                        <thead class="posicio" style="position: sticky; top: 0;">
                            <tr>
                                <th scope="col" style="width:10%">Codigo</th>
                                <th scope="col" style="width:32%">Nombre</th>
                                <th scope="col" style="width:8%">Saldo_caja</th>
                                <th scope="col" style="width:12%">Precio caja</th>
                                <th scope="col" style="width:10%">Saldo_frcc</th>
                                <th scope="col" style="width:10%">Precio frcc</th>
                                <th scope="col" style="width:10%">Precio Blister</th>
                                <th scope="col" style="width:10%">Marca</th>
                                <th scope="col" style="width:10%">Ubicacion1</th>
                                <th scope="col" style="width:10%">Ubicacion2</th>
                                <th scope="col" style="width:10%">Bodega</th>
                            </tr>
                        </thead>

                        <tbody id="tablap" class="col-md-12 table table-bordered table-striped">

                        </tbody>

                    </table>


                    <!-- ///mesasss -->
                    <div class="row d-flex ">
                        <div id="menuMesas"  <?php if($tipoMenus=="1"){echo("hidden");} ?>
                            class="img-container row overflow-auto overflow-auto  m-0  <?php if($TipoNecocio=="1"){echo("col-md-11");}else{echo("col-md-12");} ?>  ">




                       
                        </div>

                    </div>

                    <!-- /////fin mesas -->

                </div>

                <!-- Modal footer -->
            </div>

            <div class="modal-footer justify-align-content-end">
                <div class="d-flex col-md-6">
<h4 class="m-1">Color Azul= Comision </h4>   | |     <h4 class="m-1">  Color Amarillo= Tralado E</h4>
                </div>
                
                <button href="#productos" id="salir" rel="modal:close" type="button" class="btn btn-secondary"   data-bs-dismiss="modal">Salir</button>
            </div>

        </div>
    </div>
</div>

<script>
    function ajustarAtributoShow() {
        var miElemento = document.getElementById('collapseOne');
        if (window.innerWidth < 992) { // Puedes ajustar este valor según tu necesidad
            miElemento.classList.remove('show');
        } else {
            miElemento.classList.add('show');
        }
    }
    // Llama a la función al cargar la página
    ajustarAtributoShow();
    // Agrega un evento al cambio de tamaño de la ventana
    window.addEventListener('resize', ajustarAtributoShow);
    // funcion desplazameinto con flechas hacia abajo
    document.addEventListener('DOMContentLoaded', function() {
        let tabla = document.getElementById('tablap');
        let filas = tabla.getElementsByTagName('tr');
        var filaActual = 0;
        let contenedorTabla = tabla.parentElement;
        document.addEventListener('keydown', function(event) {
            let elementoActivo = document.activeElement;
            if (elementoActivo.id == "buscarp" || elementoActivo.id == "productos") {
                switch (event.key) {
                    case 'ArrowUp':
                        if (filaActual > 0) {
                            desenfocarFila(filas[filaActual]);
                            filaActual--;
                            enfocarFila(filas[filaActual]);
                        }
                        break;
                    case 'ArrowDown':
                        if (filaActual < filas.length - 1) {
                            desenfocarFila(filas[filaActual]);
                            filaActual++;
                            enfocarFila(filas[filaActual]);
                        }
                        break;
                    case 'Enter':
                        // Verificar si la fila actual es válida antes de ejecutar el doble clic
                        if (filaActual >= 0 && filaActual < filas.length) {
                            ejecutarDobleClic(filas[filaActual]);
                            filaActual = 0;
                        }
                        break;
                }
            }
        });
        // Función para enfocar una fila
        function enfocarFila(fila) {
            fila.style.backgroundColor = 'lightgray';
            fila.scrollIntoView({
                behavior: "smooth",
                block: "nearest",
                inline: "start"
            });
            // Ajustar el scroll al principio del contenedor si la primera fila está enfocada
            if (filaActual === 0) {
                contenedorTabla.scrollTop = 0;
            }
        }
        // Función para desenfocar una fila
        function desenfocarFila(fila) {
            fila.style.backgroundColor = '';
        }
        // Función para ejecutar doble clic en la fila actual
        function ejecutarDobleClic(fila) {
            var eventoDobleClic = new MouseEvent('dblclick', {
                bubbles: true,
                cancelable: true,
                view: window
            });
            fila.dispatchEvent(eventoDobleClic);
            // Quitar el foco de la tabla
        }
    });
</script>