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

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

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

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

    $usuario = $_SESSION['usuario'];

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

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

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

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

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

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Agregar Cliente</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>
<style>
    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;
        justify-content: space-between;
        align-items: center;
        transition: left 0.3s, width 0.3s;
        border-bottom: 1px solid #cbd0dd;
    }

    .content {
        flex: 1;
        padding: 20px;
        margin-left: 250px;
    }

    .collapsed {
        margin-left: 0;
    }

    .user-dropdown {
        display: none;
    }

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

    .row {
        background-color: #fff;
        border-radius: 16px;
    }

    /* General styles for the wizard */
    .vertical-wizard {
        margin: 30px;
    }

    .vertical-wizard .bs-stepper {
        display: flex;
    }

    .vertical-wizard .nav {
        border-right: 1px solid #e4e6ef;
        width: 25%;
        /* Adjust as needed */
        justify-content: center;
    }

    .vertical-wizard .nav-item {
        border-bottom: 1px solid #e4e6ef;
    }

    .vertical-wizard .nav-link {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: #6c757d;
        background: #f8f9fc;
        border-radius: 10px;
        position: relative;
        text-align: center;
        border-left: 4px solid transparent;
        transition: background-color 0.3s, border-color 0.3s;
    }

    .vertical-wizard .nav-link.active {
        background: #fff;
        color: #009DFF;
        border-left-color: #009DFF;
    }

    .vertical-wizard .nav-link i {
        font-size: 24px;
        margin-bottom: 10px;
        display: inline-block;
        padding: 10px;
        border-radius: 50%;
        background: #e9ecef;
        color: #009dff;
    }

    .vertical-wizard .nav-link span {
        font-size: 14px;
        font-weight: 600;
        color: #37465A;
    }

    /* Styles for the content area */
    .tab-content {
        background: #fff;
        padding: 30px;
        border-left: none;
        border-radius: 0 6px 6px 6px;
        width: 100%;
        /* Adjust as needed */
        height: 92%;
    }

    /* Buttons */
    .btn {
        font-size: 14px;
    }

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

    .btn-secondary {
        background-color: #f4f5f7;
        color: #6c757d;
        border-color: #f4f5f7;
    }

    #form-proveedor {
        width: 100%;
    }

    .form-buttons {
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        /* Fondo blanco para que los botones sean visibles */
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }

    .nav {
        display: flex;
        width: 100%;
    }

    .bs-stepper .nav-item {

        width: 100%;
        /* Asegura que no exceda el 100% del contenedor */
        text-align: center;
        /* Centra el contenido dentro de cada nav-item */
        padding: 10px;
        box-sizing: border-box;
        /* Incluye el padding en el tamaño total */
    }

    .btn i {
        margin-right: 8px;
    }

    .btn .next-icon {
        margin-left: 8px;
    }

    .form-buttons .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
    }

    .form-buttons .btn i {
        margin-right: 8px;
    }

    .form-buttons .btn .next-icon {
        margin-left: 8px;
        border: none;
    }

    .form-buttons .btn-secondary i {
        color: #37465A;
    }

    .form-control:focus {
        border-color: #009DFF;
        border: 2px solid #009DFF;
        box-shadow: none;
    }

    .card {
        box-shadow: none !important;
    }

    .input-group .form-control {
        border-radius: 0.5rem;
        /* Ajusta el radio del borde */
    }

    .input-group-text {
        background-color: #009dff;
        /* Fondo azul */
        color: #fff;
        /* Color del icono */
        border: none;
        /* Sin borde */
    }

    .input-group-text i {
        color: #fff;
        /* Asegúrate de que el icono sea blanco */
    }

    .card-header {
        background-color: transparent;
        /* Elimina el fondo */
        border-bottom: none;
    }

    .card-header h5 {
        font-weight: 800;
        /* Aplica negrita */
        font-size: 25px;
        text-align: left;
        /* Alinea el texto a la izquierda */
        margin: 0;
        /* Opcional: elimina el margen por defecto */
    }

    /* Estilos para el modal y la palomita animada */
    .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100vh - 1rem);
    }

    .checkmark-container {
        width: 80px;
        height: 80px;
        display: inline-block;
        position: relative;
        margin: 0 auto;
    }

    .checkmark {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        border: 5px solid #28a745;
        box-sizing: border-box;
    }

    .checkmark::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 50px;
        border: solid #28a745;
        border-width: 0 5px 5px 0;
        top: 5px;
        /* Ajuste para centrar verticalmente */
        left: 25px;
        /* Ajuste para centrar horizontalmente */
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
        /* Más lento */
    }

    .checkmark.draw::after {
        opacity: 1;
    }

    .checkmark.draw {
        animation: scale 0.6s ease-in-out forwards;
        /* Más lento */
    }

    @keyframes scale {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Asegura que el fondo del modal cubra toda la pantalla */
    .swal2-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background-color: rgba(0, 0, 0, 0.4) !important;
        /* Gris translúcido */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .swal2-confirm.btn-aceptar {
        background-color: #009DFF !important;
        /* Color de fondo */
        color: #fff !important;
        /* Color del texto */
        border: none;
        /* Sin borde */
        border-radius: .25em;
        /* Bordes redondeados */
        font-size: 1em;
        /* Tamaño de la fuente */
    }

    /* Asegurarse de que no cambie el color en hover */
    .swal2-confirm.btn-aceptar:hover {
        background-color: #009DFF !important;
        /* Sin cambio de color */
    }

    h1,
    .mb-4 {
        font-weight: 800;
    }

    /* Contenedor de la tabla */
    .card-body {
        max-height: 600px;
        overflow-y: auto;
    }

    .table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .table th,
    .table td {
        word-wrap: break-word;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 8px;
    }

    .table th,
    .table td {
        max-width: 200px;
    }
</style>

<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 active">
                                <a href="nuevo_cliente.php" class="menu-link">
                                    <div data-i18n="Without navbar">Agregar Cliente</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_proveedor.php" class="menu-link">
                                    <div data-i18n="Container">Agregar Proveedor</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nueva_cotizacion.php" class="menu-link">
                                    <div data-i18n="Fluid">Agregar Cotizacion</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_producto.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Producto</div>
                                </a>
                            </li>

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

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

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Aspel SAE</span>
                    </li>
                    <li class="menu-item">
                        <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>
                            <li class="menu-item">
                                <a href="estadisticascli.php" class="menu-link">
                                    <div data-i18n="Connections">Ventas X Cliente</div>
                                </a>
                            </li>
                        </ul>
                    </li>

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

                            <li 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>
                            <li class="menu-item">
                                <a href="estadisticasprove.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Compras X Proveedor</div>
                                </a>
                            </li>
                        </ul>
                    </li>


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                            .search-dropdown li {
                                cursor: pointer;
                            }

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

                        <!-- /Search -->

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


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


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

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

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

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

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


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

                            </li>

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

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


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

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

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




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




                <!-- COMIENZA FORMULARIO DE DATOS GENERALES -->
                <h1 class="mb-2 mt-4 text-center">Nuevo Cliente</h1>
                <div class="container mt-5">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Form Wizard with Vertical Icons -->
                            <section class="vertical-wizard">
                                <div class="bs-stepper">
                                    <div class="nav">
                                        <!-- Step 1 -->
                                        <div class="nav-item">
                                            <a class="nav-link active" href="#datos-generales">
                                                <i class="bx bx-user"></i>
                                                <span>Datos Generales</span>
                                            </a>
                                        </div>
                                        <!-- Step 2 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#datos-ventas">
                                                <i class="bx bx-cart"></i>
                                                <span>Datos de Ventas</span>
                                            </a>
                                        </div>
                                        <!-- Step 3 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#datos-historicos">
                                                <i class="bx bx-history"></i>
                                                <span>Datos Históricos</span>
                                            </a>
                                        </div>
                                        <!-- Step 4 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#datos-adicionales">
                                                <i class="bx bx-info-circle"></i>
                                                <span>Datos Adicionales</span>
                                            </a>
                                        </div>
                                        <!-- Step 5 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#emision-documentos">
                                                <i class="bx bx-file"></i>
                                                <span>Emisión de Documentos</span>
                                            </a>
                                        </div>
                                        <!-- Step 6 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#comprobantes-fiscales">
                                                <i class="bx bx-briefcase"></i>
                                                <span>Comprobantes Fiscales</span>
                                            </a>
                                        </div>
                                        <!-- Step 7 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#datos-envio">
                                                <i class="bx bx-briefcase"></i>
                                                <span>Datos de Envío</span>
                                            </a>
                                        </div>
                                        <!-- Step 8 -->
                                        <div class="nav-item">
                                            <a class="nav-link" href="#fiscales">
                                                <i class="bx bx-briefcase"></i>
                                                <span>Fiscales</span>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Form Content -->
                                    <form id="form-proveedor" action="leerclientenuevo.php" method="POST">
                                        <div class="tab-content">
                                            <!-- Step 1 Content (Datos Generales) -->
                                            <div id="datos-generales" class="tab-pane fade show active">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Datos Generales</h5>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="nombre">Nombre</label>
                                                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="rfc">RFC</label>
                                                            <input type="text" class="form-control" id="rfc" name="rfc" placeholder="RFC">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="regimen">Régimen Fiscal</label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" id="regimen" name="regimen" placeholder="Régimen Fiscal">
                                                                <div class="input-group-append">
                                                                    <span class="input-group-text" style="background-color: #009dff; color: #fff; cursor: pointer;" id="regimen-dropdown">
                                                                        <i class="fas fa-chevron-down"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            <!-- Tabla que aparecerá al hacer clic en el botón de la flecha -->
                                                            <div id="regimen-table-container" style="display: none; position: absolute; z-index: 100; background-color: white; border: 1px solid #ccc; width: 100%;">
                                                                <table class="table table-bordered table-hover" id="regimen-table">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Clave</th>
                                                                            <th>Descripción</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr data-value="605" data-description="Sueldos y Salarios e Ingresos Asimilados a Salarios">
                                                                            <td>605</td>
                                                                            <td>Sueldos y Salarios e Ingresos Asimilados a Salarios</td>
                                                                        </tr>
                                                                        <tr data-value="606" data-description="Arrendamiento">
                                                                            <td>606</td>
                                                                            <td>Arrendamiento</td>
                                                                        </tr>
                                                                        <tr data-value="607" data-description="Régimen de Enajenación o Adquisición de Bienes">
                                                                            <td>607</td>
                                                                            <td>Régimen de Enajenación o Adquisición de Bienes</td>
                                                                        </tr>
                                                                        <tr data-value="608" data-description="Demás ingresos">
                                                                            <td>608</td>
                                                                            <td>Demás ingresos</td>
                                                                        </tr>
                                                                        <tr data-value="610" data-description="Residentes en el Extranjero sin Establecimiento Permanente en México">
                                                                            <td>610</td>
                                                                            <td>Residentes en el Extranjero sin Establecimiento Permanente en México</td>
                                                                        </tr>
                                                                        <tr data-value="611" data-description="Ingresos por Dividendos (socios y accionistas)">
                                                                            <td>611</td>
                                                                            <td>Ingresos por Dividendos (socios y accionistas)</td>
                                                                        </tr>
                                                                        <tr data-value="612" data-description="Personas Físicas con Actividades Empresariales y Profesionales">
                                                                            <td>612</td>
                                                                            <td>Personas Físicas con Actividades Empresariales y Profesionales</td>
                                                                        </tr>
                                                                        <tr data-value="614" data-description="Ingresos por intereses">
                                                                            <td>614</td>
                                                                            <td>Ingresos por intereses</td>
                                                                        </tr>
                                                                        <tr data-value="615" data-description="Régimen de los ingresos por obtención de premios">
                                                                            <td>615</td>
                                                                            <td>Régimen de los ingresos por obtención de premios</td>
                                                                        </tr>
                                                                        <tr data-value="616" data-description="Sin obligaciones fiscales">
                                                                            <td>616</td>
                                                                            <td>Sin obligaciones fiscales</td>
                                                                        </tr>
                                                                        <tr data-value="621" data-description="Incorporación Fiscal">
                                                                            <td>621</td>
                                                                            <td>Incorporación Fiscal</td>
                                                                        </tr>
                                                                        <tr data-value="625" data-description="Régimen de las Actividades Empresariales con ingresos a través de Plataforma">
                                                                            <td>625</td>
                                                                            <td>Régimen de las Actividades Empresariales con ingresos a través de Plataforma</td>
                                                                        </tr>
                                                                        <tr data-value="626" data-description="Régimen Simplificado de Confianza">
                                                                            <td>626</td>
                                                                            <td>Régimen Simplificado de Confianza</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="curp">CURP</label>
                                                            <input type="text" class="form-control" id="curp" name="curp" placeholder="CURP">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="calle">Calle</label>
                                                            <input type="text" class="form-control" id="calle" name="calle" placeholder="Calle">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="num_ext">Número Exterior</label>
                                                            <input type="text" class="form-control" id="num_ext" name="num_ext" placeholder="Número Exterior">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="num_int">Número Interior</label>
                                                            <input type="text" class="form-control" id="num_int" name="num_int" placeholder="Número Interior">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="entre_calle">Entre Calle</label>
                                                            <input type="text" class="form-control" id="entre_calle" name="entre_calle" placeholder="Entre Calle">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="y_calle">Y Calle</label>
                                                            <input type="text" class="form-control" id="y_calle" name="y_calle" placeholder="Y Calle">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <!-- Campo de País -->
                                                    <div class="col-md-2">
                                                        <div class="form-group">
                                                            <label for="cve_pais">CVE_PAIS</label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" id="cve_pais" name="cve_pais" placeholder="Pais" readonly>
                                                                <div class="input-group-append">
                                                                    <span class="input-group-text" style="background-color: #009dff; color: #fff; cursor: pointer;" id="pais-dropdown">
                                                                        <i class="fas fa-chevron-down"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Campo de Descripción de País -->
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="pais">País</label>
                                                            <input type="text" class="form-control" id="pais" name="pais" placeholder="Descripción" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="nacionalidad">Nacionalidad</label>
                                                            <input type="text" class="form-control" id="nacionalidad" name="nacionalidad" placeholder="Nacionalidad">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="codigopostal">Código Postal</label>
                                                            <input type="text" class="form-control" id="codigopostal" name="codigopostal" placeholder="Código Postal">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Contenedor de la Tabla de Países -->
                                                <div id="pais_table_container" class="position-absolute" style="display:none; z-index: 1000; width: 300px;">
                                                    <table class="table table-bordered table-striped">
                                                        <thead>
                                                            <tr>
                                                                <th>CVE_PAIS</th>
                                                                <th>DESCR</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="pais_table_body">
                                                            <?php
                                                            // Conexión a la base de datos Firebird
                                                            session_start();
                                                            $host = 'localhost';
                                                            $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
                                                            $username = 'SYSDBA';
                                                            $password = 'masterkey';

                                                            try {
                                                                $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                                                $query = "SELECT CVE_PAIS, DESCR FROM PAIS01";
                                                                $stmt = $dbh->prepare($query);
                                                                $stmt->execute();

                                                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                                                    echo "<tr class='pais-row' data-cve-pais='" . $row['CVE_PAIS'] . "' data-descr='" . $row['DESCR'] . "'>";
                                                                    echo "<td>" . $row['CVE_PAIS'] . "</td>";
                                                                    echo "<td>" . $row['DESCR'] . "</td>";
                                                                    echo "</tr>";
                                                                }
                                                            } catch (PDOException $e) {
                                                                echo "Error: " . $e->getMessage();
                                                            }
                                                            ?>
                                                        </tbody>
                                                    </table>
                                                </div>



                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="estado">Estado</label>
                                                            <input type="text" class="form-control" id="estado" name="estado" placeholder="Estado">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="municipio">Municipio</label>
                                                            <input type="text" class="form-control" id="municipio" name="municipio" placeholder="Municipio">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="poblacion">Población</label>
                                                            <input type="text" class="form-control" id="poblacion" name="poblacion" placeholder="Población">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="colonia">Colonia</label>
                                                            <input type="text" class="form-control" id="colonia" name="colonia" placeholder="Colonia">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label for="referencia">Referencia</label>
                                                            <input type="text" class="form-control" id="referencia" name="referencia" placeholder="Referencia">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="clasificacion">Clasificación</label>
                                                            <input type="text" class="form-control" id="clasificacion" name="clasificacion" placeholder="Clasificación">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="zona">Zona</label>
                                                            <input type="text" class="form-control" id="zona" name="zona" placeholder="Zona">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="telefono">Teléfono</label>
                                                            <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Teléfono">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fax">Fax</label>
                                                            <input type="text" class="form-control" id="fax" name="fax" placeholder="Fax">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label for="pagina_web">Página Web</label>
                                                            <input type="text" class="form-control" id="pagina_web" name="pagina_web" placeholder="Página Web">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div div class="font-bold border-b border-gray-400 pb-2">
                                                        <div>
                                                            <h6>Tipo de empresa</h6>
                                                        </div>
                                                    </div>
                                                    <div style="background-color: #ffffff; padding: 10px; border-radius: 10px;">
                                                        <label style="margin-right: 80px;">
                                                            <input type="radio" name="tipo_empresa" value="M" checked>
                                                            Matriz
                                                        </label>
                                                        <label style="margin-right: 80px;">
                                                            <input type="radio" name="tipo_empresa" value="S">
                                                            Sucursal
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Step 2 Content (Datos de Ventas) -->
                                            <div id="datos-ventas" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Datos De Ventas</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Contenedor de Información de Crédito -->
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <h5>Información de Crédito</h5>
                                                            </div>
                                                            <div class="card-body">

                                                                <!-- Campos de Crédito -->
                                                                <div class="row">
                                                                    <!-- Manejo de Crédito - Switch with Icon -->
                                                                    <div class="col-md-6">
                                                                        <div class="form-check form-switch">
                                                                            <input class="form-check-input" type="checkbox" id="manejo_credito" name="manejo_credito" value="S">
                                                                            <label class="form-check-label" for="manejo_credito">Manejo de Crédito</label>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="dias_revision">Días de Revisión</label>
                                                                            <input type="number" class="form-control" id="dias_revision" name="dias_revision" placeholder="Días de Revisión">
                                                                        </div>
                                                                    </div>



                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="dias_credito">Días de Crédito</label>
                                                                            <input type="number" class="form-control" id="dias_credito" name="dias_credito" placeholder="Días de Crédito">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="dias_pago">Días de Pago</label>
                                                                            <input type="number" class="form-control" id="dias_pago" name="dias_pago" placeholder="Días de Pago">
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="limite_credito">Límite de Crédito</label>
                                                                            <input type="number" class="form-control" id="limite_credito" name="limite_credito" placeholder="Límite de Crédito">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="saldo">Saldo</label>
                                                                            <input type="number" class="form-control" id="saldo" name="saldo" placeholder="Saldo">
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="form-group">
                                                                            <label for="metodo_pago">Método de Pago</label>
                                                                            <input type="text" class="form-control" id="metodo_pago" name="metodo_pago" placeholder="Método de Pago">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="form-group">
                                                                            <label for="num_cuenta">Número de Cuenta</label>
                                                                            <input type="text" class="form-control" id="num_cuenta" name="num_cuenta" placeholder="Número de Cuenta">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Campos fuera del recuadro de Información de Crédito -->
                                                <div class="row mt-4">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="vendedor_clave">Vendedor</label>
                                                            <!-- Input que se llenará con la clave del vendedor -->
                                                            <input type="text" class="form-control" id="vendedor_clave" name="vendedor_clave" placeholder="Selecciona un vendedor" readonly>
                                                        </div>
                                                        <!-- Tabla para mostrar los vendedores -->
                                                        <div class="table-responsive" id="vendedor_table_container" style="display: none; max-height: 200px; overflow-y: auto; border: 1px solid #ccc;">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Clave</th>
                                                                        <th>Nombre</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="vendedor_table_body">
                                                                    <?php
                                                                    session_start();
                                                                    $host = 'localhost';
                                                                    $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
                                                                    $username = 'SYSDBA';
                                                                    $password = 'masterkey';
                                                                    try {
                                                                        $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                                                        // Consulta para obtener las claves y nombres de los vendedores
                                                                        $query = "SELECT CVE_VEND, NOMBRE FROM VEND01";
                                                                        $stmt = $dbh->prepare($query);
                                                                        $stmt->execute();
                                                                        // Generar las filas de la tabla para los vendedores
                                                                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                                                            echo "<tr onclick=\"selectVendedor('" . $row['CVE_VEND'] . "', '" . $row['NOMBRE'] . "')\">";
                                                                            echo "<td>" . $row['CVE_VEND'] . "</td>";
                                                                            echo "<td>" . $row['NOMBRE'] . "</td>";
                                                                            echo "</tr>";
                                                                        }
                                                                    } catch (PDOException $e) {
                                                                        echo "Error: " . $e->getMessage();
                                                                    }
                                                                    ?>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="vendedor_nombre">Nombre del Vendedor</label>
                                                            <input type="text" class="form-control" id="vendedor_nombre" name="vendedor_nombre" placeholder="Nombre del Vendedor" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="descuento">Descuento</label>
                                                            <input type="text" class="form-control" id="descuento" name="descuento" placeholder="Descuento">
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="row">
                                                    <div class="col-md-8">
                                                        <div class="form-group">
                                                            <label for="cuenta_contable">Cuenta Contable</label>
                                                            <input type="text" class="form-control" id="cuenta_contable" name="cuenta_contable" placeholder="Cuenta Contable">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- Campo para la lista de precios -->
                                                        <div class="form-group">
                                                            <label for="lista_precios">Lista de Precios</label>
                                                            <input type="text" class="form-control" id="lista_precios" name="lista_precios" placeholder="Selecciona una lista de precios" readonly>
                                                        </div>
                                                        <!-- Tabla para mostrar las listas de precios -->
                                                        <div class="table-responsive" id="lista_precios_table_container" style="display: none; max-height: 150px; overflow-y: auto; border: 1px solid #ccc;">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Clave</th>
                                                                        <th>Descripción</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="lista_precios_table_body">
                                                                    <?php
                                                                    // Conexión a la base de datos Firebird
                                                                    session_start();
                                                                    $host = 'localhost';
                                                                    $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
                                                                    $username = 'SYSDBA';
                                                                    $password = 'masterkey';
                                                                    try {
                                                                        $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                                                        // Consulta para obtener las claves y descripciones de las listas de precios
                                                                        $query = "SELECT CVE_PRECIO, DESCRIPCION FROM PRECIOS01";
                                                                        $stmt = $dbh->prepare($query);
                                                                        $stmt->execute();
                                                                        // Generar las filas de la tabla para las listas de precios
                                                                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                                                            echo "<tr onclick=\"selectListaPrecio('" . $row['CVE_PRECIO'] . "')\">";
                                                                            echo "<td>" . $row['CVE_PRECIO'] . "</td>";
                                                                            echo "<td>" . $row['DESCRIPCION'] . "</td>";
                                                                            echo "</tr>";
                                                                        }
                                                                    } catch (PDOException $e) {
                                                                        echo "Error: " . $e->getMessage();
                                                                    }
                                                                    ?>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <!-- Step 3 Content (Datos Históricos) -->
                                            <div id="datos-historicos" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Datos Históricos</h5>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Campos de Limite de Crédito y Ventas Anuales -->
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="limite_credito">Límite de Crédito</label>
                                                            <input type="text" class="form-control" id="limite_credito" placeholder="Límite de Crédito">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="ventas_anuales">Ventas Anuales</label>
                                                            <input type="text" class="form-control" id="ventas_anuales" name="ventas_anuales" placeholder="Ventas Anuales">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Contenedores de Último Pago y Última Venta en la misma fila -->
                                                <div class="row mt-3">
                                                    <!-- Contenedor de Último Pago -->
                                                    <div class="col-md-6">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <h5>Último Pago</h5>
                                                            </div>
                                                            <div class="card-body">
                                                                <!-- Campo de Fecha -->
                                                                <div class="form-group">
                                                                    <label for="fecha_ultimo_pago">Fecha</label>
                                                                    <input type="date" class="form-control" id="fecha_ultimo_pago" name="fecha_ultimo_pago">
                                                                </div>
                                                                <!-- Campo de Docto -->
                                                                <div class="form-group">
                                                                    <label for="docto_ultimo_pago">Docto</label>
                                                                    <input type="text" class="form-control" id="docto_ultimo_pago" name="docto_ultimo_pago" placeholder="Documento">
                                                                </div>
                                                                <!-- Campo de Monto -->
                                                                <div class="form-group">
                                                                    <label for="monto_ultimo_pago">Monto</label>
                                                                    <input type="text" class="form-control" id="monto_ultimo_pago" name="monto_ultimo_pago" placeholder="Monto">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Contenedor de Última Venta -->
                                                    <div class="col-md-6">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <h5>Última Venta</h5>
                                                            </div>
                                                            <div class="card-body">
                                                                <!-- Campo de Fecha -->
                                                                <div class="form-group">
                                                                    <label for="fecha_ultima_venta">Fecha</label>
                                                                    <input type="date" class="form-control" id="fecha_ultima_venta" name="fecha_ultima_venta">
                                                                </div>
                                                                <!-- Campo de Docto -->
                                                                <div class="form-group">
                                                                    <label for="docto_ultima_venta">Docto</label>
                                                                    <input type="text" class="form-control" id="docto_ultima_venta" name="docto_ultima_venta" placeholder="Documento">
                                                                </div>
                                                                <!-- Campo de Monto -->
                                                                <div class="form-group">
                                                                    <label for="monto_ultima_venta">Monto</label>
                                                                    <input type="text" class="form-control" id="monto_ultima_venta" name="monto_ultima_venta" placeholder="Monto">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Step 4 Content (Datos Adicionales) -->
                                            <div id="datos-adicionales" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Datos Adicionales</h5>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label for="observaciones">Observaciones</label>
                                                            <textarea class="form-control" id="observaciones" name="observaciones" rows="3" placeholder="Observaciones"></textarea>
                                                        </div>
                                                    </div>
                                                    <!-- Contenedor de Campos Libres del Usuario -->
                                                    <div class="col-md-12 mt-3">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <h5>Campos Libres del Usuario</h5>
                                                            </div>
                                                            <div class="card-body">
                                                                <table class="table table-bordered">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Campo Libre</th>
                                                                            <th>Valor</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <?php
                                                                        // Conexión a la base de datos Firebird
                                                                        $host = 'localhost';
                                                                        $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
                                                                        $username = 'SYSDBA';
                                                                        $password = 'masterkey';

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

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


                                            <!-- Step 5 Content (Emisión de Documentos) -->
                                            <div id="emision-documentos" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Emisión De Documentos</h5>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="email">Cuenta de Correo Electrónico</label>
                                                            <input type="email" class="form-control" id="email" name="email" placeholder="Cuenta de Correo Electrónico">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Step 6 Content (Datos Fiscales) -->
                                            <div id="comprobantes-fiscales" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <div class="card">
                                                                <div class="card-header">
                                                                    <h5>Comprobantes Fiscales</h5>
                                                                </div>
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <!-- Campo: Tipo de tercero -->
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <label for="tipo_tercero">Tipo de tercero</label>
                                                                                <select class="form-control" id="tipo_tercero">
                                                                                    <option value="" disabled selected>Seleccione el tipo de tercero</option>
                                                                                    <option value="1">Tercero Nacional</option>
                                                                                    <option value="2">Tercero Extranjero</option>
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <!-- Campo: Tipo de operación -->
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <label for="tipo_operacion">Tipo de operación</label>
                                                                                <select class="form-control" id="tipo_operacion">
                                                                                    <option value="" disabled selected>Seleccione el tipo de operación</option>
                                                                                    <option value="1">Compra</option>
                                                                                    <option value="2">Servicio</option>
                                                                                    <option value="3">Otro</option>
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <!-- Step 7 Content (Datos de Envío) -->
                                            <div id="datos-envio" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Datos de Envío</h5>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="nombre_comercial">Nombre Comercial</label>
                                                            <input type="text" class="form-control" id="nombre_comercial" name="nombre_comercial" placeholder="Nombre Comercial">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="calle">Calle</label>
                                                            <input type="text" class="form-control" id="calle_envio" name="calle_envio" placeholder="Calle">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="num_ext">Número Exterior</label>
                                                            <input type="text" class="form-control" id="numext_envio" name="numext_envio" placeholder="Número Exterior">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="num_int">Número Interior</label>
                                                            <input type="text" class="form-control" id="numint_envio" name="numint_envio" placeholder="Número Interior">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="entre_calle">Entre Calle</label>
                                                            <input type="text" class="form-control" id="entrecalle_envio" name="entrecalle_envio" placeholder="Entre Calle">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="y_calle">Y Calle</label>
                                                            <input type="text" class="form-control" id="ycalle_envio" name="ycalle_envio" placeholder="Y Calle">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="pais">País</label>
                                                            <input type="text" class="form-control" id="pais_envio" name="pais_envio" placeholder="País">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="poblacion">Población</label>
                                                            <input type="text" class="form-control" id="poblacion_envio" name="poblacion_envio" placeholder="Población">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="codigopostal">Código Postal</label>
                                                            <input type="text" class="form-control" id="codigopostal_envio" name="codigopostal_envio" placeholder="Código Postal">
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="estado">Estado</label>
                                                            <input type="text" class="form-control" id="estado_envio" name="estado_envio" placeholder="Estado">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="municipio">Municipio</label>
                                                            <input type="text" class="form-control" id="municipio_envio" name="municipio_envio" placeholder="Municipio">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="colonia">Colonia</label>
                                                            <input type="text" class="form-control" id="colonia_envio" name="colonia_envio" placeholder="Colonia">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label for="referencia">Referencia</label>
                                                            <input type="text" class="form-control" id="referencia_envio" name="referencia_envio" placeholder="Referencia">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Botón "Copiar Dirección" -->
                                                <button type="button" class="btn btn-primary" id="copiar-direccion">Copiar Dirección</button>
                                            </div>

                                            <!-- Step 8 Content (Fiscales) -->
                                            <div id="fiscales" class="tab-pane fade">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card-header">
                                                            <h5>Fiscales</h5>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="email">Cuenta de Correo Electrónico</label>
                                                            <input type="email" class="form-control" id="email" name="email" placeholder="Cuenta de Correo Electrónico">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Fixed Buttons -->
                                        <div class="form-buttons">
                                            <button type="button" class="btn btn-secondary btn-prev" onclick="prevTab()"><i class="fas fa-arrow-left next-icon"></i>Anterior</button>
                                            <button type="submit" class="btn btn-primary">Guardar</button>
                                            <button type="button" class="btn btn-primary btn-next" onclick="nextTab()">Siguiente<i class="fas fa-arrow-right next-icon"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>



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

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

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

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

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

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

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



            <script src="https://code.jquery.com/jquery-3.6.0.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>
            <!-- 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>
                // Referencia al checkbox
                const manejoCreditoCheckbox = document.getElementById('manejo_credito');

                // Referencia a los campos de crédito
                const camposCredito = document.querySelectorAll('#dias_revision, #dias_credito, #dias_pago, #limite_credito');

                // Función para habilitar o deshabilitar campos según el estado del checkbox
                function ajustarCamposCredito() {
                    const habilitar = manejoCreditoCheckbox.checked; // Verifica si está activado
                    camposCredito.forEach(campo => {
                        campo.disabled = !habilitar; // Habilita si está marcado, deshabilita si no
                        if (!habilitar) {
                            campo.value = ''; // Borra el valor de los campos cuando está deshabilitado
                        }
                    });
                }

                // Escuchar cambios en el checkbox
                manejoCreditoCheckbox.addEventListener('change', ajustarCamposCredito);

                // Ajustar los campos al cargar la página según el estado inicial del checkbox
                window.addEventListener('DOMContentLoaded', ajustarCamposCredito);
            </script>


            <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.classList.contains('open');

                        document.querySelectorAll('.submenu').forEach(function(submenu) {
                            submenu.style.maxHeight = '0px';
                            submenu.classList.remove('open');
                        });
                        document.querySelectorAll('[data-toggle="submenu"]').forEach(function(el) {
                            el.classList.remove('submenu-open');
                        });
                        if (!isOpen) {
                            target.style.maxHeight = target.scrollHeight + 'px';
                            target.classList.add('open');
                            element.classList.add('submenu-open');
                        }
                    });
                });
                document.querySelectorAll('.submenu.open').forEach(function(submenu) {
                    submenu.style.maxHeight = submenu.scrollHeight + 'px';
                });
            </script>

            <script>
                // JavaScript for navigating between tabs and updating styles
                let activeIndex = 0; // Index of the active tab

                document.addEventListener('DOMContentLoaded', function() {
                    const navLinks = document.querySelectorAll('.bs-stepper .nav-link');
                    const tabs = document.querySelectorAll('.tab-pane');
                    const prevButton = document.querySelector('.btn-prev');
                    const nextButton = document.querySelector('.btn-next');
                    const prevIcon = prevButton.querySelector('.fa-arrow-left');

                    // Function to update styles on the nav links (tab headers)
                    function actualizarEstilos() {
                        navLinks.forEach((link, index) => {
                            const icon = link.querySelector('.bx');
                            if (index === activeIndex) {
                                // Styles for the active tab
                                link.classList.add('active');
                                icon.style.backgroundColor = '#009dff';
                                icon.style.color = '#fff';
                                icon.style.borderRadius = '50%';
                                icon.style.padding = '10px';
                            } else {
                                // Reset styles for inactive tabs
                                link.classList.remove('active');
                                icon.style.backgroundColor = '';
                                icon.style.color = '';
                                icon.style.borderRadius = '';
                                icon.style.padding = '';
                            }
                        });

                        // Update the "Previous" button state
                        if (activeIndex === 0) {
                            prevButton.disabled = true;
                            prevButton.style.backgroundColor = '#f8f9fa';
                            prevButton.style.color = '#37465A';
                            prevIcon.style.color = '#37465A';
                        } else {
                            prevButton.disabled = false;
                            prevButton.style.backgroundColor = '#009dff';
                            prevButton.style.color = '#fff';
                            prevIcon.style.color = '#fff';
                        }
                    }

                    // Function to activate a tab by index
                    function activateTab(index) {
                        if (index >= 0 && index < tabs.length) {
                            document.querySelector('.tab-pane.active').classList.remove('active', 'show');
                            tabs[index].classList.add('active', 'show');

                            document.querySelector('.nav-link.active').classList.remove('active');
                            navLinks[index].classList.add('active');

                            activeIndex = index; // Update the active index
                            actualizarEstilos(); // Update styles based on the active tab
                        }
                    }

                    // Go to the next tab
                    function nextTab() {
                        if (activeIndex < navLinks.length - 1) {
                            activateTab(activeIndex + 1);
                        }
                    }

                    // Go to the previous tab
                    function prevTab() {
                        if (activeIndex > 0) {
                            activateTab(activeIndex - 1);
                        }
                    }

                    // Add event listeners to the nav links for manual tab navigation
                    navLinks.forEach((link, index) => {
                        link.addEventListener('click', function(event) {
                            event.preventDefault();
                            activateTab(index); // Activate the clicked tab
                        });
                    });

                    // Add event listeners to the "Next" and "Previous" buttons
                    nextButton.addEventListener('click', function(event) {
                        event.preventDefault();
                        nextTab(); // Move to the next tab
                    });

                    prevButton.addEventListener('click', function(event) {
                        event.preventDefault();
                        prevTab(); // Move to the previous tab
                    });

                    // Initialize styles and button states
                    activateTab(activeIndex); // Activate the first tab and apply styles
                });
            </script>

            <script>
                // Mostrar y ocultar la tabla al hacer clic en el botón de la flecha
                document.getElementById('regimen-dropdown').addEventListener('click', function() {
                    const tableContainer = document.getElementById('regimen-table-container');
                    tableContainer.style.display = tableContainer.style.display === 'none' ? 'block' : 'none';
                });

                // Seleccionar la fila y agregar solo la clave al input
                const rows = document.querySelectorAll('#regimen-table tbody tr');
                rows.forEach(row => {
                    row.addEventListener('click', function() {
                        const clave = this.getAttribute('data-value'); // Solo toma la clave del regimen fiscal
                        document.getElementById('regimen').value = clave; // Actualiza el input solo con la clave
                        document.getElementById('regimen-table-container').style.display = 'none'; // Oculta la tabla después de seleccionar
                    });
                });

                // Ocultar la tabla al hacer clic fuera de ella
                document.addEventListener('click', function(event) {
                    const tableContainer = document.getElementById('regimen-table-container');
                    if (!event.target.closest('.input-group')) {
                        tableContainer.style.display = 'none';
                    }
                });
            </script>


            <!-- SCRIPT PARA LLENAR EN COPIAR LA DIRECCION -->
            <script>
                document.getElementById('copiar-direccion').addEventListener('click', function() {
                    // Obtener los valores de los campos en "Datos Generales"
                    var calleGeneral = document.getElementById('calle').value;
                    var numExtGeneral = document.getElementById('num_ext').value;
                    var numIntGeneral = document.getElementById('num_int').value;
                    var enCalletGeneral = document.getElementById('entre_calle').value;
                    var yCalletGeneral = document.getElementById('y_calle').value;
                    var paisGeneral = document.getElementById('pais').value;
                    var poblacionGeneral = document.getElementById('poblacion').value;
                    var cpostalGeneral = document.getElementById('codigopostal').value;
                    var estadoGeneral = document.getElementById('estado').value;
                    var municipioGeneral = document.getElementById('municipio').value;
                    var coloniaGeneral = document.getElementById('colonia').value;
                    var referenciaGeneral = document.getElementById('referencia').value;

                    // Llenar los campos en "Datos de Envío" con esos valores
                    document.getElementById('calle_envio').value = calleGeneral;
                    document.getElementById('numext_envio').value = numExtGeneral;
                    document.getElementById('numint_envio').value = numIntGeneral;
                    document.getElementById('entrecalle_envio').value = enCalletGeneral;
                    document.getElementById('ycalle_envio').value = yCalletGeneral;
                    document.getElementById('pais_envio').value = paisGeneral;
                    document.getElementById('poblacion_envio').value = poblacionGeneral;
                    document.getElementById('codigopostal_envio').value = cpostalGeneral;
                    document.getElementById('estado_envio').value = estadoGeneral;
                    document.getElementById('municipio_envio').value = municipioGeneral;
                    document.getElementById('colonia_envio').value = coloniaGeneral;
                    document.getElementById('referencia_envio').value = referenciaGeneral;
                });
            </script>


            <!-- SCRIP PARA LA LISTA DE VENDEDORES -->
            <script>
                // Mostrar/ocultar la tabla de vendedores al hacer clic en el input
                document.getElementById('vendedor_clave').addEventListener('click', function() {
                    var tableContainer = document.getElementById('vendedor_table_container');
                    if (tableContainer.style.display === "none") {
                        tableContainer.style.display = "block";
                    } else {
                        tableContainer.style.display = "none";
                    }
                });

                // Función para seleccionar un vendedor y llenar los campos con la clave y el nombre
                function selectVendedor(clave, nombre) {
                    document.getElementById('vendedor_clave').value = clave; // Llena el input con la clave del vendedor
                    document.getElementById('vendedor_nombre').value = nombre; // Llena el input con el nombre del vendedor
                    document.getElementById('vendedor_table_container').style.display = "none"; // Oculta la tabla
                    console.log("Seleccionado: Clave - " + clave + ", Nombre - " + nombre);
                }
            </script>


            <!-- SCRIPT PARA LISTA DE PAISES -->
            <script>
                // Mostrar/Ocultar la tabla de selección de países
                document.getElementById('pais-dropdown').addEventListener('click', function() {
                    let paisTable = document.getElementById('pais_table_container');
                    paisTable.style.display = paisTable.style.display === 'none' ? 'block' : 'none';
                });

                // Selección del país en la tabla
                document.querySelectorAll('.pais-row').forEach(function(row) {
                    row.addEventListener('click', function() {
                        let cvePais = this.getAttribute('data-cve-pais');
                        let descr = this.getAttribute('data-descr');

                        // Llenar los campos con los valores seleccionados
                        document.getElementById('cve_pais').value = cvePais;
                        document.getElementById('pais').value = descr;

                        // Ocultar la tabla después de seleccionar
                        document.getElementById('pais_table_container').style.display = 'none';
                    });
                });
            </script>

            <!-- SCRIPT PARA LA LISTA DE PRECIOS -->
            <script>
                // Mostrar/ocultar la tabla de listas de precios al hacer clic en el input
                document.getElementById('lista_precios').addEventListener('click', function() {
                    var tableContainer = document.getElementById('lista_precios_table_container');
                    if (tableContainer.style.display === "none") {
                        tableContainer.style.display = "block";
                    } else {
                        tableContainer.style.display = "none";
                    }
                });

                // Función para seleccionar una lista de precios y llenar el campo con la clave
                function selectListaPrecio(clave) {
                    document.getElementById('lista_precios').value = clave; // Llena el input con la clave de la lista de precios
                    document.getElementById('lista_precios_table_container').style.display = "none"; // Oculta la tabla
                    console.log("Seleccionada Lista de Precios: " + clave);
                }
            </script>

            <script>
                $(document).ready(function() {
                    // Al enviar el formulario
                    $("#form-proveedor").on("submit", function(event) {
                        event.preventDefault(); // Prevenir la recarga de la página

                        // Enviar los datos mediante AJAX
                        $.ajax({
                            url: "leerclientenuevo.php",
                            type: "POST",
                            data: $(this).serialize(),
                            success: function(response) {
                                // Mostrar el modal de éxito usando SweetAlert2
                                Swal.fire({
                                    icon: 'success', // Icono de éxito
                                    title: '¡Éxito!',
                                    text: 'Los datos se han registrado correctamente.',
                                    confirmButtonText: 'Aceptar',
                                    customClass: {
                                        confirmButton: 'btn-aceptar' // Clase personalizada para el botón
                                    }
                                }).then(() => {
                                    // Limpiar el formulario al cerrar el modal
                                    $("#form-proveedor")[0].reset();
                                });
                            },
                            error: function() {
                                // 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',
                                    customClass: {
                                        confirmButton: 'btn-aceptar' // Clase personalizada para el botón
                                    }
                                });
                            }
                        });
                    });
                });
            </script>


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

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

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

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

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

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


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

                    results.innerHTML = "";

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

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

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

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

</html>