<?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;
        }

        // 👉 Ahora creamos las iniciales
        $inicialesUsuario = obtenerIniciales($nombre);
    } else {
        $nombre = "Usuario";
        $rol = "Usuario";
        $inicialesUsuario = "US"; // Algo por defecto
    }

    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>

<!-- consulta para los folios de la factura -->
<?php
$host = 'localhost';
/* $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Empresa01\Datos\SAE70EMPRE01.fdb'; */
$database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
$username = 'SYSDBA';
$password = 'masterkey';

try {
    $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "SELECT SERIE, ULT_DOC FROM FOLIOSF01 WHERE TIP_DOC = 'F'";
    $stmt = $dbh->query($sql);

    $folios = [];

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $serie = $row['SERIE'];
        $numero = $row['ULT_DOC'];
        $folios[] = $serie . str_pad($numero + 1, 10, "0", STR_PAD_LEFT);
    }
} catch (PDOException $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>Nueva Factura</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 -->
    <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 active">
                                <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">
                                <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>
                            <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="correos.php" class="menu-link">
                                    <div data-i18n="Basic">Correos</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="estadisticascli.php" class="menu-link">
                                    <div data-i18n="Statistics">Estadísticas</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>Light
                                            </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>Dark
                                            </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>System
                                            </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 ps--active-y">
                                        <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">
                    <!-- Content -->
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="row">
                            <div class="col-12 wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                                <div class="card">
                                    <form id="FacturaForm" action="leer_factura.php" method="POST">
                                        <div class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row" style="position: sticky; top: 4.4375rem; z-index: 1030;">
                                            <h5 class="card-title mb-sm-0 me-2">Nueva Factura</h5>
                                            <div class="action-btns">
                                                <button class="btn btn-label-primary me-3">
                                                    <span class="align-middle">Cancelar</span>
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-sm">Grabar</button>
                                            </div>
                                        </div>
                                        <div class="card-body pt-6">
                                            <div class="row">
                                                <div class="col-lg-9 mx-auto">
                                                    <h5 class="mb-4">Alta de Documento</h5>
                                                    <div class="row g-6">

                                                        <div class="col-md-3">
                                                            <label class="form-label" for="">Factura</label>
                                                            <input type="text" class="form-control" id="factura" name="factura" value="Directa" readonly require placeholder="factura">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-label m-2" for="serie">Número</label>
                                                            <select class="form-control" id="serieSelect" name="cveDoc" placeholder="Número" require>
                                                                <?php
                                                                foreach ($folios as $folio) {
                                                                    echo "<option value='$folio'>$folio</option>";
                                                                }
                                                                ?>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label" for="">Fecha</label>
                                                            <input type="date" class="form-control" id="fechaDoc" name="fechaDoc" require placeholder="Fecha">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label" for="">Entrega</label>
                                                            <input type="date" class="form-control" id="fechaEnt" name="fechaEnt" placeholder="Entrega" require>
                                                        </div>


                                                        <div class="col-md-2">
                                                            <label class="form-label" for="">Cliente</label>
                                                            <select class="form-control" name="cliente" id="cliente" value="2" required>
                                                                <option value="">Seleccione un cliente</option>
                                                            </select>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <label class="form-label" for="rfc">RFC</label>
                                                            <input type="" class="form-control" id="rfc" name="rfc" placeholder="RFC" required>
                                                        </div>
                                                        <div class="col-md-5">
                                                            <label class="form-label" for="nombre">Nombre</label>
                                                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" required>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label" for="">Calle</label>
                                                            <input type="text" class="form-control" id="calle" name="calle" placeholder="Calle" required>
                                                        </div>



                                                        <div class="col-md-2">
                                                            <label class="form-label" for="num_ext">Núm.ext.</label>
                                                            <input type="text" class="form-control" id="num_ext" name="num_ext" placeholder="Núm.ext.">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label" for="colonia">Colonia</label>
                                                            <input type="text" class="form-control" id="colonia" name="colonia" placeholder="Colonia">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label" for="num_int">Núm.int.</label>
                                                            <input type="text" class="form-control" id="num_int" name="num_int" placeholder="Núm.int.">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label" for="codigo_postal">Codigo Postal</label>
                                                            <input type="text" class="form-control" id="codigo_postal" name="codigo_postal" placeholder="Codigo Postal">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label" for="poblacion">Población</label>
                                                            <input type="text" class="form-control" id="poblacion" name="poblacion" placeholder="Población">
                                                        </div>



                                                        <div class="col-md-3">
                                                            <label class="form-label" for="pais">País</label>
                                                            <input type="text" class="form-control" id="pais" name="pais" placeholder="País">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-label" for="supedido">Su pedido</label>
                                                            <input type="text" class="form-control" id="supedido" name="supedido" placeholder="Pedido">
                                                        </div>


                                                        <div class="col-md-3">
                                                            <label class="form-label" for="esquema2">Esquemas</label>
                                                            <select class="form-control" name="esquema2" id="esquema2" required>
                                                                <option value="">Selecciona un esquema</option>
                                                            </select>
                                                        </div>


                                                        <div class="col-md-3">
                                                            <label class="form-label" for="descuento">Descuento</label>
                                                            <input type="text" class="form-control" id="descuento" name="descuento" placeholder="Descuento">
                                                        </div>

                                                        <div class="col-md-3">
                                                            <label class="form-label" for="condicion">Condición</label>
                                                            <input type="text" class="form-control" id="condición" name="condicion" placeholder="Condición">
                                                        </div>

                                                        <div class="col-md-3">
                                                            <label class="form-label" for="descuentofinal">Descuento Fin</label>
                                                            <input type="text" class="form-control" id="descuentofinal" name="descuentofinal" placeholder="Descuento Fin">
                                                        </div>

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




                                                        <div class="col-md-3">
                                                            <label class="form-label" for="moneda">Moneda</label>
                                                            <select class="form-control" name="moneda" id="moneda" required>
                                                                <option value="">Selecciona una moneda...</option>
                                                            </select>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label" for="descripcion_moneda">Descripción</label>
                                                            <input type="text" class="form-control" id="descripcion_moneda" name="descripcion_moneda" placeholder="Descripcion" readonly>
                                                        </div>

                                                        <div class="col-md-2">
                                                            <label class="form-label" for="tcambio">T. Cambio</label>
                                                            <input type="text" class="form-control" id="tcambio" name="tcambio" placeholder="Tipo de cambio" readonly>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <label class="form-label" for="vendedor">Vendedor</label>
                                                            <input type="text" class="form-control" id="vendedor" name="vendedor" placeholder="Clave del vendedor">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-label" for="comision">Comision</label>
                                                            <input type="text" class="form-control" id="comision" name="comision" placeholder="Comision">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- a partir de aqui estoy haciendo cambios -->
                                        <div class="card-body pt-6">
                                            <div class="row">
                                                <div class="col-lg-13 mx-auto">
                                                    <h5 class="mb-4">Productos</h5>
                                                    <div class="row g-6">
                                                        <div class="container mt-4">
                                                            <div id="itemList">
                                                                <!-- Aquí se agregarán los ítems -->
                                                            </div>
                                                            <button type="button" class="btn btn-primary" id="addItemBtn">
                                                                <span class="icon"><i class="fas fa-plus"></i></span> Agregar Producto
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                        <!-- Modal de productos -->
                                        <div class="modal fade" id="modalBuscarProducto" tabindex="-1" aria-labelledby="modalBuscarProductoLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="modalBuscarProductoLabel">Seleccionar producto</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <input type="text" id="searchProducto-global" class="form-control" placeholder="Buscar...">
                                                        <table class="table table-hover table-responsive">
                                                            <thead>
                                                                <tr>
                                                                    <th>Clave</th>
                                                                    <th>Descripción</th>
                                                                    <th>Existencia</th>
                                                                    <th>Línea</th>
                                                                    <th>Acción</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody></tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <!-- Modal observaciones y campos libres del documento-->
                                        <div class="modal" id="modalObservaciones" tabindex="-1"
                                            aria-labelledby="modalObservacionesLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h11 class="modal-title" id="modalObservacionesLabel">Observaciones del
                                                            Documento: Compra <span id="serie" style="color: black;"></span></h11>
                                                        <button type="button" class="btn-close" id="closeModalBtn"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="form-group col-md-10 mb-2 d-flex justify-content">
                                                            <label for="fechapag" class="md-10 mb-2">Fecha de pago (a 30 días):</label>
                                                            <input type="date" class="form-control mb-5 text-center" id="fechapag"
                                                                name="fechapag" required style="width: 165px; margin-left:15px;">
                                                        </div>

                                                        <label for="observaciones">Observaciones:</label>
                                                        <textarea id="observaciones" name="obs_gen" class="form-control"
                                                            placeholder="Ingrese sus observaciones" rows="4"></textarea>
                                                        <br>
                                                        <h6>Campos Libres del Usuario</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>Campo Libre</th>
                                                                    <th>Valor</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <?php
                                                                // Conexión a la base de datos Firebird
                                                                $host = 'localhost';
                                                                $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Datos\SAE70EMPRE01.fdb';
                                                                $username = 'SYSDBA';
                                                                $password = 'masterkey';

                                                                try {
                                                                    $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                                                    $query = "SELECT CAMPO, ETIQUETA FROM PARAM_CAMPOSLIBRES01 WHERE IDTABLA = 'FACTF_CLIB'";
                                                                    $stmt = $dbh->prepare($query);
                                                                    $stmt->execute();

                                                                    // Iterar sobre los campos libres y generar inputs
                                                                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                                                        echo "<tr>";
                                                                        // Mostrar la etiqueta del campo libre
                                                                        echo "<td>" . htmlspecialchars($row['ETIQUETA']) . "</td>";
                                                                        echo "<td>";
                                                                        // Crear un campo de texto para cada campo libre
                                                                        echo "<input type='text' class='form-control' name='campo_libre_" . htmlspecialchars($row['CAMPO']) . "'>";
                                                                        echo "</td>";
                                                                        echo "</tr>";
                                                                    }
                                                                } catch (PDOException $e) {
                                                                    echo "Error: " . $e->getMessage();
                                                                }
                                                                ?>
                                                            </tbody>
                                                        </table>

                                                    </div>
                                                    <div class="modal-footer d-flex justify-content-between">
                                                        <button type="button" class="btn btn-secondary" id="btnPlazos">Plazos</button>

                                                        <div>
                                                            <button type="button" class="btn btn-secondary"
                                                                id="closeModalFooter">Cancelar</button>
                                                            <button type="button" class="btn btn-secondary" id="btnPago">Pago</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                        <!-- modal de pagos a plazos -->
                                        <div class="modal" id="modalPlazos" tabindex="-1" aria-labelledby="modalPlazosLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="modalPlazosLabel">Compra a Plazos</h5>
                                                        <button type="button" class="btn-close" id="closePlazosBtn" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <!-- Columna izquierda -->
                                                            <div class="col-md-6 border-end pe-4">
                                                                <h6 class="fw-bold mb-3">Condición de pago a Plazos</h6>

                                                                <!-- Radios -->
                                                                <div class="form-check mb-2 d-flex align-items-center">
                                                                    <input class="form-check-input custom-radio me-2" type="radio" name="plazos" id="plazo1" checked>
                                                                    <label class="form-check-label" for="plazo1">Un Pago</label>
                                                                </div>

                                                                <div class="form-check mb-2 d-flex align-items-center">
                                                                    <input class="form-check-input custom-radio me-2" type="radio" name="plazos" id="plazo2">
                                                                    <label class="form-check-label" for="plazo2">30, 60, 90 días</label>
                                                                </div>

                                                                <div class="form-check mb-2 d-flex align-items-center">
                                                                    <input class="form-check-input custom-radio me-2" type="radio" name="plazos" id="plazo3">
                                                                    <label class="form-check-label" for="plazo3">12 Meses</label>
                                                                </div>

                                                                <div class="form-check mb-2 align-items-center d-flex flex-wrap">
                                                                    <input class="form-check-input custom-radio me-2" type="radio" name="plazos" id="plazo4">
                                                                    <label class="form-check-label me-2" for="plazo4">En:</label>
                                                                    <input type="text" id="inputEn" class="form-control form-control-sm me-2 w-25" placeholder="Especificar" disabled value="1">
                                                                    <label class="form-check-label">pagos</label>
                                                                </div>

                                                                <div class="form-check mb-3 align-items-center d-flex flex-wrap">
                                                                    <input class="form-check-input custom-radio me-2" type="radio" name="plazos" id="plazo5">
                                                                    <label class="form-check-label me-2" for="plazo5">Montos de</label>
                                                                    <input type="number" id="monto" name="monto" class="form-control form-control-sm w-50" placeholder="0.00">
                                                                </div>

                                                                <!-- Select Plazos -->
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="selectPlazo">Plazos:</label>
                                                                    <select class="form-select form-select-sm" id="selectPlazo">
                                                                        <option value="semana">Semana</option>
                                                                        <option value="quincena">Quincena</option>
                                                                        <option value="mes" selected>Mensual</option>
                                                                    </select>
                                                                </div>

                                                                <!-- Fecha del primer pago -->
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="fechaplazo">Fecha del primer pago:</label>
                                                                    <input type="date" class="form-control form-control-sm" id="fechaplazo" name="fechaplazo">
                                                                </div>
                                                            </div>

                                                            <!-- Columna derecha -->
                                                            <div class="col-md-6 ps-4">
                                                                <h6 class="fw-bold">Generación de pagos</h6>

                                                                <div class="row mb-3">
                                                                    <div class="col-sm-6">
                                                                        <label class="form-label" for="montocomp">Monto de compra:</label>
                                                                        <input type="number" id="montocomp" name="montocomp" class="form-control form-control-sm" placeholder="0.00" readonly>
                                                                    </div>
                                                                    <div class="col-sm-6">
                                                                        <label class="form-label" for="enganche">Enganche:</label>
                                                                        <input type="number" id="enganche" class="form-control form-control-sm" placeholder="0.00" disabled>
                                                                    </div>
                                                                </div>

                                                                <div class="mb-3">
                                                                    <label class="form-label" for="tasa_anual">Tasa de interés anual:</label>
                                                                    <input type="text" id="tasa_anual" class="form-control form-control-sm" placeholder="0.00">
                                                                </div>

                                                                <div class="row mb-3">
                                                                    <div class="col-sm-6">
                                                                        <label class="form-label" for="pago_de">Número de pago:</label>
                                                                        <input type="number" id="pago_de" name="pago_de" class="form-control form-control-sm" placeholder="0.00">
                                                                    </div>
                                                                    <div class="col-sm-6">
                                                                        <label class="form-label" for="ultimo_pago">Último pago de:</label>
                                                                        <input type="number" id="ultimo_pago" name="ultimo_pago " class="form-control form-control-sm" placeholder="0.00" disabled>
                                                                    </div>
                                                                </div>

                                                                <div class="mb-3">
                                                                    <label class="form-label" for="fecha_ultimopago">Fecha del último pago:</label>
                                                                    <input type="date" class="form-control form-control-sm" id="fecha_ultimopago" name="fecha_ultimopago">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Tabla de pagos -->
                                                        <div class="mt-4">
                                                            <label class="form-label">Detalle de pagos:</label>
                                                            <div id="fechasPagosContainer">
                                                                <table class="table table-sm table-striped" id="tablaPagos">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>Fecha</th>
                                                                            <th>Monto</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody></tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" id="closePlazosFooter">Continuar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                        <div class="modal" id="modalPago" tabindex="-1" aria-labelledby="modalPagoLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="modalPagoLabel">Información de Pago</h5>
                                                        <button type="button" class="btn-close" id="closePagoBtn" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form id="formPago">
                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <label for="metodo_pago" class="form-label">Método de pago</label>
                                                                    <select class="form-select" id="metodo_pago" name="metodo_pago">
                                                                        <option value="">Selecciona una opción</option>
                                                                        <option value="10 Efectivo">Efectivo</option>
                                                                        <option value="11 Cheque">Cheque </option>
                                                                        <option value="15 cheque certif">cheque certif </option>
                                                                        <option value="22 transferencia">Transferencia</option>

                                                                    </select>
                                                                </div>

                                                                <div class="col-md-6">
                                                                    <label for="moneda_pago" class="form-label">Moneda</label>
                                                                    <input type="text" class="form-control" id="moneda_pago" name="moneda_pago" readonly>
                                                                </div>
                                                            </div>

                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <label for="descripcion_pago" class="form-label">Descripción</label>
                                                                    <input type="text" class="form-control" id="descripcion_pago" name="descripcion_pago" readonly>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="tipo_cambio_pago" class="form-label">Tipo de Cambio</label>
                                                                    <input type="number" class="form-control" id="tipo_cambio_pago" name="tipo_cambio_pago" step="0.0001" placeholder="0.0000" readonly>
                                                                </div>
                                                            </div>

                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <label for="documento" class="form-label">Documento</label>
                                                                    <input type="text" class="form-control" id="documento" name="documento" readonly>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="importe" class="form-label">Importe</label>
                                                                    <input type="number" class="form-control" id="importe" name="importe" step="0.01" placeholder="0.00">
                                                                </div>
                                                            </div>

                                                            <hr>

                                                            <div class="row mb-3">
                                                                <div class="col-md-4">
                                                                    <label for="subtotal" class="form-label">Subtotal</label>
                                                                    <input type="number" class="form-control" id="subtotal" name="subtotal" step="0.01" placeholder="0.00">
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="descuento" class="form-label">Descuento</label>
                                                                    <input type="number" id="descuento_pago" name="descuento_pago" class="form-control" step="0.01">
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="impuesto" class="form-label">Impuesto</label>
                                                                    <input type="number" class="form-control" id="impuesto" name="impuesto" step="0.01" placeholder="0.00">
                                                                </div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label for="total" class="form-label fw-bold">Total</label>
                                                                <input type="number" class="form-control" id="total" name="total" step="0.01" placeholder="0.00" readonly>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss id="closePagoFooter">Cerrar</button>
                                                        <button type="button" class="btn btn-primary" id="btnGuardarPago">Guardar Pago</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Informativo de montos -->
                                        <div class="modal fade" id="ventaModal" tabindex="-1" aria-labelledby="ventaModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-sm">
                                                <div class="modal-content">
                                                    <div class="modal-header py-2">
                                                        <h5 class="modal-title" id="ventaModalLabel">Compra</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                                    </div>
                                                    <div class="modal-body p-3">
                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-8">
                                                                <label>Subtotal</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-1 text-center text-danger">-</div>
                                                            <div class="col-7">
                                                                <label>Descuento</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-1 text-center text-danger">-</div>
                                                            <div class="col-7">
                                                                <label>Desc. financiero</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-1 text-center text-success">+</div>
                                                            <div class="col-7">
                                                                <label>I.E.P.S.</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-1 text-center text-success">+</div>
                                                            <div class="col-7">
                                                                <label>Ret. ISR</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-1 text-center text-success">+</div>
                                                            <div class="col-7">
                                                                <label>Ret. IVA</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-1 text-center text-success">+</div>
                                                            <div class="col-7">
                                                                <label>I.V.A.</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>

                                                        <hr class="my-2">

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-8 fw-bold">
                                                                <label>Total de la compra</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end fw-bold" value="0.00">
                                                            </div>
                                                        </div>

                                                        <hr class="my-2">

                                                        <div class="row mb-2 align-items-center">
                                                            <div class="col-8">
                                                                <label>Indirectos</label>
                                                            </div>
                                                            <div class="col-4">
                                                                <input type="text" class="form-control form-control-sm text-end" value="0.00">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer py-2">
                                                        <button type="" class="btn btn-primary btn-sm">Grabar</button>
                                                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>




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




                    </div>
                    <!-- / Content -->



                    <div class="content-backdrop fade"></div>
                </div>
                <!-- Content wrapper -->
            </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>


        <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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>
        <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>



        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


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


        <!-- Script de Items (productos) -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

        <script>
            $(document).ready(function() {
                $.fn.dataTable.ext.type.order['numeric-comma-asc'] = function(data) {
                    return parseFloat(data.replace(/[^0-9.-]/g, '')) || 0;
                };
                $.fn.dataTable.ext.type.order['numeric-comma-desc'] = function(data) {
                    return -parseFloat(data.replace(/[^0-9.-]/g, '')) || 0;
                };


                var table = $('#clientesTable').DataTable({
                    language: {
                        url: '../json/Spanish.json'
                    },
                    pageLength: 10,
                    lengthMenu: [
                        [10, 25, 50, -1],
                        [10, 25, 50, "Todos"]
                    ],
                    columnDefs: [{
                        targets: 2,
                        type: 'numeric-comma'
                    }],
                    order: [
                        [2, 'asc']
                    ]
                });

                var currentFilter = ''; // Variable global para almacenar el filtro actual
                var currentStartDate = '';
                var currentEndDate = '';

                // Función para filtrar la tabla y actualizar las tarjetas
                function filterTable(filter, startDate = '', endDate = '') {
                    currentFilter = filter;
                    currentStartDate = startDate;
                    currentEndDate = endDate;

                    $.fn.dataTable.ext.search.push(
                        function(settings, data, dataIndex) {
                            var fechaDoc = data[5];
                            var fechaDocISO = new Date(fechaDoc.split('/').reverse().join('-')).toISOString().split('T')[0];
                            if (currentStartDate === '' && currentEndDate === '') {
                                return true;
                            }
                            if (fechaDocISO >= currentStartDate && fechaDocISO <= currentEndDate) {
                                return true;
                            }
                            return false;
                        }
                    );

                    table.draw();
                    $.fn.dataTable.ext.search.pop();

                    // Obtiene y actualiza las tarjetas
                    fetch(`get_card_data.php?filter=${filter}&start_date=${startDate}&end_date=${endDate}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log('Datos de tarjetas recibidos:', data);

                            // Actualiza las tarjetas con los datos recibidos
                            document.getElementById('total-registros').textContent = data.totalRegistros || '0';
                            document.getElementById('facturas-emitidas').textContent = data.totalEmitidas || '0';
                            document.getElementById('facturas-canceladas').textContent = data.totalCanceladas || '0';
                        })
                        .catch(error => console.error('Error al actualizar tarjetas:', error));
                }

                // Maneja el envío del formulario del modal de filtro de fechas
                $('#dateFilterModal form').on('submit', function(event) {
                    event.preventDefault(); // Previene el envío del formulario por defecto

                    var startDate = $('#start_date').val();
                    var endDate = $('#end_date').val();
                    var filter = 'custom'; // Puedes definir un nombre específico para el filtro de fechas personalizadas

                    // Llama a filterTable con el rango de fechas seleccionado
                    filterTable(filter, startDate, endDate);

                    // Cierra el modal
                    $('#dateFilterModal').modal('hide');
                });

                // Maneja los clics en los botones de filtro de fechas (si usas filtros predefinidos)
                $('.date-filter').on('click', function() {
                    var filter = $(this).data('filter');
                    var startDate = '';
                    var endDate = '';

                    if (filter === 'today') {
                        startDate = endDate = new Date().toISOString().split('T')[0];
                    } else if (filter === 'this-month') {
                        startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString().split('T')[0];
                        endDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toISOString().split('T')[0];
                    } else if (filter === 'last-month') {
                        startDate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).toISOString().split('T')[0];
                        endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 0).toISOString().split('T')[0];
                    }

                    filterTable(filter, startDate, endDate);
                });

                // Maneja el cambio en los detalles de las filas
                $('#clientesTable tbody').on('click', 'i.toggle-detalles', function() {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
                    var cve_doc = $(this).data('cve_doc');

                    if (row.child.isShown()) {
                        row.child().find('div').slideUp(function() {
                            row.child.hide();
                            tr.removeClass('shown');
                            $(tr).find('i.toggle-detalles').removeClass('down');
                        });
                    } else {
                        $.ajax({
                            url: 'detalles_factura.php',
                            type: 'POST',
                            data: {
                                id: cve_doc
                            },
                            dataType: 'json',
                            success: function(response) {
                                if (response.detalles) {
                                    row.child('<div>' + response.detalles + '</div>').show();
                                    tr.addClass('shown');
                                    $(tr).find('i.toggle-detalles').addClass('down');
                                    row.child().find('div').hide().slideDown();
                                } else if (response.error) {
                                    row.child('<div><p>Error: ' + response.error + '</p></div>').show();
                                    tr.addClass('shown');
                                    row.child().find('div').hide().slideDown();
                                }
                            },
                            error: function() {
                                row.child('<div><p>Error al obtener los detalles de la factura.</p></div>').show();
                                tr.addClass('shown');
                                row.child().find('div').hide().slideDown();
                            }
                        });
                    }
                });

                // Maneja el clic en el botón de limpiar filtros
                $('#clearFilters').on('click', function() {
                    table.search('').columns().search('').draw();
                    // Reinicia el filtro
                    currentFilter = '';
                    currentStartDate = '';
                    currentEndDate = '';
                });

                // Maneja el clic en el encabezado de la tabla
                $('#clientesTable').on('click', 'th', function() {
                    // Asegura que el filtro actual se aplique cada vez que la tabla se dibuje
                    if (currentFilter) {
                        filterTable(currentFilter, currentStartDate, currentEndDate);
                    }
                });
            });
        </script>


        <script>
            document.getElementById('clearFilters').addEventListener('click', function() {
                window.location.href = '';
            });

            document.querySelectorAll('.custom-filter').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.custom-filter').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            document.querySelector('.apply-date-filter').addEventListener('click', function() {
                document.querySelector('.custom-date-filter').classList.add('active');
            });
        </script>

        <script>
            $(document).ready(function() {
                $('body').css('overflow', 'auto');
            });
        </script>

        <!-- SCRIPT DE FECHAS, Fecha para despues de hoy -->
        <script>
            window.onload = function() {
                // Obtener la fecha actual
                const today = new Date();

                // Calcular la fecha máxima (una semana después de la fecha actual)
                const maxDate = new Date();
                maxDate.setDate(today.getDate() + 7);

                // Formatear las fechas en el formato YYYY-MM-DD
                const formattedToday = today.toISOString().split('T')[0];
                const formattedMaxDate = maxDate.toISOString().split('T')[0];

                // Establecer los atributos min y max en el campo de fecha
                const fechaInputDoc = document.getElementById('fechaDoc');
                fechaInputDoc.setAttribute('min', formattedToday);
                fechaInputDoc.setAttribute('max', formattedMaxDate);

                // Establecer el atributo min en el campo de fecha de recepción
                const fechaInputRec = document.getElementById('fechaEnt');
                fechaInputRec.setAttribute('min', formattedToday);
            };
        </script>
        <script>
            window.onload = function() {
                // Obtener la fecha actual
                const today = new Date();

                // Calcular la fecha máxima (una semana después de la fecha actual) para el primer campo
                const maxDateDoc = new Date();
                maxDateDoc.setDate(today.getDate() + 7);

                // Calcular la fecha máxima (15 días después de la fecha actual) para el segundo campo
                const maxDateRec = new Date();
                maxDateRec.setDate(today.getDate() + 15);

                // Formatear las fechas en el formato YYYY-MM-DD
                const formattedToday = today.toISOString().split('T')[0];
                const formattedMaxDateDoc = maxDateDoc.toISOString().split('T')[0];
                const formattedMaxDateRec = maxDateRec.toISOString().split('T')[0];

                // Establecer los atributos min y max en el primer campo de fecha
                const fechaInputDoc = document.getElementById('fechaDoc');
                fechaInputDoc.setAttribute('min', formattedToday);
                fechaInputDoc.setAttribute('max', formattedMaxDateDoc);
                fechaInputDoc.value = formattedToday; // Asignar la fecha de hoy por defecto

                // Establecer los atributos min y max en el segundo campo de fecha
                const fechaInputRec = document.getElementById('fechaEnt');
                fechaInputRec.setAttribute('min', formattedToday);
                fechaInputRec.setAttribute('max', formattedMaxDateRec);
                fechaInputRec.value = formattedToday; // Asignar la fecha de hoy por defecto

                // Establecer los atributos min y max en el segundo campo de fecha
                const fechaInputVen = document.getElementById('fechaVen');
                fechaInputVen.setAttribute('min', formattedToday);
                fechaInputVen.setAttribute('max', formattedMaxDateRec);
                fechaInputVen.value = formattedToday; // Asignar la fecha de hoy por defecto

                // Sincronizar la fecha del segundo campo con la del primero, pero respetando su límite de 15 días
                fechaInputDoc.addEventListener('input', function() {
                    const selectedDate = new Date(fechaInputDoc.value);
                    const newMaxDateRec = new Date(selectedDate);
                    newMaxDateRec.setDate(selectedDate.getDate() + 15);

                    // Si la nueva fecha seleccionada excede el límite de 15 días, establecer la nueva fecha
                    if (newMaxDateRec > new Date(fechaInputRec.getAttribute('max'))) {
                        fechaInputRec.value = fechaInputDoc.value;
                    } else {
                        fechaInputRec.value = formattedToday;
                    }
                });
            };
        </script>

        <script>
            let itemCount = 0;

            /* Crea una nueva partida (ítem) */
            function createItemCard(isFirstItem = false) {
                const idx = itemCount++; // Índice propio de esta partida
                const card = document.createElement('div');
                card.className = 'item-card';

                card.innerHTML = `
    <div>
        ${isFirstItem ? '' :
           '<div class="btn btn-icon btn-label-primary remove-item-btn">&times;</div>'}
    </div>

    <div class="mx-auto">
      <div class="row">
        <!-- Cantidad -->
        <div class="col-md-1">
          <label class="form-label">Cantidad</label>
          <input type="number" name="productos[${idx}][cantidad]"
                 class="form-control cantidad-input" min="0" value="1" required>
        </div>

        <!-- Producto -->
        <div class="col-md-1">
          <label class="form-label">Producto</label>
          <div class="input-group">
            <input type="text" class="form-control producto-input"
                   name="productos[${idx}][producto]" readonly required
                   data-item-index="${idx}">
          </div>
        </div>

        <!-- Unidad -->
        <div class="col-md-1">
          <label class="form-label">Unidad</label>
          <input type="text" name="productos[${idx}][unidad]"
                 class="form-control" required>
        </div>

        <!-- Descuento -->
        <div class="col-md-1">
          <label class="form-label">Descuento</label>
          <input type="number" name="productos[${idx}][descuento]"
                 class="form-control" step="0.01" min="0" max="100">
        </div>

        <!-- I.E.P.S. -->
        <div class="col-md-1">
          <label class="form-label">I.E.P.S.</label>
          <input type="number" name="productos[${idx}][ieps]"
                 class="form-control" step="0.01" min="0" max="100">
        </div>

        <!-- Ret ISR -->
        <div class="col-md-1">
          <label class="form-label">Ret ISR</label>
          <input type="number" name="productos[${idx}][ret_isr]"
                 class="form-control" step="0.01" min="0" max="100">
        </div>

        <!-- Ret IVA -->
        <div class="col-md-1">
          <label class="form-label">Ret IVA</label>
          <input type="number" name="productos[${idx}][ret_iva]"
                 class="form-control" step="0.01" min="0" max="100">
        </div>

        <!-- IVA -->
        <div class="col-md-1">
          <label class="form-label">IVA</label>
          <input type="number" name="productos[${idx}][iva]"
                 class="form-control" step="0.01" min="0" max="100">
        </div>

        <!-- Gastos Indirectos -->
        <div class="col-md-1">
          <label class="form-label">Indirectos</label>
          <input type="number" name="productos[${idx}][gastosind]"
                 class="form-control" step="0.01" value="0.00">
        </div>

        <!-- Costo por unidad -->
        <div class="col-md-1">
          <label class="form-label">C.Unidad</label>
          <input type="number" name="productos[${idx}][costo_unidad]"
                 class="form-control" step="0.01" required>
        </div>

        <!-- Subtotal -->
        <div class="col-md-1">
          <label class="form-label">Subtotal</label>
          <input type="number" name="productos[${idx}][subtotal_partida]"
                 class="form-control" step="0.01" readonly required>
        </div>
      </div>

      <!-- Botón que abre el nuevo modal de Campos Libres -->
      <div class="text-center my-3">
        <button type="button"
                class="btn btn-info campos-libres-btn"
                data-item="${idx}"
                data-toggle="modal"
                data-target="#camposLibresModal-${idx}">
          Campos Libres
        </button>

        <button type="button" class="btn btn-success catalog-btn"
        data-item="${idx}"
        data-toggle="modal"
        data-target="#catalogModal-${idx}">
  Catálogo, Lotes y Pedido
</button>

      </div>
    </div>`;

                /* Creamos y añadimos el modal de Campos Libres para esta partida */
                buildCamposLibresModal(idx);
                buildCatalogoModal(idx);
                /* Listener para seleccionar tarjeta (si ya lo tenías) */
                card.addEventListener('click', () => seleccionarItemCard(card));

                return card;
            }

            /* Cuando el usuario abre el modal, mostramos la clave del producto */
            $(document).on('click', '.campos-libres-btn', function() {
                const idx = $(this).data('item');
                const clave = $(`[name="productos[${idx}][producto]"]`).val();
                $(`#productoClaveCampos-${idx}`).text(clave);
            });

            /* Si el usuario elimina la partida, también quitamos su modal */
            $(document).on('click', '.remove-item-btn', function() {
                const card = $(this).closest('.item-card');
                const idx = card.find('.campos-libres-btn').data('item');
                $(`#camposLibresModal-${idx}`).remove(); // remueve el modal
                card.remove(); // remueve la partida
                // Aquí puedes volver a recalcular totales, etc.
            });

            //MODAL DE VENTAS
            $('#ventaModal').on('show.bs.modal', function() {
                actualizarTotalesGenerales();
            });
        </script>

        <script>
            function buildCatalogoModal(idx) {
                const modal = document.createElement('div');
                modal.className = 'modal fade';
                modal.id = `catalogModal-${idx}`;
                modal.tabIndex = -1;
                modal.setAttribute('aria-labelledby', `catalogModalLabel-${idx}`);
                modal.setAttribute('aria-hidden', 'true');

                modal.innerHTML = `
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="catalogModalLabel-${idx}">
                    Catálogo, Lotes y Pedido del Producto
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>

            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="catalogTable-${idx}">
                        <thead>
                            <tr>
                                <th>Clave del Artículo</th>
                                <th>Lote</th>
                                <th>Pedimento</th>
                                <th>Pedimento SAT</th>
                                <th>Cantidad</th>
                                <th>Fecha Aduana</th>
                                <th>Fecha de Producción</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Datos cargados vía AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-item="${idx}">
                    Cerrar
                </button>
                <button type="button" class="btn btn-primary continuar-catalogo-btn"
                        data-item="${idx}"
                        data-toggle="modal"
                        data-target="#serieModal-${idx}">
                    Continuar
                </button>
            </div>
        </div>
    </div>`;

                document.body.appendChild(modal);
            }
        </script>

        <script>
            function buildCamposLibresTable(idx) {
                let html = `
        <table class="table table-bordered">
            <thead><tr><th>Campo Libre</th><th>Valor</th></tr></thead>
            <tbody>`;
                camposLibres.forEach(campo => {
                    html += `
            <tr>
                <td>${campo.ETIQUETA}</td>
                <td><input type="text" class="form-control" placeholder="Campos Libres"
                    name="productos[${idx}][campos_libres][${campo.CAMPO}]"></td>
            </tr>`;
                });
                html += `</tbody></table>`;
                return html;
            }

            function buildCamposLibresModal(idx) {
                const modal = document.createElement('div');
                modal.className = 'modal fade';
                modal.id = `camposLibresModal-${idx}`;
                modal.tabIndex = -1;
                modal.setAttribute('aria-labelledby', `camposLibresModalLabel-${idx}`);
                modal.setAttribute('aria-hidden', 'true');

                modal.innerHTML = `
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="camposLibresModalLabel-${idx}">
                        Obs. / Campos Libres del producto:
                        <span id="productoClaveCampos-${idx}" class="text-dark"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label class="form-label">Observaciones</label>
                        <textarea name="productos[${idx}][observaciones]"
                                placeholder="Observaciones"  class="form-control" rows="4" maxlength="200"></textarea>
                    </div>
                    ${buildCamposLibresTable(idx)}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary cancelar-obs" data-dismiss="modal" data-item="${idx}">Cancelar</button>
                <button type="button" class="btn btn-primary guardar-obs" data-dismiss="modal">Guardar Observación</button>
                </div>
            </div>
        </div>`;

                document.body.appendChild(modal);
            }
            $(document).on('click', '.obs-btn', function() {

                const itemCount = $(this).data('item');

                const productoClave = $(`[name="productos[${itemCount}][producto]"]`).val();

                $(`#productoClave-${itemCount}`).text(productoClave);
            });

            $('#guardarObservacion').on('click', function() {
                const itemCount = $(this).data('item');
                const observacion = $('#observacionText').val();

                console.log('Guardando observación para producto:', itemCount, 'Observación:', observacion);
            });
        </script>

        <script>
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('producto-input')) {
                    const itemIndex = e.target.dataset.itemIndex;
                    currentItemIndex = itemIndex; // para usar en obtenerProductos
                    obtenerProductos(itemIndex); // tu función de carga
                    const modal = new bootstrap.Modal(document.getElementById('modalBuscarProducto'));
                    modal.show();
                }
            });
        </script>
        <!-- es lo de indirectos  -->
        <script>
            function calcularSubtotalBase(card) {
                const cantidad = parseFloat(card.querySelector('[name*="[cantidad]"]')?.value) || 0;
                const costoUnidad = parseFloat(card.querySelector('[name*="[costo_unidad]"]')?.value) || 0;
                const descuento = parseFloat(card.querySelector('[name*="[descuento]"]')?.value) || 0;

                const descuentoFinancieroPorcentaje = parseFloat(document.getElementById('descuentofinal')?.value) || 0;
                const porcentajeFinanciero = descuentoFinancieroPorcentaje / 100;

                let base = cantidad * costoUnidad;
                let montoDescuento = base * (descuento / 100);
                let subtotalDescuento = base - montoDescuento;

                let montoDescuentoFinanciero = subtotalDescuento * porcentajeFinanciero;
                let subtotalFinalDescuento = subtotalDescuento - montoDescuentoFinanciero;

                return subtotalFinalDescuento;
            }

            function recalcularGastosIndirectosPorPartida() {
                const cards = document.querySelectorAll('.item-card');
                let totalCompraSinIndirectos = 0;
                const subtotalesBase = [];

                cards.forEach(card => {
                    const subtotalBase = calcularSubtotalBase(card);
                    subtotalesBase.push({
                        card,
                        subtotalBase
                    });
                    totalCompraSinIndirectos += subtotalBase;
                });

                const totalGastosInd = parseFloat(document.getElementById('gastosind')?.value) || 0;

                subtotalesBase.forEach(({
                    card,
                    subtotalBase
                }) => {
                    const proporcion = totalCompraSinIndirectos > 0 ? subtotalBase / totalCompraSinIndirectos : 0;
                    const gastosIndPartida = proporcion * totalGastosInd;

                    const inputGastosInd = card.querySelector('[name*="[gastosind]"]');
                    if (inputGastosInd) {
                        inputGastosInd.value = gastosIndPartida.toFixed(2);
                    }
                });

                actualizarMontoTotalCompra();
                if (partidaSeleccionada) actualizarTotalDePartidaSeleccionada();
            }

            // Al editar cualquier partida o valor de gastos indirectos, recalcula
            document.addEventListener('input', function(e) {
                const editedCard = e.target.closest('.item-card');
                if (editedCard || e.target.id === 'gastosind') {
                    recalcularGastosIndirectosPorPartida();
                }
            });

            // Al detectar una nueva partida agregada
            const observerIndirectos = new MutationObserver(() => {
                recalcularGastosIndirectosPorPartida();
            });

            observerIndirectos.observe(document.body, {
                childList: true,
                subtree: true
            });

            // Llamar al cargar
            window.addEventListener('load', () => {
                recalcularGastosIndirectosPorPartida();
            });
        </script>


        <!-- SCRIPT PARA EL APARTADO DE INFORMACION DE TOTALES -->
        <script>
            function actualizarTotalesGenerales() {
                const items = document.querySelectorAll('.item-card');

                let subtotalSinDescuentos = 0;
                let totalBase = 0;
                let totalIva = 0;
                let totalIeps = 0;
                let totalRetIsr = 0;
                let totalRetIva = 0;
                let totalDescuento = 0;
                let totalComision = 0; // ← Aquí se guarda cuánto se quitó por comisión

                // Leer comisión en porcentaje desde el input fuera del modal
                const comisionPorcentaje = parseFloat(document.getElementById('comision')?.value) || 0;



                items.forEach(item => {
                    const cantidad = parseFloat(item.querySelector('.cantidad-input')?.value) || 0;
                    const costo = parseFloat(item.querySelector('[name*="[costo_unidad]"]')?.value) || 0;
                    const descuento1 = parseFloat(item.querySelector('[name*="[descuento]"]')?.value) || 0;
                    const descuento2 = parseFloat(item.querySelector('[name*="[descuento2]"]')?.value) || 0;
                    const iva = parseFloat(item.querySelector('[name*="[iva]"]')?.value) || 0;
                    const ieps = parseFloat(item.querySelector('[name*="[ieps]"]')?.value) || 0;
                    const retIsr = parseFloat(item.querySelector('[name*="[ret_isr]"]')?.value) || 0;
                    const retIva = parseFloat(item.querySelector('[name*="[ret_iva]"]')?.value) || 0;

                    let subtotal = cantidad * costo;
                    subtotalSinDescuentos += subtotal;

                    let montoDescuento1 = subtotal * (descuento1 / 100);
                    let montoDescuento2 = (subtotal - montoDescuento1) * (descuento2 / 100);
                    let totalDescuentos = montoDescuento1 + montoDescuento2;
                    let base = subtotal - totalDescuentos;

                    let montoIeps = base * (ieps / 100);
                    let montoRetIsr = base * (retIsr / 100);
                    let montoRetIva = base * (retIva / 100);

                    // Nuevo cálculo del IVA
                    let baseIva = subtotal - totalDescuentos + montoIeps + montoRetIsr + montoRetIva + 0;

                    let montoIva = baseIva * (iva / 100); // Se aplica el porcentaje de IVA sobre la nueva base

                    totalBase += base;
                    totalIva += montoIva;
                    totalIeps += montoIeps;
                    totalRetIsr += montoRetIsr;
                    totalRetIva += montoRetIva;
                    totalDescuento += totalDescuentos;

                    let montoComision = base * (comisionPorcentaje / 100);
                    totalComision += montoComision;
                });


                const totalFinal = totalBase + totalIva + totalIeps - totalRetIsr - totalRetIva;

                // Actualizar los campos del modal
                const inputs = document.querySelectorAll('#ventaModal input');
                if (inputs.length >= 9) {
                    inputs[0].value = subtotalSinDescuentos.toFixed(2); // Subtotal SIN descuentos
                    inputs[1].value = totalDescuento.toFixed(2); // Descuento
                    inputs[2].value = '0.00'; // Desc. financiero
                    inputs[3].value = totalIeps.toFixed(2); // IEPS
                    inputs[4].value = totalRetIsr.toFixed(2); // Ret ISR
                    inputs[5].value = totalRetIva.toFixed(2); // Ret IVA
                    inputs[6].value = totalIva.toFixed(2); // IVA
                    inputs[7].value = totalFinal.toFixed(2); // Total de la compra
                    inputs[8].value = totalComision.toFixed(2); // Comisión (lo que se quitó)
                }
            }
        </script>

        <!-- Puentea la cantidad de gastos ind. de la modal venta  -->
        <script>
            // Espera a que el DOM esté completamente cargado
            document.addEventListener("DOMContentLoaded", function() {
                const gastosInput = document.getElementById("gastosind");
                const indirectosInput = document.querySelector("input[name='indirectos']");

                // Sincroniza el valor cuando cambia el campo gastosind
                gastosInput.addEventListener("input", function() {
                    indirectosInput.value = gastosInput.value;
                });

                // También copia el valor al abrir el modal (opcional y útil)
                const modal = document.getElementById('ventaModal');
                modal.addEventListener('show.bs.modal', function() {
                    indirectosInput.value = gastosInput.value;
                });
            });
        </script>

        <!-- Script de Campos libres -->
        <script>
            const camposLibres =
                <?php
                $host = 'localhost';
                $database = 'C:\\Program Files (x86)\\Common Files\\Aspel\\Sistemas Aspel\\SAE7.00\\Ejemplos\\Ejemplos.fdb';
                $username = 'SYSDBA';
                $password = 'masterkey';

                try {
                    $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                    $query = "SELECT CAMPO, ETIQUETA FROM PARAM_CAMPOSLIBRES01 WHERE IDTABLA = 'PAR_COMC_CLIB'";
                    $stmt = $dbh->prepare($query);
                    $stmt->execute();
                    $campos = [];
                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                        $campos[] = $row;
                    }
                    echo json_encode($campos);
                } catch (PDOException $e) {
                    echo '[]';
                }
                ?>;
        </script>

        <!-- funcion de crear una partida -->
        <script>
            // Función para crear una nueva partida (item)
            function addItemCard() {
                const itemList = document.getElementById('itemList');
                const itemCard = createItemCard(itemCount === 0);
                itemList.appendChild(itemCard);

                // Esperar un poco para aplicar la clase "show" con la animación
                setTimeout(() => {
                    itemCard.classList.add('show');

                    // Mantener el tamaño original de la nueva partida
                    itemCard.style.height = '';
                    itemCard.classList.remove('collapsed-item');
                    itemCard.classList.remove('border-gray');

                    // Seleccionar la nueva partida automáticamente
                    seleccionarItemCard(itemCard);
                }, 10);

                // Si no es la primera partida, añadir el listener para remover
                if (itemCount > 0) {
                    addRemoveListener(itemCard);
                }

                // Aplica los impuestos y descuento a la nueva partida
                aplicarImpuestosNuevaPartida(itemCard);

                // Actualizar los listeners de la tabla de productos
                updateProductTableListeners();

            }

            // Añadir listener para eliminar la partida
            function addRemoveListener(itemCard) {
                itemCard.querySelector('.remove-item-btn').addEventListener('click', function(e) {
                    e.stopPropagation();
                    const itemList = document.getElementById('itemList');
                    const itemCards = Array.from(itemList.querySelectorAll('.item-card'));

                    // La partida seleccionada se eliminará
                    if (itemCard !== itemList.firstElementChild) {
                        // Guardar el índice de la partida actual
                        const itemIndex = itemCards.indexOf(itemCard);
                        itemCard.classList.add('hide');

                        setTimeout(() => {
                            // Eliminar la tarjeta
                            itemCard.remove();

                            // Seleccionar la partida anterior si existe
                            const previousItem = itemCards[itemIndex - 1];
                            if (previousItem) {
                                seleccionarItemCard(previousItem);
                            }

                            // Actualizar los tamaños de las partidas
                            updateItemSizes();
                        }, 300);
                    }
                });
            }

            document.addEventListener("DOMContentLoaded", function() {
                // Evento para limpiar el textarea cuando se presiona "Cancelar"
                document.addEventListener('click', function(event) {
                    if (event.target.classList.contains('cancelar-obs')) {
                        const itemIndex = event.target.getAttribute('data-item');
                        const textarea = document.querySelector(`textarea[name="productos[${idx}][observaciones]"]`);
                        if (textarea) {
                            textarea.value = ''; // Borra el contenido del textarea
                        }
                    }
                });

                // Evento para asegurar que el textarea se limpie al cerrar la modal
                $(document).on('hidden.bs.modal', function(e) {
                    const textarea = $(e.target).find('textarea');
                    if (textarea.length) {
                        textarea.val(''); // Limpiar el textarea
                    }
                });
            });
        </script>

        <!-- Seleccion de partida para imagen  -->
        <script>
            let selectedItemCard = null;

            function seleccionarItemCard(itemCard) {
                if (selectedItemCard) {
                    selectedItemCard.classList.remove('selected');
                    selectedItemCard.style.transform = 'scale(1)';
                }
                selectedItemCard = itemCard;
                selectedItemCard.classList.add('selected');
                selectedItemCard.style.transform = 'scale(1.02)';

                const productoInput = selectedItemCard.querySelector('.producto-input');
                const descripcion = productoInput.dataset.descripcion || 'Sin descripción';
                const urlImagen = productoInput.dataset.imagen || 'default-image.jpg';

                document.getElementById('descripcion').value = descripcion;
                document.querySelector('.image-placeholder').innerHTML = `<img src="${urlImagen}" alt="Imagen del Producto" style="width: 190px; height: 190px;">`;
            }
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                function updateItemSizes(selectedItem = null) {
                    const itemList = document.getElementById("itemList");
                    const itemCards = itemList.querySelectorAll(".item-card");

                    if (itemCards.length === 1) {
                        // Si solo hay una partida, mantener tamaño normal
                        itemCards[0].style.height = "";
                        itemCards[0].classList.remove("collapsed-item");
                        itemCards[0].classList.remove("border-gray");
                        return;
                    }

                    itemCards.forEach((item, index) => {
                        if (selectedItem && item === selectedItem) {
                            // La partida seleccionada mantiene su tamaño original
                            item.style.height = "";
                            item.classList.remove("collapsed-item");
                            item.classList.remove("border-gray"); // Quitar borde gris cuando está seleccionada
                        } else {
                            // Ajustar altura progresivamente según el número de partidas
                            let newHeight = Math.max(50, 200 - (itemCards.length - 1) * 15); // Altura mínima 50px
                            item.style.height = `${newHeight}px`;
                            item.classList.add("collapsed-item");
                            item.classList.add("border-gray"); // Añadir borde gris a las no seleccionadas
                        }
                    });
                }

                function seleccionarItemCard(itemCard) {
                    const itemList = document.getElementById("itemList");
                    const itemCards = itemList.querySelectorAll(".item-card");

                    // Quitar selección previa y restaurar altura normal
                    itemCards.forEach((item) => {
                        item.classList.remove("selected");
                        item.classList.add("border-gray"); // Asegurarse de que las no seleccionadas tengan borde gris
                    });

                    // Aplicar selección a la partida clickeada
                    itemCard.classList.add("selected");
                    updateItemSizes(itemCard);
                }

                // Interceptar la función de agregar partidas
                const originalAddItemCard = window.addItemCard;
                window.addItemCard = function() {
                    originalAddItemCard();
                    updateItemSizes();
                };

                // Interceptar la función original de selección de partidas
                const originalSeleccionarItemCard = window.seleccionarItemCard;
                window.seleccionarItemCard = function(itemCard) {
                    originalSeleccionarItemCard(itemCard);
                    seleccionarItemCard(itemCard);
                };
            });
        </script>

        <!-- Obtine precios de productos -->
        <script>
            function obtenerPrecioProducto(cve_art, itemIndex) {
                fetch(`obtener_precio.php?producto=${cve_art}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.precio) {
                            const cantidadInput = document.querySelectorAll('.cantidad-input')[itemIndex];
                            const costoInput = document.querySelectorAll(`input[name="productos[${itemIndex}][costo_unidad]"]`)[0];
                            const subtotalInput = document.querySelectorAll(`input[name="productos[${itemIndex}][subtotal_partida]"]`)[0];

                            const precio = parseFloat(data.precio);
                            const cantidad = parseFloat(cantidadInput.value) || 1;
                            const subtotal = precio * cantidad;

                            costoInput.value = precio.toFixed(2);
                            subtotalInput.value = subtotal.toFixed(2);

                            // Escuchar cambios en cantidad
                            cantidadInput.addEventListener('input', () => {
                                actualizarSubtotal(cantidadInput, costoInput, subtotalInput);
                            });

                            // Escuchar cambios en costo por unidad
                            costoInput.addEventListener('input', () => {
                                actualizarSubtotal(cantidadInput, costoInput, subtotalInput);
                            });
                        }
                    })
                    .catch(error => console.error('Error al obtener el precio del producto:', error));
            }

            function actualizarSubtotal(cantidadInput, costoInput, subtotalInput) {
                const cantidad = parseFloat(cantidadInput.value) || 1;
                const costo = parseFloat(costoInput.value) || 0;
                const subtotal = cantidad * costo;
                subtotalInput.value = subtotal.toFixed(2);
            }
        </script>


        <!-- Obtiene impustos segun el esquema -->
        <script>
            let impuestos = {}; // Variable global para almacenar impuestos y descuento
            let descuentoGlobal = 0; // Variable global para almacenar el descuento

            // Función para obtener los impuestos de un esquema y aplicarlos a todas las partidas
            function obtenerImpuestos(cveEsquema) {
                return fetch(`obtene_impuestos.php?esquema=${cveEsquema}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log("Impuestos recibidos:", data);

                        // Guardamos los impuestos y descuento en la variable global
                        impuestos = {
                            ieps: data.IMPUESTO1 || 0,
                            ret_isr: data.IMPUESTO2 || 0,
                            ret_iva: data.IMPUESTO3 || 0,
                            iva: data.IMPUESTO4 || 0
                        };

                        // Aplicamos los impuestos a las partidas existentes
                        aplicarImpuestosAPartidas();
                    })
                    .catch(error => console.error('Error al obtener los impuestos:', error));
            }

            // Función para aplicar los impuestos y el descuento a todas las partidas existentes
            function aplicarImpuestosAPartidas() {
                document.querySelectorAll('.item-card').forEach((partida) => {
                    aplicarImpuestosNuevaPartida(partida);
                });
            }

            // Aplica los impuestos y el descuento a una nueva partida
            function aplicarImpuestosNuevaPartida(nuevaPartida) {
                console.log("Aplicando impuestos y descuento a nueva partida:", impuestos, "Descuento:", descuentoGlobal);

                nuevaPartida.querySelector('[name$="[ieps]"]').value = impuestos.ieps;
                nuevaPartida.querySelector('[name$="[ret_isr]"]').value = impuestos.ret_isr;
                nuevaPartida.querySelector('[name$="[ret_iva]"]').value = impuestos.ret_iva;
                nuevaPartida.querySelector('[name$="[iva]"]').value = impuestos.iva;
                nuevaPartida.querySelector('[name$="[descuento]"]').value = descuentoGlobal; // Asigna el descuento global
            }

            // Función para actualizar el descuento global
            function actualizarDescuentoGlobal() {
                const inputDescuento = document.getElementById('descuento');
                descuentoGlobal = parseFloat(inputDescuento.value) || 0;

                console.log("Nuevo descuento global:", descuentoGlobal);

                document.querySelectorAll('.item-card').forEach((partida) => {
                    partida.querySelector('[name$="[descuento]"]').value = descuentoGlobal;
                });
            }

            // Escuchar cambios en el input de descuento y actualizar todas las partidas
            document.getElementById('descuento').addEventListener('input', actualizarDescuentoGlobal);

            // ✅ Obtener automáticamente los impuestos al cargar la página
            document.addEventListener('DOMContentLoaded', function() {
                const esquemaPorDefecto = document.getElementById('esquema2').value;
                obtenerImpuestos(esquemaPorDefecto);
            });
        </script>


        <script>
            let productos = [],
                currentItemIndex = 0;

            function obtenerProductos(itemIndex) {
                currentItemIndex = itemIndex;
                fetch('obtener_productos.php').then(r => r.json()).then(d => {
                    productos = d;
                    renderProductTable(itemIndex, productos)
                }).catch(console.error);
            }

            function renderProductTable(itemIndex, lista = productos) {
                const tbody = document.querySelector('#modalBuscarProducto tbody');
                tbody.innerHTML = '';
                lista.forEach(p => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${p.CVE_ART}</td><td>${p.DESCR}</td><td>${p.EXIST}</td><td>${p.LIN_PROD}</td><td><button type="button" class="btn btn-primary seleccionar-producto" data-producto='${JSON.stringify(p)}'>Seleccionar</button></td>`;
                    tbody.appendChild(tr);
                });
                asignarEventosSeleccionProducto(itemIndex);
            }

            function asignarEventosSeleccionProducto(itemIndex) {
                document.querySelectorAll('.seleccionar-producto').forEach(btn => {
                    btn.onclick = null;
                    btn.addEventListener('click', () => {
                        const p = JSON.parse(btn.dataset.producto);
                        const input = document.querySelectorAll('.producto-input')[itemIndex];
                        input.value = p.CVE_ART;
                        input.dataset.descripcion = p.DESCR;
                        input.dataset.imagen = p.URL_IMAGEN;
                        const unidad = document.querySelector(`input[name="productos[${itemIndex}][unidad]"]`);
                        if (unidad) unidad.value = p.UNI_MED || '';
                        if (typeof obtenerPrecioProducto === "function") obtenerPrecioProducto(p.CVE_ART, itemIndex);
                        const desc = document.getElementById('descripcion');
                        if (desc) desc.value = p.DESCR || '';
                        const imgHolder = document.querySelector('.image-placeholder');
                        if (imgHolder) {
                            const img = new Image();
                            img.src = p.URL_IMAGEN;
                            img.alt = 'Imagen del producto';
                            img.style = 'width:190px;height:190px;object-fit:contain;';
                            imgHolder.replaceChildren(img);
                        }
                        bootstrap.Modal.getInstance(document.getElementById('modalBuscarProducto')).hide();
                        if (typeof seleccionarItemCard === "function") seleccionarItemCard(input.closest('.item-card'));
                    });
                });
            }
            document.getElementById('searchProducto-global').addEventListener('input', e => {
                const t = e.target.value.toLowerCase();
                const filtrados = productos.filter(p => p.CVE_ART.toLowerCase().includes(t) || p.DESCR.toLowerCase().includes(t));
                renderProductTable(currentItemIndex, filtrados);
            });
            document.addEventListener('DOMContentLoaded', () => {
                document.getElementById('addItemBtn').addEventListener('click', addItemCard);
                addItemCard();
            });
        </script>
        <script>
            function updateProductTableListeners() {
                document.querySelectorAll('.buscar-producto-btn').forEach((btn, i) => {
                    btn.onclick = null;
                    btn.addEventListener('click', e => {
                        e.preventDefault();
                        const itemIndex = parseInt(btn.dataset.itemIndex, 10);
                        obtenerProductos(itemIndex);
                        bootstrap.Modal.getOrCreateInstance(document.getElementById('modalBuscarProducto')).show();
                    });

                });
            }

            function obtenerPrecioProducto(cve_art, itemIndex) {
                fetch(`obtener_precio.php?producto=${encodeURIComponent(cve_art)}`)
                    .then(r => r.json())
                    .then(d => {
                        if (!d.precio) return;
                        const cantidad = document.querySelectorAll('.cantidad-input')[itemIndex];
                        const costo = document.querySelector(`input[name="productos[${itemIndex}][costo_unidad]"]`);
                        const subtotal = document.querySelector(`input[name="productos[${itemIndex}][subtotal_partida]"]`);
                        const precio = parseFloat(d.precio) || 0;
                        const qty = parseFloat(cantidad.value) || 1;
                        costo.value = precio.toFixed(2);
                        subtotal.value = (precio * qty).toFixed(2);
                        const h = () => actualizarSubtotal(cantidad, costo, subtotal);
                        cantidad.oninput = h;
                        costo.oninput = h;
                    })
                    .catch(console.error);
            }

            function actualizarSubtotal(cantidadInput, costoInput, subtotalInput) {
                const qty = parseFloat(cantidadInput.value) || 1;
                const cost = parseFloat(costoInput.value) || 0;
                subtotalInput.value = (qty * cost).toFixed(2);
            }

            /* si tu proyecto ya define estas, quita estos stubs */
            if (typeof addItemCard !== "function") {
                function addItemCard() {
                    const c = document.getElementById('itemsContainer');
                    const idx = document.querySelectorAll('.item-card').length;
                    const d = document.createElement('div');
                    d.className = 'item-card';
                    d.innerHTML = `<div class="input-group mb-2">
   <input type="text" class="form-control producto-input" name="productos[${idx}][producto]" readonly>
   <button type="button" class="btn btn-secondary buscar-producto-btn"><i class="fa fa-search"></i></button>
   <input type="number" class="form-control cantidad-input" name="productos[${idx}][cantidad]" value="1" min="1">
   <input type="text" class="form-control" name="productos[${idx}][costo_unidad]" placeholder="Costo">
   <input type="text" class="form-control" name="productos[${idx}][subtotal_partida]" placeholder="Subtotal">
  </div>`;
                    c.appendChild(d);
                    updateProductTableListeners();
                }
            }

            if (typeof seleccionarItemCard !== "function") {
                function seleccionarItemCard() {}
            }

            updateProductTableListeners();
        </script>

        <!-- Serie en la modal de obs. en general -->
        <script>
            document.getElementById("openModalBtn").addEventListener("click", function() {
                let serieSeleccionada = document.getElementById("serieSelect").value;
                document.getElementById("serie").textContent = serieSeleccionada;
                console.log("Serie al abrir modal:", serieSeleccionada);
            });
            document.addEventListener("DOMContentLoaded", function() {
                let serieSpan = document.getElementById("serie");
                let serieSelect = document.getElementById("serieSelect");


            });
        </script>


        <!-- Script de dias de plazos -->
        <script>
            const selectPlazo = document.getElementById('selectPlazo');
            for (let i = 1; i <= 30; i++) {
                const option = document.createElement('option');
                option.value = `${i}dia`;
                option.textContent = `${i} día${i === 1 ? '' : 's'}`;
                selectPlazo.appendChild(option);
            }
        </script>


        <!-- Modal De pago a plazos -->
        <script>
            // Inicialización de las modales
            var modalObservaciones = new bootstrap.Modal(document.getElementById('modalObservaciones'));
            var modalPlazos = new bootstrap.Modal(document.getElementById('modalPlazos'));

            // Botón para abrir la modal de Observaciones
            document.getElementById('openModalBtn').addEventListener('click', function() {
                modalObservaciones.show();
            });

            // Botones para cerrar la modal de Observaciones
            document.getElementById('closeModalBtn').addEventListener('click', function() {
                modalObservaciones.hide();
            });

            document.getElementById('closeModalFooter').addEventListener('click', function() {
                modalObservaciones.hide();
            });


            // Botón para abrir la modal de Plazos
            document.getElementById('btnPlazos').addEventListener('click', function() {
                modalObservaciones.hide(); // Cierra la modal actual
                modalPlazos.show(); // Abre la nueva modal

                // ✅ Selecciona y dispara el evento de "Un Pago"
                document.getElementById('plazo1').checked = true;
                document.getElementById('plazo1').dispatchEvent(new Event("change"));

                // ✅ Calcula y muestra los datos correspondientes a "Un Pago"
                calcularPlazos();
            });

            // Botones para cerrar la modal de Plazos
            document.getElementById('closePlazosBtn').addEventListener('click', function() {
                modalPlazos.hide();
                modalObservaciones.show(); // Reabre la modal de Observaciones al cerrar la de Plazos
            });

            document.getElementById('closePlazosFooter').addEventListener('click', function() {
                modalPlazos.hide();
                modalObservaciones.show(); // Reabre la modal de Observaciones al cerrar la de Plazos
            });

            document.getElementById('plazo4').addEventListener('change', function() {
                document.getElementById('inputEn').disabled = !this.checked;
            });

            // Desactivar el input si se elige otro radio
            const radios = document.querySelectorAll('input[name="plazos"]');
            radios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.id !== 'plazo4') {
                        document.getElementById('inputEn').disabled = true;
                    }
                });
            });
        </script>
        <!-- Tabla de pagos de la modal de a plazos -->
        <script>
            document.querySelector("form").addEventListener("submit", function(e) {
                // Elimina inputs ocultos previos
                document.querySelectorAll('input[name^="pagos["]').forEach(el => el.remove());

                const tabla = document.querySelector("#tablaPagos tbody");
                const rows = tabla.querySelectorAll("tr");

                rows.forEach((row, index) => {
                    const fecha = row.querySelector("td:nth-child(2)").textContent.trim();
                    const monto = row.querySelector("td:nth-child(3)").textContent.trim();

                    const inputFecha = document.createElement("input");
                    inputFecha.type = "hidden";
                    inputFecha.name = `pagos[${index}][fecha]`;
                    inputFecha.value = fecha;

                    const inputMonto = document.createElement("input");
                    inputMonto.type = "hidden";
                    inputMonto.name = `pagos[${index}][monto]`;
                    inputMonto.value = monto;

                    this.appendChild(inputFecha);
                    this.appendChild(inputMonto);
                });
            });
        </script>
        <!-- Funciones de la modal de a plazos -->
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const inputEn = document.getElementById("inputEn");
                const pagoDe = document.getElementById("pago_de");
                const montocomp = document.getElementById("montocomp");
                const enganche = document.getElementById("enganche");
                const tasaAnual = document.getElementById("tasa_anual");
                const selectPlazo = document.getElementById("selectPlazo");
                const fechaPrimera = document.getElementById("fechaplazo");
                const fechaUltima = document.getElementById("fecha_ultimopago");
                const monto = document.getElementById("monto");
                const tablaPagosBody = document.querySelector("#tablaPagos tbody");
                const radios = document.querySelectorAll('input[name="plazos"]');
                const ultimoPagoInput = document.getElementById("ultimo_pago");

                let valorManualEn = false;
                let customValue = "";

                function calcularPlazos() {
                    tablaPagosBody.innerHTML = "";

                    const montoCompra = parseFloat(montocomp.value) || 0;
                    const engancheValor = parseFloat(enganche.value) || 0;
                    const tasa = parseFloat(tasaAnual.value) || 0;
                    const numPagos = parseInt(inputEn.value) || 0;
                    const tipoPlazo = selectPlazo.value;
                    const fechaInicio = fechaPrimera.value;

                    const montoFinanciar = montoCompra - engancheValor;
                    if (montoFinanciar <= 0 || numPagos <= 0 || !fechaInicio) return;

                    let tasaPeriodo = 0;
                    let diasPlazo = 0;

                    switch (tipoPlazo) {
                        case 'semana':
                            tasaPeriodo = tasa / 52 / 100;
                            diasPlazo = 7;
                            break;
                        case 'quincena':
                            tasaPeriodo = tasa / 24 / 100;
                            diasPlazo = 15;
                            break;
                        case 'mes':
                            tasaPeriodo = tasa / 12 / 100;
                            diasPlazo = 30;
                            break;
                        default:
                            const dias = parseInt(tipoPlazo.replace('dia', '')) || 1;
                            diasPlazo = dias;
                            tasaPeriodo = tasa / (30 / dias) / 100;
                    }

                    const montoPago = tasaPeriodo === 0 ?
                        montoFinanciar / numPagos :
                        (montoFinanciar * tasaPeriodo) / (1 - Math.pow(1 + tasaPeriodo, -numPagos));

                    const selectedRadio = document.querySelector('input[name="plazos"]:checked');
                    const modoManual = selectedRadio && selectedRadio.id === "plazo5";

                    // ✅ Solo sobreescribir si es monto inválido o mayor al monto a financiar
                    const montoIngresado = parseFloat(monto.value);
                    const montoInvalido = isNaN(montoIngresado) || montoIngresado <= 0 || montoIngresado > montoFinanciar;

                    if (!modoManual || montoInvalido) {
                        monto.value = montoPago.toFixed(2);
                    }

                    let fechaActual = new Date(fechaInicio);
                    let ultimoMonto = 0;

                    for (let i = 1; i <= numPagos; i++) {
                        const fechaPago = new Date(fechaActual);
                        const fechaStr = fechaPago.toISOString().split('T')[0];

                        const fila = document.createElement("tr");
                        fila.innerHTML = `
                <td>${i}</td>
                <td>${fechaStr}</td>
                <td>${montoPago.toFixed(2)}</td>
            `;
                        tablaPagosBody.appendChild(fila);

                        ultimoMonto = montoPago;
                        fechaActual.setDate(fechaActual.getDate() + diasPlazo);
                    }

                    fechaActual.setDate(fechaActual.getDate() - diasPlazo);
                    fechaUltima.value = fechaActual.toISOString().split('T')[0];

                    pagoDe.value = inputEn.value;
                    ultimoPagoInput.value = ultimoMonto.toFixed(2);
                }

                radios.forEach(radio => {
                    radio.addEventListener("change", function() {
                        const id = this.id;

                        const isPlazo4 = id === "plazo4";
                        const isPlazo5 = id === "plazo5";

                        enganche.disabled = (id === "plazo1");
                        selectPlazo.disabled = !(isPlazo4 || isPlazo5);
                        monto.disabled = !isPlazo5;

                        if (isPlazo4) {
                            inputEn.disabled = false;
                            inputEn.value = customValue || "";
                            valorManualEn = true;
                        } else if (isPlazo5) {
                            inputEn.disabled = true;
                            valorManualEn = false;

                            const montoTotal = parseFloat(montocomp.value) || 0;
                            const montoEnganche = parseFloat(enganche.value) || 0;
                            const valorMonto = parseFloat(monto.value) || 0;

                            const restante = montoTotal - montoEnganche;
                            if (valorMonto > 0 && valorMonto <= restante) {
                                const pagos = Math.ceil(restante / valorMonto);
                                inputEn.value = pagos;
                            } else {
                                inputEn.value = "";
                            }
                        } else {
                            switch (id) {
                                case "plazo1":
                                    inputEn.value = "1";
                                    break;
                                case "plazo2":
                                    inputEn.value = "3";
                                    break;
                                case "plazo3":
                                    inputEn.value = "12";
                                    break;
                            }
                            inputEn.disabled = true;
                            valorManualEn = false;
                        }

                        const valueMap = {
                            plazo1: 'mes',
                            plazo2: 'mes',
                            plazo3: 'mes',
                            plazo4: selectPlazo.value,
                            plazo5: selectPlazo.value
                        };
                        selectPlazo.value = valueMap[id] || 'mes';
                        selectPlazo.dispatchEvent(new Event("change"));

                        calcularPlazos();
                    });
                });

                selectPlazo.addEventListener("change", function() {
                    const plazo = selectPlazo.value;

                    if (!valorManualEn || ['semana', 'quincena', 'mes'].includes(plazo)) {
                        let pagos = 0;
                        switch (plazo) {
                            case 'semana':
                                pagos = 52;
                                break;
                            case 'quincena':
                                pagos = 24;
                                break;
                            case 'mes':
                                pagos = 12;
                                break;
                            default:
                                const dias = parseInt(plazo.replace('dia', '')) || 1;
                                pagos = Math.floor(365 / dias);
                        }

                        if (!inputEn.disabled) {
                            inputEn.value = pagos;
                            customValue = pagos;
                        }
                    }

                    calcularPlazos();
                });

                inputEn.addEventListener("input", function() {
                    if (!inputEn.disabled) {
                        customValue = inputEn.value;
                        valorManualEn = true;
                        calcularPlazos();
                    }
                });

                monto.addEventListener("input", function() {
                    const selected = document.querySelector('input[name="plazos"]:checked');
                    if (selected && selected.id === "plazo5") {
                        const total = parseFloat(montocomp.value) || 0;
                        const eng = parseFloat(enganche.value) || 0;
                        const m = parseFloat(monto.value) || 0;
                        if (m > 0) {
                            const restante = total - eng;
                            const pagos = Math.ceil(restante / m);
                            inputEn.value = pagos;
                            calcularPlazos();
                        }
                    }
                });

                [montocomp, enganche, tasaAnual, fechaPrimera].forEach(el => {
                    el.addEventListener("input", calcularPlazos);
                });

                const hoy = new Date().toISOString().split("T")[0];
                fechaPrimera.value = hoy;

                setInterval(() => {
                    pagoDe.value = inputEn.value;
                }, 300);
            });
        </script>

        <!-- esto da la sumatoria Informativa de el total por partidas -->
        <script>
            let partidaSeleccionada = 0;

            function calcularSubtotal(card) {
                const cantidad = parseFloat(card.querySelector('[name*="[cantidad]"]')?.value) || 0;
                const costoUnidad = parseFloat(card.querySelector('[name*="[costo_unidad]"]')?.value) || 0;
                const descuento = parseFloat(card.querySelector('[name*="[descuento]"]')?.value) || 0;
                const ieps = parseFloat(card.querySelector('[name*="[ieps]"]')?.value) || 0;
                const iva = parseFloat(card.querySelector('[name*="[iva]"]')?.value) || 0;
                const retISR = parseFloat(card.querySelector('[name*="[ret_isr]"]')?.value) || 0;
                const retIVA = parseFloat(card.querySelector('[name*="[ret_iva]"]')?.value) || 0;
                const gastosInd = parseFloat(card.querySelector('[name*="[gastosind]"]')?.value) || 0;

                let base = cantidad * costoUnidad;
                let montoDescuento = base * (descuento / 100);
                let subtotalDescuento = base - montoDescuento;
                let montoIEPS = subtotalDescuento * (ieps / 100);
                let montoIVA = subtotalDescuento * (iva / 100);
                let montoRetISR = subtotalDescuento * (retISR / 100);
                let montoRetIVA = subtotalDescuento * (retIVA / 100);

                let subtotalFinal = subtotalDescuento + montoIEPS + montoIVA - montoRetISR - montoRetIVA + gastosInd;

                return subtotalFinal;
            }

            /* este se agrega del archivo de compra */
            document.getElementById('descuentofinal')?.addEventListener('input', () => {
                actualizarTotalDePartidaSeleccionada();
                actualizarMontoTotalCompra();
            });

            function actualizarTotalDePartidaSeleccionada() {
                if (partidaSeleccionada) {
                    const total = calcularSubtotal(partidaSeleccionada);
                    document.getElementById('totalGeneral').value = total.toFixed(2);
                }
            }

            function actualizarMontoTotalCompra() {
                let totalCompra = 0;
                const cards = document.querySelectorAll('.item-card');

                cards.forEach(card => {
                    totalCompra += calcularSubtotal(card);
                });

                document.getElementById('montocomp').value = totalCompra.toFixed(2);
            }

            // Detectar click en partida para marcar como seleccionada
            document.addEventListener('click', function(e) {
                const clickedCard = e.target.closest('.item-card');
                if (clickedCard && clickedCard !== partidaSeleccionada) {
                    partidaSeleccionada = clickedCard;
                    actualizarTotalDePartidaSeleccionada();
                }
                actualizarMontoTotalCompra();
            });

            // Cuando se edita una partida, actualizar si es la seleccionada y total general
            document.addEventListener('input', function(e) {
                const editedCard = e.target.closest('.item-card');
                if (editedCard) {
                    if (editedCard === partidaSeleccionada) {
                        actualizarTotalDePartidaSeleccionada();
                    }
                    actualizarMontoTotalCompra();
                }
            });

            // Si agregas nuevas partidas dinámicamente
            const observer = new MutationObserver(() => {
                actualizarTotalDePartidaSeleccionada();
                actualizarMontoTotalCompra();
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        </script>





        <script>
            // Crear una única instancia global de la modal
            const pagoModal = new bootstrap.Modal(document.getElementById('modalPago'));

            // Mostrar la modal de Pago
            document.getElementById('btnPago').addEventListener('click', function() {
                // Obtener los datos del formulario principal
                const moneda = document.getElementById('moneda').value;
                const descripcion = document.getElementById('descripcion_moneda').value;
                const tipoCambio = document.getElementById('tcambio').value;
                const documento = document.getElementById('serieSelect').value;

                // Obtener el último subtotal_partida (puedes ajustar esta lógica según tus necesidades)
                const subtotales = document.querySelectorAll('[name^="productos"][name$="[subtotal_partida]"]');
                const ultimoSubtotal = subtotales.length > 0 ? subtotales[subtotales.length - 1].value : 0;

                const ivas = document.querySelectorAll('[name^="productos"][name$="[iva]"]');
                const ultimoIVA = ivas.length > 0 ? ivas[ivas.length - 1].value : 0;

                const totalGeneral = document.getElementById('totalGeneral').value || 0;

                // Asignar valores en la modal
                document.getElementById('moneda_pago').value = moneda;
                document.getElementById('descripcion_pago').value = descripcion;
                document.getElementById('tipo_cambio_pago').value = tipoCambio;
                document.getElementById('documento').value = documento;

                document.getElementById('subtotal').value = parseFloat(ultimoSubtotal).toFixed(2);
                document.getElementById('impuesto').value = parseFloat(ultimoIVA).toFixed(2);
                document.getElementById('total').value = parseFloat(totalGeneral).toFixed(2);

                // Mostrar la modal
                pagoModal.show();
            });


            // Cerrar la modal de Pago con los botones
            document.getElementById('closePagoBtn').addEventListener('click', () => pagoModal.hide());
            document.getElementById('closePagoFooter').addEventListener('click', () => pagoModal.hide());

            // Calcular total automáticamente
            document.querySelectorAll('#subtotal, #descuento, #impuesto').forEach(input => {
                input.addEventListener('input', function() {
                    let subtotal = parseFloat(document.getElementById('subtotal').value) || 0;
                    let descuento = parseFloat(document.getElementById('descuento').value) || 0;
                    let impuesto = parseFloat(document.getElementById('impuesto').value) || 0;
                    let total = subtotal - descuento + impuesto;
                    document.getElementById('total').value = total.toFixed(2);
                });
            });
        </script>




        <!-- script agregados por christian :) -->

        <script>
            let clientes = [];

            fetch('obtener_clientes.php')
                .then(response => response.json())
                .then(data => {
                    clientes = data;
                    const select = document.getElementById('cliente');

                    data.forEach(cliente => {
                        const option = document.createElement('option');
                        option.value = cliente.CLAVE;
                        option.textContent = `${cliente.CLAVE} - ${cliente.NOMBRE}`;
                        option.dataset.cliente = JSON.stringify(cliente);
                        option.dataset.textoOriginal = option.textContent;
                        select.appendChild(option);
                    });
                })
                .catch(error => console.error('Error al obtener los clientes:', error));

            document.getElementById('cliente').addEventListener('change', function() {
                const select = this;
                const selectedOption = select.options[select.selectedIndex];
                const clienteData = selectedOption.dataset.cliente;

                // Restaurar el texto de las demás opciones (excepto la seleccionada)
                for (let i = 0; i < select.options.length; i++) {
                    const option = select.options[i];
                    if (option.dataset.textoOriginal && option !== selectedOption) {
                        option.textContent = option.dataset.textoOriginal;
                    }
                }

                if (clienteData) {
                    const cliente = JSON.parse(clienteData);

                    // Mostrar solo la CLAVE en el campo visible
                    selectedOption.textContent = cliente.CLAVE;

                    // Llenar otros campos
                    $('#rfc').val(cliente.RFC);
                    $('#nombre').val(cliente.NOMBRE);
                    $('#calle').val(cliente.CALLE);
                    $('#num_ext').val(cliente.NUMEXT);
                    $('#descuento').val(cliente.DESCUENTO);
                    $('#colonia').val(cliente.COLONIA);
                    $('#num_int').val(cliente.NUMINT);
                    $('#codigo_postal').val(cliente.CODIGO);
                    $('#poblacion').val(cliente.LOCALIDAD);
                    $('#pais').val(cliente.PAIS);
                    $('#vendedor').val(cliente.CVE_VEND);
                    $('#condicion').val(cliente.Condicion);
                    $('#entrega').val(cliente.Entrega);
                    $('#enviar_a').val(cliente.CALLE_ENVIO);
                    $('#destinatario').val(cliente.Destinatario);
                    $('#lista_precio').val(cliente.LISTA_PREC);
                    $('#descuento_pago').val(cliente.DESCUENTO || 0);

                    if (cliente.METODODEPAGO) {
                        $('#metodo_pago').val(cliente.METODODEPAGO);
                    }

                    calcularFechaPago(cliente.CLAVE);

                    descuentoGlobal = parseFloat(cliente.DESCUENTO) || 0;
                    aplicarDescuentoAPartidas();

                    fetch('obtener_vendedor.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: new URLSearchParams({
                                clave: cliente.CVE_VEND
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.comision !== undefined) {
                                $('#comision').val(data.comision);
                            } else {
                                $('#comision').val('');
                                console.warn(data.error || 'No se encontró la comisión');
                            }
                        })
                        .catch(error => console.error('Error al obtener comisión del vendedor:', error));
                }
            });

            // Restaurar solo las opciones visibles en el desplegable, excepto la seleccionada
            document.getElementById('cliente').addEventListener('mousedown', function() {
                const select = this;
                const selectedOption = select.options[select.selectedIndex];

                for (let i = 0; i < select.options.length; i++) {
                    const option = select.options[i];
                    if (option.dataset.textoOriginal && option !== selectedOption) {
                        option.textContent = option.dataset.textoOriginal;
                    }
                }
            });

            function aplicarDescuentoAPartidas() {
                document.querySelectorAll('.item-card').forEach((partida) => {
                    partida.querySelector('[name$="[descuento]"]').value = descuentoGlobal;
                });
            }

            async function calcularFechaPago(claveCliente) {
                try {
                    const response = await fetch('obtener_creditoclie.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: new URLSearchParams({
                            clave: claveCliente
                        })
                    });

                    const data = await response.json();

                    let fecha = new Date();
                    if (data.diasCredito && !isNaN(data.diasCredito)) {
                        fecha.setDate(fecha.getDate() + data.diasCredito);
                    }

                    const fechaFormateada = fecha.toISOString().split('T')[0];
                    document.getElementById('fechapag').value = fechaFormateada;
                    document.getElementById('fechaplazo').value = fechaFormateada;
                } catch (error) {
                    console.error("Error al calcular la fecha de pago:", error);
                }
            }

            document.getElementById('fechapag').addEventListener('change', function() {
                document.getElementById('fechaplazo').value = this.value;
            });

            document.getElementById('fechaplazo').addEventListener('change', function() {
                document.getElementById('fechapag').value = this.value;
            });
        </script>

        <script>
            // Al cargar la página, llenar el select con los esquemas
            document.addEventListener('DOMContentLoaded', function() {
                fetch('obtener_esquemas.php')
                    .then(response => response.json())
                    .then(data => {
                        const selectEsquema = document.getElementById('esquema2');
                        selectEsquema.innerHTML = '<option value="">Selecciona un esquema</option>';

                        data.forEach(esquema => {
                            const option = document.createElement('option');
                            option.value = esquema.CVE_ESQIMPU;
                            option.textContent = `${esquema.CVE_ESQIMPU} - ${esquema.DESCRIPESQ}`;
                            option.dataset.descripcion = esquema.DESCRIPESQ;
                            selectEsquema.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error al obtener los esquemas:', error));
            });

            // Evento para cuando se selecciona un esquema
            document.getElementById('esquema2').addEventListener('change', function() {
                const selectedValue = this.value;
                if (selectedValue) {
                    obtenerImpuestos(selectedValue);
                }
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                fetch('obtener_almacenes.php')
                    .then(response => response.json())
                    .then(data => {
                        const almacenSelect = document.getElementById('almacen');
                        almacenSelect.innerHTML = '<option value="">Selecciona un almacén</option>';

                        data.forEach(almacen => {
                            const option = document.createElement('option');
                            option.value = almacen.CVE_ALM;
                            option.textContent = `${almacen.CVE_ALM} - ${almacen.DESCR}`;
                            option.dataset.direccion = almacen.DIRECCION;
                            option.dataset.encargado = almacen.ENCARGADO;
                            option.dataset.telefono = almacen.TELEFONO;
                            almacenSelect.appendChild(option);
                        });

                        // Seleccionar automáticamente el primer almacén si existe
                        if (data.length > 0) {
                            almacenSelect.value = data[0].CVE_ALM;
                            almacenSelect.dispatchEvent(new Event('change'));
                        }
                    })
                    .catch(error => console.error('Error al obtener los almacenes:', error));

                // Puedes agregar una acción personalizada si es necesario al seleccionar un almacén
                document.getElementById('almacen').addEventListener('change', function() {
                    const selected = this.options[this.selectedIndex];
                    const clave = selected.value;
                    const descripcion = selected.textContent;
                    const direccion = selected.dataset.direccion;
                    const encargado = selected.dataset.encargado;
                    const telefono = selected.dataset.telefono;

                    console.log(`Almacén seleccionado: ${clave}`);
                    // Aquí puedes usar los datos como necesites
                });
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const selectMoneda = document.getElementById('moneda');

                fetch('obtener_monedas.php')
                    .then(response => response.json())
                    .then(data => {
                        selectMoneda.innerHTML = '<option value="">Selecciona una moneda...</option>';
                        data.forEach(moneda => {
                            const option = document.createElement('option');
                            option.value = moneda.NUM_MONED;
                            option.textContent = `${moneda.NUM_MONED}`;
                            selectMoneda.appendChild(option);
                        });

                        // Si quieres que se seleccione automáticamente la primera moneda disponible
                        if (data.length > 0) {
                            selectMoneda.value = data[0].NUM_MONED;
                            selectMoneda.dispatchEvent(new Event('change'));
                        }
                    })
                    .catch(error => console.error('Error al obtener las monedas:', error));

                selectMoneda.addEventListener('change', function() {
                    const monedaSeleccionada = this.value;
                    if (monedaSeleccionada !== "") {
                        obtenerInformacionMoneda(monedaSeleccionada);
                    } else {
                        document.getElementById('descripcion_moneda').value = '';
                        document.getElementById('tcambio').value = '';
                    }
                });

                function obtenerInformacionMoneda(claveMoneda) {
                    fetch(`obtener_info_moneda.php?moneda=${claveMoneda}`)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('La solicitud falló');
                            }
                            return response.json();
                        })
                        .then(data => {
                            console.log('Datos recibidos:', data);
                            document.getElementById('descripcion_moneda').value = data.DESCR || '';
                            document.getElementById('tcambio').value = data.TCAMBIO || '';
                        })
                        .catch(error => console.error('Error al obtener información de la moneda:', error));
                }
            });
        </script>



        <!-- scrpipts por probar su funcion -->

        <script>
            var modalElement = document.getElementById('modalObservaciones');
            var modal = new bootstrap.Modal(modalElement);

            document.getElementById('openModalBtn').addEventListener('click', function() {
                modal.show();
            });

            document.getElementById('closeModalBtn').addEventListener('click', function() {
                modal.hide();
            });

            document.getElementById('closeModalFooter').addEventListener('click', function() {
                modal.hide();
            });
        </script>

        <script>
            document.getElementById('vendedor').addEventListener('change', function() {
                const claveVendedor = this.value;

                if (claveVendedor.trim() !== '') {
                    fetch('obtener_vendedor.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: new URLSearchParams({
                                clave: claveVendedor
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data && data.comision !== undefined) {
                                document.getElementById('comision').value = data.comision;
                            } else {
                                document.getElementById('comision').value = '';
                                console.warn('No se recibió comisión válida');
                            }
                        })
                        .catch(error => {
                            console.error('Error al obtener comisión del vendedor:', error);
                        });
                }
            });
        </script>

        <script>
            // Obtener la fecha actual
            let today = new Date();

            // Formatear la fecha actual en el formato adecuado (YYYY-MM-DD)
            let todayFormatted = today.toISOString().split('T')[0];

            // Establecer el valor del input como la fecha de 30 días
            let futureDate = new Date();
            futureDate.setDate(today.getDate() + 30);
            let futureDateFormatted = futureDate.toISOString().split('T')[0];

            // Establecer el valor mínimo como la fecha actual y permitir que se elija cualquier fecha a partir de hoy
            document.getElementById('fechapag').value = futureDateFormatted;
            document.getElementById('fechapag').setAttribute('min', todayFormatted);
        </script>
        <script>
            // Función para abrir la modal del catálogo y obtener los productos del catálogo
            function abrirModalConCatalogo(itemIndex, productoSeleccionado) {
                // Mostrar la modal de catálogo
                $('#catalogoModal-' + itemIndex).modal('show');

                // Llamar a la función obtenerCatalogo para cargar los datos del catálogo
                obtenerCatalogo(itemIndex, productoSeleccionado);
            }

            $(document).on("click", ".catalog-btn", function() {
                var itemCount = $(this).data("item");
                var producto = $(`input[name="productos[${itemCount}][producto]"]`).val();

                if (producto) {
                    $.ajax({
                        url: 'obtener_catalogo.php',
                        type: 'GET',
                        data: {
                            producto: producto
                        },
                        dataType: 'json',
                        success: function(response) {
                            var tableBody = $(`#catalogTable-${itemCount} tbody`);
                            tableBody.empty();

                            if (response.error) {
                                tableBody.append('<tr><td colspan="7" class="text-center">' + response.error + '</td></tr>');
                            } else {
                                response.forEach(function(item) {
                                    var row = `<tr>
                            <td>${item.CVE_ART}</td>
                            <td>${item.LOTE}</td>
                            <td>${item.PEDIMENTO}</td>
                            <td>${item.PEDIMENTOSAT}</td>
                            <td>${item.CANTIDAD}</td>
                            <td>${item.FCHADUANA}</td>
                            <td>${item.FEC_PROD_LT}</td>
                        </tr>`;
                                    tableBody.append(row);
                                });
                            }
                        },
                        error: function() {
                            alert('Error al cargar los datos del producto');
                        }
                    });
                } else {
                    alert('Por favor, selecciona un producto');
                }
            });
        </script>


        <script>
            $(document).ready(function() {
                let seriesSeleccionadas = {}; // Guarda los números seleccionados temporalmente

                function cargarClaveDocumento() {
                    $.ajax({
                        type: "GET",
                        success: function(data) {
                            $("#claveDocumento").val(data.clave);
                        },
                        error: function() {
                            console.error('Error al cargar la clave de documento.');
                        }
                    });
                }

                $(".continuar-catalogo-btn").click(function() {
                    var itemCount = $(this).data("item");
                    var producto = $(`input[name="productos[${itemCount}][producto]"]`).val();
                    var documento = $(`#serieSelect`).val();

                    if (!producto) {
                        alert('Por favor, selecciona un producto');
                        return;
                    }

                    if (!documento) {
                        alert('Por favor, selecciona un documento');
                        return;
                    }

                    $.ajax({
                        url: 'obtener_serie.php',
                        type: 'GET',
                        data: {
                            producto: producto
                        },
                        dataType: 'json',
                        success: function(response) {
                            var tableBody = $(`#serieTable-${itemCount} tbody`);
                            tableBody.empty();

                            if (response.error) {
                                tableBody.append('<tr><td colspan="5" class="text-center">' + response.error + '</td></tr>');
                            } else {
                                $('#fechaActual-' + itemCount).val(new Date().toISOString().split('T')[0]);
                                $('#cantidadModal-' + itemCount).val(response.length);
                                $('#documentoModal-' + itemCount).val(documento);

                                $(`#msgSeleccion-${itemCount}`).remove();

                                response.forEach(function(item) {
                                    var row = `<tr>
                                <td>${item.CVE_ART}</td>
                                <td>${item.ALMACEN}</td>
                                <td>${item.STATUS}</td>
                                <td>${item.NUM_SER}</td>
                                <td>
                                    ${item.STATUS === 'D' ?
                                    `<button type="button" class="btn btn-primary seleccionar-serie" data-item="${itemCount}" data-num-serie="${item.NUM_SER}" data-producto="${producto}">Seleccionar</button>` :
                                    '<button type="button" class="btn btn-secondary" disabled>No Disponible</button>'}
                                </td>
                            </tr>`;
                                    tableBody.append(row);
                                });

                                if (!$(`#msgSeleccion-${itemCount}`).length) {
                                    $(`#serieTable-${itemCount}`).after(`<div id="msgSeleccion-${itemCount}" class="mt-3"></div>`);
                                }
                            }
                        },
                        error: function() {
                            alert('Error al cargar los datos de la serie');
                        }
                    });
                });

                $(document).on('click', '.seleccionar-serie', function() {
                    var itemCount = $(this).data('item');
                    var numSerie = $(this).data('num-serie');
                    var producto = $(this).data('producto');

                    seriesSeleccionadas[itemCount] = {
                        num_serie: numSerie,
                        producto: producto
                    };

                    $('#msgSeleccion-' + itemCount).html(`<div class="alert alert-success">Número de serie <strong>${numSerie}</strong> seleccionado.</div>`);
                    $('#documentoModal-' + itemCount).val(numSerie);
                });

                $(".guardar-numero-serie").click(function() {
                    var modal = $(this).closest('.modal');
                    var itemCount = modal.attr('id').split('-')[1];
                    var seleccion = seriesSeleccionadas[itemCount];

                    if (!seleccion) {
                        alert('Por favor selecciona un número de serie antes de guardar.');
                        return;
                    }

                    const serieModalId = '#serieModal-' + itemCount;
                    const catalogModalId = '#catalogModal-' + itemCount;

                    $(serieModalId).removeClass('show').css('display', 'none');
                    $(catalogModalId).removeClass('show').css('display', 'none');

                    $('body').removeClass('modal-open');
                    $('.modal-backdrop').remove();

                    alert('Número de serie guardado temporalmente. No se ha actualizado aún.');
                });

                // Confirmar y enviar todo
                $("#confirmarGuardarBtn").click(function(e) {
                    e.preventDefault();

                    const form = $("#FacturaForm");

                    if (Object.keys(seriesSeleccionadas).length === 0) {
                        alert('Debes seleccionar al menos un número de serie antes de guardar.');
                        return;
                    }

                    let total = Object.keys(seriesSeleccionadas).length;
                    let completados = 0;

                    Object.keys(seriesSeleccionadas).forEach(function(itemCount) {
                        const seleccion = seriesSeleccionadas[itemCount];

                        $.ajax({
                            url: 'actualizar_estatus.php',
                            type: 'POST',
                            data: {
                                num_serie: seleccion.num_serie,
                                producto: seleccion.producto,
                                estatus: 'V'
                            },
                            success: function(response) {
                                completados++;
                                if (completados === total) {
                                    seriesSeleccionadas = {}; // Limpia

                                    // Animación de carga
                                    Swal.fire({
                                        title: 'Cargando...',
                                        html: 'Por favor, espera mientras se procesan los datos.',
                                        didOpen: () => Swal.showLoading()
                                    });

                                    // Enviar el formulario completo
                                    $.ajax({
                                        url: "leer_factura.php",
                                        type: "POST",
                                        data: form.serialize(),
                                        success: function(response) {
                                            Swal.close();
                                            const data = JSON.parse(response);

                                            if (data.success) {
                                                Swal.fire({
                                                    icon: 'success',
                                                    title: '¡Éxito!',
                                                    text: data.message,
                                                    confirmButtonText: 'Aceptar'
                                                }).then(() => {
                                                    form[0].reset();
                                                    location.reload();
                                                });
                                            } else {
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Error',
                                                    text: data.message,
                                                    confirmButtonText: 'Aceptar'
                                                });
                                            }
                                        },
                                        error: function() {
                                            Swal.close();
                                            Swal.fire({
                                                icon: 'error',
                                                title: 'Error',
                                                text: 'Hubo un problema al enviar los datos.',
                                                confirmButtonText: 'Aceptar'
                                            });
                                        }
                                    });
                                }
                            },
                            error: function() {
                                alert(`Error al actualizar la serie ${seleccion.num_serie}`);
                            }
                        });
                    });
                });

                cargarClaveDocumento();
            });
        </script>




        <!-- Animacion al enviar -->
        <script>
            $(document).ready(function() {
                // Función para cargar la clave de documento
                function cargarClaveDocumento() {
                    // Lógica para cargar la clave de documento
                    $.ajax({
                        type: "GET",
                        success: function(data) {
                            // Suponiendo que el servidor devuelve un JSON con la clave
                            $("#claveDocumento").val(data.clave); // Asegúrate de que el ID sea correcto
                        },
                        error: function() {
                            console.error('Error al cargar la clave de documento.');
                        }
                    });
                }

                // Al enviar el formulario de compra
                $("#FacturaForm").on("submit", function(event) {
                    event.preventDefault(); // Prevenir la recarga de la página

                    // Verificar si todos los campos necesarios están completos
                    const cliente = $("#cliente").val();
                    if (!cliente) {
                        alert("Por favor, selecciona un cliente.");
                        return;
                    }


                    // Validación adicional de campos

                    // Mostrar la animación de carga
                    Swal.fire({
                        title: 'Cargando...',
                        html: 'Por favor, espera mientras se procesan los datos.',
                        onBeforeOpen: () => {
                            Swal.showLoading(); // Mostrar el loader
                        }
                    });

                    // Enviar los datos mediante AJAX
                    $.ajax({
                        url: "leer_factura.php", // Cambia la URL a tu archivo PHP
                        type: "POST",
                        data: $(this).serialize(),
                        success: function(response) {
                            const data = JSON.parse(response);
                            // Cerrar el modal de carga
                            Swal.close();

                            // Mostrar el modal de éxito usando SweetAlert2
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success', // Icono de éxito
                                    title: '¡Éxito!',
                                    text: data.message,
                                    confirmButtonText: 'Aceptar'
                                }).then(() => {
                                    // Limpiar el formulario al cerrar el modal
                                    $("#FacturaForm")[0].reset();
                                    // Recargar la página
                                    location.reload(); // Esto recargará la página
                                });
                            } else {
                                // Mostrar el mensaje de error
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: data.message,
                                    confirmButtonText: 'Aceptar'
                                });
                            }
                        },
                        error: function() {
                            // Cerrar el modal de carga
                            Swal.close();
                            // Manejo de error en caso de que falle la solicitud AJAX
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Hubo un problema al enviar los datos.',
                                confirmButtonText: 'Aceptar'
                            });
                        }
                    });
                });


                // Llamar a la función para cargar la clave de documento al inicio
                cargarClaveDocumento();
            });
        </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>

</body>

</html>