<?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>Clientes Sistemas</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" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

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

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


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

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

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

    <!-- Page CSS -->

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

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

    <style>
        .wow {
            visibility: hidden;
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .submenu.open {
            max-height: none;
        }

        /* Basic styles for all buttons */
        .custom-btn {
            width: 70px;
            height: 40px;
            background-color: white;
            /* White background for unselected state */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border: none;
            transition: all 0.3s ease;
            border-radius: 5px;
            margin: 0 7px;
            /* Horizontal spacing between buttons */
        }

        .custom-btn :focus,
        .custom-btn :active {
            border-bottom-color: #ea0029 !important;
        }

        .modal-refer-and-earn-step {
            width: 80px;
            height: 80px;
            border-radius: 0.5rem;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Imágenes de fondo claras (estado no seleccionado) para cada botón */
        .sae-btn {
            background-image: url("/responsiveaspel/img/SAE%20COLOR.svg");
        }

        .coi-btn {
            background-image: url("/responsiveaspel/img/COI%20COLOR.svg");
        }

        .noi-btn {
            background-image: url("/responsiveaspel/img/NOI%20COLOR.svg");
        }

        .banco-btn {
            background-image: url("/responsiveaspel/img/BANCO%20COLOR.svg");
        }

        .caja-btn {
            background-image: url("/responsiveaspel/img/CAJA%20COLOR.svg");
        }

        .prod-btn {
            background-image: url("/responsiveaspel/img/PROD%20COLOR.svg");
        }

        .facture-btn {
            background-image: url("/responsiveaspel/img/FACTURE%20COLOR.svg");
        }

        /* Specific styles for each selected button */
        .custom-btn.selected {
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            /* Shadow to highlight selected button */
            transform: scale(1.05);
            /* Slightly enlarge the button */
        }

        .sae-btn.selected {
            background-color: #ea0029;
            /* Red background for SAE selected */
            background-image: url("/responsiveaspel/img/SAE%20BLANCO.svg");
            /* White logo for contrast */
        }

        .coi-btn.selected {
            background-color: #00acd8;
            /* Blue background for COI selected */
            background-image: url("/responsiveaspel/img/COI%20BLANCO.svg");
        }

        .noi-btn.selected {
            background-color: #ff8300;
            /* Green background for NOI selected */
            background-image: url("/responsiveaspel/img/NOI%20BLANCO.svg");
        }

        .banco-btn.selected {
            background-color: #93d500;
            /* Dark blue for Banco selected */
            background-image: url("/responsiveaspel/img/BANCO%20BLANCO.svg");
        }

        .caja-btn.selected {
            background-color: #ffd100;
            /* Purple for Caja selected */
            background-image: url("/responsiveaspel/img/CAJA%20BLANCO.svg");
        }

        .prod-btn.selected {
            background-color: #4d4084;
            /* Orange for Prod selected */
            background-image: url("/responsiveaspel/img/PROD%20BLANCO.svg");
        }

        .facture-btn.selected {
            background-color: #aa182c;
            /* Teal for Facture selected */
            background-image: url("/responsiveaspel/img/FACTURE%20BLANCO.svg");
        }

        /* Estilo del botón de Borrar Filtros*/
        .clear-filters-btn {
            border: 2px solid #007ecc;
            background-color: #007ecc;
            color: #fff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            width: 183px;
            text-decoration: none;
            display: inline-block;
        }

        .clear-filters-btn:hover {
            background-color: #005fa3;
            border: 2px solid #005fa3;
            color: #ffffff;
        }

        /* Eliminar el contorno y bordes cuando el botón está enfocado o activo */
        .custom-btn:focus,
        .custom-btn:active {
            outline: none;
            /* Elimina el contorno */
            border: none;
            /* Elimina el borde */
        }

        .align-right {
            margin-left: auto;
        }

        /* Estilo tabla futurista */
        #sistemasUsadosContainer table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1f2a38, #273444);
            color: #e0eaff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.4);
        }

        #sistemasUsadosContainer th,
        #sistemasUsadosContainer td {
            padding: 12px 16px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        #sistemasUsadosContainer th {
            background: #0a1e33;
            font-weight: 700;
            letter-spacing: 1px;
        }

        #sistemasUsadosContainer tr:hover {
            background: rgba(0, 150, 255, 0.15);
            cursor: default;
        }

        #sistemasUsadosContainer td:first-child {
            font-weight: 600;
            color: #33cfff;
        }

        /* Para los iconos o cuadros de sistema, puedes agregar */
        .system-icon {
            width: 32px;
            height: 32px;
            margin: 0 auto;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Ejemplo para SAE */
        .system-icon.sae {
            background-image: url('/responsiveaspel/img/SAE COLOR.svg');
        }

        .carousel-wrapper-cards {
            overflow: hidden;
            width: calc(4 * 285px);
            /* 4 tarjetas visibles */
        }

        #cardsContainer {
            transition: transform 0.4s ease;
        }

        .carousel-btn {
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 1.2rem;
            background-color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            user-select: none;
        }

        .carousel-btn:disabled {
            opacity: 0.3;
            cursor: default;
        }

        /* Repetir con las demás clases: coi, noi, banco, etc. */

        /* 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;
        }

        .carousel-wrapper {
            overflow: hidden;
            width: 540px;
            /* 3 sistemas * 180px exactos */
            height: 160px;
        }

        #sistemasUsadosContainer>div {
            width: 180px;
            flex: 0 0 auto;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        .modal-refer-and-earn-step {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            margin: 0 auto 10px auto;
        }

        /* Botones < y > */
        .carousel-btn {
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 1.2rem;
            background-color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .carousel-btn:disabled {
            opacity: 0.3;
            cursor: default;
        }

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

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

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

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

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

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

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

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

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

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

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Aspel SAE</span>
                    </li>
                    <li class="menu-item">
                        <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 active open">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-user"></i>
                            <div data-i18n="Authentications">Clientes</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="clientes.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="correos.php" class="menu-link">
                                    <div data-i18n="Basic">Correos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxcobrar.php" class="menu-link">
                                    <div data-i18n="Basic">Cuentas X Cobrar</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="clientespoliza.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes con Póliza</div>
                                </a>
                            </li>



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

                            <li class="menu-item active">
                                <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>

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Mantenimiento y Soporte</span>
                    </li>
                    <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">Mantenimiento</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="ordenservicio.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Ordenes de Servicio</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="registrossemana.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Registros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticasord.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Estadisticas</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>

                        <!-- /Search -->

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



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


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


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

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

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

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


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

                            </li>

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

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


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

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

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





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


                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="row">
                            <!--/ Total Revenue -->
                            <div class="col-12 col-md-12 col-lg-12 order-3 order-md-2">
                                <div class="row">

                                    <!-- </div>
                    <div class="row"> -->
                                </div>
                            </div>
                        </div>
                        <!-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Tables /</span> Basic Tables</h4> -->
                        <!-- Basic Bootstrap Table -->
                        <div class="card wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                            <h5 class="card-header pb-0">Clientes Con Sistemas</h5>
                            <div class="card-datatable"></div>

                            <div class="container mt-5">
                                <h1 class="mb-4"><strong>Clientes Con Sistemas</strong></h1>
                                <div class="mb-4 d-flex justify-content-start">
                                    <button class="custom-btn sae-btn mr-2" id="saeButton"></button>
                                    <button class="custom-btn coi-btn mr-2" id="coiButton"></button>
                                    <button class="custom-btn noi-btn mr-2" id="noiButton"></button>
                                    <button class="custom-btn banco-btn mr-2" id="bancoButton"></button>
                                    <button class="custom-btn caja-btn mr-2" id="cajaButton"></button>
                                    <button class="custom-btn prod-btn mr-2" id="prodButton"></button>
                                    <button class="custom-btn facture-btn mr-2" id="factureButton"></button>
                                    <button class="btn custom-action align-right" id="clearFiltersButton">Borrar Filtros</button>
                                </div>

                                <div class="table-responsive text-nowrap">
                                    <table id="clientesTable" class="table table-hover table-responsive ">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th class="num">Clave</th>
                                                <th>Nombre</th>
                                                <th>RFC</th>
                                                <th>Teléfono</th>
                                                <th>Sistema</th>
                                                <th>Expendiente</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- / Basic Bootstrap Table -->


                        <!-- Modal para mostrar los detalles del expediente -->
                        <div class="modal fade" id="referAndEarn" tabindex="-1" aria-modal="true" role="dialog">
                            <div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <div class="text-center mb-4">
                                            <h4 id="modalClienteNombre">Datos del Sistema</h4>
                                        </div>

                                        <!-- Carrusel horizontal -->
                                        <div class="d-flex align-items-center justify-content-center mb-3">
                                            <!-- Botón anterior -->
                                            <button id="btnAnterior" class="carousel-btn me-2">&lt;</button>

                                            <!-- Viewport del carrusel -->
                                            <div id="sistemasWrapper" class="carousel-wrapper">
                                                <div id="sistemasUsadosContainer" class="d-flex flex-row">
                                                    <!-- Sistemas dinámicos aquí -->
                                                </div>
                                            </div>

                                            <!-- Botón siguiente -->
                                            <button id="btnSiguiente" class="carousel-btn ms-2">&gt;</button>
                                        </div>

                                        <!-- Info adicional -->
                                        <div id="infoRentaContainer" class="mt-3"></div>
                                        <hr class="mt-4 mb-4">
                                        <div class="text-center mb-3">
                                            <p><strong>Email:</strong> <span id="clienteEmail">...</span></p>
                                            <p><strong>Contacto:</strong> <span id="clienteContacto">...</span></p>
                                            <p><strong>Usuario:</strong> <span id="clienteUsuario">...</span></p>
                                        </div>
                                    </div>
                                    <div class="text-center pb-3">
                                        <button type="button"
                                            class="btn btn-outline-danger"
                                            onclick="cerrarModalExpediente()">Cerrar ventana</button>
                                    </div>
                                </div>
                            </div>
                        </div>

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

                    <div class="content-backdrop fade"></div>
                </div>


            </div>

        </div>

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


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



    <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-dismiss="modal" aria-label="Close">
                </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>


</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<script>
    $(document).ready(function() {
        // Delegación para botones generados dinámicamente
        $(document).on('click', '.detallesClienteBtn', function() {
            const clienteData = $(this).data('cliente');

            // Cargar datos al modal
            $('#modalClienteNombre').text(clienteData.NOMBRE || 'Nombre no disponible');
            $('#modalClienteSaldo').text(`Saldo: $${parseFloat(clienteData.SALDO || 0).toFixed(2)}`);

            // Aquí puedes cargar más info si tienes más campos

            // Mostrar modal
            const modal = new bootstrap.Modal(document.getElementById('expedienteModal'));
            modal.show();
        });
    });
</script>

<script>
    $(document).ready(function() {
        const visibles = 4;
        const anchoTarjeta = 285; // 270 + 15 (margin-right)
        const $cardsContainer = $('#cardsContainer');
        const totalCards = $cardsContainer.children().length;

        let index = 0;

        function updateCarousel() {
            const offset = -index * anchoTarjeta;
            $cardsContainer.css({
                transform: `translateX(${offset}px)`,
                transition: 'transform 0.4s ease'
            });

            $('#btnAnteriorCards').prop('disabled', index <= 0);
            $('#btnSiguienteCards').prop('disabled', index >= totalCards - visibles);
        }

        $('#btnAnteriorCards').click(function() {
            if (index > 0) {
                index--;
                updateCarousel();
            }
        });

        $('#btnSiguienteCards').click(function() {
            if (index < totalCards - visibles) {
                index++;
                updateCarousel();
            }
        });

        // Inicializa
        if (totalCards <= visibles) {
            $('#btnAnteriorCards, #btnSiguienteCards').hide();
        } else {
            $('#btnAnteriorCards, #btnSiguienteCards').show();
        }
        updateCarousel();
    });
</script>
<script>
    $(document).ready(function() {
        // Inicialización del DataTable (con AJAX y columnas definidas)
        var table = $('#clientesTable').DataTable({
            ajax: {
                url: 'ClientesSistemas_filtrado.php',
                dataSrc: ''
            },
            columns: [{
                    data: 'CLAVE'
                },
                {
                    data: 'NOMBRE'
                },
                {
                    data: 'RFC'
                },
                {
                    data: 'TELEFONO'
                },

                {
                    data: null,
                    render: function(data) {
                        const campos = ['CAMPLIB1', 'CAMPLIB2', 'CAMPLIB3', 'CAMPLIB5', 'CAMPLIB6', 'CAMPLIB8', 'CAMPLIB12'];
                        for (let campo of campos) {
                            if (data[campo]) return data[campo];
                        }
                        return '';
                    }
                },

                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `<button class="btn btn-primary referAndEarn" data-cliente='${JSON.stringify(row)}'>Detalles</button>`;
                    }
                }



            ],
            language: {
                url: '../json/Spanish.json'
            },
            columnDefs: [{
                type: 'num',
                targets: [0]
            }],
            destroy: true // Para evitar errores al recargar con AJAX
        });

        // Abrir modal para agregar cliente
        $('#agregarClienteBtn').on('click', function() {
            $('#agregarClienteModal').modal('show');
        });

        // Mostrar confirmación si se envió el formulario
        <?php if (isset($_SESSION['formSubmitted']) && $_SESSION['formSubmitted']): ?>
            $('#confirmacionModal').modal('show');
            <?php unset($_SESSION['formSubmitted']); ?>
        <?php elseif ($formError): ?>
            alert('<?php echo addslashes($formError); ?>');
        <?php endif; ?>

        // Filtros personalizados
        const buttons = document.querySelectorAll('.custom-btn:not(.clear-filters-btn)');
        const clearButton = document.getElementById('clearFiltersButton');

        function activateButton(activeBtn) {
            buttons.forEach(btn => btn.classList.remove('selected'));
            activeBtn.classList.add('selected');
        }

        function loadFilterFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            const activeFilter = urlParams.get('filter');
            if (activeFilter) {
                const btn = document.getElementById(activeFilter.toLowerCase() + 'Button');
                if (btn) activateButton(btn);
                table.ajax.url('ClientesSistemas_filtrado.php?filter=' + activeFilter).load();
            }
        }

        // Evento para cada botón de filtro
        buttons.forEach(button => {
            button.addEventListener('click', function() {
                const filter = this.id.replace('Button', '').toUpperCase();
                activateButton(this);
                window.history.replaceState(null, '', '?filter=' + filter);
                table.ajax.url('ClientesSistemas_filtrado.php?filter=' + filter).load();
            });
        });

        // Borrar filtros
        clearButton.addEventListener('click', function() {
            buttons.forEach(btn => btn.classList.remove('selected'));
            window.history.replaceState(null, '', window.location.pathname);
            table.ajax.url('ClientesSistemas_filtrado.php').load();
        });

        // Cargar filtro desde URL si existe
        loadFilterFromURL();
    });
</script>

<script>
    let modalExpedienteInstance = null;

    $(document).ready(function() {
        $(document).on('click', '.referAndEarn', function() {
            const clienteData = $(this).data('cliente');
            const clave = clienteData.CLAVE;

            // Reset
            $('#modalClienteNombre').text('Cargando...');
            $('#clienteEmail').text('...');
            $('#clienteContacto').text('...');
            $('#clienteUsuario').text('...');
            $('#sistemasUsadosContainer').html('<div class="text-center w-100">Cargando sistemas...</div>');
            $('#infoRentaContainer').html('<div class="text-center">Cargando info de renta...</div>');

            $.ajax({
                url: 'get_sistema.php',
                method: 'GET',
                dataType: 'json',
                data: {
                    clave
                },
                success: function(cliente) {
                    if (cliente.error) {
                        $('#sistemasUsadosContainer').html(`<div class="text-danger">${cliente.error}</div>`);
                        $('#infoRentaContainer').html('');
                        return;
                    }

                    $('#modalClienteNombre').text(cliente.NOMBRE || 'Nombre no disponible');
                    $('#clienteEmail').text(cliente.EMAILPRED || 'N/A');
                    $('#clienteContacto').text(cliente.CONTACTO || 'N/A');
                    $('#clienteUsuario').text(cliente.USUARIO || 'N/A');

                    const sistemas = {
                        CAMPLIB1: {
                            nombre: 'SAE',
                            clase: 'sae-btn'
                        },
                        CAMPLIB2: {
                            nombre: 'COI',
                            clase: 'coi-btn'
                        },
                        CAMPLIB3: {
                            nombre: 'NOI',
                            clase: 'noi-btn'
                        },
                        CAMPLIB6: {
                            nombre: 'BANCO',
                            clase: 'banco-btn'
                        },
                        CAMPLIB5: {
                            nombre: 'CAJA',
                            clase: 'caja-btn'
                        },
                        CAMPLIB8: {
                            nombre: 'PROD',
                            clase: 'prod-btn'
                        },
                        CAMPLIB12: {
                            nombre: 'FACTURE',
                            clase: 'facture-btn'
                        }
                    };

                    const usados = Object.keys(sistemas).filter(k => cliente[k] && cliente[k].trim() !== '')
                        .map(k => ({
                            ...sistemas[k],
                            detalle: cliente[k]
                        }));

                    let html = usados.map(s =>
                        `<div>
              <div class="modal-refer-and-earn-step ${s.clase}"></div>
              <p class="mb-0 fw-semibold">${s.nombre}</p>
              <small class="text-muted">${s.detalle}</small>
            </div>`
                    ).join('');

                    if (usados.length === 0) {
                        html = `<div class="text-muted w-100 text-center">No usa ningún sistema.</div>`;
                    }

                    $('#sistemasUsadosContainer').html(html);
                    initCarrusel(usados.length);
                    mostrarInfoRenta(cliente);
                    new bootstrap.Modal(document.getElementById('referAndEarn')).show();
                }
            });
        });

        function initCarrusel(totalSistemas) {
            const visibles = 3;
            const anchoItem = 180;
            let index = 0;

            const updateCarrusel = () => {
                const offset = -index * anchoItem;
                $('#sistemasUsadosContainer').css('transform', `translateX(${offset}px)`);
                $('#btnAnterior').prop('disabled', index <= 0);
                $('#btnSiguiente').prop('disabled', index >= totalSistemas - visibles);
            };

            $('#btnAnterior').off('click').on('click', function() {
                if (index > 0) {
                    index--;
                    updateCarrusel();
                }
            });

            $('#btnSiguiente').off('click').on('click', function() {
                if (index < totalSistemas - visibles) {
                    index++;
                    updateCarrusel();
                }
            });

            if (totalSistemas <= visibles) {
                $('#btnAnterior, #btnSiguiente').hide();
                $('#sistemasUsadosContainer').css('transform', 'translateX(0)');
            } else {
                $('#btnAnterior, #btnSiguiente').show();
                updateCarrusel();
            }
        }

        function mostrarInfoRenta(cliente) {
            let html = '';
            if (cliente.RENTA?.toUpperCase() === 'SI') {
                html += `<p><strong>Renta:</strong> Sí</p>`;
                if (cliente.REN_TIPO?.trim()) {
                    html += `<p><strong>Tipo de Renta:</strong> ${cliente.REN_TIPO}</p>`;
                }
            }
            $('#infoRentaContainer').html(html);
        }
    });

    function cerrarModalExpediente() {
        const modalElement = document.getElementById('referAndEarn');

        // Asegurarse de que el modal tenga la clase 'fade'
        modalElement.classList.add('fade');

        // Usar evento para limpiar solo cuando termine el cierre con animación
        $(modalElement).one('hidden.bs.modal', function() {
            // Limpiar contenido
            $('#modalClienteNombre').text('Datos del Sistema');
            $('#clienteEmail, #clienteContacto, #clienteUsuario').text('...');
            $('#sistemasUsadosContainer, #infoRentaContainer').html('');
            $('#sistemasUsadosContainer').css('transform', 'translateX(0)');
        });

        // Ejecutar cierre con animación suave
        $(modalElement).modal('hide');
    }
</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>

</html>