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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Productos</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>
    <style>
        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

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

        .toggle-detalles {
            transition: transform 0.4s ease;
        }

        .toggle-detalles.down {
            transform: rotate(90deg);
        }

        #clientesTable .fas {
            color: #007ecc;
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #007ecc;
            border-radius: .8rem .8rem 0 0;
        }

        #productImage .img-fluid {
            display: flex;
            align-items: center;
        }

        .modal-title {
            font-weight: 800;
            color: #fff;
        }

        .modal-content {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            width: 100%;
            pointer-events: auto;
            background-color: #fff;
            background-clip: padding-box;
            /* border: 3px solid rgba(0, 157, 255); */
            border-radius: .8rem;
            outline: 0;
        }

        .close {
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: 100;
        }

        .container {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .content {
            /* display: flex; */
            justify-content: center;
            overflow-x: hidden;
        }


        .table td,
        .table th {
            padding: .75rem;
            vertical-align: middle;
            border-top: 1px solid #dee2e6;
        }

        /* Para centrar horizontalmente el texto e imágenes en todas las celdas */
        table.text-center th,
        table.text-center td {
            text-align: center;
            vertical-align: middle;
        }

        /* Ajusta el tamaño de las imágenes */
        .product-image {
            width: 50px;
            height: auto;
        }


        /* Ancho personalizado para el modal de SweetAlert2 */
        .swal-custom-modal {
            max-width: 1200px;
            /* Ajusta este valor según el ancho deseado */
        }

        /* Estilos personalizados para el botón de cierre */
        .swal2-confirm.swal-close-btn {
            background-color: #009DFF !important;
            color: #fff !important;
            border: none !important;
            padding: 10px 20px !important;
            font-size: 16px !important;
            box-shadow: none !important;
            /* Quita cualquier sombra adicional */
            outline: none !important;
            /* Asegura que no aparezca borde negro */
            border-radius: 5px !important;
        }

        .swal2-confirm.swal-close-btn:hover {
            background-color: #007ecc !important;
            color: #fff !important;
            border: none !important;
        }

        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-right: 3px;
            /* padding-bottom: 20px; */
            padding-top: 15px;
        }

        .btn-reset-filter {
            border: 2px solid #007ecc;
            background-color: #007ecc;
            color: #ffffff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            width: 183px;
        }

        /* Excluir la transición y animación para el botón de borrar filtros */
        .btn-reset-filter:hover {
            border: 2px solid #005fa3;
            background-color: #005fa3;
            color: #ffffff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            width: 183px;
            transform: none;
            transition: none;
        }

        .swal-custom-modal {
            z-index: 1050 !important;
            /* Asegura que el modal esté al frente */
        }

        .navbar {
            z-index: 1000 !important;
            /* Baja la barra de búsqueda detrás del modal */
        }

        .navbar-nav {
            position: relative !important;
            z-index: 1 !important;
        }

        .swal2-container {
            z-index: 2000 !important;
            /* Asegura que el fondo oscuro cubra todo */
        }

        .swal2-popup {
            z-index: 2050 !important;
            /* Mantiene el modal por encima del overlay */
        }

        .layout-menu {
            z-index: 1000 !important;
            /* Asegura que el menú quede detrás */
        }
    </style>
</head>

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

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

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

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

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

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

                    <!-- Layouts -->
                    <li class="menu-item ">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-layout"></i>
                            <div data-i18n="Layouts">Inicio</div>
                        </a>

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

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

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

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Aspel SAE</span>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-line-chart"></i>
                            <div data-i18n="Account Settings">Ventas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="facturas.php" class="menu-link">
                                    <div data-i18n="Account">Facturas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdeventa.php" class="menu-link">
                                    <div data-i18n="Notifications">Notas de Venta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="trasladoscartaporte.php" class="menu-link">
                                    <div data-i18n="Connections">Carta Porte</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="remisiones.php" class="menu-link">
                                    <div data-i18n="Connections">Remisiones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="pedidos.php" class="menu-link">
                                    <div data-i18n="Connections">Pedidos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cotizaciones.php" class="menu-link">
                                    <div data-i18n="Connections">Cotizaciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devoluciones.php" class="menu-link">
                                    <div data-i18n="Connections">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdecredito.php" class="menu-link">
                                    <div data-i18n="Connections">Notas de Crédito</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="parcialidades.php" class="menu-link">
                                    <div data-i18n="Connections">Parcialidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="comprobantesdepago.php" class="menu-link">
                                    <div data-i18n="Connections">Comprobantes</div>
                                </a>
                            <li class="menu-item">
                                <a href="estadisticas.php" class="menu-link">
                                    <div data-i18n="Connections">Estadisticas</div>
                                </a>
                            </li>
                        </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>
                            <li class="menu-item">
                                <a href="estadisticascli.php" class="menu-link">
                                    <div data-i18n="Statistics">Estadísticas</div>
                                </a>
                            </li>


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

                            <li class="menu-item">
                                <a href="clientesistemas.php" class="menu-link">
                                    <div data-i18n="ClientSystems">Clientes Sistemas</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item active open">
                        <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 active">
                                <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 navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
                    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                        <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                        </a>
                    </div>

                    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                        <!-- Search -->
                        <div class="navbar-nav align-items-center">
                            <div class="nav-item d-flex align-items-center">
                                <i class="bx bx-search fs-4 lh-0"></i>
                                <input
                                    type="text"
                                    class="form-control border-0 shadow-none"
                                    placeholder="Search..."
                                    aria-label="Search..." />
                            </div>
                        </div>
                        <!-- /Search -->

                        <ul class="navbar-nav flex-row align-items-center ms-auto">
                            <!-- Place this tag where you want the button to render. -->
                            <li class="nav-item lh-1 me-3">
                                <a
                                    class="github-button"
                                    href="https://github.com/themeselection/sneat-html-admin-template-free"
                                    data-icon="octicon-star"
                                    data-size="large"
                                    data-show-count="true"
                                    aria-label="Star themeselection/sneat-html-admin-template-free on GitHub">Star</a>
                            </li>

                            <!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <div class="avatar avatar-online">
                                        <img src="../assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar avatar-online">
                                                        <img src="../assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <span class="fw-semibold d-block">John Doe</span>
                                                    <small class="text-muted">Admin</small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>



                                    <li>
                                        <a class="dropdown-item" href="auth-login-basic.html">
                                            <i class="bx bx-power-off me-2"></i>
                                            <span class="align-middle">Cerrar Sesión</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!--/ User -->
                        </ul>
                    </div>
                </nav>
                <!-- / Navbar -->
                <?php
                session_start();
                $host = 'localhost';
                $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
                $username = 'SYSDBA';
                $password = 'masterkey';

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

                    // Los tipos de elementos a contar
                    $tipo_ele = ['P' => 'productos', 'K' => 'kits', 'G' => 'grupos', 'S' => 'servicios'];
                    $counts = [];

                    // Realizamos el conteo de cada tipo de elemento
                    foreach ($tipo_ele as $code => $name) {
                        // Consulta para contar el número de registros por tipo de elemento
                        $stmt = $dbh->prepare("SELECT COUNT(*) FROM INVE01 WHERE TRIM(UPPER(TIPO_ELE)) = :tipo_ele");
                        $stmt->bindParam(':tipo_ele', $code, PDO::PARAM_STR);
                        $stmt->execute();

                        // Guardamos el conteo de cada tipo de elemento en el array $counts
                        $counts[$name] = $stmt->fetchColumn(); // Almacenamos el conteo
                    }
                } catch (PDOException $e) {
                    echo "<div class='container mt-5'><h2>Error de Conexión:</h2>";
                    echo "<p>" . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "</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>Productos</small>
                                                        <h4><?php echo $counts['productos']; ?></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>Kits</small>
                                                        <h4><?php echo $counts['kits']; ?></h4>
                                                    </div>
                                                    <span class="badge bg-label-primary 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>Grupos</small>
                                                        <h4><?php echo $counts['grupos']; ?></h4>
                                                    </div>
                                                    <span class="badge bg-label-primary 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="1s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">
                                                        <small>Servicios</small>
                                                        <h4><?php echo $counts['servicios']; ?></h4>
                                                    </div>
                                                    <span class="badge bg-label-primary rounded-circle p-2">
                                                        <i class="icon-base bx bx-task icon-lg"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- </div>
                    <div class="row"> -->
                                </div>
                            </div>
                        </div>

                        <!-- Basic Bootstrap Table -->
                        <div class="card wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                            <h5 class="card-header pb-0">Productos</h5>
                            <div class="card-datatable">

                            </div>
                            <div class="table-responsive text-nowrap"></div>


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

                            // Obtenemos el filtro actual desde los parámetros GET
                            $filtro = isset($_GET['filtro']) ? $_GET['filtro'] : '';

                            try {
                                // Crear la conexión PDO
                                $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                                // Construimos la consulta SQL con filtro si existe
                                $sql = "SELECT INVE01.CVE_ART, INVE01.DESCR, INVE01.UNI_MED, INVE01.STOCK_MIN, INVE01.STOCK_MAX, 
                   INVE01.EXIST, INVE01.LIN_PROD, MAX(PRECIO_X_PROD01.PRECIO) AS PRECIO
            FROM INVE01
            LEFT JOIN PRECIO_X_PROD01 ON INVE01.CVE_ART = PRECIO_X_PROD01.CVE_ART
            WHERE INVE01.CVE_ART IS NOT NULL ";  // Filtrar los registros con CVE_ART NULL

                                // Si hay filtro, lo agregamos
                                if ($filtro) {
                                    $sql .= " AND INVE01.TIPO_ELE = :filtro";
                                }

                                // Agrupamos por clave de producto para evitar duplicados
                                $sql .= " GROUP BY INVE01.CVE_ART, INVE01.DESCR, INVE01.UNI_MED, INVE01.STOCK_MIN, 
                     INVE01.STOCK_MAX, INVE01.EXIST, INVE01.LIN_PROD";

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

                                // Vinculamos el filtro si existe
                                if ($filtro) {
                                    $stmt->bindParam(':filtro', $filtro, PDO::PARAM_STR);
                                }

                                // Ejecutamos la consulta
                                $stmt->execute();

                                echo "<div class='container mt-5'>";
                                echo "<h1 class='mb-4'><strong>Productos y Servicios</strong></h1>";

                                echo "<div class='row mb-3'>"; // Fila principal

                                // Columna 1: Botones de filtrado
                                echo "<div class='col-sm-12 col-md-9'>";
                                echo "<div class='btn-group' role='group' aria-label='Filtros'>";

                                // Activación de botones de filtro
                                $activeProduct = ($filtro == 'P') ? 'active' : '';
                                $activeKit = ($filtro == 'K') ? 'active' : '';
                                $activeGroup = ($filtro == 'G') ? 'active' : '';
                                $activeService = ($filtro == 'S') ? 'active' : '';

                                echo "<button class='btn custom-filter $activeProduct' onclick=\"location.href='?filtro=P'\">Productos</button>";
                                echo "<button class='btn custom-filter $activeKit' onclick=\"location.href='?filtro=K'\">Kits</button>";
                                echo "<button class='btn custom-filter $activeGroup' onclick=\"location.href='?filtro=G'\">Grupos</button>";
                                echo "<button class='btn custom-filter $activeService' onclick=\"location.href='?filtro=S'\">Servicios</button>";

                                echo "</div></div>";

                                // Botón para borrar filtros
                                echo "<div class='col-sm-12 col-md-3 text-md-right text-sm-left'>";
                                echo "<a href='?' class='btn btn-reset-filter'>Borrar Filtros</a>";
                                echo "</div>";

                                echo "</div>"; // Cierre de la fila principal

                                // Tabla con los resultados
                                echo "<div class='table-responsive'>";
                                echo "<table id='clientesTable' class='table table-hover'>";
                                echo "<thead class='thead-dark'><tr>
            <th>Clave</th>
            <th>Descripción</th>
            <th>Unidad</th>
            <th>Linea</th>
            <th class='num'>Stock Min</th>
            <th>Stock Max</th>
            <th>Existencias</th>
            <th>Precio</th>
            <th>Imagen</th>
          </tr></thead><tbody>";

                                // Mostrar los resultados de la consulta
                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                    echo "<tr>";
                                    echo "<td>" . htmlspecialchars($row['CVE_ART']) . "</td>";
                                    echo "<td>" . htmlspecialchars($row['DESCR']) . "</td>";
                                    echo "<td>" . htmlspecialchars($row['UNI_MED']) . "</td>";
                                    echo "<td>" . htmlspecialchars($row['LIN_PROD']) . "</td>";
                                    echo "<td>" . htmlspecialchars($row['STOCK_MIN']) . "</td>";
                                    echo "<td>" . htmlspecialchars($row['STOCK_MAX']) . "</td>";
                                    echo "<td class='num'>" . htmlspecialchars($row['EXIST']) . "</td>";

                                    // Mostrar el precio, formateado
                                    $precio = isset($row['PRECIO']) ? number_format($row['PRECIO'], 2) : 'No disponible';
                                    echo "<td>" . $precio . "</td>";

                                    // Mostrar la imagen solo si existe
                                    echo "<td><a href='#' data-toggle='modal' data-target='#imageModal' data-image='/imagenes-productos/" . htmlspecialchars($row['CVE_ART']) . ".jpg' data-cve_art='" . htmlspecialchars($row['CVE_ART']) . "'>
                <img src='/imagenes-productos/" . htmlspecialchars($row['CVE_ART']) . ".jpg' alt='Imagen del Producto' style='width: 50px; height: 50px; cursor: pointer;'>
              </a></td>";
                                    echo "</tr>";
                                }

                                echo "</tbody></table>";
                                echo "</div>";
                                echo "</div>";
                            } catch (PDOException $e) {
                                echo "<div class='container mt-5'><h2>AUN NO HAY CONEXION:</h2>";
                                echo "<p>" . htmlspecialchars($e->getMessage()) . "</p></div>";
                            }
                            ?>


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



                        <div class="content-backdrop fade"></div>
                    </div>
                    <!-- Content wrapper -->
                </div>


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

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

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

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

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

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

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

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

            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    // Función para manejar el clic en los botones
                    const handleButtonClick = (button) => {
                        // Quitar la clase activa de todos los botones
                        document.querySelectorAll('.custom-filter').forEach(btn => {
                            btn.style.borderColor = '';
                            btn.style.backgroundColor = '';
                            btn.style.color = '';
                        });

                        // Aplicar estilos al botón presionado
                        button.style.borderColor = '#009DFF';
                        button.style.backgroundColor = '#009DFF';
                        button.style.color = '#fff';
                    };

                    // Asignar el evento click a todos los botones
                    document.querySelectorAll('.custom-filter').forEach(button => {
                        button.addEventListener('click', function() {
                            handleButtonClick(this);
                        });
                    });
                });
            </script>
</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://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-material-ui/material-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.querySelectorAll('.filter-btn').forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.getAttribute('data-filter'); // Obtiene el valor del filtro
            const rows = document.querySelectorAll('#clientesTable tbody tr'); // Selecciona todas las filas de la tabla

            rows.forEach(row => {
                if (filter === 'all') {
                    row.style.display = ''; // Mostrar todas las filas
                } else if (row.classList.contains(filter)) {
                    row.style.display = ''; // Mostrar solo filas que tienen la clase correspondiente
                } else {
                    row.style.display = 'none'; // Ocultar filas que no coinciden
                }
            });

            // Actualizar la clase activa de los botones
            document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('btn-primary'));
            this.classList.add('btn-primary');
        });
    });

    // Botón "Borrar Filtro"
    document.querySelector('.reset-filter-btn').addEventListener('click', function() {
        const rows = document.querySelectorAll('#clientesTable tbody tr');
        rows.forEach(row => row.style.display = ''); // Mostrar todas las filas
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('btn-primary'));
    });
</script>


<script>
    $(document).ready(function() {
        // Definición de tipos personalizados para ordenar con comas en los números
        $.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;
        };

        // Inicialización de la tabla de datos
        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' // Tipo personalizado para ordenar números con coma
            }],
            order: [
                [2, 'asc']
            ]
        });


    });
</script>


<script>
    // Cambia el evento al hacer clic en el enlace de la imagen para abrir el modal de SweetAlert2
    $('#clientesTable').on('click', 'a[data-toggle="modal"]', function(event) {
        event.preventDefault();
        var button = $(this);
        var imageUrl = button.data('image'); // Ruta de la imagen
        var cveArt = button.data('cve_art'); // Clave del producto

        // Captura los datos adicionales necesarios
        var descripcion = button.closest('tr').find('td:eq(1)').text(); // Descripción
        var linea = button.closest('tr').find('td:eq(3)').text(); // Línea
        var existencias = button.closest('tr').find('td:eq(6)').text(); // Existencias

        // Llama a SweetAlert2 para mostrar el modal personalizado
        Swal.fire({
            title: `<strong>Producto: ${cveArt}</strong>`,
            html: `
            <img src="${imageUrl}" alt="Imagen del Producto" style="width: 100%; height: auto; margin-bottom: 20px;">
            <p><strong>Descripción:</strong> ${descripcion}</p>
            <p><strong>Línea:</strong> ${linea}</p>
            <p><strong>Existencias:</strong> ${existencias}</p>
        `,
            showCloseButton: false, // Desactiva la "X" para cerrar
            showConfirmButton: true, // Muestra el botón de confirmación
            confirmButtonText: 'Cerrar', // Texto del botón de cierre
            customClass: {
                popup: 'swal-custom-modal', // Clase personalizada para el modal
                confirmButton: 'swal-close-btn' // Clase personalizada para el botón de cierre
            }
        });
    });
</script>



</html>