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



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

    <style>
        .wow {
            visibility: hidden;
        }
    </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">



                    <!-- 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-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>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-user"></i>
                            <div data-i18n="Authentications">Clientes</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="clientes.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="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-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="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-group"></i>
                            <div data-i18n="Misc">Proveedores</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="proveedores.php" class="menu-link">
                                    <div data-i18n="Error">Proveedores</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxpagar.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Cuentas X Pagar</div>
                                </a>
                            </li>
                        </ul>
                    </li>


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

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

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

            <!-- 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..."
                                    aria-label="Buscar..." />
                            </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 -->


                <?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);
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                    // Consulta para filtrar por TIP_DOC = 'F'
                    $sqlTotal = "SELECT * FROM FACTF01 WHERE TIP_DOC = 'F'";
                    $stmtTotal = $dbh->prepare($sqlTotal);
                    $stmtTotal->execute();
                    $rowsTotal = $stmtTotal->fetchAll(PDO::FETCH_ASSOC);
                    $totalRegistros = count($rowsTotal);
                    // Consulta para filtrar por TIP_DOC = 'F' y STATUS IN ('E', 'O')
                    $sqlEmitidas = "SELECT * FROM FACTF01 WHERE TIP_DOC = 'F' AND STATUS IN ('E', 'O')";
                    $stmtEmitidas = $dbh->prepare($sqlEmitidas);
                    $stmtEmitidas->execute();
                    $rowsEmitidas = $stmtEmitidas->fetchAll(PDO::FETCH_ASSOC);
                    $totalEmitidas = count($rowsEmitidas);
                    // Consulta para filtrar por TIP_DOC = 'F' y STATUS = 'C'
                    $sqlCanceladas = "SELECT * FROM FACTF01 WHERE TIP_DOC = 'F' AND STATUS = 'C'";
                    $stmtCanceladas = $dbh->prepare($sqlCanceladas);
                    $stmtCanceladas->execute();
                    $rowsCanceladas = $stmtCanceladas->fetchAll(PDO::FETCH_ASSOC);
                    $totalCanceladas = count($rowsCanceladas);
                } catch (PDOException $e) {
                    echo "<div class='container mt-5'><h2>Error de conexión:</h2>";
                    echo "<p>" . $e->getMessage() . "</p></div>";
                    exit;
                }
                ?>

                <!-- 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 class="col-sm-6 col-xl-3 mb-4 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">

                                                        <small>Total de Registros</small>
                                                        <h4 class="mb-1" id="total-registros"><?php echo $totalRegistros ?? 'Error'; ?></h4>
                                                    </div>

                                                    <span class="badge bg-label-primary rounded-circle p-2">
                                                        <i class="icon-base bx bx-dollar icon-lg"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-sm-6 col-xl-3 mb-4 wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">

                                                    <div class="content-left">

                                                        <small>Facturas Emitidas</small>
                                                        <h4 class="mb-1" id="facturas-emitidas"><?php echo htmlspecialchars($totalEmitidas ?? 'No Disponible'); ?></h4>
                                                    </div>

                                                    <span class="badge bg-label-success rounded-circle p-2">
                                                        <i class="icon-base bx bx-task icon-lg"></i>
                                                    </span>


                                                </div>


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


                                    <div class="col-sm-6 col-xl-3 mb-4 wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">
                                                        <small>Facturas Canceladas</small>
                                                        <h4 class="mb-1" id="facturas-canceladas"><?php echo htmlspecialchars($totalCanceladas ?? 'No Disponible'); ?></h4>
                                                    </div>

                                                    <span class="badge bg-label-danger rounded-circle p-2">
                                                        <i class="icon-base bx bx-task-x icon-lg"></i>
                                                    </span>

                                                </div>


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


                                    <div class="col-sm-6 col-xl-3 mb-4 wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">
                                                        <small>Facturas Canceladas</small>
                                                        <h4 class="mb-1" id="facturas-canceladas"><?php echo htmlspecialchars($totalCanceladas ?? 'No Disponible'); ?></h4>
                                                    </div>

                                                    <span class="badge bg-label-danger rounded-circle p-2">
                                                        <i class="icon-base bx bx-task-x icon-lg"></i>
                                                    </span>

                                                </div>


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


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




                        <?php
                        $host = 'localhost';
                        $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE9.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 con sus existencias
                            $sql = "SELECT INVE01.CVE_ART AS PRODUCTO, INVE01.DESCR AS NombreProducto,
                            SUM(PAR_FACTF01.CANT) AS CantidadVendida,
                                INVE01.STOCK_MIN, INVE01.STOCK_MAX, INVE01.EXIST, INVE01.TIPO_ELE
                            FROM PAR_FACTF01
                            INNER JOIN INVE01 ON INVE01.CVE_ART = PAR_FACTF01.CVE_ART
                            WHERE INVE01.TIPO_ELE = 'P' -- Solo productos
                            GROUP BY INVE01.CVE_ART, INVE01.DESCR, INVE01.STOCK_MIN, INVE01.STOCK_MAX, INVE01.EXIST, INVE01.TIPO_ELE
                            ORDER BY CantidadVendida DESC
                            ROWS 1 TO 10";

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

                            // Preparar el array de productos con existencias
                            $productosData = [];

                            // Obtener los datos
                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                $productosData[] = [
                                    "nombre" => $row['NOMBREPRODUCTO'],
                                    "cantidad" => $row['CANTIDADVENDIDA'],
                                    "stock_min" => $row['STOCK_MIN'],
                                    "stock_max" => $row['STOCK_MAX'],
                                    "existencias" => $row['EXIST'],
                                    "imagen" => "/imagenes-productos/" . $row['PRODUCTO'] . ".jpg" // NUEVA LÍNEA
                                ];
                            }

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


                        <?php
                        $host = 'localhost';
                        $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 servicios más contratados
                            $sql = "SELECT INVE01.CVE_ART AS PRODUCTO, INVE01.DESCR AS NombreProducto,
                   SUM(PAR_FACTF01.CANT) AS CantidadVendida,
                   INVE01.STOCK_MIN, INVE01.STOCK_MAX, INVE01.EXIST, INVE01.TIPO_ELE, INVE01.ULT_COSTO,
               INVE01.LIN_PROD
            FROM PAR_FACTF01
            INNER JOIN INVE01 ON INVE01.CVE_ART = PAR_FACTF01.CVE_ART
            WHERE INVE01.TIPO_ELE = 'S' -- Solo servicios
            GROUP BY INVE01.CVE_ART, INVE01.DESCR, INVE01.STOCK_MIN, INVE01.STOCK_MAX, INVE01.EXIST, INVE01.TIPO_ELE, INVE01.ULT_COSTO, INVE01.LIN_PROD
            ORDER BY CantidadVendida DESC
            ROWS 1 TO 10";

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

                            // Preparar el array de servicios y calcular total de veces contratados
                            $servicioData = [];
                            $totalContrataciones = 0;

                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                $cantidad = intval($row['CANTIDADVENDIDA']); // Asegurar que sea un número
                                $servicioData[] = [
                                    "nombre" => $row['NOMBREPRODUCTO'],
                                    "cantidad" => $cantidad,
                                    "stock_min" => $row['STOCK_MIN'],
                                    "stock_max" => $row['STOCK_MAX'],
                                    "existencias" => $row['EXIST'],
                                    "precio" => $row['ULT_COSTO'],
                                    "categoria" => $row['LIN_PROD'],
                                    "imagen" => "/imagenes-productos/" . $row['PRODUCTO'] . ".jpg" // Aquí la ruta completa

                                ];
                                $totalContrataciones += $cantidad;
                            }

                            // Enviar datos a JavaScript
                            echo "<script>
        var topServicioData = " . json_encode($servicioData) . ";
        var totalContrataciones = $totalContrataciones;
    </script>";
                        } catch (PDOException $e) {
                            echo "<div class='container mt-5'><h2>AUN NO HAY CONEXIÓN:</h2>";
                            echo "<p>" . $e->getMessage() . "</p></div>";
                        }
                        ?>




                        <?php
                        $host = 'localhost';
                        $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);

                            // Número de clientes a obtener
                            $num_clients = 10;

                            $sql2 = "SELECT FIRST :num_clients CLIE01.NOMBRE, ROUND(SUM(FACTF01.IMPORTE), 2) AS TOTAL_VENTA, CLIE01.FCH_ULTCOM, CLIE01.ULT_COMPM
         FROM FACTF01
         INNER JOIN CLIE01 ON FACTF01.CVE_CLPV = CLIE01.CLAVE
         WHERE FACTF01.FECHA_DOC >= '2025-01-01' AND FACTF01.FECHA_DOC <= '2025-03-01'
         GROUP BY CLIE01.NOMBRE, CLIE01.FCH_ULTCOM, CLIE01.ULT_COMPM
         ORDER BY TOTAL_VENTA DESC";


                            // Preparar y ejecutar la consulta
                            $stmt = $dbh->prepare($sql2);
                            $stmt->bindParam(':num_clients', $num_clients, PDO::PARAM_INT);
                            $stmt->execute();

                            // Preparar el array de clientes
                            $clienteData = [];
                            $totalVentas = 0;

                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                $totalVenta = floatval($row['TOTAL_VENTA']); // Asegurarse que sea un número
                                $clienteData[] = [
                                    "nombre" => $row['NOMBRE'],
                                    "totalVenta" => $totalVenta
                                ];
                                $totalVentas += $totalVenta;
                            }

                            // Enviar datos a JavaScript
                            echo "<script>
            var topClienteData = " . json_encode($clienteData) . ";
            var totalVentas = $totalVentas;
        </script>";
                        } catch (PDOException $e) {
                            echo "<div class='container mt-5'><h2>AUN NO HAY CONEXIÓN:</h2>";
                            echo "<p>" . $e->getMessage() . "</p></div>";
                        }
                        ?>




                        <?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, 
               ROUND(SUM(FACTF01.IMPORTE), 2) 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 = [];
                            $totalSales = 0;

                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                $totalSales += $row['TOTAL_VENTAS'];
                                $topAgents[] = [
                                    'nombre' => $row['AGENTE'],
                                    'totalVenta' => number_format($row['TOTAL_VENTAS'], 2, '.', '') // Formato de número
                                ];
                            }

                            // Convertir datos a JSON
                            $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>";
                        }
                        ?>




                        <!-- CONTENEDOR PRODUCTOS Y SERVICIOS -->
                        <div class="row">
                            <!-- TARJETA PRODUCTO DEL MES -->
                            <div class="col-md-12 col-xxl-6 mb-6">
                                <div class="card h-100">
                                    <div class="d-flex align-items-end row">
                                        <div class="col-7">
                                            <div class="card-body">
                                                <h5 class="card-title mb-1 text-nowrap">Producto Del Mes</h5>
                                                <p class="card-subtitle text-nowrap mb-3">Más vendido por cantidad de unidades</p>
                                                <h5 class="card-title text-primary mb-0" id="nombreProducto">$48.9k</h5>
                                                <p class="mb-3"> Unidades Vendidas: <span class="mb-3" id="cantidadVendida"></span></p>
                                                <a href="javascript:;" class="btn btn-sm btn-primary mb-1" id="viewStockButton">Ver Detalles</a>

                                            </div>
                                        </div>
                                        <div class="col-5">
                                            <div class="card-body pb-0 text-end">
                                                <img src="../assets/img/illustrations/producto.svg" width="91" height="144" class="rounded-start" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /TARJETA PRODUCTO DEL MES -->

                            <!-- TARJETA SERVICIO DEL MES -->
                            <div class="col-md-12 col-xxl-6 mb-6">
                                <div class="card h-100">
                                    <div class="d-flex align-items-end row">
                                        <div class="col-7">
                                            <div class="card-body">
                                                <h5 class="card-title mb-1 text-nowrap">Servicio Del Mes</h5>
                                                <p class="card-subtitle text-nowrap mb-3">Más contratado por los clientes</p>
                                                <h5 class="card-title text-primary mb-0" id="nombreServicio">$48.9k</h5>
                                                <p class="mb-3">Veces Contratado: <span class="mb-3" id="cantidadContratada"></span></p>
                                                <a href="javascript:;" class="btn btn-sm btn-primary mb-1" id="viewServiceButton">Ver Detalles</a>
                                            </div>
                                        </div>
                                        <div class="col-5">
                                            <div class="card-body pb-0 text-end">
                                                <img src="../assets/img/illustrations/servicio.svg" width="91" height="144" class="rounded-start" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /TARJETA SERVICIO DEL MES -->

                            <!-- LISTADO TOP 10 PRODUCTOS -->
                            <div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-6">
                                <div class="card h-100">
                                    <div class="card-header d-flex justify-content-between">
                                        <div class="card-title mb-0">
                                            <h5 class="m-0 me-2">Top 10 <span class="text-primary">Productos</span></h5>
                                            <small class="text-muted">42.82k Total Sales</small>
                                        </div>
                                        <div class="dropdown">
                                            <button class="btn p-0" type="button" id="orederStatistics" 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="orederStatistics">
                                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">

                                        </div>
                                        <ul id="productList" class="p-0 m-0"></ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /LISTADO TOP 10 PRODUCTOS -->

                            <!-- LISTADO TOP 10 SERVICIOS -->
                            <div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-6">
                                <div class="card h-100">
                                    <div class="card-header d-flex justify-content-between">
                                        <div class="card-title mb-0">
                                            <h5 class="m-0 me-2">Top 10 <span class="text-primary">Servicios</span></h5>
                                            <small class="text-muted">42.82k Total Sales</small>
                                        </div>

                                        <div class="dropdown">
                                            <button class="btn p-0" type="button" id="orederStatistics" 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="orederStatistics">
                                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">

                                        </div>
                                        <ul id="servicioList" class="p-0 m-0"></ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /LISTADO TOP 10 SERVICIOS -->
                        </div>
                        <!-- /CONTENEDOR PRODUCTOS Y SERVICIOS -->






                        <!-- CONTENEDOR CLIENTES Y VENDEDORES  -->
                        <div class="row">
                            <!-- TARJETA CLIENTE DEL MES -->
                            <div class="col-md-12 col-xxl-6 mb-6">
                                <div class="card h-100">
                                    <div class="d-flex align-items-end row">
                                        <div class="col-7">
                                            <div class="card-body">
                                                <h5 class="card-title mb-1 text-nowrap">Mejor Cliente</h5>
                                                <p class="card-subtitle text-nowrap mb-3">Mayor volumen de compras registradas</p>
                                                <h5 class="card-title text-primary mb-0" id="nombreClienteTop">$48.9k</h5>
                                                <p class="mb-3" id="montoComprado"> <span class="mb-3">MXN en compras</span></p>
                                                <a href="javascript:;" class="btn btn-sm btn-primary mb-1" id="viewClienteButton">Ver detalles</a>
                                            </div>
                                        </div>
                                        <div class="col-5">
                                            <div class="card-body pb-0 text-end">
                                                <img src="../assets/img/illustrations/cliente.svg" width="91" height="144" class="rounded-start" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /TARJETA CLIENTE DEL MES -->

                            <!-- TARJETA VENDEDOR DEL MES -->
                            <div class="col-md-12 col-xxl-6 mb-6">
                                <div class="card h-100">
                                    <div class="d-flex align-items-end row">
                                        <div class="col-7">
                                            <div class="card-body">
                                                <h5 class="card-title mb-1 text-nowrap">Mejor Vendedor</h5>
                                                <p class="card-subtitle text-nowrap mb-3">Mayor monto de ventas generadas</p>
                                                <h5 class="card-title text-primary mb-0" id="nombreTopVendedor">$48.9k</h5>
                                                <p class="mb-3">Veces Contratado: <span class="mb-3" id="ventasTopVendedor"></span></p>
                                                <a href="javascript:;" class="btn btn-sm btn-primary mb-1">View sales</a>
                                            </div>
                                        </div>
                                        <div class="col-5">
                                            <div class="card-body pb-0 text-end">
                                                <img src="../assets/img/illustrations/vendedor.svg" width="91" height="144" class="rounded-start" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /TARJETA VENDEDOR DEL MES -->

                            <!-- LISTADO TOP 10 CLIENTES -->
                            <div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-6">
                                <div class="card h-100">
                                    <div class="card-header d-flex align-items-center justify-content-between pb-0">
                                        <div class="card-title mb-0">
                                            <h5 class="m-0 me-2">Top 10 <span class="text-primary">Clientes</span></h5>
                                            <small class="text-muted">Total ventas: <span id="totalVentas">0</span></small>
                                        </div>
                                        <div class="dropdown">
                                            <button class="btn p-0" type="button" id="orderStatistics" 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="orderStatistics">
                                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div class="d-flex flex-column align-items-center gap-1">
                                                <h2 class="mb-2" id="totalVentas">0</h2>
                                                <span>Total Compras</span>
                                            </div>

                                        </div>
                                        <ul id="clienteList" class="p-0 m-0"></ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /LISTADO TOP 10 CLIENTES -->

                            <!-- LISTADO TOP 10 VENDEDORES -->
                            <div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-6">
                                <div class="card h-100">
                                    <div class="card-header d-flex align-items-center justify-content-between pb-0">
                                        <div class="card-title mb-0">
                                            <h5 class="m-0 me-2">Top 10 <span class="text-primary">Vendedores</span></h5>
                                            <small class="text-muted">Total Ventas</small>
                                        </div>

                                        <div class="dropdown">
                                            <button class="btn p-0" type="button" id="vendedoresDropdown" 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="vendedoresDropdown">
                                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div class="d-flex flex-column align-items-center gap-1">
                                                <h2 class="mb-2" id="totalVentas">0</h2>
                                                <span>Total Ventas</span>
                                            </div>

                                        </div>
                                        <ul id="vendedorList" class="p-0 m-0"></ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /LISTADO TOP 10 VENDEDORES -->
                        </div>
                        <!-- /CONTENEDOR CLIENTES Y VENDEDORES -->













                        <div class="row">
                            <div class="col-md-6 col-lg-4 order-1 mb-4">
                                <div class="card h-100">
                                    <div class="card-header">
                                        <ul class="nav nav-pills" role="tablist">
                                            <li class="nav-item">
                                                <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tabs-line-card-income" aria-controls="navs-tabs-line-card-income" aria-selected="true">Income</button>
                                            </li>
                                            <li class="nav-item">
                                                <button type="button" class="nav-link" role="tab">Expenses</button>
                                            </li>
                                            <li class="nav-item">
                                                <button type="button" class="nav-link" role="tab">Profit</button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-body px-0">
                                        <div class="tab-content p-0">
                                            <div class="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel">
                                                <div class="d-flex p-4 pt-3">
                                                    <div class="avatar flex-shrink-0 me-3">
                                                        <img src="../assets/img/icons/unicons/wallet.png" alt="User" />
                                                    </div>
                                                    <div>
                                                        <small class="text-muted d-block">Total Balance</small>
                                                        <div class="d-flex align-items-center">
                                                            <h6 class="mb-0 me-1">$459.10</h6>
                                                            <small class="text-success fw-semibold">
                                                                <i class="bx bx-chevron-up"></i>
                                                                42.9%
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="incomeChart"></div>
                                                <div class="d-flex justify-content-center pt-4 gap-2">
                                                    <div class="flex-shrink-0">
                                                        <div id="expensesOfWeek"></div>
                                                    </div>
                                                    <div>
                                                        <p class="mb-n1 mt-1">Expenses This Week</p>
                                                        <small class="text-muted">$39 less than last week</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Expense Overview -->

                            <!-- Transactions -->
                            <div class="col-md-6 col-lg-4 order-2 mb-4">
                                <div class="card h-100">
                                    <div class="card-header d-flex align-items-center justify-content-between">
                                        <h5 class="card-title m-0 me-2">Transactions</h5>
                                        <div class="dropdown">
                                            <button class="btn p-0" type="button" id="transactionID" 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="transactionID">
                                                <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
                                                <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="p-0 m-0">
                                            <li class="d-flex mb-4 pb-1">
                                                <div class="avatar flex-shrink-0 me-3">
                                                    <img src="../assets/img/icons/unicons/paypal.png" alt="User" class="rounded" />
                                                </div>
                                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                    <div class="me-2">
                                                        <small class="text-muted d-block mb-1">Paypal</small>
                                                        <h6 class="mb-0">Send money</h6>
                                                    </div>
                                                    <div class="user-progress d-flex align-items-center gap-1">
                                                        <h6 class="mb-0">+82.6</h6>
                                                        <span class="text-muted">USD</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="d-flex mb-4 pb-1">
                                                <div class="avatar flex-shrink-0 me-3">
                                                    <img src="../assets/img/icons/unicons/wallet.png" alt="User" class="rounded" />
                                                </div>
                                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                    <div class="me-2">
                                                        <small class="text-muted d-block mb-1">Wallet</small>
                                                        <h6 class="mb-0">Mac'D</h6>
                                                    </div>
                                                    <div class="user-progress d-flex align-items-center gap-1">
                                                        <h6 class="mb-0">+270.69</h6>
                                                        <span class="text-muted">USD</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="d-flex mb-4 pb-1">
                                                <div class="avatar flex-shrink-0 me-3">
                                                    <img src="../assets/img/icons/unicons/chart.png" alt="User" class="rounded" />
                                                </div>
                                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                    <div class="me-2">
                                                        <small class="text-muted d-block mb-1">Transfer</small>
                                                        <h6 class="mb-0">Refund</h6>
                                                    </div>
                                                    <div class="user-progress d-flex align-items-center gap-1">
                                                        <h6 class="mb-0">+637.91</h6>
                                                        <span class="text-muted">USD</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="d-flex mb-4 pb-1">
                                                <div class="avatar flex-shrink-0 me-3">
                                                    <img src="../assets/img/icons/unicons/cc-success.png" alt="User" class="rounded" />
                                                </div>
                                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                    <div class="me-2">
                                                        <small class="text-muted d-block mb-1">Credit Card</small>
                                                        <h6 class="mb-0">Ordered Food</h6>
                                                    </div>
                                                    <div class="user-progress d-flex align-items-center gap-1">
                                                        <h6 class="mb-0">-838.71</h6>
                                                        <span class="text-muted">USD</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="d-flex mb-4 pb-1">
                                                <div class="avatar flex-shrink-0 me-3">
                                                    <img src="../assets/img/icons/unicons/wallet.png" alt="User" class="rounded" />
                                                </div>
                                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                    <div class="me-2">
                                                        <small class="text-muted d-block mb-1">Wallet</small>
                                                        <h6 class="mb-0">Starbucks</h6>
                                                    </div>
                                                    <div class="user-progress d-flex align-items-center gap-1">
                                                        <h6 class="mb-0">+203.33</h6>
                                                        <span class="text-muted">USD</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="d-flex">
                                                <div class="avatar flex-shrink-0 me-3">
                                                    <img src="../assets/img/icons/unicons/cc-warning.png" alt="User" class="rounded" />
                                                </div>
                                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                    <div class="me-2">
                                                        <small class="text-muted d-block mb-1">Mastercard</small>
                                                        <h6 class="mb-0">Ordered Food</h6>
                                                    </div>
                                                    <div class="user-progress d-flex align-items-center gap-1">
                                                        <h6 class="mb-0">-92.45</h6>
                                                        <span class="text-muted">USD</span>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--/ Transactions -->
                        </div>





                        <div class="content-backdrop fade"></div>
                    </div>
                    <!-- Content wrapper -->
                </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>
            <script src="../assets/js/app-ecommerce-dashboard.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>



        <!-- MODAL PRODUCTO DEL MES -->
        <div class="modal fade" id="stockModal" tabindex="-1" aria-labelledby="stockModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="stockModalLabel">Detalle de Stock del Producto</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <!-- Imagen del producto -->
                        <div class="text-center mb-3">
                            <img id="modalImagenProducto" src="" alt="Imagen del producto" class="img-fluid rounded mb-3"
                                style="max-height: 200px;" onerror="this.onerror=null; this.src='/imagenes-productos/default.jpg';">

                            <div class="user-info text-center">
                                <!-- Información del producto -->
                                <p><strong>Producto:</strong> <span id="modalNombreProducto"></span></p>
                                <p><strong>Estado:</strong> <span id="modalEstado" class="badge"></span></p>
                                <p id="modalMensajeSugerencia" class="text-muted"></p>
                            </div>

                        </div>

                        <div class="row row-gap-6">
                            <div class="col-12 col-lg-4 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-primary">
                                        <i class="icon-base bx bx-message-square-dots"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Stock Mínimo</h5>
                                    <p class="mb-lg-0" id="modalStockMin"></p>
                                </div>
                            </div>

                            <div class="col-12 col-lg-4 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-warning">
                                        <i class="icon-base bx bx-message-square-dots"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Stock Máximo</h5>
                                    <p class="mb-lg-0" id="modalStockMax"></p>
                                </div>
                            </div>
                            <div class="col-12 col-lg-4 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-success">
                                        <i class="icon-base bx bx-message-square-dots"></i>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <h5 class="mb-2">Existencias</h5>
                                    <p class="mb-lg-0" id="modalExistencias"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /MODAL PRODUCTO DEL MES -->

        <!-- MODAL SERVICIO DEL MES -->
        <div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="serviceModalLabel">Detalle del Servicio del Mes</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>

                    <div class="modal-body">
                        <!-- Imagen del servicio -->
                        <div class="text-center mb-3">
                            <img id="modalImagenServicio" src="" alt="Imagen del servicio" class="img-fluid rounded mb-3"
                                style="max-height: 200px;" onerror="this.onerror=null; this.src='/imagenes-productos/default.jpg';">



                            <div class="user-info text-center">
                                <!-- Información del servicio -->
                                <p><strong>Servicio:</strong> <span id="modalNombreServicio"></span></p>
                                <p><strong>Estado:</strong> <span id="modalDemanda" class="badge"></span></p>
                                <p><strong>Veces Contratado:</strong> <span id="modalVecesContratado"></span></p>
                                <p id="modalDescripcionServicio" class="text-muted"></p>
                            </div>
                        </div>

                        <div class="row row-gap-6">
                            <div class="col-12 col-lg-6 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-info">
                                        <i class="icon-base bx bx-dollar-circle"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Precio</h5>
                                    <p class="mb-lg-0" id="modalPrecioServicio"></p>
                                </div>
                            </div>

                            <div class="col-12 col-lg-6 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-primary">
                                        <i class="icon-base bx bx-star"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Categoría</h5>
                                    <p class="mb-lg-0" id="modalCategoriaServicio"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /MODAL SERVICIO DEL MES -->

        <!-- MODAL CLIENTE DEL MES -->
        <div class="modal fade" id="modalClienteMes" tabindex="-1" aria-labelledby="modalClienteMesLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalClienteMesLabel">Detalles del Cliente del Mes</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>

                    <div class="modal-body">
                        <!-- Imagen del cliente -->
                        <div class="text-center mb-3">
                            <img id="modalImagenCliente" src="../assets/img/illustrations/cliente.svg" alt="Imagen del cliente"
                                class="img-fluid rounded mb-3" style="max-height: 200px;">

                            <div class="user-info text-center">
                                <!-- Información principal -->
                                <p><strong>Nombre:</strong> <span id="modalNombreCliente"></span></p>
                                <p><strong>RFC:</strong> <span id="modalRfcCliente"></span></p>
                                <p id="modalMensajeCliente" class="text-muted"></p>
                            </div>
                        </div>

                        <!-- Estadísticas -->
                        <div class="row row-gap-6">
                            <div class="col-12 col-lg-4 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-primary">
                                        <i class="icon-base bx bx-money"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Total Comprado</h5>
                                    <p class="mb-lg-0" id="modalTotalCompradoCliente"></p>
                                </div>
                            </div>

                            <div class="col-12 col-lg-4 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-success">
                                        <i class="icon-base bx bx-calendar"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Días con Compras</h5>
                                    <p class="mb-lg-0" id="modalDiasComprasCliente"></p>
                                </div>
                            </div>

                            <div class="col-12 col-lg-4 px-6">
                                <div class="d-flex justify-content-center mb-4">
                                    <div class="modal-refer-and-earn-step bg-label-info">
                                        <i class="icon-base bx bx-map"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <h5 class="mb-2">Dirección</h5>
                                    <p class="mb-lg-0" id="modalDireccionCliente"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /MODAL CLIENTE DEL MES -->






</body>
<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.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/natural.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>






<script>
    $(document).ready(function() {
        $.fn.dataTable.ext.type.order['numeric-comma-asc'] = function(data) {
            return parseFloat(data.replace(/[^0-9.-]/g, '')) || 0;
        };
        $.fn.dataTable.ext.type.order['numeric-comma-desc'] = function(data) {
            return -parseFloat(data.replace(/[^0-9.-]/g, '')) || 0;
        };


        var table = $('#clientesTable').DataTable({
            language: {
                url: '../json/Spanish.json'
            },
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "Todos"]
            ],
            columnDefs: [{
                targets: 2,
                type: 'numeric-comma'
            }],
            order: [
                [2, 'asc']
            ]
        });

        var currentFilter = ''; // Variable global para almacenar el filtro actual
        var currentStartDate = '';
        var currentEndDate = '';

        // Función para filtrar la tabla y actualizar las tarjetas
        function filterTable(filter, startDate = '', endDate = '') {
            currentFilter = filter;
            currentStartDate = startDate;
            currentEndDate = endDate;

            $.fn.dataTable.ext.search.push(
                function(settings, data, dataIndex) {
                    var fechaDoc = data[5];
                    var fechaDocISO = new Date(fechaDoc.split('/').reverse().join('-')).toISOString().split('T')[0];
                    if (currentStartDate === '' && currentEndDate === '') {
                        return true;
                    }
                    if (fechaDocISO >= currentStartDate && fechaDocISO <= currentEndDate) {
                        return true;
                    }
                    return false;
                }
            );

            table.draw();
            $.fn.dataTable.ext.search.pop();

            // Obtiene y actualiza las tarjetas
            fetch(`get_card_data.php?filter=${filter}&start_date=${startDate}&end_date=${endDate}`)
                .then(response => response.json())
                .then(data => {
                    console.log('Datos de tarjetas recibidos:', data);

                    // Actualiza las tarjetas con los datos recibidos
                    document.getElementById('total-registros').textContent = data.totalRegistros || '0';
                    document.getElementById('facturas-emitidas').textContent = data.totalEmitidas || '0';
                    document.getElementById('facturas-canceladas').textContent = data.totalCanceladas || '0';
                })
                .catch(error => console.error('Error al actualizar tarjetas:', error));
        }

        // Maneja el envío del formulario del modal de filtro de fechas
        $('#dateFilterModal form').on('submit', function(event) {
            event.preventDefault(); // Previene el envío del formulario por defecto

            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();
            var filter = 'custom'; // Puedes definir un nombre específico para el filtro de fechas personalizadas

            // Llama a filterTable con el rango de fechas seleccionado
            filterTable(filter, startDate, endDate);

            // Cierra el modal
            $('#dateFilterModal').modal('hide');
        });

        // Maneja los clics en los botones de filtro de fechas (si usas filtros predefinidos)
        $('.date-filter').on('click', function() {
            var filter = $(this).data('filter');
            var startDate = '';
            var endDate = '';

            if (filter === 'today') {
                startDate = endDate = new Date().toISOString().split('T')[0];
            } else if (filter === 'this-month') {
                startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString().split('T')[0];
                endDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toISOString().split('T')[0];
            } else if (filter === 'last-month') {
                startDate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).toISOString().split('T')[0];
                endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 0).toISOString().split('T')[0];
            }

            filterTable(filter, startDate, endDate);
        });

        // Maneja el cambio en los detalles de las filas
        $('#clientesTable tbody').on('click', 'i.toggle-detalles', function() {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            var cve_doc = $(this).data('cve_doc');

            if (row.child.isShown()) {
                row.child().find('div').slideUp(function() {
                    row.child.hide();
                    tr.removeClass('shown');
                    $(tr).find('i.toggle-detalles').removeClass('down');
                });
            } else {
                $.ajax({
                    url: 'detalles_factura.php',
                    type: 'POST',
                    data: {
                        id: cve_doc
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.detalles) {
                            row.child('<div>' + response.detalles + '</div>').show();
                            tr.addClass('shown');
                            $(tr).find('i.toggle-detalles').addClass('down');
                            row.child().find('div').hide().slideDown();
                        } else if (response.error) {
                            row.child('<div><p>Error: ' + response.error + '</p></div>').show();
                            tr.addClass('shown');
                            row.child().find('div').hide().slideDown();
                        }
                    },
                    error: function() {
                        row.child('<div><p>Error al obtener los detalles de la factura.</p></div>').show();
                        tr.addClass('shown');
                        row.child().find('div').hide().slideDown();
                    }
                });
            }
        });

        // Maneja el clic en el botón de limpiar filtros
        $('#clearFilters').on('click', function() {
            table.search('').columns().search('').draw();
            // Reinicia el filtro
            currentFilter = '';
            currentStartDate = '';
            currentEndDate = '';
        });

        // Maneja el clic en el encabezado de la tabla
        $('#clientesTable').on('click', 'th', function() {
            // Asegura que el filtro actual se aplique cada vez que la tabla se dibuje
            if (currentFilter) {
                filterTable(currentFilter, currentStartDate, currentEndDate);
            }
        });
    });
</script>


<script>
    document.getElementById('clearFilters').addEventListener('click', function() {
        window.location.href = '';
    });

    document.querySelectorAll('.custom-filter').forEach(button => {
        button.addEventListener('click', function() {
            document.querySelectorAll('.custom-filter').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });

    document.querySelector('.apply-date-filter').addEventListener('click', function() {
        document.querySelector('.custom-date-filter').classList.add('active');
    });
</script>

<script>
    $(document).ready(function() {
        $('body').css('overflow', 'auto');
    });
</script>



<!-- INICIO SCRIPT TOP 10 PRODUCTOS -->
<script>
    function renderProductList(data) {
        var listContainer = document.querySelector('#productList');
        listContainer.innerHTML = ''; // Limpiar contenido previo

        data.forEach((product) => {
            let colorClass, stockMessage, iconClass;

            // Asegurar que los valores numéricos sean interpretados correctamente
            let existencias = parseInt(product.existencias) || 0;
            let stockMin = parseInt(product.stock_min) || 0;
            let stockMax = parseInt(product.stock_max) || 0;

            // Aplicar la lógica correcta para asignar color, mensaje e ícono
            if (existencias === 0) {
                colorClass = "bg-label-danger"; // Sin existencias
                stockMessage = "¡Agotado!";
                iconClass = "bx bx-x"; // Ícono de advertencia
            } else if (existencias < stockMin) {
                colorClass = "bg-label-warning"; // Pocas existencias
                stockMessage = "Stock bajo, reponer pronto";
                iconClass = "bx bx-error"; // Ícono de alerta
            } else if (existencias > stockMax && stockMax > 0) {
                colorClass = "bg-label-secondary"; // Exceso de existencias
                stockMessage = "Alto stock disponible";
                iconClass = "bx bx-error-circle"; // Ícono de caja indicando stock lleno
            } else {
                colorClass = "bg-label-success"; // Existencias dentro del rango
                stockMessage = "Stock adecuado";
                iconClass = "bx bx-check-circle"; // Ícono de check para stock correcto
            }

            var listItem = `
            <li class="d-flex mb-4 pb-1">
                <div class="avatar flex-shrink-0 me-3">
                    <span class="avatar-initial rounded ${colorClass}">
                        <i class="${iconClass}"></i>
                    </span>
                </div>
                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                    <div class="me-2">
                        <h6 class="mb-0">${product.nombre}</h6>
                        <small class="text-muted">${stockMessage}</small>
                    </div>
                    <div class="user-progress">
                        <small class="fw-semibold">${parseInt(product.cantidad).toLocaleString('es-ES')}</small>
                    </div>
                </div>
            </li>`;

            listContainer.innerHTML += listItem;
        });
    }
    // Llamar a la función para renderizar la lista
    renderProductList(topProductsData);
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topProductsData !== 'undefined' && topProductsData.length > 0) {
            const productoTop = topProductsData[0];

            // Insertamos los datos del primer producto
            document.getElementById("nombreProducto").textContent = productoTop.nombre;
            document.getElementById("cantidadVendida").textContent = parseInt(productoTop.cantidad).toLocaleString('es-MX');

            // Obtener mes actual
            const fecha = new Date();
            const opciones = {
                month: 'long',
                year: 'numeric'
            };
            const mesActual = fecha.toLocaleDateString('es-MX', opciones);
            document.getElementById("mesActual").textContent = mesActual.charAt(0).toUpperCase() + mesActual.slice(1);
        } else {
            document.getElementById("nombreProducto").textContent = "No disponible";
            document.getElementById("cantidadVendida").textContent = "0";
            document.getElementById("mesActual").textContent = "-";
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topProductsData !== 'undefined' && topProductsData.length > 0) {
            const productoTop = topProductsData[0];
            const existencias = parseInt(productoTop.existencias) || 0;
            const stockMin = parseInt(productoTop.stock_min) || 0;
            const stockMax = parseInt(productoTop.stock_max) || 0;

            let colorClass, iconClass, texto;

            if (existencias === 0) {
                colorClass = "btn-danger";
                iconClass = "bx bx-x";
                texto = "Agotado";
            } else if (existencias < stockMin) {
                colorClass = "btn-warning";
                iconClass = "bx bx-error";
                texto = "Stock bajo";
            } else if (existencias > stockMax && stockMax > 0) {
                colorClass = "btn-secondary";
                iconClass = "bx bx-error-circle";
                texto = "Stock alto";
            } else {
                colorClass = "btn-success";
                iconClass = "bx bx-check-circle";
                texto = "Stock adecuado";
            }

            const boton = document.getElementById("verEstadoStock");
            if (boton) {
                boton.classList.remove("btn-primary"); // quitar clase original
                boton.classList.add(colorClass); // aplicar clase según stock
                boton.innerHTML = `<i class="${iconClass} me-1"></i> ${texto}`;
            }
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topProductsData !== 'undefined' && topProductsData.length > 0) {
            const productoTop = topProductsData[0];

            let existencias = parseInt(productoTop.existencias) || 0;
            let stockMin = parseInt(productoTop.stock_min) || 0;
            let stockMax = parseInt(productoTop.stock_max) || 0;

            let colorClass, estadoTexto, sugerencia;

            if (existencias === 0) {
                colorClass = "btn-danger";
                estadoTexto = "¡Agotado!";
                sugerencia = "Revisar urgentemente para reabastecimiento.";
            } else if (existencias < stockMin) {
                colorClass = "btn-warning";
                estadoTexto = "Stock bajo";
                sugerencia = "Considera realizar un nuevo pedido.";
            } else if (existencias > stockMax && stockMax > 0) {
                colorClass = "btn-secondary";
                estadoTexto = "Stock alto";
                sugerencia = "Inventario excedido. Revisa rotación.";
            } else {
                colorClass = "btn-success";
                estadoTexto = "Stock adecuado";
                sugerencia = "No se requieren acciones inmediatas.";
            }

            // Cambiar color del botón y mostrar texto
            const viewBtn = document.getElementById("viewStockButton");
            viewBtn.classList.add(colorClass);

            // Evento al hacer clic
            viewBtn.addEventListener("click", function() {
                document.getElementById("modalNombreProducto").textContent = productoTop.nombre;
                document.getElementById("modalExistencias").textContent = existencias;
                document.getElementById("modalStockMin").textContent = stockMin;
                document.getElementById("modalStockMax").textContent = stockMax;

                const estadoSpan = document.getElementById("modalEstado");
                estadoSpan.textContent = estadoTexto;
                estadoSpan.className = "badge " + colorClass.replace("btn-", "bg-");

                document.getElementById("modalMensajeSugerencia").textContent = sugerencia;

                // Mostrar imagen del producto
                const imagenEl = document.getElementById("modalImagenProducto");
                imagenEl.src = productoTop.imagen;
                imagenEl.alt = "Imagen de " + productoTop.nombre;

                // Mostrar el modal
                const modal = new bootstrap.Modal(document.getElementById('stockModal'));
                modal.show();
            });
        }
    });
</script>
<!-- FIN SCRIPT TOP 10 PRODUCTOS -->







<!-- INICIO SCRIPT TOP 10 SERVICIOS -->
<script>
    function renderServicioList(data) {

        var listContainer = document.querySelector('#servicioList');
        listContainer.innerHTML = ''; // Limpiar contenido previo

        data.forEach((service, index) => {
            let colorClass, demandLabel, iconClass;

            // Determinar etiqueta y color según la posición en el ranking
            if (index < 3) {
                colorClass = "bg-label-success"; // Alta demanda 
                demandLabel = "Alta demanda";
                iconClass = "bx bx-trending-up"; // Ícono de tendencia
            } else if (index < 7) {
                colorClass = "bg-label-warning"; // Demanda moderada
                demandLabel = "Demanda moderada";
                iconClass = "bx bx-bar-chart-alt-2"; // Ícono de análisis
            } else {
                colorClass = "bg-label-danger"; // Baja demanda
                demandLabel = "Baja demanda";
                iconClass = "bx bx-trending-down"; // Ícono de caída
            }

            var listItem = `
        <li class="d-flex mb-4 pb-1">
            <div class="avatar flex-shrink-0 me-3">
                <span class="avatar-initial rounded ${colorClass}">
                    <i class="${iconClass}"></i>
                </span>
            </div>
            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                    <h6 class="mb-0">${service.nombre}</h6>
                    <small class="text-muted">${demandLabel}</small>
                </div>
                <div class="user-progress">
                    <small class="fw-semibold">${parseInt(service.cantidad).toLocaleString('es-ES')}</small>
                </div>
            </div>
        </li>`;

            listContainer.innerHTML += listItem;
        });
    }
    // Llamar a la función para renderizar la lista
    renderServicioList(topServicioData);
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topServicioData !== 'undefined' && topServicioData.length > 0) {
            const servicioTop = topServicioData[0];

            // Mostrar datos del servicio más contratado
            document.getElementById("nombreServicio").textContent = servicioTop.nombre;
            document.getElementById("cantidadContratada").textContent = parseInt(servicioTop.cantidad).toLocaleString('es-MX');

            // Mostrar el mes actual
            const fecha = new Date();
            const opciones = {
                month: 'long',
                year: 'numeric'
            };
            const mesActual = fecha.toLocaleDateString('es-MX', opciones);
            document.getElementById("mesActualServicio").textContent = mesActual.charAt(0).toUpperCase() + mesActual.slice(1);
        } else {
            document.getElementById("nombreServicio").textContent = "No disponible";
            document.getElementById("cantidadContratada").textContent = "0";
            document.getElementById("mesActualServicio").textContent = "-";
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topServicioData !== 'undefined' && topServicioData.length > 0) {
            const servicioTop = topServicioData[0]; // Servicio más vendido (primer servicio de la lista)
            const viewBtn = document.getElementById("viewServiceButton");

            let colorClass, demandaTexto, sugerencia;

            // Determinamos el color, la demanda y la sugerencia según el índice del servicio
            if (topServicioData.indexOf(servicioTop) < 3) { // Alta demanda
                colorClass = "btn-success";
                demandaTexto = "Alta demanda";
                sugerencia = "Considera promoverlo aún más."; // Sugerencia para alta demanda
            } else if (topServicioData.indexOf(servicioTop) < 7) { // Demanda moderada
                colorClass = "btn-warning";
                demandaTexto = "Demanda moderada";
                sugerencia = "Puede mejorar su promoción."; // Sugerencia para demanda moderada
            } else { // Baja demanda
                colorClass = "btn-danger";
                demandaTexto = "Baja demanda";
                sugerencia = "Evalúa si vale la pena mantenerlo."; // Sugerencia para baja demanda
            }


            // Configurar el evento de clic para abrir el modal
            if (viewBtn) {
                viewBtn.addEventListener("click", function() {
                    // Llenar los datos del modal
                    document.getElementById("modalNombreServicio").textContent = servicioTop.nombre || 'Sin nombre';
                    document.getElementById("modalVecesContratado").textContent = parseInt(servicioTop.cantidad || 0).toLocaleString('es-MX');

                    const demandaSpan = document.getElementById("modalDemanda");
                    demandaSpan.textContent = demandaTexto;
                    demandaSpan.className = "badge " + colorClass.replace("btn-", "bg-");

                    document.getElementById("modalDescripcionServicio").textContent = sugerencia || '';


                    document.getElementById("modalPrecioServicio").textContent = servicioTop.precio ?
                        `$${parseFloat(servicioTop.precio).toFixed(2)}` :
                        'No disponible';

                    document.getElementById("modalCategoriaServicio").textContent = servicioTop.categoria || 'Sin categoría';

                    const imagen = document.getElementById("modalImagenServicio");
                    imagen.src = servicioTop.imagen ? servicioTop.imagen : '/imagenes-productos/default.jpg';


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




<!-- FIN SCRIPT TOP 10 SERVICIOS -->

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("totalContrataciones").textContent = totalContrataciones.toLocaleString('es-ES');
    });
</script>












<!-- INICIO SCRIPT TOP 10 CLIENTES -->
<script>
    function renderClienteList(data) {
        var listContainer = document.querySelector('#clienteList');
        listContainer.innerHTML = ''; // Limpiar contenido previo

        data.forEach((client, index) => {
            let colorClass, purchaseLabel, iconClass;

            if (index < 3) {
                colorClass = "bg-label-warning"; // Clientes estrella
                purchaseLabel = "Clientes estrella";
                iconClass = "bx bx-trophy"; // Ícono de trofeo
            } else if (index < 7) {
                colorClass = "bg-label-success"; // Clientes frecuentes
                purchaseLabel = "Clientes frecuentes";
                iconClass = "bx bx-chart"; // Ícono de gráfico
            } else {
                colorClass = "bg-label-info"; // Clientes esporádicos
                purchaseLabel = "Clientes esporádicos";
                iconClass = "bx bx-time"; // Ícono de reloj
            }


            var listItem = `
        <li class="d-flex mb-4 pb-1">
            <div class="avatar flex-shrink-0 me-3">
                <span class="avatar-initial rounded ${colorClass}">
                    <i class="${iconClass}"></i>
                </span>
            </div>
            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                    <h6 class="mb-0">${client.nombre}</h6>
                    <small class="text-muted">${purchaseLabel}</small>
                </div>
                <div class="user-progress">
                    <small class="fw-semibold">${parseFloat(client.totalVenta).toLocaleString('es-ES')}</small>
                </div>
            </div>
        </li>`;

            listContainer.innerHTML += listItem;
        });
    }
    // Llamar a la función para renderizar la lista
    renderClienteList(topClienteData);
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topClienteData !== 'undefined' && topClienteData.length > 0) {
            const clienteTop = topClienteData[0];

            // Asignar nombre y total
            document.getElementById("nombreClienteTop").textContent = clienteTop.nombre;
            document.getElementById("montoComprado").textContent = parseFloat(clienteTop.totalVenta).toLocaleString('es-MX', {
                style: 'decimal',
                minimumFractionDigits: 2
            });

            // Mostrar periodo personalizado
            document.getElementById("periodoCliente").textContent = "Enero - Marzo 2025";
        } else {
            document.getElementById("nombreClienteTop").textContent = "No disponible";
            document.getElementById("montoComprado").textContent = "0.00";
        }
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topClienteData !== 'undefined' && topClienteData.length > 0) {
            const cliente = topClienteData[0]; // Tomamos el cliente número 1

            // Botón para ver cliente
            const viewClienteBtn = document.getElementById("viewClienteButton");


            // Evento de clic
            viewClienteBtn.addEventListener("click", function() {
                document.getElementById("modalNombreCliente").textContent = cliente.nombre;
                document.getElementById("modalRfcCliente").textContent = cliente.rfc || "No disponible";
                document.getElementById("modalTotalCompradoCliente").textContent = `$${parseFloat(cliente.totalVenta).toLocaleString('es-MX')}`;
                document.getElementById("modalDiasComprasCliente").textContent = "No disponible";
                document.getElementById("modalDireccionCliente").textContent = "No disponible";
                document.getElementById("modalMensajeCliente").textContent = "Cliente destacado por su volumen de compras este mes.";

                const imagenCliente = document.getElementById("modalImagenCliente");
                imagenCliente.src = "../assets/img/illustrations/cliente.svg";
                imagenCliente.alt = "Imagen de " + cliente.nombre;

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


<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("totalCompras").textContent = totalCompras.toLocaleString('es-ES');
    });
</script>




<!-- FIN SCRIPT TOP 10 CLIENTES -->



<!-- INICIO SCRIPT TOP 10 VENDEDORES -->
<script>
    function renderVendedorList(data) {
        var listContainer = document.querySelector('#vendedorList');
        listContainer.innerHTML = ''; // Limpiar contenido previo

        data.forEach((seller, index) => {
            let colorClass, salesLabel, iconClass;

            if (index < 3) {
                colorClass = "bg-label-warning"; // Vendedores estrella
                salesLabel = "Vendedor estrella";
                iconClass = "bx bx-medal"; // Ícono de medalla
            } else if (index < 7) {
                colorClass = "bg-label-success"; // Vendedores con buen desempeño
                salesLabel = "Buen desempeño";
                iconClass = "bx bx-line-chart"; // Ícono de gráfico de línea
            } else {
                colorClass = "bg-label-info"; // Vendedores en crecimiento
                salesLabel = "En crecimiento";
                iconClass = "bx bx-user-check"; // Ícono de usuario con check
            }

            var listItem = `
        <li class="d-flex mb-4 pb-1">
            <div class="avatar flex-shrink-0 me-3">
                <span class="avatar-initial rounded ${colorClass}">
                    <i class="${iconClass}"></i>
                </span>
            </div>
            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                    <h6 class="mb-0">${seller.nombre}</h6>
                    <small class="text-muted">${salesLabel}</small>
                </div>
                <div class="user-progress">
                    <small class="fw-semibold">${parseFloat(seller.totalVenta).toLocaleString('es-ES')}</small>
                </div>
            </div>
        </li>`;

            listContainer.innerHTML += listItem;
        });
    }

    // Convertir datos de PHP a JSON en JavaScript
    var topVendedorData = <?php echo $topAgentsData; ?>;
    const topVendedores = <?php echo $topAgentsData ?? '[]'; ?>;


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






<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("totalVentas").textContent = totalVentas.toLocaleString('es-ES');
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof topVendedores !== 'undefined' && Array.isArray(topVendedores) && topVendedores.length > 0) {
            const mejorVendedor = topVendedores[0];

            document.getElementById("nombreTopVendedor").textContent = mejorVendedor.nombre || "Sin nombre";
            document.getElementById("ventasTopVendedor").textContent = parseFloat(mejorVendedor.totalVenta || 0).toLocaleString('es-MX', {
                style: 'decimal',
                minimumFractionDigits: 2
            });
        } else {
            document.getElementById("nombreTopVendedor").textContent = "No disponible";
            document.getElementById("ventasTopVendedor").textContent = "0.00";
        }
    });
</script>
<!-- FIN SCRIPT TOP 10 VENDEDORES -->





























































<!-- SCRIPT PARA BOTON "EXPORTAR" -->
<script>
    document.getElementById("exportBtn").addEventListener("click", function() {
        var menu = document.getElementById("exportMenu");
        menu.style.display = menu.style.display === "block" ? "none" : "block";
    });
    window.onclick = function(event) {
        if (!event.target.matches('.export-button')) {
            var dropdowns = document.getElementsByClassName("export-menu");
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.style.display === "block") {
                    openDropdown.style.display = "none";
                }
            }
        }
    };
</script>

<!-- SCRIPT PARA  "IMPRIMIR" -->
<script>
    $('#printOption').click(function() {
        const nombreEmpresa = 'Empresa Inválida S.A. de C.V.';
        const logoSrc = 'img/siigo-aspel.svg';
        const printWindow = window.open('', '', 'height=600,width=800');

        // Clonar el encabezado de la tabla principal
        const tableHeader = document.querySelector('#clientesTable thead').cloneNode(true);

        // Buscar la columna "Acción" y eliminarla tanto del encabezado como de las filas
        const actionIndex = Array.from(tableHeader.querySelectorAll('th')).findIndex(th => th.innerText.trim() === 'Acción');
        if (actionIndex >= 0) {
            tableHeader.querySelectorAll('th')[actionIndex].remove();
        }

        const addPageHeader = () => {
            return `
                <div class="page-header" style="text-align: center; page-break-before: always;">
                    <img src="${logoSrc}" alt="Logo" class="logo" style="max-width: 280px; margin-bottom: 18px;">
                    <h1 style="font-size: 24px; font-weight: bold; margin-top: 40px;">${nombreEmpresa}</h1>
                    <h2 style="font-size: 20px; font-weight: normal; margin-bottom: 20px;">Facturas</h2>
                </div>
                
            `;
        };

        // Crear el contenido HTML para la impresión
        let printContent = '<html><head><title>Imprimir</title>';
        printContent += '<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">';
        printContent += '<style>';
        printContent += 'body { text-align: center; margin: 20px; }';
        printContent += 'h1 { font-size: 24px; font-weight: bold; margin-top: 40px; }';
        printContent += 'h2 { font-size: 20px; font-weight: normal; margin-bottom: 20px; }';
        printContent += 'img.logo { max-width: 280px; margin-bottom: 18px; }';
        printContent += 'table { width: 100%; border-collapse: collapse; }';
        printContent += 'th, td { padding: 8px; text-align: left; border: none; }';
        printContent += 'th { background-color: #f8f9fa; }';
        printContent += '.col-partida { width: 10%; }';
        printContent += '.col-cantidad { width: 10%; }';
        printContent += '.col-clave { width: 15%; }';
        printContent += '.col-precio { width: 15%; }';
        printContent += '.col-subtotal { width: 15%; }';
        printContent += '.col-observaciones { width: 25%; word-wrap: break-word; }';
        printContent += '.page-header { page-break-before: always; }';
        printContent += '</style>';
        printContent += '</head><body>';

        // Generar el contenido para cada fila expandida o todas las filas si no hay filas expandidas
        const expandedRows = $('#clientesTable tbody').find('i.toggle-detalles.down').closest('tr');

        if (expandedRows.length > 0) {
            expandedRows.each(function() {
                // Añadir encabezado antes de cada partida expandida para asegurarlo en cada página
                printContent += addPageHeader();

                // Generar la tabla con la fila expandida
                printContent += '<table class="table table-hover">';
                printContent += '<thead>' + tableHeader.innerHTML + '</thead><tbody>';

                // Clonar y eliminar la columna "Acción"
                const expandedRow = $(this).clone()[0];
                expandedRow.querySelectorAll('td')[actionIndex]?.remove();
                printContent += '<tr>' + expandedRow.innerHTML + '</tr>';

                // Clonar y añadir la fila de detalles
                const detalleRow = $(this).next('tr').clone()[0];
                if (detalleRow) {
                    detalleRow.querySelectorAll('td')[actionIndex]?.remove();
                    printContent += '<tr>' + detalleRow.innerHTML + '</tr>';
                }

                printContent += '</tbody></table>';
            });
        } else {
            // Si no hay filas expandidas, imprimimos todas las partidas con encabezado en la primera página
            printContent += addPageHeader();
            printContent += '<table class="table table-hover">';
            printContent += '<thead>' + tableHeader.innerHTML + '</thead><tbody>';

            $('#clientesTable tbody tr').each(function() {
                const row = $(this).clone()[0];
                row.querySelectorAll('td')[actionIndex]?.remove();
                printContent += '<tr>' + row.innerHTML + '</tr>';
            });

            printContent += '</tbody></table>';
        }

        printContent += '</body></html>';

        // Escribir el contenido en la ventana de impresión
        printWindow.document.write(printContent);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
    });
</script>


<!-- SCRIPT PARA EXCEL -->
<script>
    $(document).ready(function() {
        $('#excelOption').click(async function() {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Facturas');
            const nombreEmpresa = 'Empresa Inválida S.A. de C.V.';

            // Encabezados para la parte superior
            const headersDocumento = ['Tipo', 'Clave', 'Cliente', 'Nombre', 'Estatus', 'Fecha', 'Total'];
            const headersPartida = ['Partida', 'Cantidad', 'Clave', 'Prec. Unit', 'Subtotal', 'Observaciones'];

            // Buscar todas las filas que están expandidas
            let expandedRows = $('#clientesTable tbody').find('i.toggle-detalles.down').closest('tr');

            // Si no hay filas expandidas, selecciona todas las filas de la tabla
            if (expandedRows.length === 0) {
                expandedRows = $('#clientesTable tbody tr');
            }

            // Agregar el nombre de la empresa y título
            worksheet.mergeCells('A1:G1');
            worksheet.getCell('A1').value = nombreEmpresa;
            worksheet.getCell('A1').font = {
                bold: true,
                size: 14
            };
            worksheet.getCell('A1').alignment = {
                horizontal: 'center'
            };

            worksheet.mergeCells('A2:G2');
            worksheet.getCell('A2').value = 'Detalle de Facturas';
            worksheet.getCell('A2').font = {
                bold: true,
                size: 12
            };
            worksheet.getCell('A2').alignment = {
                horizontal: 'center'
            };

            expandedRows.each(function(index, row) {
                // Obtener los datos generales del documento
                const datosDocumento = Array.from($(row).find('td')).slice(0, 7).map(td => $(td).text().trim());

                // Añadir encabezados de documento
                const headerRowDoc = worksheet.addRow(headersDocumento);
                headerRowDoc.font = {
                    bold: true
                };
                headerRowDoc.eachCell((cell) => {
                    cell.fill = {
                        type: 'pattern',
                        pattern: 'solid',
                        fgColor: {
                            argb: '009DFF'
                        }
                    };
                    cell.font = {
                        color: {
                            argb: 'FFFFFF'
                        },
                        bold: true
                    };
                    cell.alignment = {
                        horizontal: 'center'
                    };
                });

                // Añadir datos generales del documento
                worksheet.addRow(datosDocumento);

                // Obtener los detalles de la partida
                const detallesPartidaRow = $(row).next();
                const detallesPartida = [];

                // Recopilar los datos de las partidas
                detallesPartidaRow.find('tr').each(function() {
                    const fila = [];
                    $(this).find('td').each(function() {
                        fila.push($(this).text().trim());
                    });
                    detallesPartida.push(fila);
                });

                // Añadir encabezados de la partida
                if (detallesPartida.length > 0) {
                    const partidaHeaderRow = worksheet.addRow(headersPartida);
                    partidaHeaderRow.font = {
                        bold: true
                    };
                    partidaHeaderRow.eachCell((cell) => {
                        cell.fill = {
                            type: 'pattern',
                            pattern: 'solid',
                            fgColor: {
                                argb: '007ecc'
                            }
                        };
                        cell.font = {
                            color: {
                                argb: 'FFFFFF'
                            },
                            bold: true
                        };
                        cell.alignment = {
                            horizontal: 'center'
                        };
                    });

                    // Añadir datos de cada partida inmediatamente después de los encabezados
                    detallesPartida.forEach(partidaData => {
                        if (partidaData.some(data => data !== "")) { // Evitar filas completamente vacías
                            worksheet.addRow(partidaData);
                        }
                    });
                }
            });

            // Ajustar el ancho para las columnas de encabezados de las partidas
            headersPartida.forEach((header, index) => {
                const colIndex = index + 1; // Ajusta a partir de la columna 1 para las partidas
                worksheet.getColumn(colIndex).width = header.length + 2; // +2 para un poco de espacio adicional
            });

            // Descargar el archivo de Excel
            const buffer = await workbook.xlsx.writeBuffer();
            const blob = new Blob([buffer], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'facturas.xlsx';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    });
</script>

<!-- SCRIPT PARA PDF -->
<script>
    $(document).ready(function() {
        $('#pdfOption').click(async function() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF();
            const nombreEmpresa = 'Empresa Inválida S.A. de C.V.';

            // Ruta del logo SVG
            const svgPath = 'img/siigo-aspel.svg';

            // Función para cargar y convertir el SVG a base64 en formato PNG
            async function convertSvgToBase64(url) {
                return new Promise((resolve) => {
                    fetch(url)
                        .then(response => response.text())
                        .then(svgText => {
                            const svg = new Blob([svgText], {
                                type: 'image/svg+xml;charset=utf-8'
                            });
                            const DOMURL = window.URL || window.webkitURL || window;
                            const url = DOMURL.createObjectURL(svg);
                            const img = new Image();
                            img.onload = function() {
                                const canvas = document.createElement('canvas');
                                canvas.width = img.width;
                                canvas.height = img.height;
                                const ctx = canvas.getContext('2d');
                                ctx.drawImage(img, 0, 0);
                                DOMURL.revokeObjectURL(url);
                                resolve(canvas.toDataURL('image/png'));
                            };
                            img.src = url;
                        });
                });
            }

            // Convertir el SVG a base64
            const logoBase64 = await convertSvgToBase64(svgPath);

            // Encabezados para la parte superior
            const headersDocumento = ['Tipo', 'Clave', 'Cliente', 'Nombre', 'Estatus', 'Fecha', 'Total'];
            // Encabezados para los detalles de la partida
            const headersPartida = ['Partida', 'Cantidad', 'Clave', 'Prec. Unit', 'Subtotal', 'Observaciones'];

            // Buscar todas las filas que están expandidas
            let expandedRows = $('#clientesTable tbody').find('i.toggle-detalles.down').closest('tr');

            if (expandedRows.length === 0) {
                // Si no hay partidas seleccionadas, exportar toda la tabla en un formato general
                const headers = Array.from($('#clientesTable thead th')).map(th => $(th).text().trim()).filter(h => h !== 'Acción');
                const rows = Array.from($('#clientesTable tbody tr')).map(row =>
                    Array.from($(row).find('td')).map(td => $(td).text().trim())
                );

                // Insertar el logo en la parte superior
                doc.addImage(logoBase64, 'PNG', 15, 10, 30, 18); // Tamaño más pequeño

                // Título de la empresa y encabezados generales
                doc.setFontSize(12); // Tamaño de fuente reducido
                doc.text(nombreEmpresa, 105, 20, {
                    align: 'center'
                });
                doc.setFontSize(10); // Tamaño de fuente reducido
                doc.text('Resumen de Facturas', 105, 30, {
                    align: 'center'
                });

                // Tabla general
                doc.autoTable({
                    startY: 40,
                    head: [headers],
                    body: rows,
                    headStyles: {
                        fillColor: '#009DFF',
                        textColor: '#FFFFFF',
                        halign: 'center'
                    },
                    bodyStyles: {
                        halign: 'center'
                    },
                    styles: {
                        fontSize: 8,
                        cellPadding: 2
                    }, // Tamaño de fuente y padding reducidos
                    theme: 'striped'
                });
            } else {
                // Si hay partidas seleccionadas, usar el diseño de partidas detalladas
                expandedRows.each(function(index, row) {
                    if (index > 0) {
                        doc.addPage(); // Crear nueva página para cada partida expandida
                    }

                    // Obtener los datos generales del documento de esa partida
                    const datosDocumento = Array.from($(row).find('td')).slice(0, 7).map(td => $(td).text().trim());

                    // Obtener los detalles de la partida expandida (asumiendo que están en la fila siguiente)
                    const detallesPartidaRow = $(row).next();
                    const detallesPartida = [];

                    // Construir la fila de detalles de la partida en un formato adecuado
                    detallesPartidaRow.find('tr').each(function() {
                        const fila = [];
                        $(this).find('td').each(function() {
                            fila.push($(this).text().trim());
                        });
                        detallesPartida.push(fila); // Añadir cada fila como un array separado en `detallesPartida`
                    });

                    // Insertar el logo en la parte superior
                    doc.addImage(logoBase64, 'PNG', 15, 10, 30, 18); // Tamaño más pequeño

                    // Título de la empresa y encabezados generales
                    doc.setFontSize(12); // Tamaño de fuente reducido
                    doc.text(nombreEmpresa, 105, 20, {
                        align: 'center'
                    });
                    doc.setFontSize(10); // Tamaño de fuente reducido
                    doc.text('Detalle de Facturas', 105, 30, {
                        align: 'center'
                    });

                    // Tabla de datos generales del documento
                    doc.autoTable({
                        startY: 40,
                        head: [headersDocumento],
                        body: [datosDocumento],
                        headStyles: {
                            fillColor: '#009DFF',
                            textColor: '#FFFFFF',
                            halign: 'center'
                        },
                        bodyStyles: {
                            halign: 'center'
                        },
                        styles: {
                            fontSize: 8,
                            cellPadding: 2
                        }, // Tamaño de fuente y padding reducidos
                        theme: 'plain'
                    });

                    // Espacio entre tablas
                    const tableY = doc.lastAutoTable.finalY + 5; // Espacio reducido

                    // Tabla de detalles de la partida
                    doc.autoTable({
                        startY: tableY,
                        head: [headersPartida],
                        body: detallesPartida,
                        headStyles: {
                            fillColor: '#009DFF',
                            textColor: '#FFFFFF',
                            halign: 'center'
                        },
                        bodyStyles: {
                            halign: 'center'
                        },
                        styles: {
                            fontSize: 8,
                            cellPadding: 2
                        }, // Tamaño de fuente y padding reducidos
                        theme: 'plain',
                    });
                });
            }

            // Descargar el PDF
            doc.save('facturas.pdf');
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#copyOption').click(function() {
            let textToCopy = "";
            const table = document.getElementById('clientesTable');

            // Obtener los encabezados de la tabla (solo una vez)
            const headerCells = table.querySelectorAll('thead th');
            const headers = Array.from(headerCells).slice(0, -1).map(cell => cell.innerText).join("\t");
            textToCopy = headers + "\n"; // Agregar encabezados al inicio solo una vez

            // Recorrer todas las filas del tbody, asegurando que no se dupliquen
            $('#clientesTable tbody tr').each(function() {
                const row = $(this);
                const cells = row.find('td, th');

                // Verificar si la fila es de detalle (expandida)
                if (row.hasClass('detalle')) {
                    // Solo copiar si la fila de detalle está visible
                    if (row.css('display') !== 'none') {
                        // Copiar los datos de la fila de detalle
                        const detailText = Array.from(cells).map(cell => cell.innerText).join("\t");
                        textToCopy += detailText + "\n"; // Agregar detalle al texto
                    }
                } else {
                    // Si es una fila principal (partida), copiarla
                    const rowText = Array.from(cells).slice(0, -1).map(cell => cell.innerText).join("\t");
                    textToCopy += rowText + "\n"; // Agregar la fila principal al texto
                }
            });

            // Copiar el texto al portapapeles
            navigator.clipboard.writeText(textToCopy).then(() => {
                $('#copyAlert').fadeIn().css('display', 'flex');
                setTimeout(function() {
                    $('#copyAlert').fadeOut();
                }, 3000);
            }).catch(err => {
                console.error('Error al copiar: ', err);
            });
        });
    });
</script>




</html>