<!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>Cotizaciones</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">
                    <!-- 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 active open">
                        <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 active">
                                <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>
                            <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">
                        <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 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
                $host = 'localhost';
                '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 FACTC01 WHERE TIP_DOC = 'C'";
                    $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 FACTC01 WHERE TIP_DOC = 'C' 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 FACTC01 WHERE TIP_DOC = 'C' 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-4 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-4 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>Cotizaciones 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-12 col-xl-4 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>Cotizaciones 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 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">Compras</h5> -->
                            <div class="table-responsive text-nowrap"></div>

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

                                $statusDescriptions = array(
                                    'O' => 'Original',
                                    'C' => 'Cancelada',
                                    'E' => 'Emitida'
                                );

                                $statusDescriptions2 = array(
                                    'C' => 'Cotizacion',
                                );


                                $sql = "SELECT FACTC01.TIP_DOC, FACTC01.CVE_DOC, FACTC01.CVE_CLPV, CLIE01.NOMBRE, FACTC01.CAN_TOT, FACTC01.IMPORTE, FACTC01.IMPORTE, FACTC01.FECHA_DOC
                FROM FACTC01
                INNER JOIN CLIE01 ON FACTC01.CVE_CLPV = CLIE01.CLAVE";

                                if (isset($_POST['start_date']) && isset($_POST['end_date'])) {
                                    $startDate = $_POST['start_date'];
                                    $endDate = $_POST['end_date'];
                                    $sql .= " WHERE FACTC01.FECHA_DOC BETWEEN '$startDate' AND '$endDate'";
                                }

                                $stmt = $dbh->query($sql);
                                $stmt->execute();
                                echo "<div class='container mt-5'>";
                                echo "<div class='d-flex justify-content-between align-items-center mb-4'>";
                                echo "<h1><strong>Cotizaciones</strong></h1>";

                                echo "<div class='export-container'>";
                                echo "<button id='exportBtn' class='export-button'>";
                                echo "<i class='fa fal fa-upload'></i> Exportar <i class='fa  fa-chevron-down'></i>";
                                echo "</button>";
                                echo "<div id='exportMenu' class='export-menu'>";
                                echo "<a href='#' id='printOption'><i class='fa fa-print'></i> Imprimir</a>";
                                echo "<a href='#' id='excelOption'><i class='fa fa-file-excel'></i> Excel</a>";
                                echo "<a href='#' id='pdfOption'><i class='fa fa-file-pdf'></i> PDF</a>";
                                echo "<a href='#' id='copyOption'><i class='fa fa-copy'></i> Copiar</a>";
                                echo "</div>";
                                echo "</div>";
                                echo "</div>";

                                echo "<div class='d-flex justify-content-between align-items-center mb-3'>";
                                echo "<div class='btn-group' role='group'>";
                                echo "<button class='btn custom-filter date-filter' data-filter='today'>Hoy</button>";
                                echo "<button class='btn custom-filter date-filter' data-filter='this-month'>Este mes</button>";
                                echo "<button class='btn custom-filter date-filter' data-filter='last-month'>Mes anterior</button>";
                                echo "<button class='btn custom-filter date-filter' data-filter='all'>Todas</button>";
                                echo "</div>";

                                echo "<div>";
                                echo "<button class='btn custom-date-filter' data-toggle='modal' data-target='#dateFilterModal'>Filtrar por Fecha</button>";
                                echo "<button class='btn custom-action' id='clearFilters'>Borrar Filtros</button>";
                                echo "</div>";
                                echo "</div>";

                                echo "<table id='clientesTable' class='table table-hover'>";
                                echo "<thead class='thead-dark'><tr><th>Tipo</th><th>Clave</th><th class='num'>Cliente</th><th>Nombre</th><th>Fecha</th><th>Subtotal</th><th>Total</th><th>Accion</th></tr></thead><tbody>";
                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                    echo "<tr>";
                                    echo "<td>" . $statusDescriptions[$row['TIP_DOC']] . "</td>";
                                    echo "<td>" . $row['CVE_DOC'] . "</td>";
                                    echo "<td>" . $row['CVE_CLPV'] . "</td>";
                                    echo "<td>" . $row['NOMBRE'] . "</td>";
                                    echo "<td class='fecha-doc'>" . date('d/m/Y', strtotime($row['FECHA_DOC'])) . "</td>";
                                    $importe = number_format($row['CAN_TOT'], 2, '.', ',');
                                    echo "<td>" . $importe . "</td>";
                                    $importe2 = number_format($row['IMPORTE'], 2, '.', ',');
                                    echo "<td>" . $importe2 . "</td>";
                                    echo "<td class='excluir-pdf'><i class='fas fa-chevron-right toggle-detalles' style='cursor: pointer;' data-cve_doc='" . htmlspecialchars($row['CVE_DOC'], ENT_QUOTES, 'UTF-8') . "'></i></td>";
                                    echo "</tr>";
                                }
                                echo "</tbody></table>";
                                echo "<div id='copyAlert'>Datos copiados al portapapeles</div>";
                                echo "</div>";
                            } catch (PDOException $e) {
                                echo "<div class='container mt-5'><h2>AUN NO HAY CONEXION:</h2>";
                                echo "<p>" . $e->getMessage() . "</p></div>";
                            }
                            ?>
                        </div>
                    </div>
                    <!--/ Basic Bootstrap Table -->

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



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

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

    <!-- Modal para el filtro por fecha -->
    <div class="modal fade" id="dateFilterModal" tabindex="-1" role="dialog" aria-labelledby="dateFilterModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dateFilterModalLabel">Filtrar por Fecha</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="">
                        <div class="form-group">
                            <label for="start_date">Fecha Inicial</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" required>
                        </div>
                        <div class="form-group">
                            <label for="end_date">Fecha Final</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Filtrar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



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


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




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


<script>
    // Lista de años con registros obtenidos desde PHP
    const availableYears = <?php echo json_encode($years); ?>;

    // Función para verificar si hay registros para un filtro específico
    function hasRecordsForFilter(year, filterType) {
        const currentDate = new Date();
        const yearData = <?php echo json_encode($data); ?>;
        const recordsForYear = yearData.filter(record => new Date(record.date).getFullYear() === parseInt(year));

        // Verificar si hay registros para el filtro "Hoy", "Semana" y "Mes"
        if (filterType === 'today') {
            const today = currentDate.toISOString().split('T')[0];
            return recordsForYear.some(record => record.date === today);
        }
        if (filterType === 'week') {
            const startOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay())).toISOString().split('T')[0];
            const endOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 6)).toISOString().split('T')[0];
            return recordsForYear.some(record => record.date >= startOfWeek && record.date <= endOfWeek);
        }
        if (filterType === 'month') {
            const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toISOString().split('T')[0];
            const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toISOString().split('T')[0];
            return recordsForYear.some(record => record.date >= startOfMonth && record.date <= endOfMonth);
        }
        return false; // Para el filtro "Año" y "Todas", no aplica la comprobación de registros
    }

    // Obtener los elementos de los filtros de botones
    var filterButtons = document.querySelectorAll('.graph-filter');
    const filterButtons = document.querySelectorAll('.graph-filter');

    // Función para deshabilitar botones basados en la disponibilidad de registros
    function disableUnavailableButtons(selectedYear) {
        filterButtons.forEach(button => {
            const filterType = button.dataset.filter;

            if (filterType === 'all' || filterType === 'year') {
                button.disabled = false; // Mantener el botón "Todas" siempre habilitado
            } else if (!hasRecordsForFilter(selectedYear, filterType)) {
                button.disabled = true; // Deshabilitar si no hay registros para el filtro
            } else {
                button.disabled = false; // Habilitar si hay registros para el filtro
            }
        });
    }

    // Detectar cambios en el select de año
    document.getElementById('anio').addEventListener('change', function() {
        const selectedYear = this.value;
        disableUnavailableButtons(selectedYear);
    });

    // Deshabilitar los botones de acuerdo con el año por defecto al cargar la página
    var selectedYear = document.querySelectorAll('anio');
    const selectedYear = document.getElementById('anio').value;
    disableUnavailableButtons(selectedYear);
</script>
<script>
    $(document).ready(function() {
        // Función para actualizar las tarjetas con los datos filtrados
        function updateCards(filter, startDate = '', endDate = '') {
            // Realiza la solicitud para obtener los datos actualizados desde get_card_cotizaciones.php
            fetch(`get_card_cotizaciones.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 los clics en los botones de filtro de fechas
        $('.date-filter').on('click', function() {
            var filter = $(this).data('filter');
            var startDate = '';
            var endDate = '';

            if (filter === 'today') {
                // Filtro de "Hoy"
                startDate = endDate = new Date().toISOString().split('T')[0];
            } else if (filter === 'this-month') {
                // Filtro de "Este mes"
                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') {
                // Filtro de "Mes anterior"
                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];
            } else if (filter === 'all') {
                // Filtro de "Todas" (sin rango de fechas)
                startDate = '';
                endDate = '';
            }

            // Llama a la función para actualizar las tarjetas con el filtro seleccionado
            updateCards(filter, startDate, endDate);
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chartData = <?= $jsonData; ?>; // Datos para la gráfica
        const ctx = document.getElementById('facturasChart').getContext('2d');
        let chart;

        // Función para renderizar la gráfica con estilo personalizado
        function renderChart(labels, data) {
            if (chart) chart.destroy();

            // Crear un gradiente para las barras
            const gradient = ctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, 'rgba(75, 192, 192, 0.8)'); // Color inicial
            gradient.addColorStop(1, 'rgba(75, 192, 192, 0.2)'); // Color final

            chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Total Cotizado',
                        data: data,
                        backgroundColor: gradient, // Usar el gradiente
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 0, // Sin borde
                        borderRadius: 10, // Bordes redondeados en la parte superior
                        borderSkipped: false, // Aplicar bordes redondeados a todas las barras
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                font: {
                                    family: 'Arial, sans-serif', // Fuente moderna
                                    size: 14,
                                },
                                color: '#333', // Color de texto oscuro
                            }
                        },
                        title: {
                            display: true,
                            text: 'Gráfica de Cotizaciones',
                            font: {
                                family: 'Arial, sans-serif',
                                size: 18,
                                weight: 'bold',
                            },
                            color: '#333',
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Filtro',
                                font: {
                                    family: 'Arial, sans-serif',
                                    size: 14,
                                },
                                color: '#333',
                            },
                            grid: {
                                display: false, // Ocultar cuadrícula en el eje X
                            },
                            ticks: {
                                color: '#666', // Color de las etiquetas del eje X
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Monto Total',
                                font: {
                                    family: 'Arial, sans-serif',
                                    size: 14,
                                },
                                color: '#333',
                            },
                            grid: {
                                display: false, // Ocultar cuadrícula en el eje Y
                            },
                            ticks: {
                                color: '#666', // Color de las etiquetas del eje Y
                            }
                        }
                    },
                    elements: {
                        bar: {
                            shadowColor: 'rgba(0, 0, 0, 0.2)', // Sombra suave
                            shadowBlur: 8,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2,
                        }
                    }
                }
            });
        }


        // Función para actualizar las tarjetas de resumen
        function updateSummaryCards(total, average) {
            document.getElementById('totalAmount').textContent = `$${total.toFixed(2)}`;
            document.getElementById('dailyAverage').textContent = `$${average.toFixed(2)}`;
        }

        // Función para aplicar filtros
        function filterData(filter, year) {
            let filteredData = [];
            let labels = [];
            let data = [];
            const now = new Date();

            // Combinar filtro general con año seleccionado
            if (filter === 'today') {
                const today = new Date().toISOString().split('T')[0];
                filteredData = chartData.filter(d => d.date === today && (year === 'all' || new Date(d.date).getFullYear() == year));
                labels = ['Hoy'];
                data = [filteredData.reduce((acc, curr) => acc + parseFloat(curr.total), 0)];
            } else if (filter === 'week') {
                const currentYear = now.getFullYear();
                const currentDate = new Date(now.setHours(0, 0, 0, 0));

                const firstDayOfWeek = new Date(currentDate);
                firstDayOfWeek.setDate(currentDate.getDate() - currentDate.getDay());
                const lastDayOfWeek = new Date(firstDayOfWeek);
                lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);

                filteredData = chartData.filter(d => {
                    const date = new Date(d.date);
                    return date >= firstDayOfWeek && date <= lastDayOfWeek &&
                        (year === 'all' || date.getFullYear() == year);
                });

                labels = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
                data = labels.map((label, index) => {
                    const dayData = filteredData.filter(d => {
                        const date = new Date(d.date);
                        return date.getDay() === index;
                    });
                    return dayData.reduce((acc, curr) => acc + parseFloat(curr.total), 0);
                });
            } else if (filter === 'month') {
                const currentYear = now.getFullYear();
                const currentMonth = now.getMonth();

                filteredData = chartData.filter(d => {
                    const date = new Date(d.date);
                    return date.getFullYear() === currentYear && date.getMonth() === currentMonth;
                });

                // Dividir el mes en semanas
                const weeks = [];
                let currentWeek = [];
                let labelsForWeeks = [];

                // Agrupar los días por semana
                filteredData.forEach(d => {
                    const date = new Date(d.date);
                    const weekNumber = Math.ceil((date.getDate() - date.getDay()) / 7); // Calculando la semana del mes
                    if (!currentWeek[weekNumber]) {
                        currentWeek[weekNumber] = [];
                    }
                    currentWeek[weekNumber].push(d);
                });

                // Generar etiquetas y datos por semana
                Object.keys(currentWeek).forEach(week => {
                    const startOfWeek = new Date(currentWeek[week][0].date);
                    startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay()); // Lunes de la semana
                    const endOfWeek = new Date(startOfWeek);
                    endOfWeek.setDate(startOfWeek.getDate() + 6); // Domingo de la semana

                    const totalWeek = currentWeek[week].reduce((acc, curr) => acc + parseFloat(curr.total), 0);
                    labelsForWeeks.push(`Semana ${week} (del ${startOfWeek.toLocaleDateString('es-ES')} al ${endOfWeek.toLocaleDateString('es-ES')})`);
                    weeks.push(totalWeek);
                });

                labels = labelsForWeeks;
                data = weeks;
            } else if (filter === 'year') {
                filteredData = chartData.filter(d => year === 'all' || new Date(d.date).getFullYear() == year);

                const monthlyData = Array(12).fill(0);
                filteredData.forEach(d => {
                    const date = new Date(d.date);
                    monthlyData[date.getMonth()] += parseFloat(d.total);
                });

                labels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                data = monthlyData;
            } else if (filter === 'all') {
                filteredData = chartData.filter(d => year === 'all' || new Date(d.date).getFullYear() == year);
                labels = ['Todas'];
                data = [filteredData.reduce((acc, curr) => acc + parseFloat(curr.total), 0)];
            }

            // Calcular total y promedio diario
            const total = data.reduce((acc, curr) => acc + curr, 0);
            const average = total / (filter === 'today' ? 1 : data.length);

            // Actualizar gráfica y tarjetas
            renderChart(labels, data);
            updateSummaryCards(total, average);
        }

        // Filtrar datos al cargar la página (por defecto: "all")
        filterData('all', 'all');

        // Evento para cambiar el filtro por año
        document.getElementById('anio').addEventListener('change', function() {
            const selectedYear = this.value;
            const activeFilter = document.querySelector('.graph-filter.active')?.dataset.filter || 'all';
            filterData(activeFilter, selectedYear);
        });

        // Evento para los botones de filtro
        document.querySelectorAll('.graph-filter').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.graph-filter').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                const selectedYear = document.getElementById('anio').value;
                filterData(this.dataset.filter, selectedYear);
            });
        });

        // Exportar gráfica
        document.getElementById('exportButton').addEventListener('click', () => {
            const imageLink = document.createElement('a');
            imageLink.href = chart.toBase64Image();
            imageLink.download = 'grafica_cotizaciones.png';
            imageLink.click();
        });
    });
</script>

<script>
    // Lista de años con registros obtenidos desde PHP
    const availableYears = <?php echo json_encode($years); ?>;

    // Función para verificar si hay registros para un filtro específico
    function hasRecordsForFilter(year, filterType) {
        const currentDate = new Date();
        const yearData = <?php echo json_encode($data); ?>;
        const recordsForYear = yearData.filter(record => new Date(record.date).getFullYear() === parseInt(year));

        // Verificar si hay registros para el filtro "Hoy", "Semana" y "Mes"
        if (filterType === 'today') {
            const today = currentDate.toISOString().split('T')[0];
            return recordsForYear.some(record => record.date === today);
        }
        if (filterType === 'week') {
            const startOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay())).toISOString().split('T')[0];
            const endOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 6)).toISOString().split('T')[0];
            return recordsForYear.some(record => record.date >= startOfWeek && record.date <= endOfWeek);
        }
        if (filterType === 'month') {
            const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toISOString().split('T')[0];
            const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toISOString().split('T')[0];
            return recordsForYear.some(record => record.date >= startOfMonth && record.date <= endOfMonth);
        }
        return false; // Para el filtro "Año" y "Todas", no aplica la comprobación de registros
    }

    // Obtener los elementos de los filtros de botones
    const filterButtons = document.querySelectorAll('.graph-filter');

    // Función para deshabilitar botones basados en la disponibilidad de registros
    function disableUnavailableButtons(selectedYear) {
        filterButtons.forEach(button => {
            const filterType = button.dataset.filter;

            if (filterType === 'all' || filterType === 'year') {
                button.disabled = false; // Mantener el botón "Todas" siempre habilitado
            } else if (!hasRecordsForFilter(selectedYear, filterType)) {
                button.disabled = true; // Deshabilitar si no hay registros para el filtro
            } else {
                button.disabled = false; // Habilitar si hay registros para el filtro
            }
        });
    }

    // Detectar cambios en el select de año
    document.getElementById('anio').addEventListener('change', function() {
        const selectedYear = this.value;
        disableUnavailableButtons(selectedYear);
    });

    // Deshabilitar los botones de acuerdo con el año por defecto al cargar la página
    const selectedYear = document.getElementById('anio').value;
    disableUnavailableButtons(selectedYear);
</script>

<script>
    $(document).ready(function() {
        // Extender DataTables para manejar la ordenación numérica
        $.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']
            ]
        });


        function filterTable(filter) {
            var currentDate = new Date();
            var startDate, endDate;

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

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

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

        $('.date-filter').on('click', function() {
            var filter = $(this).data('filter');
            filterTable(filter);
        });

        $('#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_cotizacion.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 Cotización.</p></div>').show();
                        tr.addClass('shown');
                        row.child().find('div').hide().slideDown();
                    }
                });
            }
        });

        $('#clearFilters').on('click', function() {
            table.search('').columns().search('').draw();
        });

        $('#clientesTable').on('click', 'th', function() {
            var currentFilter = $('.date-filter.active').data('filter');
            if (currentFilter) {
                filterTable(currentFilter);
            }
        });

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

<!-- 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;">Cotizaciones</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', 'Fecha', 'Subtotal', 'Total'];
            const headersPartida = ['Partida', 'Cantidad', 'Producto', '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, exportar toda 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 Cotizaciones';
            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 = 'cotizaciones.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', 'Fecha', 'Subtotal', 'Total'];
            // Encabezados para los detalles de la partida
            const headersPartida = ['Partida', 'Cantidad', 'Producto', '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 Cotizaciones', 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 Cotizaciones', 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('cotizaciones.pdf');
        });
    });
</script>



<!-- SCRIPT PARA COPIAR -->
<script>
    $(document).ready(function() {
        $('#copyOption').click(function() {
            const table = document.getElementById('clientesTable');
            let textToCopy = "";

            const rows = table.querySelectorAll('tr');
            rows.forEach(row => {
                const cells = row.querySelectorAll('th, td');
                // Excluir la última columna (Acción) si está presente
                const rowText = Array.from(cells).slice(0, -1).map(cell => cell.innerText).join("\t");
                textToCopy += rowText + "\n";
            });
            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>