<?php
session_start();
$host = 'localhost';
$db = 'trabajadores';
$username = 'root';
$password = 'root';

if (!isset($_SESSION['usuario'])) {
    header("Location: index.html");
    exit;
}

try {
    $conn = new mysqli($host, $username, $password, $db);

    if ($conn->connect_error) {
        die("Conexión fallida: " . $conn->connect_error);
    }

    $usuario = $_SESSION['usuario'];

    $sql = "SELECT NOMBRE, ROL FROM personal WHERE USUARIO = '$usuario'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $nombre = $row['NOMBRE'];
        $rol = $row['ROL'];

        // 👉 Agregamos la función para sacar iniciales
        function obtenerIniciales($nombreCompleto)
        {
            $partes = explode(' ', $nombreCompleto);
            $iniciales = '';

            foreach ($partes as $parte) {
                if (!empty($parte)) {
                    $iniciales .= strtoupper($parte[0]);
                }
            }
            return $iniciales;
        }

        $inicialesUsuario = obtenerIniciales($nombre);
    } else {
        $nombre = "Usuario";
        $rol = "Usuario";
        $inicialesUsuario = "US";
    }

    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="es" class="layout-navbar-fixed layout-compact layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="../assets/" data-template="vertical-menu-template">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Pedidos</title>
    <meta name="description" content="" />
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../assets/img/favicon/favicon.ico" />
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="../assets/vendor/fonts/boxicons.css" />

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/estilosdetablas.css">
    <link rel="stylesheet" href="../css/botonesfiltros.css">
    <link rel="stylesheet" href="../css/botonexportar.css">


    <!-- Core CSS -->
    <link rel="stylesheet" href="../assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="../assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

    <link rel="stylesheet" href="../assets/vendor/libs/apex-charts/apex-charts.css" />

    <!-- Page CSS -->

    <!-- Helpers -->
    <script src="../assets/vendor/js/helpers.js"></script>
    <script src="../assets/js/config.js"></script>


    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

    <style>
        .wow {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <!-- Layout wrapper -->
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <!-- Menu -->

            <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                <div class="app-brand demo">
                    <a href="index.html" class="app-brand-link">
                        <span class="app-brand-logo demo">
                            <svg
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                x="0px"
                                y="0px"
                                viewBox="0 0 2000 2000"
                                style="enable-background:new 0 0 2000 2000;"
                                xml:space="preserve"
                                width="100"
                                height="100">
                                <style type="text/css">
                                    .st0 {
                                        display: none;
                                    }

                                    .st1 {
                                        fill: #009DFF;
                                    }
                                </style>
                                <g id="Capa_1" class="st0">
                                    <image style="display:inline;overflow:visible;" width="2550" height="1558" transform="matrix(1 0 0 1 494.3726 289.1373)"></image>
                                </g>
                                <g id="Capa_2">
                                    <g>
                                        <rect x="183.89" y="18.31" class="st1" width="1632.23" height="526.02" />
                                        <polygon class="st1" points="1031.3,1629.99 1031.3,1711.86 1308.44,1711.86 1308.44,1825.3 1031.3,1825.3 1031.3,1907.13 1308.44,1907.13 1308.44,1981.69 691.56,1981.69 691.56,682.4 1308.44,682.4 1308.44,1629.99" />
                                    </g>
                                </g>
                                <g id="Capa_3" class="st0"></g>
                            </svg>
                        </span>
                        <span class="app-brand-text demo menu-text fw-bolder ms-2">Trax</span>
                    </a>

                    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                        <i class="bx bx-chevron-left bx-sm align-middle"></i>
                    </a>
                </div>

                <div class="menu-inner-shadow"></div>

                <ul class="menu-inner py-1">
                    <!-- Dashboard
            <li class="menu-item active">
              <a href="index.html" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                <div data-i18n="Analytics">Dashboard</div>
              </a>
            </li> -->

                    <!-- Layouts -->
                    <li class="menu-item ">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-layout"></i>
                            <div data-i18n="Layouts">Inicio</div>
                        </a>

                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="tablero.php" class="menu-link">
                                    <div data-i18n="Without menu">Tablero</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_cliente.php" class="menu-link">
                                    <div data-i18n="Without navbar">Agregar Cliente</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_proveedor.php" class="menu-link">
                                    <div data-i18n="Container">Agregar Proveedor</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nueva_cotizacion.php" class="menu-link">
                                    <div data-i18n="Fluid">Agregar Cotizacion</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_producto.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Producto</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="nueva_compra.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Compra</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="nueva_factura.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Factura</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Aspel SAE</span>
                    </li>
                    <li class="menu-item active open">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-line-chart"></i>
                            <div data-i18n="Account Settings">Ventas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="facturas.php" class="menu-link">
                                    <div data-i18n="Account">Facturas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdeventa.php" class="menu-link">
                                    <div data-i18n="Notifications">Notas de Venta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="trasladoscartaporte.php" class="menu-link">
                                    <div data-i18n="Connections">Carta Porte</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="remisiones.php" class="menu-link">
                                    <div data-i18n="Connections">Remisiones</div>
                                </a>
                            </li>
                            <li class="menu-item active">
                                <a href="pedidos.php" class="menu-link">
                                    <div data-i18n="Connections">Pedidos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cotizaciones.php" class="menu-link">
                                    <div data-i18n="Connections">Cotizaciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devoluciones.php" class="menu-link">
                                    <div data-i18n="Connections">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdecredito.php" class="menu-link">
                                    <div data-i18n="Connections">Notas de Crédito</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="parcialidades.php" class="menu-link">
                                    <div data-i18n="Connections">Parcialidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="comprobantesdepago.php" class="menu-link">
                                    <div data-i18n="Connections">Comprobantes</div>
                                </a>
                            <li class="menu-item">
                                <a href="estadisticas.php" class="menu-link">
                                    <div data-i18n="Connections">Estadisticas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticascli.php" class="menu-link">
                                    <div data-i18n="Connections">Ventas X Cliente</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-user"></i>
                            <div data-i18n="Authentications">Clientes</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="clientes.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxcobrar.php" class="menu-link">
                                    <div data-i18n="Basic">Cuentas X Cobrar</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="clientespoliza.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes con Póliza</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="clientestimbres.php" class="menu-link">
                                    <div data-i18n="ClientStamps">Clientes Timbres</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="clientesistemas.php" class="menu-link">
                                    <div data-i18n="ClientSystems">Clientes Sistemas</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-package"></i>
                            <div data-i18n="Misc">Inventarios</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="productos.php" class="menu-link">
                                    <div data-i18n="Error">Productos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="existencias.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Existencias</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-shopping-bag"></i>
                            <div data-i18n="Misc">Compras</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="compras.php" class="menu-link">
                                    <div data-i18n="Error">Compras</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="recepciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Recepciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ordenes.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Ordenes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="requisiciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Requisiciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devolucionescom.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticasprove.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Compras X Proveedor</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-group"></i>
                            <div data-i18n="Misc">Proveedores</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="proveedores.php" class="menu-link">
                                    <div data-i18n="Error">Proveedores</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxpagar.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Cuentas X Pagar</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <!-- Aspel COI -->
                    <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel COI</span></li>

                    <!-- Extended components -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-copy"></i>
                            <div data-i18n="Extended UI">Cuentas y Pólizas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="cuentas.php" class="menu-link">
                                    <div data-i18n="Perfect Scrollbar">Cuentas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="polizas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="activos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="auxiliares.php" class="menu-link">
                                    <div data-i18n="Text Divider">Auxiliares</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestosPD.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos DP</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="monedas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Monedas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="departamentos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Departamentos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="otrosimpuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Otros Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="activosgenerales.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos Generales</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldosDP.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos DP</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="rubros.php" class="menu-link">
                                    <div data-i18n="Text Divider">Rubros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ccostos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Centro de Costos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="concepto.php" class="menu-link">
                                    <div data-i18n="Text Divider">Conceptos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="regpol.php" class="menu-link">
                                    <div data-i18n="Text Divider">Registro de Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="impuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="timbres.php" class="menu-link">
                                    <div data-i18n="Text Divider">Timbres</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- Aspel BANCO -->
                    <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel BANCO</span></li>
                    <!-- Forms -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-credit-card"></i>
                            <div data-i18n="Form Elements">Movimientos</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item ">
                                <a href="movimientos.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="moneda.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Moneda</div>
                                </a>

                            </li>
                            <li class="menu-item ">
                                <a href="beneficiosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Beneficios</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="cuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Cuentas ban</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="formadepagoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Forma de pago</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="parametrosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Partidas de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="comprobantedeldocumentoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Comprobante del documento</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="centrodecuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Conceptos de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="historialxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Historial</div>
                                </a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </aside>
            <!-- / Menu -->



            <!-- Layout container -->
            <div class="layout-page">
                <!-- Navbar -->
                <nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
                    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                        <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                        </a>
                    </div>

                    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                        <!-- Search -->
                        <div class="navbar-nav align-items-center">
                            <div class="nav-item d-flex align-items-center">
                                <i class="bx bx-search fs-4 lh-0"></i>
                                <input
                                    type="text"
                                    class="form-control border-0 shadow-none"
                                    placeholder="Buscar..."
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalBusqueda" />

                                <!-- Resultados -->
                                <ul id="searchResults" class="list-group search-dropdown"></ul>
                            </div>
                        </div>
                        <style>
                            /* Estilos para el desplegable */
                            .search-dropdown {
                                position: absolute;
                                top: 100%;
                                left: 0;
                                right: 0;
                                z-index: 9999;
                                margin-top: 0.2rem;
                                background: white;
                                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                                border-radius: 0.25rem;
                                overflow-y: auto;
                                max-height: 300px;
                            }

                            .search-dropdown li {
                                cursor: pointer;
                            }

                            .search-dropdown li:hover {
                                background-color: #f0f0f0;
                            }
                        </style>

                        <!-- /Search -->

                        <ul class="navbar-nav flex-row align-items-center ms-auto">



                            <!-- icono de idioma  -->
                            <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="icon-base bx bx-globe icon-md"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                    <li>
                                        <a class="dropdown-item active" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
                                            <span>French</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
                                            <span>Arabic</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
                                            <span>German</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <!-- Icono de modo oscuro -->
                            <li class="nav-item dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" id="nav-theme" href="javascript:void(0);" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
                                    <i class="bx-sun icon-base bx icon-md theme-icon-active"></i>
                                    <span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
                                </a>

                                <!-- Submenu de modo oscuro -->
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text" data-bs-popper="static">
                                    <li>
                                        <button type="button" class="dropdown-item align-items-center active" data-bs-theme-value="light" aria-pressed="true">
                                            <span>
                                                <i class="icon-base bx bx-sun icon-md me-3" data-icon="sun"></i>Claro
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-moon icon-md me-3" data-icon="moon"></i>Oscuro
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="system" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-desktop icon-md me-3" data-icon="desktop"></i>Dispositivo
                                            </span>
                                        </button>
                                    </li>

                                </ul>
                                <!-- Aquí termina submenu -->
                            </li>


                            <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <i class="icon-base bx bx-grid-alt icon-md"></i>
                                </a>
                                <!-- submenu -->
                                <div class="dropdown-menu dropdown-menu-end p-0">
                                    <div class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Shortcuts</h6>
                                            <a href="javascript:void(0)" class="dropdown-shortcuts-add py-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Add shortcuts" data-bs-original-title="Add shortcuts"><i class="icon-base bx bx-plus-circle text-heading"></i></a>
                                        </div>
                                    </div>
                                    <div class="dropdown-shortcuts-list scrollable-container ps">
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-calendar icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-calendar.html" class="stretched-link">Calendar</a>
                                                <small>Appointments</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-food-menu icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
                                                <small>Manage Accounts</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-user icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-user-list.html" class="stretched-link">User App</a>
                                                <small>Manage Users</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-check-shield icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-access-roles.html" class="stretched-link">Role Management</a>
                                                <small>Permission</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-pie-chart-alt-2 icon-26px text-heading"></i>
                                                </span>
                                                <a href="index.html" class="stretched-link">Dashboard</a>
                                                <small>User Dashboard</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-cog icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
                                                <small>Account Settings</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-help-circle icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-faq.html" class="stretched-link">FAQs</a>
                                                <small>FAQs &amp; Articles</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-window-open icon-26px text-heading"></i>
                                                </span>
                                                <a href="modal-examples.html" class="stretched-link">Modals</a>
                                                <small>Useful Popups</small>
                                            </div>
                                        </div>
                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- aqui termina submenu -->

                            </li>

                            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <span class="position-relative">
                                        <i class="icon-base bx bx-bell icon-md"></i>
                                        <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
                                    </span>
                                </a>

                                <!--empiezan las notificaciones -->
                                <ul class="dropdown-menu dropdown-menu-end p-0">
                                    <li class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Notification</h6>
                                            <div class="d-flex align-items-center h6 mb-0">
                                                <span class="badge bg-label-primary me-2">8 New</span>
                                                <a href="javascript:void(0)" class="dropdown-notifications-all p-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Mark all as read" data-bs-original-title="Mark all as read"><i class="icon-base bx bx-envelope-open text-heading"></i></a>
                                            </div>
                                        </div>
                                    </li>


                                    <li class="dropdown-notifications-list scrollable-container ps">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <img src="../../assets/img/avatars/1.png" alt="" class="rounded-circle">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
                                                        <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
                                                        <small class="text-body-secondary">1h ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">Charles Franklin</h6>
                                                        <small class="mb-1 d-block text-body">Accepted your connection</small>
                                                        <small class="text-body-secondary">12hr ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <img src="../../assets/img/avatars/2.png" alt="" class="rounded-circle">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">New Message ✉️</h6>
                                                        <small class="mb-1 d-block text-body">You have new message from Natalie</small>
                                                        <small class="text-body-secondary">1h ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>

                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </li>

                                    <li class="border-top">
                                        <div class="d-grid p-4">
                                            <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
                                                <small class="align-middle">View all notifications</small>
                                            </a>
                                        </div>
                                    </li>
                                </ul> <!-- termina submenu de notificaciones -->
                            </li>


                            <!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <div class="avatar avatar-online">
                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar avatar-online">
                                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <span class="fw-semibold d-block"><?php echo htmlspecialchars($nombre); ?></span>
                                                    <small class="text-muted"><?php echo htmlspecialchars($rol); ?></small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="index.html">
                                            <i class="bx bx-power-off me-2"></i>
                                            <span class="align-middle">Cerrar Sesión</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!--/ User -->
                        </ul>
                    </div>
                </nav>
                <!-- / Navbar -->





                <!-- Content wrapper -->
                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="card mb-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                            <h5 class="card-header">Movimiento <span class="text-danger"> Al Inventario</span></h5>

                            <form class="card-body" action="leer_movimiento_inventario.php" id="CompraForm" method="post">
                                <h6>1. Detalles Del Movimiento</h6>
                                <div class="row">
                                    <!-- Columna izquierda: Concepto -->
                                    <div class="col-md-6">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <small class="fw-medium">Concepto</small>
                                            </div>
                                            <div class="card-body">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="concepto-numero">Número</label>
                                                        <input class="form-control" type="text" id="concepto-numero" name="concepto_numero" readonly>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label" for="concepto-descripcion">Descripción</label>
                                                        <select class="form-control" id="concepto-descripcion" name="concepto_descripcion">
                                                            <option value="">Selecciona una descripción</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <!-- Columna derecha: Documento -->
                                    <div class="col-md-6">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <small class="fw-medium">Documento</small>
                                            </div>
                                            <div class="card-body">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="documento-tipo">Tipo</label>
                                                        <input class="form-control" type="text" id="documento-tipo" name="documento_tipo" value="Mov. al Inventario" readonly>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="documento-numero">Documento</label>
                                                        <input class="form-control" type="text" id="documento-numero" name="documento_numero">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-6">
                                    <div class="col-md-4">
                                        <label class="form-label" for="fecha">Fecha</label>
                                        <input class="form-control" type="date" id="fecha" name="fecha" min="">
                                    </div>

                                    <!-- Aquí va el campo dinámico cliente/proveedor -->
                                    <div class="col-md-4" id="campo-dinamico">
                                        <!-- Se inyecta por JS si aplica -->
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label" for="almacenSelect">Almacén</label>
                                        <select class="form-control" name="almacen" id="almacenSelect" required>
                                            <option value="">Selecciona un almacén</option>
                                        </select>
                                    </div>
                                </div>


                                <hr class="my-6 mx-n6">

                                <h6>2. Detalles Productos</h6>
                                <div class="divider divider-dashed">
                                    <div class="divider-text">Selecciona Tus Productos</div>
                                </div>

                                <!-- Buscador -->
                                <div class="row g-4 mb-3">
                                    <div class="row justify-content-center g-4 mb-3">
                                        <div class="col-md-6">
                                            <div class="text-center">
                                                <input type="text" class="form-control" id="buscar-producto" placeholder="Buscar Productos">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Lista de Productos -->
                                <ul class="list-group" id="lista-productos" style="max-height: 200px; overflow-y: auto;"></ul>

                                <!-- Contenedor de Partidas -->
                                <div id="contenedor-partidas" class="mt-4">
                                    <!-- Plantilla de Partida -->
                                    <div class="row g-3 partida" style="display: none;">
                                        <div class="col-md-1">
                                            <label class="form-label">Partida</label>
                                            <input type="text" class="form-control partida-num" name="partida[]" readonly>
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Cantidad</label>
                                            <input type="number" class="form-control cantidad" name="cantidad[]" min="1" value="1">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Producto</label>
                                            <input type="text" class="form-control producto" name="producto[]" readonly>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Descripción</label>
                                            <input type="text" class="form-control descripcion" name="descripcion[]" readonly>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Costo por Unidad</label>
                                            <input type="number" class="form-control precio" name="precio[]" min="0" step="any">
                                        </div>

                                        <div class="col-md-2">
                                            <label class="form-label">Total</label>
                                            <input type="number" class="form-control total" name="total[]" min="0" readonly>
                                        </div>
                                        <div class="col-md-1 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger btn-eliminar">Eliminar</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Inputs ocultos -->
                                <input type="hidden" name="subtotal" id="subtotal">
                                <input type="hidden" name="descuento_monto" id="descuento_monto">
                                <input type="hidden" name="importe" id="importe">
                                <input type="hidden" id="descuento" value="0">

                                <hr>
                                <br>
                                <!-- RESUMEN Y ACCIONES -->
                                <div class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row">
                                    <div class="pt-6 mb-2 mb-sm-0">
                                        <button type="submit" class="btn btn-danger me-3">Enviar</button>
                                        <button type="button" class="btn btn-label-secondary" onclick="location.reload();">Cancelar</button>

                                    </div>

                                    <div class="text-end">
                                        <p class="mb-0 fw-bold">Total: <span id="subtotal-general">$0.00</span></p>
                                    </div>
                                </div>




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


                <!-- Overlay -->
                <div class="layout-overlay layout-menu-toggle"></div>
            </div>
            <!-- / Layout wrapper -->



            <!-- Core JS -->
            <!-- build:js assets/vendor/js/core.js -->
            <script src="../assets/vendor/libs/jquery/jquery.js"></script>
            <script src="../assets/vendor/libs/popper/popper.js"></script>
            <script src="../assets/vendor/js/bootstrap.js"></script>
            <script src="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

            <script src="../assets/vendor/js/menu.js"></script>
            <!-- endbuild -->

            <!-- Vendors JS -->
            <script src="../assets/vendor/libs/apex-charts/apexcharts.js"></script>

            <!-- Main JS -->
            <script src="../assets/js/main.js"></script>

            <!-- Page JS -->
            <script src="../assets/js/dashboards-analytics.js"></script>

            <!-- Place this tag in your head or just before your close body tag. -->
            <script async defer src="https://buttons.github.io/buttons.js"></script>

            <!-- WOW.js -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
            <script>
                new WOW().init();
            </script>


            <div class="modal fade" id="modalBusqueda" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Buscar módulo</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group mb-4">
                                <span class="input-group-text"><i class="bx bx-search"></i></span>
                                <input type="text" id="modalSearchInput" class="form-control" placeholder="Buscar módulo..." autocomplete="off">
                            </div>

                            <div class="row" id="modulosEstaticos">
                                <!-- Columna 1 -->
                                <div class="col-md-4 mb-4">
                                    <!-- Inicio -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-home me-1"></i> Inicio
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1">
                                                <a href="tablero.php"><i class="bx bx-home-smile me-2"></i> Panel principal</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- Ventas -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-money me-1"></i> Ventas
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="facturas.php"><i class="bx bx-file me-2"></i> Facturas</a></li>
                                        </ul>
                                    </div>
                                    <!-- Clientes -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-user me-1"></i> Clientes
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="clientes.php"><i class="bx bx-user-pin me-2"></i> Clientes</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <!-- Columna 2 -->
                                <div class="col-md-4 mb-4">
                                    <!-- Inventario -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-package me-1"></i> Inventario
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="productos.php"><i class="bx bx-cube me-2"></i> Productos</a></li>
                                        </ul>
                                    </div>
                                    <!-- Compras -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-cart me-1"></i> Compras
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="compras.php"><i class="bx bx-purchase-tag me-2"></i> Compras</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <!-- Columna 3 -->
                                <div class="col-md-4 mb-4">
                                    <!-- Proveedores -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-building me-1"></i> Proveedores
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="proveedores.php"><i class="bx bx-user-voice me-2"></i> Proveedores</a></li>
                                        </ul>
                                    </div>
                                    <!-- Cuentas -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-wallet me-1"></i> Cuentas
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="cuentas.php"><i class="bx bx-credit-card me-2"></i> Cuentas</a></li>
                                        </ul>
                                    </div>
                                    <!-- Movimientos -->
                                    <div class="mb-3">
                                        <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                            <i class="bx bx-transfer me-1"></i> Movimientos
                                        </small>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-0 py-1"><a href="movimientos.php"><i class="bx bx-transfer-alt me-2"></i> Movimientos</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- Resultados de búsqueda -->
                            <ul id="modalSearchResults" class="list-group mb-3"></ul>

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

            <style>
                /* Ocultar resultados inicialmente */
                #modalSearchResults {
                    display: none;
                    max-height: 300px;
                    overflow-y: auto;
                }
            </style>



            <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
            <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
            <script src="https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"></script>
            <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/natural.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <!-- Animacion para alerta de envio -->
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

            <script>
                document.getElementById("modalSearchInput").addEventListener("input", function() {
                    const query = this.value.trim();
                    const results = document.getElementById("modalSearchResults");
                    const modulos = document.getElementById("modulosEstaticos");

                    results.innerHTML = "";

                    if (query.length < 2) {
                        // Mostrar módulos estáticos y ocultar resultados
                        modulos.style.display = "flex"; // o "block" si prefieres
                        results.style.display = "none";
                        return;
                    }

                    // Ocultar módulos estáticos y mostrar resultados
                    modulos.style.display = "none";
                    results.style.display = "block";

                    fetch("buscar_archivos.php?q=" + encodeURIComponent(query))
                        .then(response => response.json())
                        .then(data => {
                            if (data.length === 0) {
                                results.innerHTML = `<li class="list-group-item text-muted">No se encontraron resultados</li>`;
                                return;
                            }

                            data.forEach(item => {
                                const li = document.createElement("li");
                                li.className = "list-group-item list-group-item-action";
                                li.innerHTML = `<i class="bx bx-link-alt me-2"></i> ${item.titulo}`;
                                li.addEventListener("click", () => {
                                    window.location.href = item.archivo;
                                });
                                results.appendChild(li);
                            });
                        })
                        .catch(error => {
                            console.error("Error al buscar:", error);
                        });
                });
            </script>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const selectDescripcion = document.getElementById('concepto-descripcion');
                    const inputNumero = document.getElementById('concepto-numero');
                    const campoDinamico = document.getElementById('campo-dinamico');
                    let conceptos = [];
                    let proveedores = [];
                    let cliente = [];

                    // Obtener conceptos
                    fetch('obtener_conceptos_movalma.php')
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                conceptos = data.data;
                                data.data.forEach(c => {
                                    const option = document.createElement('option');
                                    option.value = c.CVE_CPTO;
                                    option.textContent = c.DESCR;
                                    option.dataset.cpn = c.CPN;
                                    selectDescripcion.appendChild(option);
                                });
                            } else {
                                console.error('Error en la respuesta:', data.error);
                            }
                        })
                        .catch(error => console.error('Error de red:', error));

                    // Obtener proveedores (al inicio)
                    fetch('obtener_proveedor_movalma.php')
                        .then(res => res.json())
                        .then(data => {
                            proveedores = data;
                        })
                        .catch(error => console.error('Error al obtener proveedores:', error));

                    // Al seleccionar concepto
                    selectDescripcion.addEventListener('change', function() {
                        const selectedOption = this.options[this.selectedIndex];
                        const concepto = conceptos.find(c => c.CVE_CPTO == selectedOption.value);
                        if (concepto) {
                            inputNumero.value = concepto.CVE_CPTO;
                            campoDinamico.innerHTML = '';

                            if (concepto.CPN === 'C') {
                                campoDinamico.innerHTML = `
                <label class="form-label" for="clave_clpv">Cliente</label>
                <select class="form-control" id="clave_clpv" name="clave_clpv">
                    <option value="">Seleccione un cliente</option>
                </select>
            `;
                                fetch('obtener_clientes_movalma.php')
                                    .then(res => res.json())
                                    .then(clientes => {
                                        const select = document.getElementById('clave_clpv');
                                        clientes.forEach(c => {
                                            const option = document.createElement('option');
                                            option.value = c.CLAVE;
                                            option.textContent = `${c.CLAVE} - ${c.NOMBRE}`;
                                            select.appendChild(option);
                                        });
                                    })
                                    .catch(err => console.error('Error al obtener clientes:', err));

                            } else if (concepto.CPN === 'P') {
                                campoDinamico.innerHTML = `
                <label class="form-label" for="clave_clpv">Proveedor</label>
                <select class="form-control" id="clave_clpv" name="clave_clpv">
                    <option value="">Seleccione un proveedor</option>
                </select>
            `;
                                const select = document.getElementById('clave_clpv');
                                proveedores.forEach(p => {
                                    const option = document.createElement('option');
                                    option.value = p.CLAVE;
                                    option.textContent = `${p.CLAVE} - ${p.NOMBRE}`;
                                    select.appendChild(option);
                                });
                            }

                        } else {
                            inputNumero.value = '';
                            campoDinamico.innerHTML = '';
                        }
                    });

                });
            </script>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const fechaInput = document.getElementById('fecha');
                    const hoy = new Date();
                    const yyyy = hoy.getFullYear();
                    const mm = String(hoy.getMonth() + 1).padStart(2, '0');
                    const dd = String(hoy.getDate()).padStart(2, '0');
                    const fechaHoy = `${yyyy}-${mm}-${dd}`;
                    fechaInput.min = fechaHoy;
                    fechaInput.value = fechaHoy; // Aquí asignamos la fecha de hoy automáticamente
                });
            </script>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const almacenSelect = document.getElementById('almacenSelect');
                    const lista = document.getElementById('lista-productos');
                    const buscar = document.getElementById('buscar-producto');
                    const contenedor = document.getElementById('contenedor-partidas');
                    const plantilla = contenedor.querySelector('.partida');

                    const subtotalText = document.getElementById('subtotal-general');
                    const descuentoText = document.getElementById('descuento-monto');
                    const totalText = document.getElementById('total-general');
                    const inputSubtotal = document.getElementById('subtotal');
                    const inputDescuentoMonto = document.getElementById('descuento_monto');
                    const inputImporte = document.getElementById('importe');
                    const inputDescuento = document.getElementById('descuento');

                    let productos = [];
                    let contadorPartidas = 0;

                    // Debounce para búsqueda
                    function debounce(fn, delay) {
                        let timeout;
                        return function(...args) {
                            clearTimeout(timeout);
                            timeout = setTimeout(() => fn.apply(this, args), delay);
                        };
                    }

                    // Cargar almacenes
                    fetch('obtener_almacenes_movalma.php')
                        .then(res => res.json())
                        .then(data => {
                            almacenSelect.innerHTML = '';
                            data.forEach(a => {
                                const option = document.createElement('option');
                                option.value = a.CVE_ALM;
                                option.textContent = `${a.CVE_ALM} - ${a.DESCR}`;
                                almacenSelect.appendChild(option);
                            });
                            if (data.length) {
                                almacenSelect.value = data[0].CVE_ALM;
                                cargarProductosPorAlmacen(data[0].CVE_ALM);
                            }
                        }).catch(console.error);

                    almacenSelect.addEventListener('change', e => {
                        cargarProductosPorAlmacen(e.target.value);
                    });

                    // Cargar productos por almacen - ASUME que backend ya devuelve precio y tipo_ele
                    function cargarProductosPorAlmacen(almacen) {
                        fetch(`obtener_productos_movalma.php?almacen=${encodeURIComponent(almacen)}`)
                            .then(res => res.json())
                            .then(data => {
                                // Si no vienen precios, aquí deberías obtenerlos de otra forma optimizada.
                                productos = data.map(p => {
                                    // Forzar precio a 2 decimales y tipo_ele uppercase
                                    p.PRECIO = p.PRECIO ? parseFloat(p.PRECIO).toFixed(2) : '0.00';
                                    p.TIPO_ELE = (p.TIPO_ELE || '').toUpperCase();
                                    return p;
                                });
                                renderLista(productos);
                            })
                            .catch(console.error);
                    }

                    // Renderizar lista con DocumentFragment para mejor performance
                    function renderLista(data) {
                        lista.innerHTML = '';
                        if (!Array.isArray(data) || data.length === 0) {
                            lista.innerHTML = '<li class="list-group-item">No hay productos disponibles</li>';
                            return;
                        }

                        const fragment = document.createDocumentFragment();
                        data.forEach(prod => {
                            const linea = prod.LIN_PROD || 'Ninguno';
                            const item = document.createElement('li');
                            item.className = 'list-group-item d-flex justify-content-between align-items-center';
                            item.innerHTML = `
                <div>
                    <strong>${prod.CVE_ART}</strong> - ${prod.DESCR}<br>
                    <small>Existencia: ${prod.EXIST} | Unidad: ${prod.UNI_MED} | Línea: ${linea} | Precio: $${prod.PRECIO}</small>
                </div>
                <div>
                    <button type="button" class="btn btn-primary btn-sm btn-seleccionar"
                        data-clave="${prod.CVE_ART}"
                        data-descripcion="${prod.DESCR}"
                        data-tipo-ele="${prod.TIPO_ELE}">
                        Seleccionar
                    </button>
                </div>
            `;
                            fragment.appendChild(item);
                        });
                        lista.appendChild(fragment);
                    }

                    // Búsqueda con debounce para evitar demasiados filtros
                    buscar.addEventListener('input', debounce(() => {
                        const t = buscar.value.trim().toLowerCase();
                        if (!productos.length) {
                            lista.innerHTML = `<li class="list-group-item">No hay productos cargados</li>`;
                            return;
                        }
                        if (t === '') {
                            renderLista(productos);
                            return;
                        }
                        const filtrados = productos.filter(p =>
                            (p.CVE_ART && p.CVE_ART.toLowerCase().includes(t)) ||
                            (p.DESCR && p.DESCR.toLowerCase().includes(t))
                        );
                        if (filtrados.length === 0) {
                            lista.innerHTML = `<li class="list-group-item">No se encontraron productos</li>`;
                        } else {
                            renderLista(filtrados);
                        }
                    }, 200));

                    // Click en seleccionar producto, NO recargar precio porque ya está cargado
                    lista.addEventListener('click', e => {
                        if (!e.target.classList.contains('btn-seleccionar')) return;

                        e.preventDefault();

                        const btn = e.target;
                        const clave = btn.dataset.clave;
                        const descripcion = btn.dataset.descripcion;
                        const tipoEle = (btn.dataset.tipoEle || '').trim().toUpperCase();

                        if (tipoEle === 'S') {
                            alert('Este producto es un Servicio y no se puede seleccionar para movimientos.');
                            return;
                        }

                        // Obtener producto de la lista con precio ya cargado
                        const prod = productos.find(p => p.CVE_ART === clave);
                        if (!prod) {
                            alert('Producto no encontrado.');
                            return;
                        }
                        const precioInicial = prod.PRECIO;

                        // Buscar partida existente para sumar
                        const partidaExistente = Array.from(contenedor.querySelectorAll('.partida'))
                            .find(p => p.querySelector('.producto').value === clave);

                        if (partidaExistente) {
                            const cantidadInput = partidaExistente.querySelector('.cantidad');
                            cantidadInput.value = parseFloat(cantidadInput.value) + 1;
                            partidaExistente.querySelector('.total').value =
                                (parseFloat(cantidadInput.value) * parseFloat(precioInicial)).toFixed(2);
                            actualizarTotales();
                            return;
                        }

                        let partida;
                        if (contadorPartidas === 0 && plantilla.style.display === 'none') {
                            plantilla.style.display = '';
                            partida = plantilla;
                        } else {
                            partida = plantilla.cloneNode(true);
                            partida.style.display = '';
                            contenedor.appendChild(partida);
                        }

                        partida.querySelector('.producto').value = clave;
                        partida.querySelector('.descripcion').value = descripcion;
                        partida.querySelector('.precio').value = precioInicial;
                        partida.querySelector('.cantidad').value = 1;
                        partida.querySelector('.total').value = precioInicial;

                        const cantidadInput = partida.querySelector('.cantidad');
                        const precioInput = partida.querySelector('.precio');
                        const totalInput = partida.querySelector('.total');

                        function recalcularTotalPartida() {
                            const cantidad = parseFloat(cantidadInput.value) || 0;
                            const precio = parseFloat(precioInput.value) || 0;
                            totalInput.value = (cantidad * precio).toFixed(2);
                            actualizarTotales();
                        }

                        cantidadInput.addEventListener('input', recalcularTotalPartida);
                        precioInput.addEventListener('input', recalcularTotalPartida);

                        partida.querySelector('.btn-eliminar').addEventListener('click', () => {
                            partida.remove();
                            actualizarNumeracion();
                            actualizarTotales();
                        });

                        contadorPartidas++;
                        actualizarNumeracion();
                        actualizarTotales();
                    });

                    function actualizarNumeracion() {
                        const partidas = contenedor.querySelectorAll('.partida:not([style*="display: none"])');
                        partidas.forEach((p, i) => {
                            const numInput = p.querySelector('.partida-num');
                            if (numInput) numInput.value = i + 1;
                        });
                    }

                    function actualizarTotales() {
                        let subtotal = 0;
                        contenedor.querySelectorAll('.partida:not([style*="display: none"])').forEach(p => {
                            const cantidad = parseFloat(p.querySelector('.cantidad').value) || 0;
                            const precio = parseFloat(p.querySelector('.precio').value) || 0;
                            subtotal += cantidad * precio;
                        });

                        const descuento = parseFloat(inputDescuento.value) || 0;
                        const descuentoMonto = subtotal * (descuento / 100);
                        const total = subtotal - descuentoMonto;

                        subtotalText.textContent = `$${subtotal.toFixed(2)}`;
                        descuentoText.textContent = `$${descuentoMonto.toFixed(2)}`;
                        totalText.textContent = `$${total.toFixed(2)}`;

                        inputSubtotal.value = subtotal.toFixed(2);
                        inputDescuentoMonto.value = descuentoMonto.toFixed(2);
                        inputImporte.value = total.toFixed(2);
                    }
                });
            </script>

            <!-- Script para manejar inputs agregados dinámicamente -->
            <script>
                document.addEventListener('input', function(e) {
                    if (e.target.classList.contains('precio')) {
                        e.target.addEventListener('wheel', function(ev) {
                            ev.preventDefault();
                            const current = parseFloat(this.value) || 0;
                            const newVal = ev.deltaY < 0 ? current + 1 : current - 1;
                            this.value = newVal.toFixed(2);
                        });

                        e.target.addEventListener('blur', function() {
                            const val = parseFloat(this.value);
                            if (!isNaN(val)) {
                                this.value = val.toFixed(2);
                            }
                        });
                    }
                });
            </script>

            <!-- Animacion al enviar -->
            <script>
                $(function() {
                    $('#CompraForm').on('submit', function(e) {
                        e.preventDefault();
                        const $form = $(this);

                        // 🔁 Limpiar campos ocultos anteriores de productos
                        $form.find('input[name^="productos["]').remove();

                        // 🔄 Recolectar las partidas visibles
                        const productos = [];
                        const partidas = $('#contenedor-partidas .partida:visible');

                        partidas.each(function(i, partida) {
                            const $p = $(partida);
                            const producto = $p.find('.producto').val();
                            const cantidad = parseFloat($p.find('.cantidad').val()) || 0;
                            const costo_unidad = parseFloat($p.find('.precio').val()) || 0;
                            const unidad = $p.find('.descripcion').val().includes('PZA') ? 'PZA' : 'UNI'; // ajusta según cómo definas la unidad

                            if (producto && cantidad > 0) {
                                productos.push({
                                    producto,
                                    cantidad,
                                    costo_unidad,
                                    unidad
                                });

                                $form.append(`
                    <input type="hidden" name="productos[${i}][producto]" value="${producto}">
                    <input type="hidden" name="productos[${i}][cantidad]" value="${cantidad}">
                    <input type="hidden" name="productos[${i}][costo_unidad]" value="${costo_unidad}">
                    <input type="hidden" name="productos[${i}][unidad]" value="${unidad}">
                `);
                            }
                        });

                        if (productos.length === 0) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Sin productos',
                                text: 'Debes agregar al menos un producto antes de guardar.'
                            });
                            return;
                        }

                        // 🌀 Mostrar mensaje de carga
                        Swal.fire({
                            title: 'Cargando…',
                            html: 'Por favor, espera mientras se procesan los datos.',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });

                        // 🚀 Enviar datos por AJAX como antes
                        $.ajax({
                                url: 'leer_movimiento_inventario.php',
                                type: 'POST',
                                data: $form.serialize(),
                                dataType: 'html',
                                cache: false
                            })
                            .done(function(res) {
                                try {
                                    const json = JSON.parse(res);
                                    if (json.success) {
                                        Swal.fire({
                                            icon: 'success',
                                            title: '¡Operación exitosa!',
                                            html: 'Documento <strong>' + json.new_cve_doc + '</strong> creado correctamente.'
                                        }).then(() => {
                                            location.reload();
                                        });
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Algo salió mal',
                                            text: json.message || 'No fue posible completar la operación.'
                                        });
                                    }
                                } catch {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Respuesta inesperada',
                                        html: '<pre style="text-align:left; white-space: pre-wrap;">' + $('<div/>').text(res).html() + '</pre>',
                                        width: 600,
                                        heightAuto: true,
                                    });
                                }
                            })
                            .fail(function(jqXHR) {
                                Swal.close();
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error del servidor',
                                    html: '<pre style="text-align:left; white-space: pre-wrap;">' + $('<div/>').text(jqXHR.responseText).html() + '</pre>',
                                    width: 600,
                                    heightAuto: true,
                                });
                                console.error('Error AJAX:', jqXHR.status, jqXHR.responseText);
                            });
                    });
                });
            </script>



</body>

</html>