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

    // 👉 Agregamos la función para sacar iniciales
    function obtenerIniciales($nombreCompleto)
    {
      $partes = explode(' ', $nombreCompleto);
      $iniciales = '';

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

    // 👉 Ahora creamos las iniciales
    $inicialesUsuario = obtenerIniciales($nombre);
  } else {
    $nombre = "Usuario";
    $rol = "Usuario";
    $inicialesUsuario = "US"; // Algo por defecto
  }

  $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</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>
              <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 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="estadisticascli.php" class="menu-link">
                  <div data-i18n="Statistics">Estadísticas</div>
                </a>
              </li>


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

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


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


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

          <!-- Aspel BANCO -->
          <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel BANCO</span></li>
          <!-- Forms -->
          <li class="menu-item">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-credit-card"></i>
              <div data-i18n="Form Elements">Movimientos</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="movimientos.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Movimientos</div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </aside>
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

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

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


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

              <?php
              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'>";
                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-id-card icon-sm me-1_5"></i>Detalles
                      <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
                    </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="#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-home icon-sm me-1_5"></i>Facturas
                      <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
                    </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 class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
                    </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 class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
                    </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 class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
                    </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 class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
                    </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="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" 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>
            <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>