<?php
session_start();
$host = 'localhost';
$db = 'trabajadores';
$username = 'root';
$password = 'root';

if (!isset($_SESSION['usuario'])) {
    header("Location: index.html");
    exit;
}
try {
    $conn = new mysqli($host, $username, $password, $db);
    if ($conn->connect_error) {
        die("Conexión fallida: " . $conn->connect_error);
    }
    $usuario = $_SESSION['usuario'];
    $sql = "SELECT NOMBRE, ROL FROM personal WHERE USUARIO = '$usuario'";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $nombre = $row['NOMBRE'];
        $rol = $row['ROL'];
    } else {
        $nombre = "Usuario";
        $rol = "Usuario";
    }
    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRM</title>
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
    <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/tablas.css"> -->
    <link rel="stylesheet" href="css/estilosdetablas.css">
    <link rel="stylesheet" href="css/contenido.css">
    <link rel="stylesheet" href="css/tarjetastotales.css">
    <link rel="stylesheet" href="css/botonexportar.css">
    <link rel="stylesheet" href="css/botonesfiltros.css">
    <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);
        }

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

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

<body>
    <div id="sidebar" class="sidebar d-flex flex-column p-3">
        <button class="btn btn-outline-light mb-3" id="sidebarCollapse">
            <i class="fas fa-bars"></i>
        </button>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="inicio.php" class="nav-link " aria-current="page">
                    <i class="fas fa-home"></i>
                    <span>Inicio</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#ventasSubmenu">
                    <i class="fas fa-chart-line"></i>
                    <span>Ventas</span>
                </a>
                <div id="ventasSubmenu" class="submenu open">
                    <a href="facturas.php" class="nav-link">
                        <i class="fas fa-hand-holding-usd"></i>
                        <span>Facturas</span>
                    </a>
                    <a href="notasdeventa.php" class="nav-link">
                        <i class="fas fa-dollar-sign"></i>
                        <span>Notas de Venta</span>
                    </a>
                    <a href="trasladoscartaporte.php" class="nav-link">
                        <i class="fas fa-envelope-open-text"></i>
                        <span>Carta Porte</span>
                    </a>
                    <a href="remisiones.php" class="nav-link">
                        <i class="fas fa-dollar-sign"></i>
                        <span>Remisiones</span>
                    </a>
                    <a href="pedidos.php" class="nav-link">
                        <i class="fas fa-shopping-bag"></i>
                        <span>Pedidos</span>
                    </a>
                    <a href="cotizaciones.php" class="nav-link active">
                        <i class="fas fa-file-invoice"></i>
                        <span>Cotizaciones</span>
                    </a>
                    <a href="devoluciones.php" class="nav-link">
                        <i class="fas fa-dollar-sign"></i>
                        <span>Devoluciones</span>
                    </a>
                    <a href="notasdecredito.php" class="nav-link">
                        <i class="fas fa-dollar-sign"></i>
                        <span>Notas de Credito</span>
                    </a>
                    <a href="parcialidades.php" class="nav-link">
                        <i class="fas fa-dollar-sign"></i>
                        <span>Parcialidades</span>
                    </a>
                    <a href="comprobantesdepago.php" class="nav-link">
                        <i class="fas fa-file-invoice-dollar"></i>
                        <span>Comprobantes</span>
                    </a>
                    <a href="estadisticas.php" class="nav-link">
                        <i class="fas fa-file-invoice-dollar"></i>
                        <span>Estadisticas</span>
                    </a>
                </div>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#clientesSubmenu">
                    <i class="fas fa-users"></i>
                    <span>Clientes</span>
                </a>
                <div id="clientesSubmenu" class="submenu">
                    <a href="clientes.php" class="nav-link">
                        <i class="fas fa-user"></i>
                        <span>Clientes</span>
                    </a>
            <li class="menu-item active">
                <a href="correos.php" class="menu-link">
                    <div data-i18n="Basic">Correos</div>
                </a>
            </li>
            <a href="cuentasxcobrar.php" class="nav-link">
                <i class="fas fa-dollar-sign"></i>
                <span>Cuentas X Cobrar</span>
            </a>

    </div>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#inventariosSubmenu">
            <i class="fas fa-boxes"></i>
            <span>Inventarios</span>
        </a>
        <div id="inventariosSubmenu" class="submenu">
            <a href="productos.php" class="nav-link">
                <i class="fas fa-shopping-cart"></i>
                <span>Productos</span>
            </a>

            <a href="existencias.php" class="nav-link">
                <i class="fas fa-cubes"></i>
                <span>Existencias</span>
            </a>

        </div>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#comprasSubmenu">
            <i class="fas  fa-shopping-cart"></i>
            <span>Compras</span>
        </a>
        <div id="comprasSubmenu" class="submenu">
            <a href="compras.php" class="nav-link">
                <i class="fas fa-shopping-bag"></i>
                <span>Compras</span>
            </a>
            <a href="recepciones.php" class="nav-link">
                <i class="fas fa-cart-arrow-down"></i>
                <span>Recepciones</span>
            </a>
            <a href="ordenes.php" class="nav-link">
                <i class="fas  fa-file-invoice-dollar"></i>
                <span>Ordenes</span>
            </a>
            <a href="requisiciones.php" class="nav-link">
                <i class="fas fa-receipt"></i>
                <span>Requisiciones</span>
            </a>
            <a href="devolucionescom.php" class="nav-link">
                <i class="fas fa-file-import"></i>
                <span>Devoluciones</span>
            </a>
        </div>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#proveedoresSubmenu">
            <i class="fas fa-people-carry"></i>
            <span>Proveedores</span>
        </a>
        <div id="proveedoresSubmenu" class="submenu">
            <a href="proveedores.php" class="nav-link">
                <i class="fas fa-people-arrows"></i>
                <span>Proveedores</span>
            </a>
            <a href="cuentasxpagar.php" class="nav-link">
                <i class="fas fa-dollar-sign"></i>
                <span>Cuentas X Pagar</span>
            </a>
        </div>
    </li>

    <li class="nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#contabilidadSubmenu">
            <i class="fas fa-calculator"></i>
            <span>Contabilidad</span>
        </a>
        <div id="contabilidadSubmenu" class="submenu">
            <a href="cuentas.php" class="nav-link">
                <i class="fas fa-file-invoice-dollar"></i>
                <span>Cuentas</span>
            </a>

            <a href="polizas.php" class="nav-link">
                <i class="fas fa-file-signature"></i>
                <span>Pólizas</span>
            </a>
        </div>
    </li>

    <li class="nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="submenu" data-target="#bancoSubmenu">
            <i class="fas fa-credit-card"></i>
            <span>Banco</span>
        </a>
        <div id="bancoSubmenu" class="submenu">
            <a href="movimientos.php" class="nav-link">
                <i class="fas fa-file-invoice-dollar"></i>
                <span>Movimientos</span>
            </a>
        </div>
    </li>
    </ul>
    </div>

    <div class="banner">
        <img src="img/siigo-aspel.svg" alt="Logo Siigo Aspel">
        <div class="user-info" id="userDropdownToggle">
            <i class="fas fa-user-circle"></i>
            <span> Bienvenid@, <strong> <?php echo htmlspecialchars($nombre); ?></strong> </span>
            <i class="fas fa-caret-down"></i>



            <div class="user-dropdown" id="userDropdown">
                <div class="position-relative border-0 card">
                    <div class="flex-column align-items-center justify-content-center gap-2 pt-4 pb-3" bis_skin_checked="1">
                        <div class="avatar avatar-xl">
                            <i class=" fas fa-solid fa-user"></i>
                        </div>
                        <h6 class="text-body-emphasis"><?php echo htmlspecialchars($nombre); ?></h6>
                        <span><?php echo htmlspecialchars($rol); ?></span>
                    </div>

                    <div class="p-0 border-top border-translucent card-footer">
                        <hr>
                        <div class="px-3" bis_skin_checked="1">
                            <a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="index.html">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-log-out me-2">
                                    <g>
                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                        <polyline points="16 17 21 12 16 7"></polyline>
                                        <line x1="21" y1="12" x2="9" y2="12"></line>
                                    </g>
                                </svg>
                                Cerrar Sesión
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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);
        $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;
    }
    ?>

    <div class="content">
        <!-- Tarjetas -->
        <div class="container-tarjetas">
            <div class="row">
                <!-- Tarjeta 1: Total de Registros -->
                <div class="col">
                    <div class="card card-hover card-total-registros">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-square bg-primary text-white flex-shrink-0 me-3">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>
                            <div>
                                <h6 class="card-title">Total de Registros</h6>
                                <h4 id="total-registros"><?php echo $totalRegistros ?? 'Error'; ?></h4>
                            </div>
                        </div>
                        <div class="card-bottom-line bg-primary"></div>
                    </div>
                </div>
                <!-- Tarjeta 2: Facturas Emitidas -->
                <div class="col">
                    <div class="card card-hover card-facturas-emitidas">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-square bg-success text-white flex-shrink-0 me-3">
                                <i class="fas fa-file-import"></i>
                            </div>
                            <div>
                                <h6 class="card-title">Facturas Emitidas</h6>
                                <h4 id="facturas-emitidas"><?php echo htmlspecialchars($totalEmitidas ?? 'No Disponible'); ?></h4>
                            </div>
                        </div>
                        <div class="card-bottom-line bg-success"></div>
                    </div>
                </div>
                <!-- Tarjeta 3: Facturas Canceladas -->
                <div class="col">
                    <div class="card card-hover card-facturas-canceladas">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-square bg-danger text-white flex-shrink-0 me-3">
                                <i class="fas fa-file-excel"></i>
                            </div>
                            <div>
                                <h6 class="card-title">Facturas Canceladas</h6>
                                <h4 id="facturas-canceladas"><?php echo htmlspecialchars($totalCanceladas ?? 'No Disponible'); ?></h4>
                            </div>
                        </div>
                        <div class="card-bottom-line bg-danger"></div>
                    </div>
                </div>
            </div>
        </div>

        <?php
        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
  C.CVE_DOC,
  C.FECHA_DOC,
  C.CVE_CLPV,
  CL.NOMBRE AS CLIENTE,
  C.IMPORTE,
  CRM.ESTATUS AS ESTATUS_SEGUIMIENTO,
  CRM.PROXIMA_ACCION,
  CRM.FECHA_PROXIMA_ACCION,
  CRM.NOTAS
FROM FACTC01 C
LEFT JOIN CLIE01 CL ON C.CVE_CLPV = CL.CLAVE
LEFT JOIN CRM_SEGUIMIENTO CRM ON C.CVE_DOC = CRM.FOLIO_COTIZACION
";

            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>Cotizaciones</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='csvOption'><i class='fa fa-file-csv'></i> CSV</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>

    <!-- 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>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/natural.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.getElementById('sidebarCollapse').addEventListener('click', function() {
        var sidebar = document.getElementById('sidebar');
        var content = document.querySelector('.content');
        var banner = document.querySelector('.banner');
        sidebar.classList.toggle('collapsed');
        content.classList.toggle('collapsed');
        banner.classList.toggle('collapsed');
    });

    document.getElementById('userDropdownToggle').addEventListener('click', function() {
        document.getElementById('userDropdown').classList.toggle('show');
    });
</script>
<script>
    document.querySelectorAll('[data-toggle="submenu"]').forEach(function(element) {
        element.addEventListener('click', function(e) {
            e.preventDefault();
            var target = document.querySelector(element.getAttribute('data-target'));
            var isOpen = target.classList.contains('open');

            document.querySelectorAll('.submenu').forEach(function(submenu) {
                submenu.style.maxHeight = '0px';
                submenu.classList.remove('open');
            });

            document.querySelectorAll('[data-toggle="submenu"]').forEach(function(el) {
                el.classList.remove('submenu-open');
            });

            if (!isOpen) {
                target.style.maxHeight = target.scrollHeight + 'px';
                target.classList.add('open');
                element.classList.add('submenu-open');
            }
        });
    });
    document.querySelectorAll('.submenu.open').forEach(function(submenu) {
        submenu.style.maxHeight = submenu.scrollHeight + 'px';
    });
</script>




<script>
    $(document).ready(function() {
        // Define funciones de ordenamiento personalizadas para DataTables
        $.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;
        };

        // Inicializa DataTable
        var table = $('#clientesTable').DataTable({
            language: {
                url: 'json/Spanish.json'
            },
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "Todos"]
            ],
            columnDefs: [{
                targets: 2,
                type: 'numeric-comma'
            }],
            order: [
                [2, 'asc']
            ]
        });
        var currentFilter = ''; // Variable global para almacenar el filtro actual
        var currentStartDate = '';
        var currentEndDate = '';

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

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

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

            // Obtiene y actualiza las tarjetas
            fetch(`get_card_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 el envío del formulario del modal de filtro de fechas
        $('#dateFilterModal form').on('submit', function(event) {
            event.preventDefault(); // Previene el envío del formulario por defecto

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

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

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

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

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

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

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

            if (row.child.isShown()) {
                row.child().find('div').slideUp(function() {
                    row.child.hide();
                    tr.removeClass('shown');
                    $(tr).find('i.toggle-detalles').removeClass('down');
                });
            } else {
                $.ajax({
                    url: 'detalles_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 factura.</p></div>').show();
                        tr.addClass('shown');
                        row.child().find('div').hide().slideDown();
                    }
                });
            }
        });

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

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



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

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

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

<!-- 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 printWindow = window.open('', '', 'height=600,width=800');
        const mainTableHtml = document.getElementById('clientesTable').outerHTML;

        // Crear un contenedor temporal para manipular el HTML de la tabla principal
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = mainTableHtml;

        // Eliminar la columna de 'Acción' si existe en la tabla principal
        const actionColumnHeader = tempDiv.querySelector('thead tr th:last-child');
        const actionColumnIndex = actionColumnHeader && actionColumnHeader.innerText.trim() === 'Acción' ? tempDiv.querySelectorAll('thead tr th').length - 1 : -1;

        if (actionColumnIndex >= 0) {
            // Remover la columna "Acción" tanto en el encabezado como en las filas de datos
            const headerCells = tempDiv.querySelectorAll('thead tr th');
            headerCells[actionColumnIndex].remove();

            const bodyRows = tempDiv.querySelectorAll('tbody tr');
            bodyRows.forEach(row => {
                const cells = row.querySelectorAll('td');
                if (cells.length > actionColumnIndex) {
                    cells[actionColumnIndex].remove();
                }
            });
        }

        const detallesTable = document.getElementById('detallesTable');
        const detallesHtml = detallesTable ? detallesTable.outerHTML : '';

        printWindow.document.write('<html><head><title>Imprimir</title>');
        printWindow.document.write('<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">');
        printWindow.document.write('<style>');
        printWindow.document.write('body { text-align: center; margin: 20px; }');
        printWindow.document.write('h1 { font-size: 24px; font-weight: bold; margin-top: 40px; }');
        printWindow.document.write('h2 { font-size: 20px; font-weight: normal; margin-bottom: 20px; }');
        printWindow.document.write('img.logo { max-width: 280px; margin-bottom: 18px; }');
        printWindow.document.write('table { width: 100%; border-collapse: collapse; }');
        printWindow.document.write('th, td { padding: 8px; text-align: left; border: none; }'); // Eliminar bordes de celdas
        printWindow.document.write('th { background-color: #f8f9fa; }');
        printWindow.document.write('.col-partida { width: 10%; }'); // Ajusta el ancho de la columna Partida
        printWindow.document.write('.col-cantidad { width: 10%; }'); // Ajusta el ancho de la columna Cantidad
        printWindow.document.write('.col-clave { width: 15%; }'); // Ajusta el ancho de la columna Clave
        printWindow.document.write('.col-precio { width: 15%; }'); // Ajusta el ancho de la columna Precio
        printWindow.document.write('.col-subtotal { width: 15%; }'); // Ajusta el ancho de la columna Subtotal
        printWindow.document.write('.col-observaciones { width: 25%; word-wrap: break-word; }'); // Ajusta el ancho de la columna Observaciones
        printWindow.document.write('</style>');
        printWindow.document.write('</head><body>');
        printWindow.document.write('<img src="img/siigo-aspel.svg" alt="Logo" class="logo">');
        printWindow.document.write('<h1>' + nombreEmpresa + '</h1>');
        printWindow.document.write('<h2>Facturas</h2>');

        if (detallesHtml) {
            printWindow.document.write('<h3>Detalles de la Factura</h3>');
            printWindow.document.write(detallesHtml);
        }

        printWindow.document.write(tempDiv.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
    });
</script>


<!-- SCRIPT PARA CSV -->
<script>
    $(document).ready(function() {
        $('#csvOption').click(function() {
            // Obtener los datos de la tabla HTML
            const table = document.getElementById('clientesTable');
            let csvContent = "data:text/csv;charset=utf-8,";

            // Identificar la columna "Acción" si existe
            const headers = Array.from(table.querySelectorAll('th'));
            const actionColumnIndex = headers.findIndex(th => th.innerText.trim() === 'Acción');

            // Filtrar y añadir encabezados excluyendo "Acción"
            const filteredHeaders = headers.filter((th, index) => index !== actionColumnIndex).map(th => th.innerText);
            csvContent += filteredHeaders.join(",") + "\n";

            // Añadir filas excluyendo la columna "Acción"
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const cells = Array.from(row.querySelectorAll('td')).filter((td, index) => index !== actionColumnIndex).map((td, index) => {
                    let cellText = td.innerText.trim();
                    // Encapsular en comillas dobles las celdas de la columna "Total" si contienen comas
                    if (headers[index].innerText.trim() === 'Total') {
                        cellText = `"${cellText}"`;
                    }
                    return cellText;
                });
                csvContent += cells.join(",") + "\n";
            });

            // Crear un enlace para la descarga
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "facturas.csv");
            document.body.appendChild(link);

            // Simular el clic en el enlace para descargar el archivo
            link.click();
            // Eliminar el enlace después de la descarga
            document.body.removeChild(link);
        });
    });
</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.'; // Nombre de la empresa
            const tituloReporte = 'Resumen De Facturas'; // Título del reporte

            // Añadir el nombre de la empresa y combinar celdas
            worksheet.mergeCells('A1:G1'); // Ajustar el rango según la cantidad de columnas
            worksheet.getCell('A1').value = nombreEmpresa;
            worksheet.getCell('A1').font = {
                bold: true,
                size: 14
            };
            worksheet.getCell('A1').alignment = {
                horizontal: 'center'
            };

            // Añadir el título del reporte y combinar celdas
            worksheet.mergeCells('A2:G2'); // Ajustar el rango según la cantidad de columnas
            worksheet.getCell('A2').value = tituloReporte;
            worksheet.getCell('A2').font = {
                bold: true,
                size: 12
            };
            worksheet.getCell('A2').alignment = {
                horizontal: 'center'
            };

            // Obtener la tabla y sus encabezados
            const table = document.getElementById('clientesTable');
            const headers = Array.from(table.querySelectorAll('th')).map(th => th.innerText);

            // Eliminar la columna de 'Acción' si es la última columna
            if (headers[headers.length - 1] === 'Acción') {
                headers.pop(); // Eliminar la última columna de los encabezados
            }

            const headerRow = worksheet.addRow(headers);
            headerRow.font = {
                bold: true
            };
            headerRow.eachCell({
                includeEmpty: true
            }, (cell) => {
                cell.alignment = {
                    horizontal: 'center'
                };
                cell.fill = {
                    type: 'pattern',
                    pattern: 'solid',
                    fgColor: {
                        argb: '009DFF'
                    } // Color de fondo azul
                };
                cell.font = {
                    color: {
                        argb: 'FFFFFF'
                    }, // Color del texto en blanco
                    bold: true // Texto en negrita
                };
            });

            const rows = Array.from(table.querySelectorAll('tbody tr')).map(row =>
                Array.from(row.querySelectorAll('td')).map((td, index) => {
                    // Excluir la última columna si es la columna de 'Acción'
                    return (index === headers.length) ? null : td.innerText;
                }).filter(cell => cell !== null)
            );
            rows.forEach(row => worksheet.addRow(row));

            worksheet.autoFilter = {
                from: 'A3', // La primera fila de datos
                to: `${String.fromCharCode(65 + headers.length - 1)}${worksheet.rowCount}` // Última columna y fila
            };

            headers.forEach((_, index) => {
                let maxLength = headers[index].length; // Largo del encabezado
                rows.forEach(row => {
                    const cellLength = row[index] ? row[index].length : 0;
                    maxLength = Math.max(maxLength, cellLength);
                });
                worksheet.getColumn(index + 1).width = maxLength + 2; // Ajustar el ancho de la columna
            });

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

<!-- SCRIPT PARA PDF -->
<script>
    $(document).ready(function() {
        $('#pdfOption').click(function() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF();
            const table = document.getElementById('clientesTable');

            let headers = Array.from(table.querySelectorAll('th')).map(th => th.innerText);

            if (headers[headers.length - 1] === 'Acción') {
                headers.pop();
            }
            const rows = Array.from(table.querySelectorAll('tbody tr')).map(row =>
                Array.from(row.querySelectorAll('td')).map((td, index) => {
                    return (index === headers.length) ? null : td.innerText;
                }).filter(cell => cell !== null)
            );

            doc.setFontSize(14);
            doc.setFont("helvetica", "bold");
            doc.text('Empresa Inválida S.A. de C.V.', 105, 20, {
                align: 'center'
            }); // Centrado horizontal
            doc.setFontSize(12);
            doc.text('Facturas', 105, 30, {
                align: 'center'
            }); // Centrado horizontal

            doc.autoTable({
                startY: 40, // Inicio de la tabla
                head: [headers],
                body: rows,
                headStyles: {
                    fillColor: '#009DFF',
                    textColor: '#FFFFFF',
                    font: 'helvetica',
                    fontStyle: 'bold'
                },
                styles: {
                    cellPadding: 2,
                    fontSize: 10
                },
                margin: {
                    top: 40
                } // Ajusta el margen superior para evitar solapamiento con el título
            });

            doc.save('facturas.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>