<?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'];


        function obtenerIniciales($nombreCompleto)
        {
            $partes = explode(' ', $nombreCompleto);
            $iniciales = '';

            foreach ($partes as $parte) {
                if (!empty($parte)) {
                    $iniciales .= strtoupper($parte[0]);
                }
            }
            return $iniciales;
        }


        $inicialesUsuario = obtenerIniciales($nombre);
    } else {
        $nombre = "Usuario";
        $rol = "Usuario";
        $inicialesUsuario = "US";
    }

    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="es" class="layout-navbar-fixed layout-compact layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="../assets/" data-template="vertical-menu-template">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Clientes Con Póliza</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" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <!-- libreria de iconos -->
    <link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
    <!--  -->
    <link href='https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css' 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;
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

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


        .custom-filter {
            margin-right: 8px;
            /* Adjust the spacing as needed */
        }

        .button-container {
            padding-bottom: 20px;
        }

        .btn1 {
            border: 2px solid #e8fadf !important;
            background-color: #e8fadf !important;
            color: #71dd37 !important;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all 0.3s ease-out;
        }

        .btn1:hover {
            border: 2px solid #60bc2f !important;
            background-color: #60bc2f !important;
            color: #ffffff !important;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transform: translateY(-5px) scale(1.005) translateZ(0);
        }

        .btn-success {
            border: 2px solid #17d600;
            background-color: #ddffd9;
            color: #17d600;
        }

        .btn-success:hover {
            border: 2px solid #17d600;
            background-color: #ddffd9;
            color: #17d600;
        }

        .btn3 {
            border: 2px solid #ffe0db !important;
            background-color: #ffe0db !important;
            color: #ff3e1d !important;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all 0.3s ease-out;
        }

        .btn3:hover {
            border: 2px solid #d93519 !important;
            background-color: #d93519 !important;
            color: #ffffff !important;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transform: translateY(-5px) scale(1.005) translateZ(0);
        }


        .btn2 {
            border: 2px solid #fff2d6 !important;
            background-color: #fff2d6 !important;
            color: #ffab00 !important;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all 0.3s ease-out;
        }

        .btn2:hover {
            border: 2px solid #d99100 !important;
            background-color: #d99100 !important;
            color: #ffffff !important;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transform: translateY(-5px) scale(1.005) translateZ(0);
        }

        .btn-danger {
            border: 2px solid #ff3e1d;
            background-color: #ffe0db;
            color: #ff3e1d;
        }

        .btn4 {
            border: 2px solid #009dff;
            background-color: #ebf7ff;
            color: #009dff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all 0.3s ease-out;
        }

        .btn4:hover {
            border: 2px solid #009dff;
            background-color: #ebf7ff;
            color: #009dff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transform: translateY(-5px) scale(1.005) translateZ(0);
        }

        .btn5 {
            background-color: #007ecc;
            color: #ffffff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all 0.3s ease-out;
            border: 2px solid #007ecc;
            width: 175px;
        }

        .btn5:hover {
            background-color: #005fa3;
            color: #ffffff;
            padding: .330rem .30rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all 0.3s ease-out;
            border: 2px solid #005fa3;
            width: 175px;
        }

        .btn1:focus {
            outline: none;
            box-shadow: none;
            border: 2px solid #1b9f01;
        }

        .btn2:focus {
            outline: none;
            box-shadow: none;
        }

        .btn3:focus {
            outline: none;
            box-shadow: none;
        }

        .btn4:focus {
            outline: none;
            box-shadow: none;
        }

        .btn5:focus {
            outline: none;
            box-shadow: none;
        }

        .btn1.active {
            background-color: #17d600;
            color: #ffffff;
        }

        .btn2.active {
            background-color: #ffb502;
            color: #ffffff;
        }

        .btn3.active {
            background-color: #ff3e1d;
            color: #ffffff;
        }

        .btn4.active {
            background-color: #009DFF;
            color: #ffffff;
        }

        .btn5.active {
            background-color: #009DFF;
            color: #ffffff;
        }

        .btn1.selected {
            border: 2px solid #60bc2f !important;
            background-color: #60bc2f !important;
            color: #ffffff !important;
        }

        .btn2.selected {
            border: 2px solid #d99100 !important;
            background-color: #d99100 !important;
            color: #ffffff !important;
        }

        .btn3.selected {
            border: 2px solid #d93519 !important;
            background-color: #d93519 !important;
            color: #ffffff !important;
        }

        .table {
            width: 100%;
            /*table-layout: fixed;*/
            overflow-x: auto;
        }


        .btn-label-primary {
            border: 2px solid #009dff;
            background-color: #ebf7ff;
            color: #009dff;

        }

        /* Estilos para el desplegable */
        .search-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 9999;
            margin-top: 0.2rem;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: 0.25rem;
            overflow-y: auto;
            max-height: 300px;
        }

        .search-dropdown li {
            cursor: pointer;
        }

        .search-dropdown li:hover {
            background-color: #f0f0f0;
        }

        /* Ocultar resultados inicialmente */
        #modalSearchResults {
            display: none;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>

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

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

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

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

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

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

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

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

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

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


                    <li class="menu-item active open">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-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="correos.php" class="menu-link">
                                    <div data-i18n="Basic">Correos</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 active">
                                <a href="clientespoliza.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes con Póliza</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="devoluciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticasprove.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Compras X Proveedor</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>
                            <li class="menu-item ">
                                <a href="activos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="auxiliares.php" class="menu-link">
                                    <div data-i18n="Text Divider">Auxiliares</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestosPD.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos DP</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="monedas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Monedas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="departamentos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Departamentos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="otrosimpuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Otros Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="activosgenerales.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos Generales</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldosDP.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos DP</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="rubros.php" class="menu-link">
                                    <div data-i18n="Text Divider">Rubros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ccostos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Centro de Costos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="concepto.php" class="menu-link">
                                    <div data-i18n="Text Divider">Conceptos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="regpol.php" class="menu-link">
                                    <div data-i18n="Text Divider">Registro de Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="impuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="timbres.php" class="menu-link">
                                    <div data-i18n="Text Divider">Timbres</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>
                            <li class="menu-item">
                                <a href="moneda.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Moneda</div>
                                </a>

                            </li>
                            <li class="menu-item ">
                                <a href="beneficiosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Beneficios</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="cuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Cuentas ban</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="formadepagoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Forma de pago</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="parametrosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Partidas de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="comprobantedeldocumentoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Comprobante del documento</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="centrodecuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Conceptos de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="historialxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Historial</div>
                                </a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </aside>
            <!-- / Menu -->

            <!-- Layout container -->
            <div class="layout-page">
                <!-- Navbar -->
                <nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
                    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                        <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                        </a>
                    </div>

                    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                        <!-- Search -->
                        <div class="navbar-nav align-items-center">
                            <div class="nav-item d-flex align-items-center">
                                <i class="bx bx-search fs-4 lh-0"></i>
                                <input
                                    type="text"
                                    class="form-control border-0 shadow-none"
                                    placeholder="Buscar..."
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalBusqueda" />

                                <!-- Resultados -->
                                <ul id="searchResults" class="list-group search-dropdown"></ul>
                            </div>
                        </div>

                        <!-- /Search -->

                        <ul class="navbar-nav flex-row align-items-center ms-auto">


                            <!-- icono de idioma  -->
                            <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="icon-base bx bx-globe icon-md"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                    <li>
                                        <a class="dropdown-item active" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
                                            <span>French</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
                                            <span>Arabic</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
                                            <span>German</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <!-- Icono de modo oscuro -->
                            <li class="nav-item dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" id="nav-theme" href="javascript:void(0);" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
                                    <i class="bx-sun icon-base bx icon-md theme-icon-active"></i>
                                    <span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
                                </a>


                                <!-- Submenu de modo oscuro -->
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text" data-bs-popper="static">
                                    <li>
                                        <button type="button" class="dropdown-item align-items-center active" data-bs-theme-value="light" aria-pressed="true">
                                            <span>
                                                <i class="icon-base bx bx-sun icon-md me-3" data-icon="sun"></i>Claro
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-moon icon-md me-3" data-icon="moon"></i>Oscuro
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="system" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-desktop icon-md me-3" data-icon="desktop"></i>Sistema
                                            </span>
                                        </button>
                                    </li>

                                </ul>
                                <!-- Aquí termina submenu -->
                            </li>


                            <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <i class="icon-base bx bx-grid-alt icon-md"></i>
                                </a>
                                <!-- submenu -->
                                <div class="dropdown-menu dropdown-menu-end p-0">
                                    <div class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Shortcuts</h6>
                                            <a href="javascript:void(0)" class="dropdown-shortcuts-add py-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Add shortcuts" data-bs-original-title="Add shortcuts"><i class="icon-base bx bx-plus-circle text-heading"></i></a>
                                        </div>
                                    </div>
                                    <div class="dropdown-shortcuts-list scrollable-container ps">
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-calendar icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-calendar.html" class="stretched-link">Calendar</a>
                                                <small>Appointments</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-food-menu icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
                                                <small>Manage Accounts</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-user icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-user-list.html" class="stretched-link">User App</a>
                                                <small>Manage Users</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-check-shield icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-access-roles.html" class="stretched-link">Role Management</a>
                                                <small>Permission</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-pie-chart-alt-2 icon-26px text-heading"></i>
                                                </span>
                                                <a href="index.html" class="stretched-link">Dashboard</a>
                                                <small>User Dashboard</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-cog icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
                                                <small>Account Settings</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-help-circle icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-faq.html" class="stretched-link">FAQs</a>
                                                <small>FAQs &amp; Articles</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-window-open icon-26px text-heading"></i>
                                                </span>
                                                <a href="modal-examples.html" class="stretched-link">Modals</a>
                                                <small>Useful Popups</small>
                                            </div>
                                        </div>
                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- aqui termina submenu -->

                            </li>

                            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <span class="position-relative">
                                        <i class="icon-base bx bx-bell icon-md"></i>
                                        <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
                                    </span>
                                </a>

                                <!--empiezan las notificaciones -->
                                <ul class="dropdown-menu dropdown-menu-end p-0">
                                    <li class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Notification</h6>
                                            <div class="d-flex align-items-center h6 mb-0">
                                                <span class="badge bg-label-primary me-2">8 New</span>
                                                <a href="javascript:void(0)" class="dropdown-notifications-all p-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Mark all as read" data-bs-original-title="Mark all as read"><i class="icon-base bx bx-envelope-open text-heading"></i></a>
                                            </div>
                                        </div>
                                    </li>


                                    <li class="dropdown-notifications-list scrollable-container ps">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <img src="../../assets/img/avatars/1.png" alt="" class="rounded-circle">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
                                                        <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
                                                        <small class="text-body-secondary">1h ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">Charles Franklin</h6>
                                                        <small class="mb-1 d-block text-body">Accepted your connection</small>
                                                        <small class="text-body-secondary">12hr ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <img src="../../assets/img/avatars/2.png" alt="" class="rounded-circle">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">New Message ✉️</h6>
                                                        <small class="mb-1 d-block text-body">You have new message from Natalie</small>
                                                        <small class="text-body-secondary">1h ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>

                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </li>

                                    <li class="border-top">
                                        <div class="d-grid p-4">
                                            <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
                                                <small class="align-middle">View all notifications</small>
                                            </a>
                                        </div>
                                    </li>
                                </ul> <!-- termina submenu de notificaciones -->
                            </li>



                            <!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <div class="avatar avatar-online">
                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar avatar-online">
                                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <span class="fw-semibold d-block"><?php echo htmlspecialchars($nombre); ?></span>
                                                    <small class="text-muted"><?php echo htmlspecialchars($rol); ?></small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="index.html">
                                            <i class="bx bx-power-off me-2"></i>
                                            <span class="align-middle">Cerrar Sesión</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!--/ User -->
                        </ul>
                    </div>
                </nav>
                <!-- / Navbar -->

                <!-- Content wrapper -->
                <div class="content-wrapper">
                    <!-- Content -->
                    <?php
                    session_start();

                    $host = 'localhost';
                    $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE9.00\Empresa01\Datos\SAE90EMPRE01.FDB';
                    $username = 'SYSDBA';
                    $password = 'masterkey';

                    setlocale(LC_MONETARY, 'es_MX');

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

                        $sql = "SELECT c.*, cl.CAMPLIB12, cl.CAMPLIB18, cl.CAMPLIB20
                                FROM CLIE01 c
                                INNER JOIN CLIE_CLIB01 cl ON c.CLAVE = cl.CVE_CLIE
                                WHERE cl.CAMPLIB18 IS NOT NULL AND cl.CAMPLIB20 IS NOT NULL";

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

                        $mensuales = 0;
                        $semestrales = 0;
                        $anuales = 0;

                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                            $polizaInicio = new DateTime($row['CAMPLIB18']);
                            $polizaFin = new DateTime($row['CAMPLIB20']);

                            $duracionDias = $polizaInicio->diff($polizaFin)->days + 1; // Se suma 1 para incluir el día final

                            if ($duracionDias <= 31) {
                                $mensuales++;
                            } elseif ($duracionDias <= 62) {
                                $semestrales++;
                            } else {
                                $anuales++;
                            }
                        }
                    } catch (PDOException $e) {
                        echo "<p>Error de conexión: " . htmlspecialchars($e->getMessage()) . "</p>";
                        $mensuales = 0;
                        $semestrales = 0;
                        $anuales = 0;
                    }
                    ?>

                    <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>Clientes Mensuales</small>
                                                        <h4><?= $mensuales ?> </h4><!-- aquí el total -->
                                                    </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>Clientes Semestrales</small>
                                                        <h4><?= $semestrales ?> </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>Clientes Anuales</small>
                                                        <h4><?= $anuales ?> </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>
                        <!-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Tables /</span> Basic Tables</h4> -->

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

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

                                <?php
                                session_start();
                                $host = 'localhost';
                                $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE9.00\Empresa01\Datos\SAE90EMPRE01.FDB';
                                $username = 'SYSDBA';
                                $password = 'masterkey';

                                setlocale(LC_MONETARY, 'es_MX');

                                $baseSQL = "SELECT c.*, cl.CAMPLIB12, cl.CAMPLIB18, cl.CAMPLIB20
                                            FROM CLIE01 c
                                            INNER JOIN CLIE_CLIB01 cl ON c.CLAVE = cl.CVE_CLIE
                                            ";

                                $where = "WHERE cl.CAMPLIB18 IS NOT NULL AND cl.CAMPLIB20 IS NOT NULL";

                                $selectedFilter = $_POST['filtrar'] ?? 'todas';
                                $selectedTime = $_POST['filtrar_tiempo'] ?? 'todas';

                                if ($selectedTime == 'mensuales') {
                                    $where .= " AND (cl.CAMPLIB20 - cl.CAMPLIB18 + 1) <= 31";
                                } elseif ($selectedTime == 'semestrales') {
                                    $where .= " AND (cl.CAMPLIB20 - cl.CAMPLIB18 + 1) > 31 AND (cl.CAMPLIB20 - cl.CAMPLIB18 + 1) <= 62";
                                } elseif ($selectedTime == 'anuales') {
                                    $where .= " AND (cl.CAMPLIB20 - cl.CAMPLIB18 + 1) > 62";
                                }

                                if ($selectedFilter === 'vencidas') {
                                    $where .= " AND cl.CAMPLIB20 < CURRENT_DATE";
                                } elseif ($selectedFilter === 'por_vencer') {
                                    $where .= " AND cl.CAMPLIB20 BETWEEN CURRENT_DATE AND DATEADD(60 DAY TO CURRENT_DATE)";
                                } elseif ($selectedFilter === 'en_proceso') {
                                    $where .= " AND cl.CAMPLIB20 BETWEEN CURRENT_DATE AND DATEADD(5 DAY TO CURRENT_DATE)";
                                } elseif ($selectedFilter === 'vigencia') {
                                    $where .= " AND cl.CAMPLIB20 > DATEADD(60 DAY TO CURRENT_DATE)";
                                }

                                $sql = $baseSQL . " " . $where;

                                try {
                                    $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                                    $stmt = $dbh->query($sql);
                                ?>
                                    <!-- Contenedor principal -->
                                    <div class='container mt-5'>
                                        <h1 class='mb-4'><strong>Clientes Con Póliza</strong></h1>

                                        <div class='row mb-4 align-items-center'>
                                            <!-- Filtro por estado -->
                                            <div class='col-sm-12 col-md-6'>
                                                <div class="d-flex flex-wrap gap-2">
                                                    <button type='button' class='btn1 btn-outline-primary filtro-btn <?= $selectedFilter == 'vigencia' ? 'selected' : '' ?>' data-filtro='vigencia'>Vigente</button>
                                                    <button type='button' class='btn2 btn-outline-warning filtro-btn <?= $selectedFilter == 'por_vencer' ? 'selected' : '' ?>' data-filtro='por_vencer'>Por Vencer</button>
                                                    <button type='button' class='btn3 btn-outline-danger filtro-btn <?= $selectedFilter == 'vencidas' ? 'selected' : '' ?>' data-filtro='vencidas'>Vencidas</button>
                                                </div>
                                            </div>

                                            <!-- Filtro por tipo de póliza -->
                                            <div class='col-sm-12 col-md-6'>
                                                <div class="d-flex justify-content-md-end flex-wrap gap-2 mt-2 mt-md-0">
                                                    <div class="dropdown">
                                                        <button type="button" class="btn btn-label-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" id="dropdownTiempo">
                                                            Póliza
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownTiempo">
                                                            <li><a class="dropdown-item tiempo-opcion" href="javascript:void(0);" data-tiempo="mensuales">Mensual</a></li>
                                                            <li><a class="dropdown-item tiempo-opcion" href="javascript:void(0);" data-tiempo="semestrales">Semestral</a></li>
                                                            <li><a class="dropdown-item tiempo-opcion" href="javascript:void(0);" data-tiempo="anuales">Anual</a></li>
                                                        </ul>
                                                    </div>

                                                    <button type='button' class='btn5 btn-secondary custom-action' id='borrarFiltros'>Borrar Filtros</button>
                                                </div>
                                            </div>
                                        </div>


                                        <!-- Contenedor actualizable -->
                                        <div id="resultadoClientes">
                                            <table id='clientesTable' class='table table-hover'>
                                                <thead class='thead-dark'>
                                                    <tr>
                                                        <th class='num'>Clave</th>
                                                        <th>Nombre</th>
                                                        <th>Teléfono</th>
                                                        <th>Saldo</th>
                                                        <th>Estado de Póliza</th>
                                                        <th>Expediente</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)): ?>
                                                        <tr>
                                                            <td class='num'><?= htmlspecialchars($row['CLAVE']) ?></td>
                                                            <td><?= htmlspecialchars($row['NOMBRE']) ?></td>
                                                            <td><?= htmlspecialchars($row['TELEFONO']) ?></td>
                                                            <td><?= number_format($row['SALDO'], 2, '.', ',') ?></td>
                                                            <?php
                                                            $polizaFin = new DateTime($row['CAMPLIB20']);
                                                            $fechaHoy = new DateTime();
                                                            $diasRestantesRaw = $fechaHoy->diff($polizaFin)->format('%r%a') + 1;

                                                            if ($diasRestantesRaw <= 0) {
                                                                $buttonClass = 'badge bg-label-warning';
                                                                $buttonText = 'Vencida';
                                                                $diasRestantes = 0;
                                                            } elseif ($diasRestantesRaw <= 60) {
                                                                $buttonClass = 'badge bg-label-danger';
                                                                $buttonText = 'Por Vencer';
                                                                $diasRestantes = $diasRestantesRaw;
                                                            } else {
                                                                $buttonClass = 'badge bg-label-success';
                                                                $buttonText = 'Vigente';
                                                                $diasRestantes = $diasRestantesRaw;
                                                            }

                                                            $poliza = !empty($row['CAMPLIB12']) ? htmlspecialchars($row['CAMPLIB12']) : 'Sin Póliza';
                                                            $rfc = !empty($row['RFC']) ? htmlspecialchars($row['RFC']) : 'Sin RFC';
                                                            $inicio = !empty($row['CAMPLIB18']) ? date('d/m/Y', strtotime($row['CAMPLIB18'])) : 'N/D';
                                                            $fin = !empty($row['CAMPLIB20']) ? date('d/m/Y', strtotime($row['CAMPLIB20'])) : 'N/D';
                                                            ?>
                                                            <td>
                                                                <button class='btn <?= $buttonClass ?>' onclick="mostrarDetallePoliza(
                                                               '<?= htmlspecialchars($row['NOMBRE']) ?>',
                                                               '<?= $buttonText ?>',
                                                               '<?= $poliza ?>',
                                                               '<?= $rfc ?>',
                                                               '<?= $inicio ?>',
                                                               '<?= $fin ?>',
                                                               '<?= $diasRestantes ?> días',
                                                                '<?= number_format($row['SALDO'], 2, '.', ',') ?>'
                                                                 )"><?= $buttonText ?>
                                                                </button>
                                                            </td>
                                                            <td>
                                                                <a href="#"
                                                                    class="expediente-link"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#clienteModal"
                                                                    data-id="<?= htmlspecialchars($row['CLAVE']) ?>"
                                                                    data-nombre="<?= htmlspecialchars($row['NOMBRE']) ?>"
                                                                    data-saldo="<?= number_format($row['SALDO'], 2, '.', ',') ?>">
                                                                    <i class="bx bx-file-report"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    <?php endwhile; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                <?php
                                } catch (PDOException $e) {
                                    echo "<div class='container mt-5'><h2>Error de conexión:</h2>";
                                    echo "<p>" . htmlspecialchars($e->getMessage()) . "</p></div>";
                                }
                                ?>



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



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


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



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

                <div class="modal fade" id="clienteModal" tabindex="-1" role="dialog" aria-labelledby="clienteModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header sticky-header d-flex justify-content-between">
                                <div class="flex-grow-1 w-100 text-truncate">
                                    <h5 class="modal-title" id="clienteModalNombre">Nombre del Cliente:</h5>
                                </div>
                                <div class=" w-100 text-end">
                                    <h5 class="modal-title" id="clienteModalSaldo"></h5>
                                </div>
                                <button type="button" class="btn-close" onclick="cerrarModalExpediente()"></button>
                            </div>

                            <!-- Body con tabs fijas y scroll -->
                            <div class="modal-body">


                                <div class="nav-align-top nav-tabs-shadow">
                                    <ul class="nav nav-tabs nav-fill">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-bs-toggle="tab" href="#datos-generales">
                                                <i class="icon-base bx bx-id-card icon-sm me-1_5"></i> <span>Detalles</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#facturas">
                                                <i class="bx bx-file me-1_5"></i> <span>Facturas</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#cotizaciones">
                                                <i class="bx bx-dollar-circle me-1_5"></i> <span>Cotizaciones</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#dg">
                                                <i class="bx  bx-folder-plus me-1_5"></i> <span>Datos Adicionales</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#datosenvio">
                                                <i class="bx bx-send me-1_5"></i> <span>Datos Envío</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>



                                <div class="tab-content table-responsive table-scroll">
                                    <div class="tab-pane fade show active" id="datos-generales" role="tabpanel" aria-labelledby="datos-generales-tab">
                                        <div id="datosGeneralesContent"></div>
                                    </div>

                                    <div class="tab-pane fade" id="facturas" role="tabpanel" aria-labelledby="facturas-tab">
                                        <div id="facturasContent"></div>
                                    </div>

                                    <div class="tab-pane fade" id="cotizaciones" role="tabpanel" aria-labelledby="cotizaciones-tab">
                                        <div id="cotizacionesContent"></div>
                                    </div>

                                    <div class="tab-pane fade" id="dg" role="tabpanel" aria-labelledby="dg-tab">
                                        <div id="dgContent"></div>
                                    </div>

                                    <div class="tab-pane fade" id="datosenvio" role="tabpanel" aria-labelledby="datosenvio-tab">
                                        <div id="datosenvioContent"></div>
                                    </div>

                                    <!-- <div class="tab-pane fade" id="fiscales" role="tabpanel" aria-labelledby="fiscales-tab">
                      <div id="fiscalesContent"></div>
                    </div> -->
                                </div>


                                <!-- </div>
</section> -->

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

                <!-- modal para pestaña "DATOS ADICIONALES" -->
                <div class="modal fade" id="editarModal" tabindex="-1" role="dialog" aria-labelledby="editarModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="editarModalLabel">Editar Campo Libre</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 id="formEditar">
                                    <div class="form-group">
                                        <label for="campoLibre">Nuevo Valor</label>
                                        <input type="text" class="form-control" id="campoLibre">
                                    </div>
                                    <input type="hidden" id="cve_clie">
                                    <input type="hidden" id="camplib">
                                    <div class="d-flex justify-content-between mt-3">
                                        <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Modal para pestaña de "Datos de Envío" -->
                <div class="modal fade" id="editarModalDatosEnvio" tabindex="-1" role="dialog" aria-labelledby="editarModalDatosEnvioLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="editarModalDatosEnvioLabel">Editar Campo</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 id="formEditarDatosEnvio">
                                    <div class="form-group">
                                        <label for="nuevoValorDatosEnvio">Nuevo Valor</label>
                                        <input type="text" class="form-control" id="nuevoValorDatosEnvio" name="valor">
                                    </div>
                                    <input type="hidden" id="campoEditarDatosEnvio" name="campo">
                                    <input type="hidden" id="clienteIdDatosEnvio" name="clienteId" value="<?php echo $clienteId; ?>">

                                    <div class="d-flex justify-content-between mt-3">
                                        <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- MODAL DETALLE DE PÓLIZA -->
                <div class="modal fade" id="polizaModal" tabindex="-1" aria-labelledby="polizaModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Detalle de Póliza</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <div class="text-center mb-3">
                                    <div class="user-info text-center">
                                        <p><strong>Cliente:</strong> <span id="modalNombre"></span></p>
                                        <p><strong>RFC:</strong> <span id="modalRFC" class="rfc"></span></p>
                                        <p><strong>Estado de la póliza:</strong> <span id="modalEstadoPoliza" class="badge"></span></p>
                                    </div>
                                </div>

                                <div class="row row-gap-6">
                                    <div class="col-12 col-lg-4 px-6">
                                        <div class="d-flex justify-content-center mb-4">
                                            <div class="modal-refer-and-earn-step bg-label-primary">
                                                <i class="icon-base bx bx-id-card"></i>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <h5 class="mb-2">N° Póliza</h5>
                                            <p class="mb-lg-0" id="modalPoliza"></p>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-4 px-6">
                                        <div class="d-flex justify-content-center mb-4">
                                            <div class="modal-refer-and-earn-step bg-label-info">
                                                <i class="icon-base bx bx-calendar"></i>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <h5 class="mb-2">Inicio / Fin</h5>
                                            <p class="mb-lg-0"><span id="modalInicio"></span> al <span id="modalFin"></span></p>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-4 px-6 mt-6">
                                        <div class="d-flex justify-content-center mb-4">
                                            <div class="modal-refer-and-earn-step bg-label-success">
                                                <i class="icon-base bx bx-time-five"></i>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <h5 class="mb-2">Días Restantes</h5>
                                            <p class="mb-lg-0" id="modalDiasRestantes"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /MODAL DETALLE DE PÓLIZA -->

                <div class="modal fade" id="modalBusqueda" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Buscar módulo</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <div class="input-group mb-4">
                                    <span class="input-group-text"><i class="bx bx-search"></i></span>
                                    <input type="text" id="modalSearchInput" class="form-control" placeholder="Buscar módulo..." autocomplete="off">
                                </div>

                                <div class="row" id="modulosEstaticos">
                                    <!-- Columna 1 -->
                                    <div class="col-md-4 mb-4">
                                        <!-- Inicio -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-home me-1"></i> Inicio
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1">
                                                    <a href="tablero.php"><i class="bx bx-home-smile me-2"></i> Panel principal</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- Ventas -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-money me-1"></i> Ventas
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="facturas.php"><i class="bx bx-file me-2"></i> Facturas</a></li>
                                            </ul>
                                        </div>
                                        <!-- Clientes -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-user me-1"></i> Clientes
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="clientes.php"><i class="bx bx-user-pin me-2"></i> Clientes</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!-- Columna 2 -->
                                    <div class="col-md-4 mb-4">
                                        <!-- Inventario -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-package me-1"></i> Inventario
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="productos.php"><i class="bx bx-cube me-2"></i> Productos</a></li>
                                            </ul>
                                        </div>
                                        <!-- Compras -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-cart me-1"></i> Compras
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="compras.php"><i class="bx bx-purchase-tag me-2"></i> Compras</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!-- Columna 3 -->
                                    <div class="col-md-4 mb-4">
                                        <!-- Proveedores -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-building me-1"></i> Proveedores
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="proveedores.php"><i class="bx bx-user-voice me-2"></i> Proveedores</a></li>
                                            </ul>
                                        </div>
                                        <!-- Cuentas -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-wallet me-1"></i> Cuentas
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="cuentas.php"><i class="bx bx-credit-card me-2"></i> Cuentas</a></li>
                                            </ul>
                                        </div>
                                        <!-- Movimientos -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-transfer me-1"></i> Movimientos
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="movimientos.php"><i class="bx bx-transfer-alt me-2"></i> Movimientos</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Resultados de búsqueda -->
                                <ul id="modalSearchResults" class="list-group mb-3"></ul>

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

</body>


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

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<!-- SCRIPTS -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Función para cargar clientes con filtros y actualizar DataTable
        const cargarClientes = (filtro = '', tiempo = '') => {
            const formData = new FormData();
            if (filtro) formData.append('filtrar', filtro);
            if (tiempo) formData.append('filtrar_tiempo', tiempo);

            fetch(location.href, {
                    method: 'POST',
                    body: formData
                })
                .then(res => res.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const nuevoContenido = doc.querySelector('#resultadoClientes');
                    document.querySelector('#resultadoClientes').innerHTML = nuevoContenido.innerHTML;

                    // Restaurar botones seleccionados
                    document.querySelectorAll('.filtro-btn').forEach(b => {
                        b.classList.toggle('selected', b.getAttribute('data-filtro') === filtro);
                    });

                    // Restaurar opción activa del dropdown
                    document.querySelectorAll('.tiempo-opcion').forEach(i => {
                        const active = i.getAttribute('data-tiempo') === tiempo;
                        i.classList.toggle('active', active);
                        if (active) document.getElementById('dropdownTiempo').textContent = i.textContent;
                    });

                    // Reinstanciar DataTable
                    if ($.fn.DataTable.isDataTable('#clientesTable')) {
                        $('#clientesTable').DataTable().destroy();
                    }
                    $('#clientesTable').DataTable({
                        language: {
                            url: '../json/Spanish.json'
                        },
                        pageLength: 10,
                        lengthMenu: [
                            [10, 25, 50, -1],
                            [10, 25, 50, "Todos"]
                        ]
                    });
                });
        };

        // Eventos filtros y dropdown
        document.querySelectorAll('.filtro-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const filtro = btn.getAttribute('data-filtro');
                const tiempo = document.getElementById('dropdownTiempo').getAttribute('data-tiempo') || 'todas';
                document.querySelectorAll('.filtro-btn').forEach(b => b.classList.remove('selected'));
                btn.classList.add('selected');
                cargarClientes(filtro, tiempo);
            });
        });

        document.querySelectorAll('.tiempo-opcion').forEach(item => {
            item.addEventListener('click', () => {
                const tiempo = item.getAttribute('data-tiempo');
                const filtroActivo = document.querySelector('.filtro-btn.selected');
                const filtro = filtroActivo ? filtroActivo.getAttribute('data-filtro') : '';
                document.querySelectorAll('.tiempo-opcion').forEach(i => i.classList.remove('active'));
                item.classList.add('active');
                document.getElementById('dropdownTiempo').textContent = item.textContent;
                document.getElementById('dropdownTiempo').setAttribute('data-tiempo', tiempo);
                cargarClientes(filtro, tiempo);
            });
        });

        // Botón limpiar filtros
        document.getElementById('borrarFiltros').addEventListener('click', () => {
            document.querySelectorAll('.filtro-btn').forEach(b => b.classList.remove('selected'));
            document.querySelectorAll('.tiempo-opcion').forEach(i => i.classList.remove('active'));
            document.getElementById('dropdownTiempo').textContent = 'Todas';
            document.getElementById('dropdownTiempo').setAttribute('data-tiempo', 'todas');
            cargarClientes();
        });

        // Carga inicial automática
        cargarClientes();
    });
</script>

<script>
    function cerrarModalExpediente() {
        $('#clienteModal').modal('hide');
        // Opcional: Manejo extra para animación y backdrop (Bootstrap 4)
        var modal = document.getElementById('clienteModal');
        modal.classList.remove('show');
        setTimeout(() => {
            modal.style.display = 'none';
            modal.setAttribute('aria-hidden', 'true');
            modal.removeAttribute('aria-modal');
            modal.removeAttribute('role');
            var backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) backdrop.parentNode.removeChild(backdrop);
            document.body.classList.remove('modal-open');
        }, 300);
    }

    // Evitar que al cerrar un modal hijo se quite el scroll si hay otro abierto
    $(document).on('hidden.bs.modal', '.modal', function() {
        if ($('.modal.show').length > 0) {
            $('body').addClass('modal-open');
        } else {
            // Si no quedan modales abiertos, elimina el backdrop
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
        }
    });
</script>

<script>
    $(document).ready(function() {
        // Abrir modal editar datos adicionales
        $(document).on('click', '.btn-editar', function() {
            var fila = $(this).closest('tr');
            var valorCamplib = fila.find('.valor-camplib').text();
            var cve_clie = fila.data('cve_clie');
            var camplib = fila.data('camplib');

            $('#editarModal #campoLibre').val(valorCamplib);
            $('#editarModal #cve_clie').val(cve_clie);
            $('#editarModal #camplib').val(camplib);

            $('#editarModal').modal('show');
        });

        // Enviar formulario editar datos adicionales
        $('#formEditar').submit(function(e) {
            e.preventDefault();

            var cve_clie = $('#editarModal #cve_clie').val();
            var camplib = $('#editarModal #camplib').val();
            var nuevoValor = $('#editarModal #campoLibre').val();

            $.ajax({
                type: 'POST',
                url: 'actualizar_campolibre.php',
                data: {
                    cve_clie,
                    camplib,
                    nuevoValor
                },
                success: function(response) {
                    if (response.trim() === 'success') {
                        var fila = $('#tablaCamposLibres').find('tr[data-cve_clie="' + cve_clie + '"][data-camplib="' + camplib + '"]');
                        fila.find('.valor-camplib').text(nuevoValor);
                        $('#editarModal').modal('hide');
                    } else {
                        alert('Error al actualizar el campo libre.');
                    }
                },
                error: function() {
                    alert('Error de conexión.');
                }
            });
        });

        // Abrir modal editar datos de envío
        $(document).on('click', '.btn-editar-datosenvio', function() {
            var campo = $(this).data('campo');
            var valor = $(this).data('valor');
            var clienteId = $(this).data('clienteid');

            $('#campoEditarDatosEnvio').val(campo);
            $('#nuevoValorDatosEnvio').val(valor);
            $('#clienteIdDatosEnvio').val(clienteId);

            $('#editarModalDatosEnvio').modal('show');
        });

        // Enviar formulario editar datos de envío
        $('#formEditarDatosEnvio').on('submit', function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            var clienteId = $('#clienteIdDatosEnvio').val();

            $.ajax({
                url: 'datos_envio.php',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.status === 'success') {
                        $('#editarModalDatosEnvio').modal('hide');
                        cargarDatosCliente(clienteId);
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert('Error al guardar los cambios.');
                }
            });
        });

        // Función para recargar datos cliente (reutilizable)
        function cargarDatosCliente(clienteId) {
            $.ajax({
                url: 'detalles_cliente.php',
                method: 'POST',
                data: {
                    id: clienteId
                },
                success: function(response) {
                    var data = JSON.parse(response);
                    if (data.error) {
                        alert(data.error);
                    } else {
                        $('#datosGeneralesContent').html(data.datosGenerales);
                        $('#facturasContent').html(data.facturas);
                        $('#cotizacionesContent').html(data.cotizaciones);
                        $('#dgContent').html(data.dg);
                        $('#datosenvioContent').html(data.datosenvio);
                    }
                },
                error: function() {
                    alert('Error al cargar los datos del cliente.');
                }
            });
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Navegación pestañas modales
        const navLinks = document.querySelectorAll('.nav-modal .nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                navLinks.forEach(l => l.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // Mostrar datos en modal principal al abrir
        $('#clienteModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var clienteId = button.data('id');
            var nombre = button.data('nombre');
            var saldo = button.data('saldo');

            $('#clienteModalNombre').text('Cliente: ' + nombre);
            $('#clienteModalSaldo').text('Saldo: $' + saldo);
            $('#clienteIdDatosEnvio').val(clienteId);

            cargarDatosCliente(clienteId);
        });

        // Recarga datos cliente en modal principal
        function cargarDatosCliente(clienteId) {
            $.ajax({
                url: 'detalles_cliente.php',
                method: 'POST',
                data: {
                    id: clienteId
                },
                success: function(response) {
                    var data = JSON.parse(response);
                    if (data.error) {
                        alert(data.error);
                    } else {
                        $('#datosGeneralesContent').html(data.datosGenerales);
                        $('#facturasContent').html(data.facturas);
                        $('#cotizacionesContent').html(data.cotizaciones);
                        $('#dgContent').html(data.dg);
                        $('#datosenvioContent').html(data.datosenvio);
                    }
                },
                error: function() {
                    alert('Error al cargar los datos del cliente.');
                }
            });
        }
    });
</script>

<script>
    $(document).on('click', '.toggle-detalles-cotizacion', function() {
        var $icon = $(this);
        var $tr = $icon.closest('tr');
        var cotizacionId = $tr.data('id');
        var $detallesRow = $tr.next('.detalles-cotizacion');
        var $detallesCell = $detallesRow.find('td');

        if ($detallesRow.is(':visible')) {
            $detallesRow.hide();
            $icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
        } else {
            if ($detallesCell.is(':empty')) {
                $.ajax({
                    url: 'detalles_cotizacion.php',
                    method: 'POST',
                    data: {
                        id: cotizacionId
                    },
                    success: function(response) {
                        var data = JSON.parse(response);
                        if (data.detalles) {
                            $detallesCell.html(data.detalles);
                        } else if (data.error) {
                            $detallesCell.html('<div class="alert alert-danger">' + data.error + '</div>');
                        }
                    }
                });
            }
            $detallesRow.show();
            $icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
        }
    });

    $(document).on('click', '.toggle-detalles', function() {
        var $icon = $(this);
        var $tr = $icon.closest('tr');
        var facturaId = $tr.data('id');
        var $detallesRow = $tr.next('.detalles-factura');
        var $detallesCell = $detallesRow.find('td');

        if ($detallesRow.is(':visible')) {
            $detallesRow.hide();
            $icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
        } else {
            if ($detallesCell.is(':empty')) {
                $.ajax({
                    url: 'detalles_factura.php',
                    method: 'POST',
                    data: {
                        id: facturaId
                    },
                    success: function(response) {
                        var data = JSON.parse(response);
                        if (data.detalles) {
                            $detallesCell.html(data.detalles);
                        } else if (data.error) {
                            $detallesCell.html('<div class="alert alert-danger">' + data.error + '</div>');
                        }
                    }
                });
            }
            $detallesRow.show();
            $icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
        }
    });
</script>


<script>
// Función para mostrar el modal con datos
function mostrarDetallePoliza(nombre, estado, poliza, rfc, inicio, fin, dias, saldo) {
  document.getElementById('modalNombre').textContent = nombre;
  document.getElementById('modalEstadoPoliza').textContent = estado;

  let badgeClass = 'bg-label-success';
  if (estado === 'Por Vencer') badgeClass = 'bg-label-danger';
  else if (estado === 'Vencida') badgeClass = 'bg-label-warning';

  document.getElementById('modalEstadoPoliza').className = 'badge ' + badgeClass;

  document.getElementById('modalPoliza').textContent = poliza;
  document.getElementById('modalRFC').textContent = rfc;
  document.getElementById('modalInicio').textContent = inicio;
  document.getElementById('modalFin').textContent = fin;
  document.getElementById('modalDiasRestantes').textContent = dias;

  // Crear instancia global si no existe
  if (!window.miModalPoliza) {
    window.miModalPoliza = new bootstrap.Modal(document.getElementById('polizaModal'));
  }
  window.miModalPoliza.show();
}

// Cerrar modal al hacer clic en la “X”
document.addEventListener('DOMContentLoaded', () => {
  const btnCerrar = document.querySelector('#polizaModal .btn-close');
  if (btnCerrar) {
    btnCerrar.addEventListener('click', () => {
      if (window.miModalPoliza) {
        window.miModalPoliza.hide();
      }
    });
  }
});
</script>



<script>
    document.getElementById("modalSearchInput").addEventListener("input", function() {
        const query = this.value.trim();
        const results = document.getElementById("modalSearchResults");
        const modulos = document.getElementById("modulosEstaticos");

        results.innerHTML = "";

        if (query.length < 2) {
            // Mostrar módulos estáticos y ocultar resultados
            modulos.style.display = "flex"; // o "block" si prefieres
            results.style.display = "none";
            return;
        }

        // Ocultar módulos estáticos y mostrar resultados
        modulos.style.display = "none";
        results.style.display = "block";

        fetch("buscar_archivos.php?q=" + encodeURIComponent(query))
            .then(response => response.json())
            .then(data => {
                if (data.length === 0) {
                    results.innerHTML = `<li class="list-group-item text-muted">No se encontraron resultados</li>`;
                    return;
                }

                data.forEach(item => {
                    const li = document.createElement("li");
                    li.className = "list-group-item list-group-item-action";
                    li.innerHTML = `<i class="bx bx-link-alt me-2"></i> ${item.titulo}`;
                    li.addEventListener("click", () => {
                        window.location.href = item.archivo;
                    });
                    results.appendChild(li);
                });
            })
            .catch(error => {
                console.error("Error al buscar:", error);
            });
    });
</script>


</html>