<?php
session_start();
include '../../script/conexion.php';
require '../general/validacion.php';

$sucursal = $_GET['sucursal'];
?>
<!doctype html>
<html lang="en" class="light-theme">
    <head>
        <?php include '../general/libreria-css.php'; ?>
    </head>
    <body>
        <!--start wrapper-->
        <div class="wrapper">

            <!-- start page content wrapper-->
            <div class="page-content-wrapper">
                <!-- start page content-->
                <div class="page-content">

                    
                    
                    <div class="card">
                        <div class="card-body">

                            <h3 class="text-center"><b><?php echo $sucursal; ?></b></h3>
                        </div>
                    </div>

                    
                    
                    <div class="card">
                        <div class="card-body">
                            <h6 class="mb-0 text-uppercase">Lista de productos</h6>
                            <hr/>

                            <div class="bg-white rounded" style="box-shadow: 0px 0px 5px 1px #C3C3C3;">

                                <input class="form-control " type="text" id="searchInput" placeholder="Escribe para filtrar productos"  autofocus="">

                                <div class="row" id="productRow" style="padding: 10px; ">  

                                    <?php
                                    $sqltr = "SELECT * FROM traslado_detalle WHERE nombre_sucursal_destino='$sucursal' AND estado='Entregado' GROUP BY referencia_producto";
                                    $querytr = $conn->query($sqltr);
                                    if ($querytr->num_rows > 0) {
                                        while ($rowtr = $querytr->fetch_assoc()) {


                                            $sql = "SELECT * FROM producto WHERE referencia='" . $rowtr['referencia_producto'] . "' ";
                                            $query = $conn->query($sql);
                                            $row = $query->fetch_assoc();
                                            ?>
                                            <div class="col-6 col-sm-3 " style="padding: 3px; ">
                                                <a href="#" class="product-link" data-name="<?php echo $row['referencia'] ?>">

                                                    <div class="" style="border: 1px solid gainsboro; border-radius: 20px; ">
                                                        <div class="portfolio-head" style=" border-radius: 20px 20px 0px 0px; height: 180px; width: 100%;">

                                                            <?php
                                                            if ($row['foto1'] == 'No aplica') {
                                                                ?>
                                                                <img class="portfolio-img"  src="../../img-producto/camara.jpg" style="object-fit: contain; width:100%; height:100%;">
                                                                <?php
                                                            } else {
                                                                ?>
                                                                <img class="portfolio-img"  src="../../img-producto/<?php echo $row['foto1']; ?>" style="object-fit: contain; width:100%; height:100%;">
                                                                <?php
                                                            }
                                                            ?>

                                                        </div>
                                                        <!-- End portfolio-head -->
                                                        <div class="portfolio-content" style="padding-top: 0px;">
                                                            <br>
                                                            <div class="row">
                                                                <div class=" col-xs-12 col-md-12 pe-3 ps-3" >
                                                                    <p class="mb-0" style="  text-align: center;  height: 40px; line-height:14px; color: black;">
                                                                        <strong>REF: <?php echo $row['referencia']; ?></strong><br><!-- comment -->
                                                                        <b class="text-secondary"><?php echo $row['nombre_categoria']; ?></b>
                                                                    </p>

                                                                </div>
                                                            </div>

                                                            <div class="row" >
                                                                <div class=" col-xs-12 col-md-4">
                                                                </div>
                                                                <div class=" col-xs-12 col-md-8">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End portfolio-content -->
                                                    </div>
                                                    <!-- End portfolio-item -->

                                                </a>
                                            </div>
                                            <?php
                                        }
                                    }
                                    ?>
                                </div>
                            </div>

                        </div>
                    </div>



                    <?php echo include '../general/footer.php'; ?>
                </div>
            </div>
        </div>
        <!--end wrapper-->
        <?php echo include '../general/libreria-js.php'; ?>


        <script>
            const productLinks = document.querySelectorAll(".product-link");
            productLinks.forEach(link => {
                link.addEventListener("click", function (event) {
                    event.preventDefault();
                    const productName = this.getAttribute("data-name");

                    // Llenar los campos del formulario en la página principal
                    const productNameInput = window.opener.document.getElementById("referencia_producto");

                    productNameInput.value = productName;

                    // Cerrar la ventana emergente
                    window.close();
                });
            });
        </script>



        <script>
            const searchInput = document.getElementById('searchInput');
            const productRow = document.getElementById('productRow');
            const columns = productRow.getElementsByClassName('col-6 col-sm-3');

            let focusedColumnIndex = -1;

            searchInput.addEventListener('input', function () {
                const searchQuery = searchInput.value.toLowerCase();

                for (let i = 0; i < columns.length; i++) {
                    const productName = columns[i].querySelector('p').innerText.toLowerCase();
                    if (productName.includes(searchQuery)) {
                        columns[i].style.display = 'block';
                    } else {
                        columns[i].style.display = 'none';
                    }
                }

                // Reiniciamos el enfoque cuando se realiza una nueva búsqueda
                focusedColumnIndex = -1;
            });

            // Agregar eventos para navegar con las flechas del teclado
            document.addEventListener('keydown', function (event) {
                const arrowKeys = ['ArrowLeft', 'ArrowRight'];

                if (arrowKeys.includes(event.key)) {
                    event.preventDefault();

                    if (focusedColumnIndex === -1) {
                        // Si no hay ninguna columna enfocada, enfocar la primera visible
                        for (let i = 0; i < columns.length; i++) {
                            if (columns[i].style.display !== 'none') {
                                focusedColumnIndex = i;
                                break;
                            }
                        }
                    } else {
                        // Encontrar la siguiente columna visible según la flecha presionada
                        let nextColumnIndex;
                        if (event.key === 'ArrowLeft') {
                            nextColumnIndex = (focusedColumnIndex - 1 + columns.length) % columns.length;
                        } else if (event.key === 'ArrowRight') {
                            nextColumnIndex = (focusedColumnIndex + 1) % columns.length;
                        }

                        // Enfocar la siguiente columna visible
                        for (let i = 0; i < columns.length; i++) {
                            if (columns[nextColumnIndex].style.display !== 'none') {
                                columns[focusedColumnIndex].classList.remove('focused');
                                focusedColumnIndex = nextColumnIndex;
                                columns[focusedColumnIndex].classList.add('focused');
                                columns[focusedColumnIndex].focus();
                                break;
                            }
                            nextColumnIndex = (nextColumnIndex + 1) % columns.length;
                        }
                    }
                }
            });
        </script>


    </body>
</html>