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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Tablero</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;
        padding-top: 50px;
    }

    .container {
        max-width: 25rem;
        margin: auto;
    }

    .collapsed {
        margin-left: 0;
    }

    .user-dropdown {
        display: none;
    }

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

    .wallet {
        --bg-color: #009dff;
        --bg-color-light: #fff;
        --text-color-hover: #fff;
    }

    /* Estilos para las tarjetas */
    .dashboard-card {
        background: #ffffff;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 8px;
        padding: 15px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        height: 130px;
        /* Altura ajustada */
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .icon-container {
        width: 60px;
        height: 60px;
        background-color: #f0f0f0;
        /* Ajusta el color según cada tarjeta */
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        margin-right: 15px;
    }

    .card {
        flex-direction: row;
    }

    .card-header {
        font-size: 18px;
        background-color: #fff;
        text-align: center;
        font-weight: 800;
        color: #000000;

    }

    .card i {
        color: #fff;
    }

    .card-icon {
        font-size: 2rem;
        color: #fff;
    }

    .card-content {
        flex: 1;
    }

    .card-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: #333;
    }

    .tarjeta1 .card-text {
        font-size: 1.25rem;
        font-weight: bold;
        color: #007ecc;
    }

    .tarjeta2 .card-text {
        font-size: 1.25rem;
        font-weight: bold;
        color: #009dff;
    }

    .tarjeta3 .card-text {
        font-size: 1.25rem;
        font-weight: bold;
        color: #007ecc;
    }

    .tarjeta4 .card-text {
        font-size: 1.25rem;
        font-weight: bold;
        color: #009dff;
    }

    /* Colores personalizados para cada tarjeta */
    .tarjeta1 .icon-container {
        background-color: #009dff;
        /* Rojo */
    }

    .tarjeta2 .icon-container {
        background-color: #007ecc;
        /* Verde agua */
    }

    .tarjeta3 .icon-container {
        background-color: #009dff;
        /* Amarillo */
    }

    .tarjeta4 .icon-container {
        background-color: #007ecc;
        /* Morado */
    }

    /* Línea de color como borde inferior */
    .dashboard-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #009dff;
        /* Ajustar según el color de cada tarjeta */
    }

    .tarjeta1::after {
        background-color: #009dff;
    }

    .tarjeta2::after {
        background-color: #007ecc;
    }

    .tarjeta3::after {
        background-color: #009dff;
    }

    .tarjeta4::after {
        background-color: #007ecc;
    }


    /* Estilos adicionales para responsive */
    @media (max-width: 768px) {
        .dashboard-card {
            margin-bottom: 20px;
            height: auto;
            /* Para ajustar la altura en pantallas pequeñas */
        }
    }

    .dashboard-card {
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        text-align: center;

    }


    /* Ajustes de tamaño para la gráfica */
    canvas {
        display: block;
        width: 100%;
        /* Ocupar todo el ancho del contenedor */
        height: 300px;
        /* Ajustar la altura según tu preferencia */
    }
</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
                                width="25"
                                viewBox="0 0 25 42"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <path
                                        d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
                                        id="path-1"></path>
                                    <path
                                        d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
                                        id="path-3"></path>
                                    <path
                                        d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
                                        id="path-4"></path>
                                    <path
                                        d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
                                        id="path-5"></path>
                                </defs>
                                <g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
                                        <g id="Icon" transform="translate(27.000000, 15.000000)">
                                            <g id="Mask" transform="translate(0.000000, 8.000000)">
                                                <mask id="mask-2" fill="white">
                                                    <use xlink:href="#path-1"></use>
                                                </mask>
                                                <use fill="#696cff" xlink:href="#path-1"></use>
                                                <g id="Path-3" mask="url(#mask-2)">
                                                    <use fill="#696cff" xlink:href="#path-3"></use>
                                                    <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
                                                </g>
                                                <g id="Path-4" mask="url(#mask-2)">
                                                    <use fill="#696cff" xlink:href="#path-4"></use>
                                                    <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
                                                </g>
                                            </g>
                                            <g
                                                id="Triangle"
                                                transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
                                                <use fill="#696cff" xlink:href="#path-5"></use>
                                                <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </span>
                        <span class="app-brand-text demo menu-text fw-bolder ms-2">Sneat</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 active">
                                <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-dock-top"></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>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-lock-open-alt"></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="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>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-cube-alt"></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-cube-alt"></i>
                            <div data-i18n="Misc">Compras</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="compras.php" class="menu-link">
                                    <div data-i18n="Error">Compras</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="recepciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Recepciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ordenes.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Ordenes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="requisiciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Requisiciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devolucionescom.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Devoluciones</div>
                                </a>
                            </li>
                        </ul>
                    </li>


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


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

                    <!-- Extended components -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-copy"></i>
                            <div data-i18n="Extended UI">Cuentas y Pólizas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="cuentas.php" class="menu-link">
                                    <div data-i18n="Perfect Scrollbar">Cuentas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="polizas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Pólizas</div>
                                </a>
                            </li>
                        </ul>
                    </li>

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

            <!-- Layout container -->
            <div class="layout-page">
                <!-- Navbar -->

                <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached 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="Search..."
                                    aria-label="Search..." />
                            </div>
                        </div>
                        <!-- /Search -->

                        <ul class="navbar-nav flex-row align-items-center ms-auto">
                            <!-- Place this tag where you want the button to render. -->
                            <li class="nav-item lh-1 me-3">
                                <a
                                    class="github-button"
                                    href="https://github.com/themeselection/sneat-html-admin-template-free"
                                    data-icon="octicon-star"
                                    data-size="large"
                                    data-show-count="true"
                                    aria-label="Star themeselection/sneat-html-admin-template-free on GitHub">Star</a>
                            </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">
                                        <img src="../assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                    </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">
                                                        <img src="../assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <span class="fw-semibold d-block">John Doe</span>
                                                    <small class="text-muted">Admin</small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>



                                    <li>
                                        <a class="dropdown-item" href="auth-login-basic.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 -->



                    <!-- Contenido Principal -->
                    <div class="content text-center">
                        <h1 class="mb-4">Te damos la bienvenida. ¿Qué deseas hacer?</h1>

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


                                        <div class="col-6 mb-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="card-title d-flex align-items-start justify-content-between">
                                                        <div class="avatar flex-shrink-0">
                                                            <img src="../assets/img/icons/unicons/paypal.png" alt="Credit Card" class="rounded" />
                                                        </div>
                                                        <div class="dropdown">
                                                            <button
                                                                class="btn p-0"
                                                                type="button"
                                                                id="cardOpt4"
                                                                data-bs-toggle="dropdown"
                                                                aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <i class="bx bx-dots-vertical-rounded"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
                                                                <a class="dropdown-item" href="javascript:void(0);">View More</a>
                                                                <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <span class="d-block mb-1">Payments</span>
                                                    <h3 class="card-title text-nowrap mb-2">$2,456</h3>
                                                    <small class="text-danger fw-semibold"><i class="bx bx-down-arrow-alt"></i> -14.82%</small>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-6 mb-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="card-title d-flex align-items-start justify-content-between">
                                                        <div class="avatar flex-shrink-0">
                                                            <img src="../assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
                                                        </div>
                                                        <div class="dropdown">
                                                            <button
                                                                class="btn p-0"
                                                                type="button"
                                                                id="cardOpt1"
                                                                data-bs-toggle="dropdown"
                                                                aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <i class="bx bx-dots-vertical-rounded"></i>
                                                            </button>
                                                            <div class="dropdown-menu" aria-labelledby="cardOpt1">
                                                                <a class="dropdown-item" href="javascript:void(0);">View More</a>
                                                                <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <span class="fw-semibold d-block mb-1">Transactions</span>
                                                    <h3 class="card-title mb-2">$14,857</h3>
                                                    <small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +28.14%</small>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-6 mb-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="card-title d-flex align-items-start justify-content-between">
                                                        <div class="avatar flex-shrink-0">
                                                            <img src="../assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
                                                        </div>
                                                        <div class="dropdown">
                                                            <button
                                                                class="btn p-0"
                                                                type="button"
                                                                id="cardOpt1"
                                                                data-bs-toggle="dropdown"
                                                                aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <i class="bx bx-dots-vertical-rounded"></i>
                                                            </button>
                                                            <div class="dropdown-menu" aria-labelledby="cardOpt1">
                                                                <a class="dropdown-item" href="javascript:void(0);">View More</a>
                                                                <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <span class="fw-semibold d-block mb-1">Transactions</span>
                                                    <h3 class="card-title mb-2">$14,857</h3>
                                                    <small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +28.14%</small>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- </div>
                    <div class="row"> -->
                                    </div>
                                </div>
                            </div>


                            <!--Grafica de Productos -->
                            <?php
                            $host = 'localhost';
                            // Ruta hacia la base de datos de ejemplos de ASPEL-SAE
                            $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
                            $username = 'SYSDBA';
                            $password = 'masterkey';

                            try {
                                // Conexión a la base de datos
                                $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);

                                // Consulta SQL para obtener el Top 10 productos más vendidos
                                $sql = "SELECT INVE01.CVE_ART AS PRODUCTO, INVE01.DESCR AS NombreProducto,
                    SUM(PAR_FACTF01.CANT) AS CantidadVendida
            FROM PAR_FACTF01
            INNER JOIN INVE01 ON INVE01.CVE_ART = PAR_FACTF01.CVE_ART
            GROUP BY INVE01.CVE_ART, INVE01.DESCR
            ORDER BY CantidadVendida DESC
            ROWS 1 TO 10";

                                // Ejecutar la consulta
                                $stmt = $dbh->prepare($sql);
                                $stmt->execute();

                                // Preparar los arrays para etiquetas y cantidades
                                $productos = [];
                                $cantidades = [];

                                // Obtener los datos
                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                    $productos[] = $row['NOMBREPRODUCTO'];  // Nombre del producto
                                    $cantidades[] = $row['CANTIDADVENDIDA']; // Cantidad vendida
                                }
                            } catch (PDOException $e) {
                                echo "<div class='container mt-5'><h2>AUN NO HAY CONEXIÓN:</h2>";
                                echo "<p>" . $e->getMessage() . "</p></div>";
                            }
                            ?>


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

                            try {
                                // Crear una nueva conexión PDO
                                $pdo = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);

                                // Leer el año, mes y cantidad de clientes seleccionados
                                $selectedYear = isset($_GET['anio']) ? $_GET['anio'] : date("Y");
                                $selectedMonth = isset($_GET['mes']) ? $_GET['mes'] : '';
                                $numClients = isset($_GET['num_clients']) ? (int)$_GET['num_clients'] : 10;

                                // Consulta para obtener el Top de Clientes por monto de ventas en el año seleccionado
                                $sql2 = "SELECT FIRST :num_clients CLIE01.NOMBRE, ROUND(SUM(FACTF01.IMPORTE), 2) AS TOTAL_VENTA
             FROM FACTF01
             INNER JOIN CLIE01 ON FACTF01.CVE_CLPV = CLIE01.CLAVE
             WHERE EXTRACT(YEAR FROM FACTF01.FECHA_DOC) = :anio";

                                if (!empty($selectedMonth)) {
                                    $sql2 .= " AND EXTRACT(MONTH FROM FACTF01.FECHA_DOC) = :mes";
                                }

                                $sql2 .= " GROUP BY CLIE01.NOMBRE
               ORDER BY TOTAL_VENTA DESC";

                                // Preparar la consulta
                                $stmt2 = $pdo->prepare($sql2);

                                // Pasar los parámetros
                                $params = [':anio' => $selectedYear, ':num_clients' => $numClients];
                                if (!empty($selectedMonth)) {
                                    $params[':mes'] = $selectedMonth;
                                }

                                $stmt2->execute($params);

                                // Extraer los resultados
                                $topClientes = $stmt2->fetchAll(PDO::FETCH_ASSOC);

                                if (!empty($topClientes)) {
                                    // Extraer nombres y montos para pasar al script
                                    $clientes = array_column($topClientes, 'NOMBRE');

                                    // Mantener los montos sin formato para el gráfico
                                    $montos = array_column($topClientes, 'TOTAL_VENTA');

                                    // Formatear los montos solo para la lista
                                    $montosFormateados = array_map(function ($monto) {
                                        return number_format($monto, 2, '.', ','); // Formato de número para mostrar
                                    }, $montos);
                                } else {
                                    $clientes = [];
                                    $montos = [];
                                    $montosFormateados = [];
                                }
                            } catch (PDOException $e) {
                                echo "Error: " . $e->getMessage();
                            }
                            ?>





                                <!-- INICIO CONTENEDOR DE TOP 10 PRODUCTOS-->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row-agents">
                                            <div class="card card-custom mb-4">
                                                <div class="card-custom-body">
                                                    <div class="text-center mb-4">
                                                        <h5>TOP 10 PRODUCTOS</h5>
                                                    </div>
                                                    <div class="position-relative">
                                                        <canvas id="topProductsChart" width="500" height="600" style="display: block; box-sizing: border-box; height: 600px; width: 500px;"></canvas>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="card card-custom mb-4">
                                                <div class="card-custom-body">
                                                    <div class="text-center mb-4">
                                                        <h5 class="chart-title">Top 10 Productos</h5>
                                                    </div>
                                                    <ul class="list-group-custom" id="productList">
                                                        <!-- Los productos se agregarán aquí mediante JavaScript -->
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- FIN CONTENEDOR DE TOP 10 PRODUCTOS-->

                                <!-- INICIO CONTENEDOR DE TOP CLIENTES -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row-agents">
                                            <div class="card card-custom mb-4">
                                                <div class="card-custom-body">
                                                    <div class="card-custom-header">
                                                        <form method="GET" action="">
                                                            <label for="numClients" id="labelClientes">TOP : <?php echo $numClients; ?> clientes</label>
                                                            <select id="numClients" name="num_clients" onchange="this.form.submit();">
                                                                <option value="5" <?php echo ($numClients == 5) ? 'selected' : ''; ?>>5</option>
                                                                <option value="10" <?php echo ($numClients == 10) ? 'selected' : ''; ?>>10</option>
                                                                <option value="15" <?php echo ($numClients == 15) ? 'selected' : ''; ?>>15</option>
                                                                <option value="20" <?php echo ($numClients == 20) ? 'selected' : ''; ?>>20</option>
                                                                <option value="50" <?php echo ($numClients == 50) ? 'selected' : ''; ?>>50</option>
                                                                <option value="100" <?php echo ($numClients == 100) ? 'selected' : ''; ?>>100</option>
                                                            </select>
                                                        </form>
                                                    </div>
                                                    <div class="position-relative">
                                                        <canvas id="TopClientesChart" width="500" height="300"></canvas>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Tarjeta para la Lista de Clientes -->
                                            <div class="card card-custom mb-4">
                                                <div class="card-custom-body">
                                                    <div class="text-center mb-4">
                                                        <h5 class="chart-title">Top Clientes</h5>
                                                    </div>
                                                    <ul class="list-group-custom" id="listaClientes">
                                                        <!-- La lista de clientes se agregará aquí mediante JavaScript -->
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- FIN CONTENEDOR DE TOP CLIENTES -->



                                <!-- INICIO CONTENEDOR DE TOP VENDEDORES-->
                                <div class="row">
                                    <!-- Contenedores: TOP 10 Agentes -->
                                    <div class="col-md-12">
                                        <div class="row-agents">
                                            <!-- Contenedor de la gráfica -->
                                            <div class="card card-custom mb-4">
                                                <div class="card-custom-body">
                                                    <!-- Título en línea con la gráfica -->
                                                    <div class="text-center mb-4">
                                                        <h5 class="chart-title">Top 10 Vendedores</h5>
                                                    </div>
                                                    <div class="position-relative">
                                                        <canvas id="topAgentsChart" width="500" height="600" style="display: block; box-sizing: border-box; height: 600px; width: 500px;"></canvas>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Contenedor de la lista de Agentes -->
                                            <div class="card card-custom">
                                                <div class="card-custom-body">
                                                    <div class="text-center mb-4">
                                                        <h5 class="chart-title">Top 10 Vendedores</h5>
                                                    </div>
                                                    <ul class="list-group-custom" id="agentesList">
                                                        <!-- Los agentes se agregarán aquí mediante JavaScript -->
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- INICIO CONTENEDOR DE TOP VENDEDORES-->

                            </div>





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

                            try {
                                $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                $sql = "SELECT VEND01.NOMBRE AS AGENTE, 
                   SUM(FACTF01.IMPORTE) AS TOTAL_VENTAS
            FROM FACTF01
            INNER JOIN VEND01 ON FACTF01.CVE_VEND = VEND01.CVE_VEND
            GROUP BY VEND01.NOMBRE
            ORDER BY TOTAL_VENTAS DESC
            ROWS 1 TO 10";

                                $stmt = $dbh->prepare($sql);
                                $stmt->execute();

                                $topAgents = [];
                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                    $topAgents[] = [
                                        'agente' => $row['AGENTE'],
                                        'total_ventas' => $row['TOTAL_VENTAS']
                                    ];
                                }

                                $topAgentsData = json_encode($topAgents);
                            } catch (PDOException $e) {
                                echo "<div class='container mt-5'><h2>AUN NO HAY CONEXIÓN:</h2>";
                                echo "<p>" . $e->getMessage() . "</p></div>";
                            }
                            ?>

                            <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
                            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
                            <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
                            <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
                            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                            <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
                            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                            <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
                            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

                            <script>
                                // Datos de los productos desde PHP
                                var productLabels = <?php echo json_encode($productos); ?>;
                                var productValues = <?php echo json_encode($cantidades); ?>;

                                // Configuración de la gráfica para Top 10 Productos
                                var topProductsChartData = {
                                    labels: productLabels,
                                    datasets: [{
                                        label: 'Top 10 Productos',
                                        data: productValues,
                                        backgroundColor: [
                                            '#009DFF', '#007ECC', '#00C49A', '#FFC107', '#FF7A48', '#B0BEC5',
                                            '#007ACC', '#0088FF', '#004C99', '#FFA500'
                                        ],
                                        hoverBackgroundColor: [
                                            '#007ECC', '#009DFF', '#00B58A', '#FFB206', '#FF6A38', '#90A4AE',
                                            '#005F99', '#0070CC', '#003366', '#CC8400'
                                        ],
                                        borderColor: 'rgb(255, 255, 255)', // Bordes blancos
                                        borderWidth: 2,
                                        hoverOffset: 10 // Offset para mantener el efecto de hover
                                    }]
                                };

                                // Crear la gráfica
                                var ctx = document.getElementById('topProductsChart').getContext('2d');
                                var topProductsChart = new Chart(ctx, {
                                    type: 'doughnut',
                                    data: topProductsChartData,
                                    options: {
                                        plugins: {
                                            legend: {
                                                display: true,
                                                position: 'bottom',
                                                labels: {
                                                    boxWidth: 10,
                                                    padding: 15,
                                                    font: {
                                                        family: 'Arial',
                                                        size: 14,
                                                        weight: 'bold'
                                                    },
                                                    color: '#333' // Color de texto
                                                }
                                            }
                                        },
                                        animation: {
                                            animateScale: true,
                                            animateRotate: true
                                        },
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        layout: {
                                            padding: {
                                                bottom: 30
                                            }
                                        },
                                        tooltips: {
                                            callbacks: {
                                                label: function(tooltipItem, data) {
                                                    var label = data.labels[tooltipItem.index] || '';
                                                    var value = data.datasets[0].data[tooltipItem.index] || 0;
                                                    return label + ': ' + value.toLocaleString('es-ES');
                                                }
                                            }
                                        }
                                    }
                                });
                            </script>



                            <script>
                                var topProductsData = <?php echo json_encode(array_map(function ($producto, $cantidad) {
                                                            return [
                                                                "nombre" => $producto,
                                                                "cantidad" => $cantidad
                                                            ];
                                                        }, $productos, $cantidades)); ?>;

                                function renderProductList(data) {
                                    var listContainer = document.querySelector('#productList');
                                    listContainer.innerHTML = ''; // Limpiar contenido previo

                                    data.forEach((product, index) => {
                                        // Generar un cambio porcentual aleatorio para el ejemplo
                                        var randomChange = (Math.random() * 20 - 10).toFixed(2); // Rango de -10% a +10%
                                        var changeClass = randomChange >= 0 ? 'positive' : 'negative';

                                        var listItem = `
                <li class="list-group-item-custom">
                    <div class="product-info d-flex align-items-center">
                        <div class="product-icon">
                            <i class="bi bi-box-seam"></i> <!-- Ícono para el producto -->
                        </div>
                        <div class="ml-2">
                            <div class="product-name">${product.nombre}</div>
                            <div class="product-stats">
                        ${parseInt(product.cantidad).toLocaleString('es-ES')}
                        
                    </div>
                        </div>
                    </div>
                    <div class="product-stats">
                        <span class="sales-change ${changeClass}">
                            ${randomChange}%
                        </span>
                    </div>
                </li>`;
                                        listContainer.innerHTML += listItem;
                                    });
                                }

                                // Llamar a la función para renderizar la lista
                                renderProductList(topProductsData);
                            </script>










                            <!-- Script para la lista de agentes -->
                            <script>
                                var topAgentsData = <?php echo $topAgentsData; ?>;

                                function renderAgentesList(data) {
                                    var listContainer = document.querySelector('#agentesList');
                                    listContainer.innerHTML = ''; // Limpiar contenido previo

                                    data.forEach(agent => {
                                        // Generar un cambio porcentual aleatorio para el ejemplo
                                        var randomChange = (Math.random() * 20 - 10).toFixed(2); // Rango de -10% a +10%
                                        var changeClass = randomChange >= 0 ? 'positive' : 'negative';

                                        var listItem = `
                <li class="list-group-item-custom">
                    <div class="agent-info">
                        <div class="agent-icon">
                            <!-- Aquí puedes añadir un ícono o imagen representativa -->
                            <i class="bi bi-person"></i>
                        </div>
                        <div>
                            <div class="agent-name">${agent.agente}</div>
                            $${parseFloat(agent.total_ventas).toLocaleString('es-ES')}
                        </div>
                    </div>
                    <div class="agent-sales">
                        <span class="sales-change ${changeClass}">
                            ${randomChange}%
                        </span>
                    </div>
                </li>`;
                                        listContainer.innerHTML += listItem;
                                    });
                                }
                                renderAgentesList(topAgentsData);
                            </script>


                            <script>
                                // Datos de los agentes desde PHP o JSON
                                var agentLabels = topAgentsData.map(agent => agent.agente);
                                var agentValues = topAgentsData.map(agent => agent.total_ventas);

                                var topAgentsChartData = {
                                    labels: agentLabels,
                                    datasets: [{
                                        label: 'Top 10 Agentes',
                                        data: agentValues,
                                        backgroundColor: [
                                            '#009DFF', '#007ECC', '#00C49A', '#FFC107', '#FF7A48', '#B0BEC5',
                                            '#007ACC', '#0088FF', '#004C99', '#FFA500'
                                        ],
                                        hoverBackgroundColor: [
                                            '#007ECC', '#009DFF', '#00B58A', '#FFB206', '#FF6A38', '#90A4AE',
                                            '#005F99', '#0070CC', '#003366', '#CC8400'
                                        ],
                                        borderColor: 'rgb(255, 255, 255)', // Bordes blancos
                                        borderWidth: 2,
                                        hoverOffset: 10 // Efecto de desplazamiento al pasar el mouse
                                    }]
                                };

                                // Crear la gráfica
                                var topAgentsChart = new Chart(document.getElementById('topAgentsChart'), {
                                    type: 'doughnut',
                                    data: topAgentsChartData,
                                    options: {
                                        plugins: {
                                            legend: {
                                                display: true,
                                                position: 'bottom',
                                                labels: {
                                                    boxWidth: 10,
                                                    padding: 15,
                                                    font: {
                                                        family: 'Arial',
                                                        size: 14,
                                                        weight: 'bold'
                                                    },
                                                    color: '#333' // Color del texto
                                                }
                                            }
                                        },
                                        animation: {
                                            animateScale: true,
                                            animateRotate: true
                                        },
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        layout: {
                                            padding: {
                                                bottom: 30
                                            }
                                        },
                                        tooltips: {
                                            callbacks: {
                                                label: function(tooltipItem, data) {
                                                    var label = data.labels[tooltipItem.index] || '';
                                                    var value = data.datasets[0].data[tooltipItem.index] || 0;
                                                    return label + ': ' + value.toLocaleString('es-ES');
                                                }
                                            }
                                        }
                                    }
                                });
                            </script>






                            <script>
                                // Datos generados desde PHP
                                let clientesData = <?php echo json_encode(array_map(function ($nombre, $monto, $montoFormateado) {
                                                        return ['nombre' => $nombre, 'monto' => $monto, 'montoFormateado' => $montoFormateado];
                                                    }, $clientes, $montos, $montosFormateados)); ?>;

                                // Sumar todos los montos para calcular los porcentajes
                                let totalMontos = clientesData.reduce((acc, cliente) => acc + parseFloat(cliente.monto), 0);

                                // Función para renderizar la lista de clientes
                                function renderClientesList(data) {
                                    let listContainer = document.querySelector('#listaClientes');
                                    listContainer.innerHTML = ''; // Limpiar contenido previo

                                    data.forEach((cliente, index) => {
                                        let porcentaje = (parseFloat(cliente.monto) / totalMontos * 100).toFixed(2); // Calcular porcentaje
                                        let changeClass = (porcentaje >= 0) ? 'positive' : 'negative'; // Clase para el cambio

                                        let listItem = `
                <li class="list-group-item-custom">
                    <div class="agent-info">
                        <div class="agent-icon">
                            <i class="bi bi-person"></i> <!-- Icono para el cliente -->
                        </div>
                        <div>
                            <div class="agent-name">${index + 1}. ${cliente.nombre}</div>
                            <div class="agent-company"> $${cliente.montoFormateado}</div>
                        </div>
                    </div>
                    <div class="agent-sales">
                        <span class="sales-change ${changeClass}">
                            ${porcentaje}%
                        </span>
                    </div>
                </li>`;
                                        listContainer.innerHTML += listItem;
                                    });
                                }

                                // Función para actualizar el gráfico y la lista
                                function actualizarTopClientes(cantidad) {
                                    // Filtrar los clientes según la cantidad seleccionada
                                    let clientesFiltrados = clientesData.slice(0, cantidad);

                                    // Renderizar la lista de clientes
                                    renderClientesList(clientesFiltrados);

                                    // Actualizar el gráfico
                                    let chartCanvas = document.getElementById('TopClientesChart').getContext('2d');
                                    if (window.myBarChart) {
                                        window.myBarChart.destroy(); // Destruir el gráfico anterior
                                    }

                                    // Colores sólidos actualizados para las barras
                                    const barColors = [
                                        '#009DFF', '#007ECC', '#00C49A', '#FFC107', '#FF7A48',
                                        '#B0BEC5', '#009DFF', '#007ECC', '#00C49A', '#FFC107'
                                    ];

                                    window.myBarChart = new Chart(chartCanvas, {
                                        type: 'bar',
                                        data: {
                                            labels: clientesFiltrados.map(cliente => cliente.nombre),
                                            datasets: [{
                                                label: 'Monto de compras',
                                                data: clientesFiltrados.map(cliente => parseFloat(cliente.monto)), // Usar montos sin formatear
                                                backgroundColor: barColors.slice(0, clientesFiltrados.length),
                                                borderColor: '#fff',
                                                borderWidth: 1,
                                                borderRadius: 5, // Bordes redondeados
                                                hoverBackgroundColor: '#007ECC',
                                                hoverBorderColor: '#005B99'
                                            }]
                                        },
                                        options: {
                                            scales: {
                                                x: {
                                                    grid: {
                                                        display: false
                                                    },
                                                    ticks: {
                                                        color: '#444',
                                                        font: {
                                                            size: 12,
                                                            family: 'Arial'
                                                        }
                                                    }
                                                },
                                                y: {
                                                    grid: {
                                                        color: 'rgba(0, 0, 0, 0.1)',
                                                        drawBorder: false
                                                    },
                                                    ticks: {
                                                        color: '#444',
                                                        font: {
                                                            size: 12,
                                                            family: 'Arial'
                                                        },
                                                        callback: value => `$${value}` // Formato de moneda en el eje Y
                                                    },
                                                    beginAtZero: true
                                                }
                                            },
                                            plugins: {
                                                legend: {
                                                    display: false
                                                },
                                                tooltip: {
                                                    backgroundColor: '#007ECC',
                                                    borderColor: '#005B99',
                                                    borderWidth: 1,
                                                    callbacks: {
                                                        label: tooltipItem => `Monto: $${tooltipItem.raw}`
                                                    }
                                                }
                                            }
                                        }
                                    });
                                }

                                // Evento cuando se cambia la cantidad en el menú desplegable
                                document.getElementById('numClients').addEventListener('change', function() {
                                    let cantidadSeleccionada = parseInt(this.value);
                                    actualizarTopClientes(cantidadSeleccionada);
                                });

                                // Llamar a la función inicialmente con la cantidad seleccionada desde PHP
                                actualizarTopClientes(<?php echo $numClients; ?>); // Usar el valor por defecto de PHP
                            </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.style.maxHeight !== '0px';

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

</body>

</html>