<!DOCTYPE html>
<html lang="en" class="light-style layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="../assets/" data-template="vertical-menu-template-free">

<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>Agregar Compra</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>
</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 active open ">
                        <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 active">
                                <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">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-line-chart"></i>
                            <div data-i18n="Account Settings">Ventas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="facturas.php" class="menu-link">
                                    <div data-i18n="Account">Facturas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdeventa.php" class="menu-link">
                                    <div data-i18n="Notifications">Notas de Venta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="trasladoscartaporte.php" class="menu-link">
                                    <div data-i18n="Connections">Carta Porte</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="remisiones.php" class="menu-link">
                                    <div data-i18n="Connections">Remisiones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="pedidos.php" class="menu-link">
                                    <div data-i18n="Connections">Pedidos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cotizaciones.php" class="menu-link">
                                    <div data-i18n="Connections">Cotizaciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devoluciones.php" class="menu-link">
                                    <div data-i18n="Connections">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdecredito.php" class="menu-link">
                                    <div data-i18n="Connections">Notas de Crédito</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="parcialidades.php" class="menu-link">
                                    <div data-i18n="Connections">Parcialidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="comprobantesdepago.php" class="menu-link">
                                    <div data-i18n="Connections">Comprobantes</div>
                                </a>
                            <li class="menu-item">
                                <a href="estadisticas.php" class="menu-link">
                                    <div data-i18n="Connections">Estadisticas</div>
                                </a>
                            </li>
                        </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" target="_blank">
                                    <div data-i18n="Basic">Clientes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxcobrar.php" class="menu-link" target="_blank">
                                    <div data-i18n="Basic">Cuentas X Cobrar</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="clientespoliza.php" class="menu-link" target="_blank">
                                    <div data-i18n="Basic">Clientes con Póliza</div>
                                </a>
                            <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="devoluciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Devoluciones</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>
                        </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>
                        </ul>
                    </li>
                </ul>
            </aside>
            <!-- / Menu -->

            <!-- Contenido Principal -->
            <div class="content">
                <h1 class="mb-8" style="font-weight: 800; font-size: 3rem; padding: 1pc;">Nueva Compra</h1>
                <div class="container mt-2">
                    <form id="CompraForm" action="leer_compra.php" method="POST">

                        <div class="bg-gray-100">
                            <div class=" bg-white p-9 rounded-lg shadow-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; height: 150px"
                                            alt="Logo Siigo Aspel">
                                    </div>
                                    <div class="flex justify-end">
                                        <div class="text-right">
                                            <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                                <label for="compra" class="m-2">Compra</label>
                                                <p class="form-control mb-0 text-center" id="compra" required>Compra</p>
                                            </div>
                                            <div class="form-group col-md-10 mb-2 d-flex justify-content-end">
                                                <label for="cveDoc" class="m-2">Número</label>
                                                <input type="number" class="form-control mb-0 text-center" id="cveDoc"
                                                    name="cveDoc" readonly required>
                                            </div>
                                            <div class="form-group col-md-10 mb-2 d-flex justify-content">
                                                <label for="compra" class="m-2 mb-3">Fecha</label>
                                                <input type="date" class="form-control mb-1 text-center" id="fechaDoc"
                                                    name="fechaDoc" required style="width: 165px; margin-left:15px;">
                                            </div>
                                            <div class="form-group col-md-10 mb-2 d-flex justify-content">
                                                <label for="compra" class="m-2 mb-3">Fecha<br>Rec.</label>
                                                <input type="date" class="form-control mb-0 text-center" id="fechaRec"
                                                    name="fechaRec" required style="width: 160px; margin-left:15px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Invoice To and Bill To Sections -->
                                <div class="flex justify mb-1">
                                    <div class="form-group col-2">
                                        <label for="cliente">Proveedor</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="proveedor" id="cliente"
                                                placeholder="Proveedor" readonly required>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-secondary" id="buscarClienteBtn">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- TABLA DE CLIENTES -->
                                        <div id="clientesTableContainer" style="display:none;">
                                            <input type="text" id="searchProveedor" placeholder="Buscar proveedor"
                                                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="" class="form-control" id="rfc" name="rfc" placeholder="  RFC" required>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <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-3">
                                        <label for="calle">Calle</label>
                                        <input type="text" class="form-control" id="calle" name="calle" placeholder=" Calle"
                                            required>
                                    </div>
                                </div>
                                <div class="flex justify mb-1">
                                    <div class="form-group col-md-1">
                                        <label for="num_ext">Num.ext.</label>
                                        <input type="text" class="form-control" id="num_ext" name="num_ext"
                                            placeholder="Número exterior">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="colonia">Colonia</label>
                                        <input type="text" class="form-control" id="colonia" name="colonia"
                                            placeholder="Colonia">
                                    </div>
                                    <div class="form-group col-md-1">
                                        <label for="num_int">Num.int.</label>
                                        <input type="text" class="form-control" id="num_int" name="num_int"
                                            placeholder=" Número interior">
                                    </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-2">
                                        <label for="poblacion">Población</label>
                                        <input type="text" class="form-control" id="poblacion" name="poblacion"
                                            placeholder="  Población">
                                    </div>
                                </div>
                                <div class="flex justify mb-1">
                                    <div class="form-group col-md-2">
                                        <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-3">
                                        <label for="Entregar_a">Entregar a:</label>
                                        <input type="text" class="form-control" id="Entregar_a" name="entreg_a"
                                            placeholder=" Entrega">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="Ref. Proveedor">Ref. Proveedor:</label>
                                        <input type="" class="form-control" id="refproveedor" name="refproveedor"
                                            placeholder=" Referencia" 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 CLIENTES -->
                                        <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 class="form-group col-md-2">
                                        <label for="descuento">Descuento:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="descuento" name="descuento"
                                                placeholder="0.00%">
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify mb-1">
                                    <div class="form-group col-md-2">
                                        <label for="descuentofinal">Descuento Final:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="descuentofinal" name="descuentofinal"
                                                placeholder="0.00%">
                                        </div>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label for="gastosind">Gastos Ind:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="gastosind" name="gastosind"
                                                placeholder="0.00%">
                                        </div>
                                    </div>
                                    <div class="form-group col-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">
                                            <table class="table table-bordered" id="almacenesTable">
                                                <thead>
                                                    <tr>
                                                        <th>Clave</th>
                                                        <th>Descripción</th>
                                                        <th>Direccion</th>
                                                        <th>Encargado</th>
                                                        <th>Telefono</th>
                                                        <th>Acción</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <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-1.5">
                                        <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>
                                <!-- 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>
                                <br>
                                <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>
                                <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"></i> <span>Guardar Compra</span>
                                    </button>
                                    <a href="" class="btn btn-secondary btn-lg d-flex align-items-center">
                                        <i class="fa fa-times-circle me-2"></i> <span>Cancelar</span>
                                    </a>
                                </div>
                            </div>
                    </form>
                </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.bundle.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>



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

    <!-- ultimo nunero de la clave del documento -->
    <script>
        // Función para consultar la clave
        function consultarClave() {
            // Crear una solicitud AJAX
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "ultimacom.php", true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // Convertir la respuesta a JSON
                    var response = JSON.parse(xhr.responseText);

                    // Verificar si se recibió un error
                    if (response.error) {
                        document.getElementById("resultado").innerHTML = "Error: " + response.error;
                    } else {
                        // Mostrar la nueva clave en el campo de entrada con id "cveDoc"
                        document.getElementById("cveDoc").value = response.new_clave;
                    }
                } else {
                    document.getElementById("resultado").innerHTML = "Error en la solicitud.";
                }
            };
            xhr.onerror = function() {
                document.getElementById("resultado").innerHTML = "Error en la conexión.";
            };
            xhr.send();
        }

        // Ejecutar la función automáticamente cuando la página haya cargado
        document.addEventListener('DOMContentLoaded', consultarClave);
    </script>

    <!-- SCRIPT DE PROVEEDOR -->
    <script>
        let proveedores = []; // Store fetched providers

        // Fetch providers
        fetch('obtener_proveedor.php')
            .then(response => response.json())
            .then(data => {
                proveedores = data; // Save data in the global variable
                populateTable(proveedores); // Populate table initially
            })
            .catch(error => console.error('Error al obtener los clientes:', error));

        // Populate the table with providers
        function populateTable(data) {
            const clientesTableBody = document.querySelector('#clientesTable tbody');
            clientesTableBody.innerHTML = ''; // Clear existing rows
            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);
            });
        }

        // Toggle visibility of the supplier table
        document.getElementById('buscarClienteBtn').addEventListener('click', function() {
            const clientesTableContainer = document.getElementById('clientesTableContainer');
            if (clientesTableContainer.style.display === 'none' || clientesTableContainer.style.display === '') {
                clientesTableContainer.style.display = 'block';
            } else {
                clientesTableContainer.style.display = 'none';
            }
        });

        // Filter suppliers based on search input
        document.getElementById('searchProveedor').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const filteredProveedores = proveedores.filter(cliente =>
                cliente.CLAVE.toLowerCase().includes(searchTerm) ||
                cliente.NOMBRE.toLowerCase().includes(searchTerm)
            );
            populateTable(filteredProveedores); // Update table with filtered results
        });

        // Select supplier
        $(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);
            $('#entrega').val(cliente.Entrega);
            $('#enviar_a').val(cliente.CALLE_ENVIO);
            $('#comision').val(cliente.COMI);
            $('#destinatario').val(cliente.Destinatario);
            $('#clientesTableContainer').hide();
            $('#lista_precio').val(cliente.LISTA_PREC);
        });
    </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 ALAMCEN -->
    <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>

    <!-- SCRIP DE TABLAS Y DE Obtener_Productos -->
    <script>
        // Variables globales
        let itemCount = 0;
        let selectedItemCard = null;
        let productos = [];

        // Crear un nuevo elemento de tarjeta de item
        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="col-md-2">
                <label class="form-label">Unidad</label>
                <input type="text" name="unidad" class="form-control" placeholder="Unidad" required>
            </div>
            <div class="col-md-2">
                <label class="form-label">Descuento</label>
                <input type="number" name="descuento" class="form-control" placeholder="%" step="0.01" min="0" max="100">
            </div>
            <div class="col-md-2">
                <label class="form-label">I.E.P.S.</label>
                <input type="number" name="ieps" class="form-control" placeholder="%" step="0.01" min="0" max="100">
            </div>
            <div class="col-md-2">
                <label class="form-label">Ret ISR</label>
                <input type="number" name="ret_isr" class="form-control" placeholder="%" step="0.01" min="0" max="100">
            </div>
            <div class="col-md-2">
                <label class="form-label">Ret IVA</label>
                <input type="number" name="ret_iva" class="form-control" placeholder="%" step="0.01" min="0" max="100">
            </div>
            <div class="col-md-2">
                <label class="form-label">IVA</label>
                <input type="number" name="iva" class="form-control" placeholder="%" step="0.01" min="0" max="100">
            </div>
            <div class="col-md-3">
                <label class="form-label">Costo por Unidad</label>
                <input type="number" name="costo_unidad" class="form-control" placeholder="Costo x unidad" required>
            </div>
            <div class="col-md-3">
                <label class="form-label">Subtotal</label>
                <input type="number" name="subtotal_partida" class="form-control" placeholder="Subtotal" readonly required>
            </div>
        </div>
        <div class="productosTableContainer" style="display: none;">
            <div class="mb-3">
                <label for="searchProducto-${itemCount}" class="form-label"></label>
                <input type="text" id="searchProducto-${itemCount}" class="form-control" placeholder="Buscar por código o descripción">
            </div>
            <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>
    `;
            itemCard.addEventListener('click', () => seleccionarItemCard(itemCard));
            return itemCard;
        }

        // Seleccionar y resaltar partida
        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;">`;
        }

        // Obtener precio del producto y actualizar campos
        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));
        }

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

        // Asignar eventos de selección de producto
        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;
                    document.querySelectorAll('input[name="unidad"]')[itemIndex].value = producto.UNI_MED || '';

                    obtenerPrecioProducto(producto.CVE_ART, itemIndex);

                    document.getElementById('descripcion').value = producto.DESCR || '';
                    document.querySelector('.image-placeholder').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'));
                });
            });
        }

        // Agregar una nueva tarjeta de item
        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++;
        }

        // Añadir listener para remover item
        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'));

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

        // Actualizar listeners de tablas de productos
        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', (e) => {
                    e.stopPropagation();
                    productosTableContainer.style.display = productosTableContainer.style.display === 'none' ? 'block' : 'none';
                    if (productosTableContainer.style.display === 'block') {
                        obtenerProductos(index);
                    }
                });

                const searchInput = document.getElementById(`searchProducto-${index}`);
                if (searchInput) {
                    searchInput.addEventListener('input', function() {
                        const searchTerm = this.value.toLowerCase();
                        const filteredProductos = productos.filter(producto =>
                            producto.CVE_ART.toLowerCase().includes(searchTerm) ||
                            producto.DESCR.toLowerCase().includes(searchTerm)
                        );
                        renderProductTable(index, filteredProductos);
                    });
                }
            });
        }

        // Obtener productos del servidor
        function obtenerProductos(itemIndex) {
            fetch('obtener_productos.php')
                .then(response => response.json())
                .then(data => {
                    productos = data;
                    renderProductTable(itemIndex, productos);
                })
                .catch(error => console.error('Error al obtener productos:', error));
        }

        // Renderizar tabla de productos
        function renderProductTable(itemIndex, productosToRender = productos) {
            const productosTableBody = document.querySelectorAll('.productosTable tbody')[itemIndex];
            productosTableBody.innerHTML = '';

            productosToRender.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);
        }

        // Inicialización
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('addItemBtn').addEventListener('click', addItemCard);
            addItemCard(); // Crear el primer item al cargar la página
        });
    </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({
                    url: "obtener_clave_documento.php", // Cambia la URL a tu archivo PHP
                    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
            $("#CompraForm").on("submit", function(event) {
                event.preventDefault(); // Prevenir la recarga de la página

                // 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_compra.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
                                $("#CompraForm")[0].reset();
                                // Cargar nuevamente la clave de documento
                                cargarClaveDocumento();
                                // 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>
</body>

</html>