<!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</title>
  <meta name="description" content="" />
  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="../assets/img/favicon/favicon.ico" />
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />

  <!-- Icons. Uncomment required icon fonts -->
  <link rel="stylesheet" href="../assets/vendor/fonts/boxicons.css" />

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../css/estilosdetablas.css">
  <link rel="stylesheet" href="../css/botonesfiltros.css">
  <link rel="stylesheet" href="../css/botonexportar.css">


  <!-- Core CSS -->
  <link rel="stylesheet" href="../assets/vendor/css/core.css" class="template-customizer-core-css" />
  <link rel="stylesheet" href="../assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
  <link rel="stylesheet" href="../assets/css/demo.css" />

  <!-- Vendors CSS -->
  <link rel="stylesheet" href="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

  <link rel="stylesheet" href="../assets/vendor/libs/apex-charts/apex-charts.css" />

  <!-- Page CSS -->

  <!-- Helpers -->
  <script src="../assets/vendor/js/helpers.js"></script>
  <script src="../assets/js/config.js"></script>

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

  <style>
    .wow {
      visibility: hidden;
    }

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

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

    .modal-footer .btn-secondary:focus {
      color: #fff;
      background-color: #007ecc !important;
      border-color: #007ecc !important;
      box-shadow: none !important;
    }
  </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>

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

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

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

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

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

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

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

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


          <li class="menu-item 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 active">
                <a href="clientes.php" class="menu-link">
                  <div data-i18n="Basic">Clientes</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="cuentasxcobrar.php" class="menu-link">
                  <div data-i18n="Basic">Cuentas X Cobrar</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="clientespoliza.php" class="menu-link">
                  <div data-i18n="Basic">Clientes con Póliza</div>
                </a>
              </li>


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

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


          <li class="menu-item">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-package"></i>
              <div data-i18n="Misc">Inventarios</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="productos.php" class="menu-link">
                  <div data-i18n="Error">Productos</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="existencias.php" class="menu-link">
                  <div data-i18n="Under Maintenance">Existencias</div>
                </a>
              </li>
            </ul>
          </li>


          <li class="menu-item">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-shopping-bag"></i>
              <div data-i18n="Misc">Compras</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="compras.php" class="menu-link">
                  <div data-i18n="Error">Compras</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="recepciones.php" class="menu-link">
                  <div data-i18n="Under Maintenance">Recepciones</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="ordenes.php" class="menu-link">
                  <div data-i18n="Under Maintenance">Ordenes</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="requisiciones.php" class="menu-link">
                  <div data-i18n="Under Maintenance">Requisiciones</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="devolucionescom.php" class="menu-link">
                  <div data-i18n="Under Maintenance">Devoluciones</div>
                </a>
              </li>
            </ul>
          </li>


          <li class="menu-item">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-group"></i>
              <div data-i18n="Misc">Proveedores</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="proveedores.php" class="menu-link">
                  <div data-i18n="Error">Proveedores</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="cuentasxpagar.php" class="menu-link">
                  <div data-i18n="Under Maintenance">Cuentas X Pagar</div>
                </a>
              </li>
            </ul>
          </li>


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

          <!-- Extended components -->
          <li class="menu-item">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-copy"></i>
              <div data-i18n="Extended UI">Cuentas y Pólizas</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="cuentas.php" class="menu-link">
                  <div data-i18n="Perfect Scrollbar">Cuentas</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="polizas.php" class="menu-link">
                  <div data-i18n="Text Divider">Pólizas</div>
                </a>
              </li>
              <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 navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
          <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
            <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
              <i class="bx bx-menu bx-sm"></i>
            </a>
          </div>

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

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


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


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


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

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

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

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


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

              </li>

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

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


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

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

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





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


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

        try {
          $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);

          // Contamos los clientes según su estatus
          $statuses = ['A' => 'activos', 'B' => 'baja', 'M' => 'morosos', 'S' => 'suspendidos'];
          $counts = [];

          foreach ($statuses as $code => $name) {
            $stmt = $dbh->prepare("SELECT COUNT(*) FROM CLIE01 WHERE STATUS = :status");
            $stmt->bindParam(':status', $code, PDO::PARAM_STR);
            $stmt->execute();
            $counts[$name] = $stmt->fetchColumn();
          }
        } catch (PDOException $e) {
          echo "<div class='container mt-5'><h2>AUN NO HAY CONEXION:</h2>";
          echo "<p>" . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "</p></div>";
          exit;
        }
        ?>

        <!-- Content wrapper -->
        <div class="content-wrapper">
          <!-- Content -->


          <div class="container-xxl flex-grow-1 container-p-y">
            <div class="row">
              <!--/ Total Revenue -->
              <div class="col-12 col-md-12 col-lg-12 order-3 order-md-2">
                <div class="row">

                  <div class="col-sm-6 col-xl-3 mb-4 wow animate_animated animate_fadeInUp" data-wow-delay="0.2s">
                    <div class="card">
                      <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="content-left">
                            <small>Clientes Activos</small>
                            <h4 class="mb-1"><?php echo $counts['activos']; ?></h4>
                          </div>
                          <span class="badge bg-label-success rounded-circle p-2">
                            <i class="icon-base bx bx-user-check icon-lg"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-6 col-xl-3 mb-4 wow animate_animated animate_fadeInUp" data-wow-delay="0.4s">
                    <div class="card">
                      <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="content-left">
                            <small>Clientes De Baja</small>
                            <h4 class="mb-1"><?php echo $counts['baja']; ?></h4>
                          </div>

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

                  <div class="col-sm-6 col-xl-3 mb-4 wow animate_animated animate_fadeInUp" data-wow-delay="0.6s">
                    <div class="card">
                      <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="content-left">
                            <small>Clientes Morosos</small>
                            <h4 class="mb-1"><?php echo $counts['morosos']; ?></h4>
                          </div>
                          <span class="badge bg-label-warning rounded-circle p-2">
                            <i class="icon-base bx bx-user icon-lg"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-6 col-xl-3 mb-4 wow animate_animated animate_fadeInUp" data-wow-delay="0.8s">
                    <div class="card">
                      <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="content-left">
                            <small>Clientes Suspendidos</small>
                            <h4 class="mb-1"><?php echo $counts['suspendidos']; ?></h4>
                          </div>
                          <span class="badge bg-label-primary rounded-circle p-2">
                            <i class="icon-base bx bx-user-x icon-lg"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


            <!-- Basic Bootstrap Table -->
             <!-- Hola chat buenas tardes, tengo esta consulta de mi base de datos de mi tabla de CLIE01.
             Requiero un menu desplegable que me permita seleccionar el numero de la empresa. En esta caso son solamente dos empresas.
             Haz de cuenta que mi base de datos de la empresa 1 esta en esta ruta: 
             'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
             Y mi tabla de clientes es "CLIE01"
             Y la ruta de la base de datos de la empres 2 es la siguiente: 
             $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE9.00\Empresa02\Datos\SAE90EMPRE02.FDB';
             y mi tabla de clientes cambia a "CLIE02"

             Eso quiere decir que cuando seleccione una empresa me va a estar cambiando la ruta de la base y el nombre de la tabla. -->

            <div class="card wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
              <!-- <h5 class="card-header">Clientes</h5> -->
              <div class="table-responsive text-nowrap"></div>

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

              setlocale(LC_MONETARY, 'es_MX');
              try {
                $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);

                $statusDescriptions = array(
                  'A' => 'Activo',
                  'B' => 'Baja',
                  'S' => 'Suspendido',
                  'M' => 'Moroso'
                );

                $statusFilter = isset($_GET['filter']) ? $_GET['filter'] : ''; // Capturamos el filtro de la URL

                // Asignamos el valor de filtro al código correspondiente
                $statusMap = array(
                  'activo' => 'A',
                  'baja' => 'B',
                  'moroso' => 'M',
                  'suspendido' => 'S'
                );
                $filterCode = isset($statusMap[$statusFilter]) ? $statusMap[$statusFilter] : '';

                // Construimos la consulta SQL con el filtro
                $sql = "SELECT * FROM CLIE01";
                if (!empty($filterCode)) {
                  $sql .= " WHERE STATUS = :status";
                }

                $stmt = $dbh->prepare($sql);
                if (!empty($filterCode)) {
                  $stmt->bindParam(':status', $filterCode, PDO::PARAM_STR);
                }
                $stmt->execute();

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

                // Botones de filtro
                echo "<div class='d-flex justify-content-between align-items-center mb-3'>";
                echo "<div class='btn-group' role='group'>";
                echo "<button class='btn custom-filter date-filter' data-filter='activo'>Activo</button>";
                echo "<button class='btn custom-filter date-filter' data-filter='baja'>Baja</button>";
                echo "<button class='btn custom-filter date-filter' data-filter='moroso'>Moroso</button>";
                echo "<button class='btn custom-filter date-filter' data-filter='suspendido'>Suspendido</button>";
                echo "</div>";

                echo "<div>";
                echo "<button class='btn custom-action' id='clearFilters'>Borrar Filtros</button>";
                echo "</div>";
                echo "</div>";

                // Tabla de resultados
                echo "<table id='clientesTable' class='table table-hover table-responsive'>";
                echo "<thead class='thead-dark'><tr><th class='num'>Clave</th><th>Estatus</th><th>Nombre</th><th>RFC</th><th>Calle</th><th>Telefono</th><th>Saldo</th><th>Expediente</th></tr></thead><tbody>";

                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                  echo "<tr>";
                  echo "<td class='num'>" . htmlspecialchars($row['CLAVE'], ENT_QUOTES, 'UTF-8') . "</td>";
                  echo "<td>" . htmlspecialchars($statusDescriptions[$row['STATUS']], ENT_QUOTES, 'UTF-8') . "</td>";
                  echo "<td>" . htmlspecialchars($row['NOMBRE'], ENT_QUOTES, 'UTF-8') . "</td>";
                  echo "<td>" . htmlspecialchars($row['RFC'], ENT_QUOTES, 'UTF-8') . "</td>";
                  echo "<td>" . htmlspecialchars($row['CALLE'], ENT_QUOTES, 'UTF-8') . "</td>";
                  echo "<td>" . htmlspecialchars($row['TELEFONO'], ENT_QUOTES, 'UTF-8') . "</td>";

                  $saldo = number_format($row['SALDO'], 2, '.', ',');
                  echo "<td>" . $saldo . "</td>";
                  echo "<td><button class='btn btn-primary detallesClienteBtn' data-toggle='modal' data-target='#clienteModal' data-id='" . $row['CLAVE'] . "'>Ver</button></td>";
                  echo "</tr>";
                }
                echo "</tbody></table>";
                echo "</div>";
              } catch (PDOException $e) {
                echo "<div class='container mt-5'><h2>AUN NO HAY CONEXION:</h2>";
                echo "<p>" . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "</p></div>";
              }
              ?>
            </div>
            <!-- / Content -->



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


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


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


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

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

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

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

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

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


      <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">
            <div class="modal-header">
              <h5 class="modal-title" id="clienteModalLabel">Detalles del Cliente</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="nav-align-top nav-tabs">
              <ul class="nav nav-tabs nav-fill" id="clienteTabs" role="tablist">

                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#datos-generales" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1">
                    <span class="d-none d-sm-inline-flex align-items-center">
                      <i class="icon-base bx bx-search-alt icon-sm me-1_5"></i>Detalles
                    </span>
                    <i class="icon-base bx bx-id-card icon-sm d-sm-none"></i>
                  </button>
                </li>

                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#facturas" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1">
                    <span class="d-none d-sm-inline-flex align-items-center">
                      <i class="icon-base bx bx-invoice-dollar icon-sm me-1_5"></i>Facturas
                    </span>
                    <i class="icon-base bx bx-home icon-sm d-sm-none"></i>
                  </button>
                </li>

                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#cotizaciones" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1">
                    <span class="d-none d-sm-inline-flex align-items-center">
                      <i class="icon-base bx bx-home icon-sm me-1_5"></i>Cotizaciones
                    </span>
                    <i class="icon-base bx bx-home icon-sm d-sm-none"></i>
                  </button>
                </li>


                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#dg" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1">
                    <span class="d-none d-sm-inline-flex align-items-center">
                      <i class="icon-base bx bx-home icon-sm me-1_5"></i>Datos Adicionales
                    </span>
                    <i class="icon-base bx bx-home icon-sm d-sm-none"></i>
                  </button>
                </li>



                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#datosenvio" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1">
                    <span class="d-none d-sm-inline-flex align-items-center">
                      <i class="icon-base bx bx-home icon-sm me-1_5"></i>Datos Envío
                    </span>
                    <i class="icon-base bx bx-home icon-sm d-sm-none"></i>
                  </button>
                </li>

                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#fiscales" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1">
                    <span class="d-none d-sm-inline-flex align-items-center">
                      <i class="icon-base bx bx-home icon-sm me-1_5"></i>Fiscales
                    </span>
                    <i class="icon-base bx bx-home icon-sm d-sm-none"></i>
                  </button>
                </li>
                <!-- <li class="nav-link">
                  <a class="nav-link active" id="datos-generales-tab" data-toggle="tab" href="#datos-generales" role="tab" aria-controls="datos-generales" aria-selected="true">Datos Generales</a>
                </li> -->

                <!-- <li class="nav-link">
                  <a class="nav-link" id="facturas-tab" data-toggle="tab" href="#facturas" role="tab" aria-controls="facturas" aria-selected="false">Facturas</a>
                </li> -->
                <!-- <li class="nav-link">
                  <a class="nav-link" id="cotizaciones-tab" data-toggle="tab" href="#cotizaciones" role="tab" aria-controls="cotizaciones" aria-selected="false">Cotizaciones</a>
                </li> -->


                <!-- <li class="nav-link">
                  <a class="nav-link" id="dg-tab" data-toggle="tab" href="#dg" role="tab" aria-controls="dg" aria-selected="false">Datos Adicionales</a>
                </li> -->

                <!-- <li class="nav-link">
                  <a class="nav-link" id="datosenvio-tab" data-toggle="tab" href="#datosenvio" role="tab" aria-controls="datosenvio" aria-selected="false">Datos Envío</a>
                </li> -->

                <!-- <li class="nav-link">
                  <a class="nav-link" id="fiscales-tab" data-toggle="tab" href="#fiscales" role="tab" aria-controls="fiscales" aria-selected="false">Fiscales</a>
                </li> -->

              </ul>

              <div class="modal-body">

                <div class="tab-content">
                  <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 table-responsive" id="facturas" role="tabpanel" aria-labelledby="facturas-tab">
                    <div id="facturasContent"></div>
                  </div>

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

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

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

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

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
              </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">
                  <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </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; ?>">
                  <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </form>
              </div>
            </div>
          </div>
        </div>


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



<script>
  // Capturar clic en los botones de filtro
  document.querySelectorAll('.date-filter').forEach(button => {
    button.addEventListener('click', function() {
      const filter = this.getAttribute('data-filter');
      window.location.href = `?filter=${filter}`; // Redirige con el filtro en la URL
    });
  });

  // Botón para borrar filtros
  document.getElementById('clearFilters').addEventListener('click', function() {
    window.location.href = `?filter=`; // Redirige sin filtro
  });

  // Aplicar estilos al botón activo basado en el filtro de la URL
  document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const currentFilter = urlParams.get('filter'); // Obtener el filtro actual
    if (currentFilter) {
      const activeButton = document.querySelector(`.date-filter[data-filter="${currentFilter}"]`);
      if (activeButton) {
        activeButton.style.borderColor = '#009dff';
        activeButton.style.backgroundColor = '#009dff';
        activeButton.style.color = '#fff';
      }
    }
  });
</script>


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

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



<script>
  document.addEventListener('DOMContentLoaded', function() {
    $('#clienteModal').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget);
      var clienteId = button.data('id');

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

<script>
  $(document).ready(function() {

    $(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);
    });


    $('#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: cve_clie,
          camplib: camplib,
          nuevoValor: 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.');
        }
      });
    });
  });
</script>



<script>
  $(document).ready(function() {
    $('.btn-editar-datosenvio').on('click', function() {
      var campo = $(this).data('campo');
      var valor = $(this).data('valor');

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

    $('#formEditarDatosEnvio').on('submit', function(e) {
      e.preventDefault();
      var formData = $(this).serialize();

      $.ajax({
        url: 'datos_envio.php',
        type: 'POST',
        data: formData,
        success: function(response) {
          alert('Cambios guardados correctamente');
          $('#editarModalDatosEnvio').modal('hide');
        },
        error: function(xhr, status, error) {
          console.error(xhr.responseText);
        }
      });
    });
  });
</script>


<script>
  $(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>
  $(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');
    }
  });
</script>



</html>