

        <style>
            .dropdown-toggle::after {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                margin-left: auto;
                transition: transform 0.3s;
            }

            .sidebar .nav-link {
                color: white;
                display: flex;
                align-items: center;
                padding: 10px 20px;
                /* white-space: nowrap; */
                transition: background-color 0.3s, padding 0.3s;
            }

            .nav-pills .nav-link.active,
            .nav-pills .show>.nav-link {
                color: #fff;
                background-color: #009dff;
            }


            /* aqui empieza el estilo de la tabla  */

            @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

            .btn-primary .fa {
                color: #fff;
            }

            .btn-primary {
                background-color: #009DFF;
                border-color: #009DFF;
            }

            .btn-primary:hover {
                background-color: #007ecc;
                border-color: #007ecc;
            }

            .btn-secondary .fa {
                color: #fff;
            }

            .btn-secondary {
                background-color: #009DFF;
                border-color: #009DFF;
            }

            .btn-secondary:hover {
                background-color: #007ecc;
                border-color: #007ecc;
            }

            .btn-primary,
            .btn-secondary {
                transition: all 0.3s ease;
            }

            .btn-primary:hover,
            .btn-secondary:hover {
                transform: translateY(-5px);
            }

            #detalleTable th {
                background-color: #009DFF;
                padding: 8px;
                text-align: center;
                color: #fff;
            }

            #detalleTable td,
            #detalleTable th {
                white-space: nowrap;
            }

            .table-responsive {
                display: block;
                width: 100%;
                overflow-x: auto;
            }

            #clientesTableContainer {
                position: absolute;
                z-index: 1000;
                background: white;
                border: 1px solid #ddd;
                display: none;
                width: 600px;
                max-height: 200px;
                overflow-y: auto;
            }

            #clientesTable {
                margin: 0;
                width: 100%;
            }

            #clientesTable th,
            #clientesTable td {
                text-align: left;
                padding: 8px;
            }

            /* ESQUEMAS */
            #esquemasTableContainer {
                position: absolute;
                right: 0;
                z-index: 1000;
                background: white;
                border: 1px solid #ddd;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                display: none;
                width: 400px;
                max-height: 200px;
                overflow-y: auto;
            }

            #esquemasTable {
                margin: 0;
                width: 100%;
            }

            #esquemasTable th,
            #esquemasTable td {
                text-align: left;
                padding: 8px;
            }

            /* Contenedor de la tabla de productos */
            .productosTableContainer {
                position: absolute;
                display: block;
                max-height: 140px;
                overflow-y: auto;
                top: 200px;
                left: 10px;
                z-index: 1000;
            }

            /* Tabla de productos */
            .productosTable {
                margin: 0;
                width: 100%;
                border-collapse: collapse;
            }

            .productosTable th,
            .productosTable td {
                text-align: left;
                padding: 2px;
                border: 3px solid #ddd;
            }

            /* ALMACENES */
            #almacenesTableContainer {
                position: absolute;
                right: 0;
                z-index: 0;
                background: white;
                border: 1px solid #ddd;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                display: none;
                max-height: 140px;
                overflow-y: auto;
                width: 480px;

                /* Posiciona el contenedor a la derecha de la tabla */
                top: 80px;

            }

            #almacenesTable {
                margin: 0;
                width: 100%;
            }

            #almacenesTable th,
            #almacenesTable td {
                text-align: left;
                padding: 8px;
            }

            .mt-5 {
                max-width: 85%;
            }

            /* aqui termina el estilo de la ultima tabla */

            body {
                display: flex;
                min-height: 100vh;
                flex-direction: column;
            }

            .sidebar {
                flex: 0 0 250px;
            }

            .banner {
                position: fixed;
                top: 0;
                left: 250px;
                width: calc(100% - 250px);
                background-color: #fff;
                padding: 10px;
                color: white;
                z-index: 1000;
                display: flex;
                align-items: center;
                transition: left 0.3s, width 0.3s;
                border-bottom: 1px solid #cbd0dd;
            }


            .collapsed {
                margin-left: 0;
            }

            .user-dropdown {
                display: none;
            }

            .user-dropdown.show {
                display: block;
            }

            /* Inicio del estilo de los formularios*/

            .container {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }

            /* Custom styles for a modern look */
            body {
                background-color: #f3f4f6;
            }

            /* Estilo base de las tarjetas */
            .item-card {
                border-radius: 20px;
                padding: 60px 100px 100px 100px;
                background-color: #ffffff;
                margin-bottom: 55px;
                opacity: 0;
                transform: translateY(15px);
                transition: opacity 0.3s ease, transform 0.3s ease;
                position: relative;
            }

            .item-card.show {
                opacity: 1;
                transform: translateY(0);
            }

            .remove-item-btn {
                font-size: 1.2rem;
                color: #fff;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: #dc3545;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                transition: background-color 0.3s ease, box-shadow 0.3s ease;
                transform: scale(1);
            }

            .remove-item-btn:hover {
                background-color: #009dff;
                transform: scale(1.05);
            }

            /* Animación de eliminación con suavizado */
            .remove-item-btn:active {
                transform: scale(0.95);
            }

            /* Animación de eliminación y reposicionamiento */
            .item-card.remove {
                opacity: 0;
                transform: translateY(-20px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .item-card.move-up {
                animation: moveUp 0.5s ease-in-out forwards;
            }

            @keyframes moveUp {
                0% {
                    transform: translateY(20px);
                    opacity: 1;
                }

                100% {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            /* Fondo del botón de eliminar */
            .remove-item-btn::before {
                content: '';
                position: absolute;
                width: 200%;
                height: 200%;
                background-color: #009dff;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0);
                transition: transform 0.5s ease, opacity 0.5s ease;
            }

            .remove-item-btn:active::before {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0;
            }

            .form-label {
                font-weight: 500;
                color: #555;
            }

            .container {
                max-width: 1000px;
                position: relative;
                padding-bottom: 60px;
            }

            .add-item-btn {
                display: flex;
                align-items: center;
                gap: 8px;
                /* Espacio entre el icono y el texto */
                font-size: 1rem;
                font-weight: bold;
                border-radius: 50px;
                background-color: #009DFF;
                color: #fff;
                padding: 12px 24px;
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%) scale(1);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
                transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
                opacity: 0;
                animation: fadeInSlideUp 0.6s forwards;
                cursor: pointer;
            }

            .add-item-btn .icon {
                font-size: 1.2rem;
                transition: transform 0.3s ease;
                color: white !important;
            }

            .add-item-btn:hover {
                background-color: #009dff;
                transform: translateX(-50%) scale(1.05);
            }

            .add-item-btn:hover .icon {
                transform: rotate(360deg) scale(1.2);
                /* Animación de giro y escala en el icono */
            }

            .add-item-btn:active {
                transform: translateX(-50%) scale(0.98);
            }

            /* Animación de entrada */
            @keyframes fadeInSlideUp {
                0% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(20px);
                }

                100% {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
            }

            .image-placeholder {
                width: 200px;
                height: 200px;
                border: 1px solid #a2a2a2;
                background-color: #ffffff;
            }

            .form-group-vertical {
                display: flex;
                flex-direction: column;
                gap: 10px;
                /* Add some space between the elements */
            }

            /* INICIO: Cambio de tamaño de la imagen según el valor total */
            .image-size-small {
                width: 100px;
                height: 100px;
            }

            .image-size-medium {
                width: 200px;
                height: 200px;
            }

            .image-size-large {
                width: 300px;
                height: 300px;
            }

            /* Animación y estilo mejorado para el ítem seleccionado */
            .selected {
                border: 2px solid #009DFF;
                transition: transform 0.3s ease, border-color 0.3s ease;
            }

            .item-card.hide {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            /*  MENU DE SELECCIONAR TIPO DE SERIE Y COTIZACION */
            .dropdown-options {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                background-color: white;
                border: 1px solid #ddd;
                z-index: 10;
                width: 100%;
                margin-top: 5px;
                border-radius: 4px;
            }

            /* Mostrar el menú cuando el botón es presionado o está en foco */
            .cotizacionTipoBtn:focus+#cotizacionTipoDropdown,
            .cotizacionTipoBtn:hover+#cotizacionTipoDropdown,
            .serieBtn:focus+#serieDropdown,
            .serieBtn:hover+#serieDropdown {
                display: block;
            }

            /* Estilo de los elementos del menú (eliminado el transition) */
            .dropdown-item {
                padding: 10px 15px;
                cursor: pointer;
                color: #333;
                border-radius: 4px;
                text-align: left;
            }

            /* Efecto al pasar el ratón sobre los elementos */
            .dropdown-item:hover {
                background-color: #009DFF;
                color: white;
            }

            .form-group.col-md-10.mb-2.d-flex.justify-content-end {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }

            .form-group label {
                width: 120px;
                margin-right: 10px;
            }
        </style>

    <div class="content">
        <h1 class="mb-8" style="font-weight: 800; font-size: 3rem; padding: 1pc">Nueva Cotización</h1>
        <div class="container mt-5">
            <form id="cotizacionForm" action="leer_cotizacion.php" method="POST">
                <div class="bg-gray-100">
                    <div class="bg-white p-9 rounded-lg ">
                        <div class="flex justify-between items-center mb-8 border p-4 rounded" style="background-color: rgba(34, 48, 62, .06);">
                            <div>
                                <img src="../img/siigo-aspel.svg" style="width: 300px;" alt="Logo Siigo Aspel">
                            </div>
                            <div class="flex justify-end text-right">
                                <span class="text-right">
                                    <!-- Campo Cotización -->
                                    <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                        <label for="serieSelect" class="text-left">Serie</label>
                                        <div class="input-group" style="position: relative;">
                                            <input type="text" class="form-control" id="serieSelect" name="serieSelect" placeholder="Serie">
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-serie" id="serieBtn" style="background-color: #009DFF; border-color: #009DFF; border-right: 5px solid #009DFF; border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
                                                    <i class="fas fa-chevron-down"></i> <!-- Flecha para indicar la acción -->
                                                </button>
                                            </div>
                                            <!-- Opciones del menú personalizado -->
                                            <div id="serieDropdown" class="dropdown-options">
                                                <div class="dropdown-item" onclick="selectOptionSerie('CT')">CT</div>
                                                <div class="dropdown-item" onclick="selectOptionSerie('CO')">CO</div>
                                                <div class="dropdown-item" onclick="selectOptionSerie('STAND')">STAND</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                        <label for="cotizacionTipoInput" class="text-left">Cotización</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="cotizacionTipoInput" name="cotizacionTipoInput" placeholder="Cotización">
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-cotizacion" id="cotizacionTipoBtn" style="background-color: #009DFF; border-color: #009DFF; border-right: 5px solid #009DFF;  border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
                                                    <i class="fas fa-chevron-down"></i> <!-- Flecha para indicar la acción -->
                                                </button>
                                            </div>
                                            <!-- Opciones del menú personalizado -->
                                            <div id="cotizacionTipoDropdown" class="dropdown-options">
                                                <div class="dropdown-item" onclick="selectOption('Directa')">Directa</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Campo Número (ya existente) -->
                                    <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                        <label for="cveDoc" class="text-left">Número</label>
                                        <input type="text" class="form-control" id="cveDoc" name="cveDoc" readonly>
                                    </div>

                                    <!-- Campo Fecha (ya existente) -->
                                    <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                        <label for="fechaDoc" class="text-left">Fecha</label>
                                        <input type="date" class="form-control mb-0" id="fechaDoc" name="fechaDoc">
                                    </div>

                                    <!-- Campo Fecha Rec (ya existente) -->
                                    <div class="form-group col-md-10 mb-3 d-flex justify-content-end">
                                        <label for="fechaRec" class="text-left">Entrega</label>
                                        <input type="date" class="form-control mb-0" id="fechaRec" name="fechaRec">
                                    </div>
                                    <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                        <label for="fechaVenc" class="text-left">Vencimiento</label>
                                        <input type="date" class="form-control mb-0" id="fechaVenc" name="fechaVenc">
                                    </div>
                            </div>
                        </div>



                        <!-- Sección de Cliente y Esquema -->
                        <div class="flex justify mb-1">
                            <div class="form-group col-md-2">
                                <label for="cliente">Cliente</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="cliente" id="cliente" readonly required placeholder="Cliente">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-secondary" id="buscarClienteBtn" style="background-color: #009DFF; border-color: #009DFF;">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>

                                <!-- TABLA DE CLIENTES -->
                                <div id="clientesTableContainer" style="display:none;">
                                    <input type="text" id="searchCliente" placeholder="Buscar cliente" class="form-control mb-2">
                                    <table class="table table-bordered" id="clientesTable">
                                        <thead>
                                            <tr>
                                                <th>Clave</th>
                                                <th>Nombre</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Data will be populated here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>


                            <div class="form-group col-md-3">
                                <label for="rfc">RFC</label>
                                <input type="text" class="form-control" id="rfc" name="rfc" placeholder="RFC" required>
                            </div>

                            <div class="form-group col-md-5">
                                <label for="nombre">Nombre</label>
                                <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" required>
                            </div>

                            <div class="form-group col-md-2">
                                <label for="esquema2">Esquemas</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="esquema2" id="esquema2" placeholder="Esquema" readonly>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-secondary" id="buscarEsquemaBtn2">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                <!-- TABLA DE ESQUEMAS -->
                                <div id="esquemasTableContainer">
                                    <table class="table table-bordered" id="esquemasTable">
                                        <thead>
                                            <tr>
                                                <th>Clave</th>
                                                <th>Descripción</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Sección de Dirección -->
                        <div class="flex justify mb-1">
                            <div class="form-group col-md-3">
                                <label for="calle">Calle</label>
                                <input type="text" class="form-control" id="calle" name="calle" placeholder="Calle" required>
                            </div>
                            <div class="form-group col-md-2">
                                <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="form-group col-md-2">
                                <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="form-group col-md-2">
                                <label for="codigo_postal">Código Postal</label>
                                <input type="text" class="form-control" id="codigo_postal" name="codigo_postal" placeholder="Código postal">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="poblacion">Población</label>
                                <input type="text" class="form-control" id="poblacion" name="poblacion" placeholder=" Población">
                            </div>
                        </div>

                        <!-- Sección de País, Vendedor y Colonia -->
                        <div class="flex justify mb-1">
                            <div class="form-group col-md-3">
                                <label for="pais">País</label>
                                <input type="text" class="form-control" id="pais" name="pais" placeholder="País">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="colonia">Colonia</label>
                                <input type="text" class="form-control" id="colonia" name="colonia" placeholder="Colonia">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="vendedor">Vendedor</label>
                                <input type="text" class="form-control" id="vendedor" name="vendedor" placeholder="Vendedor">
                            </div>
                            <div class="form-group col-md-2">
                                <label for="descuento">Descuento:</label>
                                <input type="text" class="form-control" id="descuento" name="descuento" placeholder="0.00%">
                            </div>
                        </div>

                        <!-- Sección de Descuentos y Almacén -->
                        <div class="flex justify mb-1">
                            <div class="form-group col-md-2">
                                <label for="descuentofinal">Descuento Final</label>
                                <input type="text" class="form-control" id="descuentofinal" name="descuentofinal" placeholder="Descuento">
                            </div>
                            <div class="form-group col-md-2">
                                <label for="comision">Comisión</label>
                                <input type="text" class="form-control" id="comision" name="comision" placeholder="Comisión">
                            </div>

                            <div class="form-group col-md-4">
                                <label for="enviar_a">Enviar a:</label>
                                <input type="text" class="form-control" id="enviar_a" name="enviar_a" placeholder="Enviar">
                            </div>

                            <!-- Nuevo campo Destinatario al costado de Enviar a -->
                            <div class="form-group col-md-4">
                                <label for="destinatario">Destinatario</label>
                                <input type="text" class="form-control" id="destinatario" name="destinatario" placeholder="Destinatario">
                            </div>
                        </div>

                        <!-- Sección de Moneda y Tipo de Cambio -->
                        <div class="flex justify mb-1">
                            <div class="form-group col-md-2">
                                <label for="moneda">Moneda</label>
                                <select class="form-control" name="moneda" id="moneda">
                                    <option value="">Selecciona una moneda...</option>
                                </select>
                            </div>

                            <div class="form-group col-md-3">
                                <label for="descripcion_moneda">Descripción</label>
                                <input type="text" class="form-control" id="descripcion_moneda" name="descripcion_moneda">
                            </div>

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

                        <!-- Item List -->
                        <div class="container mt-4">
                            <div id="itemList">
                                <!-- Aquí se agregarán los ítems -->
                            </div>
                            <button type="button" class="add-item-btn" id="addItemBtn">
                                <span class="icon"><i class="fas fa-plus"></i></span> Agregar Producto
                            </button>


                            <!-- Contenedor de la tabla de productos (será ocultado por defecto) -->
                            <div id="productosTableContainer" class="productosTableContainer" style="display: none;">
                                <table id="productosTable" class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Código</th>
                                            <th>Descripción</th>
                                            <th>Seleccionar</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>


                        <!-- Descripción y Detalles de la Cotización -->
                        <div class="container">
                            <div class="form-group-vertical">
                                <label for="descripcion">Descripción</label>
                                <textarea id="descripcion" name="descripcion" class="form-control" placeholder="Descripción" rows="4"></textarea>
                            </div>

                            <div class="form-group-vertical">
                                <div class="form-group-vertical">
                                    <label for="fact-unidades">Fact./unidades :</label>
                                    <input type="text" name="fact_unidades" id="fact-unidades" class="form-control" placeholder="Fact./unidades">
                                </div>
                                <div class="form-group-vertical">
                                    <label for="total_por_partida">Total por partida</label>
                                    <input type="text" name="total_por_partida" id="total_por_partida" class="form-control" placeholder="Total por partida">
                                </div>
                            </div>

                            <div class="image-placeholder"></div>
                        </div>
                        <!-- Botones de Guardar y Cancelar -->
                        <div class="form-group d-flex justify-content-center gap-3">
                            <button type="submit" class="btn btn-primary btn-lg d-flex align-items-center">
                                <i class="fa fa-save me-2 text-white"></i> <span>Guardar Cotización</span>
                            </button>
                            <a href="" class="btn btn-secondary btn-lg d-flex align-items-center">
                                <i class="fa fa-times-circle me-2 text-white"></i> <span>Cancelar</span>
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Script de Items (productos) -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <!-- Asegúrate de incluir estas librerías en tu HTML -->
    <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 INICIAL DE MENU -->
    <script>
        document.getElementById('sidebarCollapse').addEventListener('click', function() {
            var sidebar = document.getElementById('sidebar');
            var content = document.querySelector('.content');
            var banner = document.querySelector('.banner');
            sidebar.classList.toggle('collapsed');
            content.classList.toggle('collapsed');
            banner.classList.toggle('collapsed');
        });

        document.getElementById('userDropdownToggle').addEventListener('click', function() {
            document.getElementById('userDropdown').classList.toggle('show');
        });
    </script>
    <script>
        document.querySelectorAll('[data-toggle="submenu"]').forEach(function(element) {
            element.addEventListener('click', function(e) {
                e.preventDefault();
                var target = document.querySelector(element.getAttribute('data-target'));
                var isOpen = target.style.maxHeight !== '0px';

                document.querySelectorAll('.submenu').forEach(function(submenu) {
                    submenu.style.maxHeight = '0px';
                });

                document.querySelectorAll('[data-toggle="submenu"]').forEach(function(el) {
                    el.classList.remove('submenu-open');
                });

                if (!isOpen) {
                    target.style.maxHeight = target.scrollHeight + 'px';
                    element.classList.add('submenu-open');
                }
            });
        });
    </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('fechaRec');
            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('fechaRec');
            fechaInputRec.setAttribute('min', formattedToday);
            fechaInputRec.setAttribute('max', formattedMaxDateRec);
            fechaInputRec.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>
        // Crear un nuevo objeto de fecha
        let today = new Date();

        // Sumar 15 días a la fecha actual
        today.setDate(today.getDate() + 15);

        // Formatear la fecha en formato yyyy-mm-dd (que es el formato aceptado por el campo date)
        let yyyy = today.getFullYear();
        let mm = today.getMonth() + 1; // Los meses empiezan desde 0
        let dd = today.getDate();

        // Asegurarse de que el mes y el día tengan dos dígitos
        if (mm < 10) mm = '0' + mm;
        if (dd < 10) dd = '0' + dd;

        // Crear la fecha en formato adecuado
        let formattedDate = yyyy + '-' + mm + '-' + dd;

        // Asignar la fecha calculada al input
        document.getElementById("fechaVenc").value = formattedDate;
    </script>


    <!-- obtener la clave del esquema osea el numero del % de impuesto -->
    <script>
        fetch('obtener_esquemas.php')
            .then(response => response.json())
            .then(data => {
                const esquemasTableBody = document.querySelector('#esquemasTable tbody');
                data.forEach(esquema => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                <td>${esquema.CVE_ESQIMPU}</td>
                <td>${esquema.DESCRIPESQ}</td> 
                
                <td>
                    <button type="button" class="btn btn-primary seleccionar-esquema" data-esquema='${JSON.stringify(esquema)}'>
                        Seleccionar
                    </button>
                </td>
            `;
                    esquemasTableBody.appendChild(row);
                });

                // Agregar evento de clic a los botones de selección de esquema
                const buttons = document.querySelectorAll('.seleccionar-esquema');
                buttons.forEach(button => {
                    button.addEventListener('click', function() {
                        const esquema = JSON.parse(this.getAttribute('data-esquema'));
                        document.getElementById('esquema2').value = esquema.CVE_ESQIMPU;
                        document.getElementById('esquemasTableContainer').style.display = 'none';
                    });
                });
            })
            .catch(error => console.error('Error al obtener los esquemas:', error));

        document.getElementById('buscarEsquemaBtn2').addEventListener('click', function() {
            const esquemasTableContainer = document.getElementById('esquemasTableContainer');
            if (esquemasTableContainer.style.display === 'none' || esquemasTableContainer.style.display === '') {
                esquemasTableContainer.style.display = 'block';
            } else {
                esquemasTableContainer.style.display = 'none';
            }
        });
    </script>

    <!-- SCRIPT DE OPTENR ALMACEN -->
    <script>
        fetch('obtener_almacenes.php')
            .then(response => response.json())
            .then(data => {
                const almacenesTableBody = document.querySelector('#almacenesTable tbody');
                almacenesTableBody.innerHTML = ''; // Limpiar la tabla antes de llenarla
                data.forEach(almacen => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                <td>${almacen.CVE_ALM}</td>
                <td>${almacen.DESCR}</td>
                <td>${almacen.DIRECCION}</td>
                <td>${almacen.ENCARGADO}</td>
                <td>${almacen.TELEFONO}</td>
                <td>
                    <button type="button" class="btn btn-primary seleccionar-almacen" data-almacen='${JSON.stringify(almacen)}'>
                        Seleccionar
                    </button>
                </td>
                `;
                    almacenesTableBody.appendChild(row);
                });

                // Agregar evento de clic a los botones de selección de almacén
                const buttons = document.querySelectorAll('.seleccionar-almacen');
                buttons.forEach(button => {
                    button.addEventListener('click', function() {
                        const almacen = JSON.parse(this.getAttribute('data-almacen'));
                        document.getElementById('almacen').value = almacen.CVE_ALM;
                        document.getElementById('almacenesTableContainer').style.display = 'none';
                    });
                });

                // Seleccionar automáticamente el primer almacén si hay al menos uno
                if (buttons.length > 0) {
                    buttons[0].click(); // Simula un clic en el primer botón
                }
            })
            .catch(error => console.error('Error al obtener los almacenes:', error));

        document.getElementById('buscarAlmacenBtn').addEventListener('click', function() {
            const almacenesTableContainer = document.getElementById('almacenesTableContainer');
            if (almacenesTableContainer.style.display === 'none' || almacenesTableContainer.style.display === '') {
                almacenesTableContainer.style.display = 'block';
            } else {
                almacenesTableContainer.style.display = 'none';
            }
        });
    </script>

    <!-- SCRIPT DE MONEDAS -->
    <script>
        fetch('obtener_monedas.php')
            .then(response => response.json())
            .then(data => {
                const selectMoneda = document.getElementById('moneda');
                selectMoneda.innerHTML = '';
                data.forEach(moneda => {
                    selectMoneda.innerHTML += `
            <option value="${moneda.NUM_MONED}">
                ${moneda.NUM_MONED}
            </option>`;
                });
            })
            .then(() => {

                const monedaSeleccionada = document.getElementById('moneda').value;
                obtenerInformacionMoneda(monedaSeleccionada);
            })
            .catch(error => console.error('Error al obtener las monedas:', error));


        document.getElementById('moneda').addEventListener('change', function() {
            const monedaSeleccionada = this.value;
            obtenerInformacionMoneda(monedaSeleccionada);
        });


        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>

    <script>
        let itemCount = 0;
        let selectedItemCard = null;
        let productos = [];

        function createItemCard(isFirstItem = false) {
            const itemCard = document.createElement('div');
            itemCard.classList.add('item-card');
            itemCard.innerHTML = `
        <div class="d-flex justify-content-between align-items-center">
            <h6 class="m-0 mx-auto" style="font-weight: bold; color: black; padding: 1.5rem; ">Productos</h6>
            ${isFirstItem ? '' : '<div class="remove-item-btn">&times;</div>'}
        </div>
        <div class="row">
            <div class="col-md-2">
                <label class="form-label">Cantidad</label>
                <input type="number" name="cantidad" class="form-control cantidad-input" placeholder="Cantidad" min="0" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Producto</label>
                <div class="input-group">
                    <input type="text" class="form-control producto-input" name="producto" placeholder="Producto" readonly required>
                    <div class="input-group-append">
                        <button type="button" class="btn btn-secondary buscar-producto-btn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="productosTableContainer" style="display: none;">
                <input type="text" id="searchProducto" placeholder="Buscar producto" class="form-control mb-2">
                <table class="table table-bordered productosTable">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Descripción</th>
                            <th>Seleccionar</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="col-md-2">
                <label class="form-label">Precio</label>
                <input type="text" name="costo_unidad" class="form-control" placeholder="Precio" required>
            </div>
            <div class="col-md-2">
                <label class="form-label">Subtotal</label>
                <input type="number" name="subtotal_partida" class="form-control" placeholder="Subtotal" readonly>
            </div>
            <div class="col-md-2">
                <label for="almacen">Almacén</label>
                <div class="input-group">
                    <input type="text" class="form-control" name="almacen" id="almacen" placeholder="Almacén" readonly>
                    <div class="input-group-append">
                        <button type="button" class="btn btn-secondary" id="buscarAlmacenBtn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Tabla de Almacenes -->
                <div id="almacenesTableContainer" style="display:none;">
                    <table class="table table-bordered" id="almacenesTable">
                        <thead>
                            <tr>
                                <th>Clave</th>
                                <th>Descripción</th>
                                <th>Acción</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        <input type="hidden" name="numPar" value="${itemCount + 1}">
    `;
            // Escuchar clics en el área del item-card
            itemCard.addEventListener('click', (event) => {
                // Validar que el clic no sea en un botón o subelementos interactivos
                const excludedTags = ['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'];
                if (excludedTags.includes(event.target.tagName) || event.target.classList.contains('remove-item-btn')) {
                    return; // Ignorar el clic
                }
                seleccionarItemCard(itemCard);
            });

            return itemCard;
        }

        function seleccionarItemCard(itemCard) {
            // Remover selección previa si existe
            if (selectedItemCard) {
                selectedItemCard.classList.remove('selected');
                selectedItemCard.style.transform = 'scale(1)';
            }

            // Aplicar selección al nuevo elemento
            selectedItemCard = itemCard;
            selectedItemCard.classList.add('selected');
            selectedItemCard.style.transform = 'scale(1.02)';

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

            // Actualizar la descripción y la imagen en la interfaz
            document.getElementById('descripcion').value = descripcion;
            document.querySelector('.image-placeholder').innerHTML = `<img src="${urlImagen}" alt="Imagen del Producto" style="width: 190px; height: 190px;">`;
        }

        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="costo_unidad"]')[itemIndex];
                        const subtotalInput = document.querySelectorAll('input[name="subtotal_partida"]')[itemIndex];

                        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);

                        cantidadInput.addEventListener('input', () => actualizarSubtotal(cantidadInput, precio, subtotalInput));
                    }
                })
                .catch(error => console.error('Error al obtener el precio del producto:', error));
        }

        function configurarBusquedaProveedor(itemIndex) {
            const searchInput = document.querySelectorAll('#searchProducto')[itemIndex];
            const productosTableBody = document.querySelectorAll('.productosTable tbody')[itemIndex];

            searchInput.addEventListener('input', () => {
                const searchText = searchInput.value.toLowerCase();

                // Iterar sobre todas las filas de la tabla
                Array.from(productosTableBody.querySelectorAll('tr')).forEach(row => {
                    const cveArt = row.cells[0].textContent.toLowerCase(); // Código
                    const descr = row.cells[1].textContent.toLowerCase(); // Descripción

                    // Mostrar u ocultar filas según el texto buscado
                    if (cveArt.includes(searchText) || descr.includes(searchText)) {
                        row.style.display = ''; // Mostrar
                    } else {
                        row.style.display = 'none'; // Ocultar
                    }
                });
            });
        }


        function actualizarSubtotal(cantidadInput, precio, subtotalInput) {
            const cantidad = parseFloat(cantidadInput.value) || 1;
            const subtotal = precio * cantidad;
            subtotalInput.value = subtotal.toFixed(2);
        }

        function asignarEventosSeleccionProducto(itemIndex) {
            const seleccionarBtns = document.querySelectorAll(`.productosTable tbody tr .seleccionar-producto`);

            seleccionarBtns.forEach(button => {
                button.onclick = null;
                button.addEventListener('click', function() {
                    const producto = JSON.parse(this.getAttribute('data-producto'));
                    const selectedInput = document.querySelectorAll('.producto-input')[itemIndex];
                    selectedInput.value = producto.CVE_ART;
                    selectedInput.dataset.descripcion = producto.DESCR;
                    selectedInput.dataset.imagen = producto.URL_IMAGEN;

                    obtenerPrecioProducto(producto.CVE_ART, itemIndex);

                    const descripcionInput = document.getElementById('descripcion');
                    descripcionInput.value = producto.DESCR || '';

                    const imagePlaceholder = document.querySelector('.image-placeholder');
                    imagePlaceholder.innerHTML = `<img src="${producto.URL_IMAGEN}" alt="Imagen del Producto" style="width: 190px; height: 190px;">`;

                    document.querySelectorAll('.productosTableContainer')[itemIndex].style.display = 'none';
                    seleccionarItemCard(selectedInput.closest('.item-card'));
                });
            });
        }

        function addItemCard() {
            const itemList = document.getElementById('itemList');
            const itemCard = createItemCard(itemCount === 0);
            itemList.appendChild(itemCard);
            setTimeout(() => itemCard.classList.add('show'), 10);

            if (itemCount > 0) addRemoveListener(itemCard);
            updateProductTableListeners();

            itemCount++;
        }

        function addRemoveListener(itemCard) {
            itemCard.querySelector('.remove-item-btn').addEventListener('click', function() {
                const itemList = document.getElementById('itemList');
                const itemCards = Array.from(itemList.querySelectorAll('.item-card'));

                if (itemCard !== itemList.firstElementChild) {
                    itemCard.classList.add('hide');

                    setTimeout(() => {
                        const itemIndex = itemCards.indexOf(itemCard);
                        itemCard.remove();

                        const previousItem = itemList.querySelectorAll('.item-card')[itemIndex - 1];
                        if (previousItem) {
                            seleccionarItemCard(previousItem);
                        }
                        updateProductTableListeners();
                    }, 300);
                }
            });
        }

        function updateProductTableListeners() {
            const buscarProductoBtns = document.querySelectorAll('.buscar-producto-btn');
            buscarProductoBtns.forEach((button, index) => {
                const productosTableContainer = document.querySelectorAll('.productosTableContainer')[index];
                button.onclick = null;

                button.addEventListener('click', () => {
                    productosTableContainer.style.display = productosTableContainer.style.display === 'none' ? 'block' : 'none';
                    if (productosTableContainer.style.display === 'block') {
                        obtenerProductos(index);
                    }
                });
            });

            // Asignar evento para la búsqueda de almacenes
            const buscarAlmacenBtns = document.querySelectorAll('#buscarAlmacenBtn');
            buscarAlmacenBtns.forEach((button, index) => {
                const almacenesTableContainer = document.querySelectorAll('#almacenesTableContainer')[index];
                button.onclick = null;

                button.addEventListener('click', () => {
                    almacenesTableContainer.style.display = almacenesTableContainer.style.display === 'none' ? 'block' : 'none';
                    if (almacenesTableContainer.style.display === 'block') {
                        obtenerAlmacenes(index);
                    }
                });
            });
        }

        function obtenerProductos(itemIndex) {
            fetch('obtener_productos.php')
                .then(response => response.json())
                .then(data => {
                    const productosTableBody = document.querySelectorAll('.productosTable tbody')[itemIndex];
                    productosTableBody.innerHTML = '';

                    data.forEach(producto => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                    <td>${producto.CVE_ART}</td>
                    <td>${producto.DESCR}</td>
                    <td>
                        <button type="button" class="btn btn-primary seleccionar-producto" data-producto='${JSON.stringify(producto)}'>
                            Seleccionar
                        </button>
                    </td>
                `;
                        productosTableBody.appendChild(row);
                    });

                    asignarEventosSeleccionProducto(itemIndex);

                    // Configurar el filtro de búsqueda
                    configurarBusquedaProveedor(itemIndex);
                })
                .catch(error => console.error('Error al obtener productos:', error));
        }

        function obtenerAlmacenes(itemIndex) {
            fetch('obtener_almacenes.php')
                .then(response => response.json())
                .then(data => {
                    const almacenesTableBody = document.querySelectorAll('#almacenesTable tbody')[itemIndex];
                    almacenesTableBody.innerHTML = '';

                    // Limitar a 6 almacenes
                    const limitedAlmacenes = data.slice(0, 6);

                    limitedAlmacenes.forEach(almacen => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td>${almacen.CVE_ALM}</td>
                        <td>${almacen.DESCR}</td>
                        <td>
                            <button type="button" class="btn btn-primary seleccionar-almacen" data-almacen='${JSON.stringify(almacen)}'>
                                Seleccionar
                            </button>
                        </td>
                    `;
                        almacenesTableBody.appendChild(row);
                    });

                    asignarEventosSeleccionAlmacen(itemIndex);
                })
                .catch(error => console.error('Error al obtener almacenes:', error));
        }

        function asignarEventosSeleccionAlmacen(itemIndex) {
            const seleccionarAlmacenesBtns = document.querySelectorAll(`#almacenesTable tbody tr .seleccionar-almacen`);

            seleccionarAlmacenesBtns.forEach(button => {
                button.onclick = null;
                button.addEventListener('click', function() {
                    const almacen = JSON.parse(this.getAttribute('data-almacen'));
                    const selectedInput = document.querySelectorAll('#almacen')[itemIndex];
                    selectedInput.value = almacen.CVE_ALM;

                    document.querySelectorAll('#almacenesTableContainer')[itemIndex].style.display = 'none';
                });
            });
        }

        document.getElementById('addItemBtn').addEventListener('click', addItemCard);
        window.addEventListener('DOMContentLoaded', addItemCard);
    </script>


    <script>
        $(document).ready(function() {
            // Enviar el formulario con AJAX
            $("#cotizacionForm").on("submit", function(event) {
                event.preventDefault(); // Prevenir recarga

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

                // Enviar datos por AJAX
                $.ajax({
                    url: "leer_cotizacion.php", // Archivo PHP que procesará el formulario
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(response) {
                        try {
                            const data = JSON.parse(response);
                            Swal.close();

                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '¡Éxito!',
                                    text: data.message,
                                    confirmButtonText: 'Aceptar'
                                }).then(() => {
                                    $("#cotizacionForm")[0].reset();
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: data.message,
                                    confirmButtonText: 'Aceptar'
                                });
                            }
                        } catch (e) {
                            Swal.close();
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'La respuesta del servidor no es válida.',
                                confirmButtonText: 'Aceptar'
                            });
                        }
                    },
                    error: function() {
                        Swal.close();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Hubo un problema al enviar los datos.',
                            confirmButtonText: 'Aceptar'
                        });
                    }
                });
            });
        });
    </script>
    <script>
        let clientes = []; // Almacena los clientes obtenidos del servidor

        // Obtener clientes desde el servidor
        fetch('obtener_clientes.php')
            .then(response => response.json())
            .then(data => {
                clientes = data; // Guardar los clientes en la variable global
                populateClientesTable(clientes); // Poblar la tabla inicialmente
            })
            .catch(error => console.error('Error al obtener los clientes:', error));

        // Poblar la tabla con los clientes
        function populateClientesTable(data) {
            const clientesTableBody = document.querySelector('#clientesTable tbody');
            clientesTableBody.innerHTML = ''; // Limpiar filas existentes
            data.forEach(cliente => {
                const row = document.createElement('tr');
                row.innerHTML = `
                <td>${cliente.CLAVE}</td>
                <td>${cliente.NOMBRE}</td>
                <td>
                    <button type="button" class="btn btn-primary seleccionar-cliente" data-cliente='${JSON.stringify(cliente)}'>
                        Seleccionar
                    </button>
                </td>
            `;
                clientesTableBody.appendChild(row);
            });
        }

        // Mostrar u ocultar la tabla de clientes
        document.getElementById('buscarClienteBtn').addEventListener('click', function() {
            const clientesTableContainer = document.getElementById('clientesTableContainer');
            clientesTableContainer.style.display = (clientesTableContainer.style.display === 'none' || clientesTableContainer.style.display === '') ?
                'block' :
                'none';
        });

        // Filtrar clientes basado en el texto ingresado
        document.getElementById('searchCliente').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const filteredClientes = clientes.filter(cliente =>
                cliente.CLAVE.toLowerCase().includes(searchTerm) || cliente.NOMBRE.toLowerCase().includes(searchTerm)
            );
            populateClientesTable(filteredClientes); // Actualizar la tabla con los resultados filtrados
        });

        // Seleccionar cliente y actualizar el campo de texto
        document.addEventListener('click', function(event) {
            if (event.target.classList.contains('seleccionar-cliente')) {
                const cliente = JSON.parse(event.target.dataset.cliente);
                document.getElementById('cliente').value = cliente.NOMBRE; // Ajusta el campo que desees actualizar
                document.getElementById('clientesTableContainer').style.display = 'none'; // Ocultar tabla después de seleccionar
            }
        });

        $(document).on('click', '.seleccionar-cliente', function() {
            const cliente = $(this).data('cliente');
            $('#cliente').val(cliente.CLAVE);
            $('#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);
            $('#enviar_a').val(cliente.CALLE_ENVIO);
            $('#comision').val(cliente.COMI);
            $('#destinatario').val(cliente.Destinatario);
            $('#clientesTableContainer').hide();
            $('#lista_precio').val(cliente.LISTA_PREC);
        });
    </script>
    <script>
        // Función para mostrar u ocultar los menús de Cotización y Serie al hacer clic en los botones
        document.getElementById('cotizacionTipoBtn').addEventListener('click', function() {
            const dropdown = document.getElementById('cotizacionTipoDropdown');
            dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
        });

        document.getElementById('serieBtn').addEventListener('click', function() {
            const dropdown = document.getElementById('serieDropdown');
            dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
        });

        // Función para seleccionar una opción de Cotización y cerrar el menú
        function selectOption(option) {
            document.getElementById('cotizacionTipoInput').value = option;
            document.getElementById('cotizacionTipoDropdown').style.display = 'none';
        }

        // Función para seleccionar una opción de Serie y cerrar el menú
        function selectOptionSerie(option) {
            document.getElementById('serieSelect').value = option; // Actualiza el valor
            $('#serieSelect').trigger('change'); // Dispara el evento change para actualizar el número consecutivo
            document.getElementById('serieDropdown').style.display = 'none'; // Cierra el menú
        }

        // Cerrar el menú al hacer clic fuera de él
        window.addEventListener('click', function(event) {
            const dropdownCotizacion = document.getElementById('cotizacionTipoDropdown');
            const dropdownSerie = document.getElementById('serieDropdown');
            const buttonCotizacion = document.getElementById('cotizacionTipoBtn');
            const buttonSerie = document.getElementById('serieBtn');

            if (event.target !== dropdownCotizacion && event.target !== buttonCotizacion && !buttonCotizacion.contains(event.target)) {
                dropdownCotizacion.style.display = 'none';
            }

            if (event.target !== dropdownSerie && event.target !== buttonSerie && !buttonSerie.contains(event.target)) {
                dropdownSerie.style.display = 'none';
            }
        });
    </script>

    <script>
        // Último número de cotización
        $(document).ready(function() {
            $('#serieSelect').change(function() {
                var serieElegida = $(this).val(); // Obtiene el valor seleccionado
                $.ajax({
                    url: 'ultimacot.php?serie=' + serieElegida,
                    method: 'GET',
                    success: function(data) {
                        $('#cveDoc').val(data); // Coloca el nuevo número en el campo de texto
                    },
                    error: function(error) {
                        console.log("Error al obtener el último número de cotización: ", error);
                    }
                });
            });
            // Disparar el evento al cargar la página para obtener la serie por defecto
            $('#serieSelect').trigger('change');
        });
    </script>

    </body>

    </html>