<?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>Seguimiento</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">

  <!-- Bootstrap (si no lo tienes) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Boxicons -->
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

  <!-- Select2 -->
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

  <!-- QuillJS (para el editor) -->
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

  <!-- 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 -->
  <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/vendor/css/pages/app-email.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;
    }

    /* Scroll para listas de correos */
    .email-list {
      max-height: 500px;
      /* Ajusta la altura visible */
      overflow-y: auto;
    }

    /* Estilo del scroll */
    .email-list::-webkit-scrollbar {
      width: 8px;
    }

    .email-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .email-actions {
      opacity: 0;
      /* Ocultos por defecto */
      pointer-events: none;
      /* No clickeables cuando están ocultos */
      transition: opacity 0.3s ease;
    }

    .email-item:hover .email-actions {
      opacity: 1;
      /* Aparecen con hover */
      pointer-events: auto;
      /* Ahora sí clickeables */
    }

    /* Estilo para el item activo */
    .email-filter-folders li.active a,
    .email-labels-list li.active a {
      background-color: rgba(255, 250, 250, 0.1);
      /* Azul clarito */
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease-in-out;
    }

    /* Animación de subrayado suave */
    .email-filter-folders li a,
    .email-labels-list li a {
      position: relative;
      display: inline-block;
      overflow: hidden;
    }

    .email-filter-folders li a::after,
    .email-labels-list li a::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: -100%;
      width: 100%;
      height: 2px;

      transition: left 0.3s ease-in-out;
    }

    .email-filter-folders li.active a::after,
    .email-labels-list li.active a::after {
      left: 0;
    }

    .notificacion {
      color: #384551;
      block-size: 1.375rem !important;
      font-size: 1.375rem !important;
      inline-size: 1.375rem !important;
    }
  </style>
  <style>
    /* Animación de la campanita cuando hay notificaciones nuevas */
    @keyframes campanitaBrillo {

      0%,
      100% {
        color: #009DFF;
        /* color principal azul */
        text-shadow: 0 0 0 #009DFF;
        transform: scale(1);
      }

      50% {
        color: #33bfff;
        /* azul más brillante */
        text-shadow: 0 0 8px #33bfff, 0 0 12px #33bfff;
        transform: scale(1.2);
      }
    }

    .campanita-nueva {
      animation: campanitaBrillo 1s infinite;
      -webkit-text-fill-color: #009DFF;
      /* rellena el interior de la fuente */
      text-fill-color: #009DFF;
    }
  </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  ">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-user"></i>
              <div data-i18n="Authentications">Clientes</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item ">
                <a href="clientes.php" class="menu-link">
                  <div data-i18n="Basic">Clientes</div>
                </a>
              </li>

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

              <li class="menu-item">
                <a href="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>


          <!-- Correos -->
          <li class="menu-header small text-uppercase">
            <span class="menu-header-text">Procesos</span>
          </li>

          <li class="menu-item active open">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-envelope"></i>
              <div data-i18n="Form Elements">Correo</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item ">
                <a href="correos.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Correos</div>
                </a>
              </li>
              <li class="menu-item ">
                <a href="grafica.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Gráfica</div>
                </a>
              </li>
              <li class="menu-item active ">
                <a href="Seguimiento.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Seguimiento</div>
                </a>
              </li>
            </ul>
          </li>


          <!-- ORDENES DE SERVICIO -->
          <li class="menu-header small text-uppercase">
            <span class="menu-header-text">Soporte Y Mantenimiento </span>
          </li>
          <li class="menu-item">
            <a href="#" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-check-shield"></i>
              <div data-i18n="Form Elements">Mantenimiento</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="ordenservicio.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Ordenes de Servicio</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="registrossemana.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Registros</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="estadisticasord.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Estadisticas</div>
                </a>
              </li>
            </ul>
          </li>

          <!-- Logistica -->
                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Logística</span>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-car"></i>
                            <div data-i18n="Form Elements">Logística</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Nueva Ruta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="datos_logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Seguimiento</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="unidades.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Unidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="repartidores.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Repartidores</div>
                                </a>
                            </li>
                        </ul>
                    </li>
        </ul>
      </aside>
      <!-- / Menu -->

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

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

                <!-- Resultados -->
                <ul id="searchResults" class="list-group search-dropdown"></ul>
              </div>
            </div>
            <style>
              /* Estilos para el desplegable */
              .search-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 9999;
                margin-top: 0.2rem;
                background: white;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                border-radius: 0.25rem;
                overflow-y: auto;
                max-height: 300px;
              }

              .search-dropdown li {
                cursor: pointer;
              }

              .search-dropdown li:hover {
                background-color: #f0f0f0;
              }
            </style>

            <!-- /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="#" data-bs-toggle="dropdown" aria-expanded="false">
                  <span class="position-relative">
                    <i class="bx notificacion bx-bell "></i>
                    <span id="badgeNotification" class="badge rounded-pill bg-danger badge-dot badge-notifications border d-none"></span>
                  </span>
                </a>


                <!-- Dropdown de 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">Notificaciones</h6>
                      <a href="#" class="p-2" onclick="marcarTodoLeido()">
                        <i class="bx bx-envelope-open text-heading"></i>
                      </a>
                    </div>
                  </li>

                  <li class="dropdown-notifications-list scrollable-container ps">
                    <ul class="list-group list-group-flush" id="listaNotificaciones"></ul>
                  </li>
                </ul>

              </li>
              <audio id="notifSound" src="audio/mixkit-software-interface-start-2574.mp3" preload="auto"></audio>


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


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

          <!-- Content -->
          <div class="container-xxl flex-grow-1 container-p-y">
            <div class="row">
              <div class="col-12 col-md-12 col-lg-12 order-3 order-md-2">
                <div class="row"></div>
              </div>
            </div>
            <?php
            header('Content-Type: text/html; charset=UTF-8');
            ini_set('display_errors', 1);
            ini_set('display_startup_errors', 1);
            error_reporting(E_ALL);

            $host = 'localhost';
            $dbname = 'CORREOS';
            $user = 'root';
            $pass = 'root';

            // Todas las áreas que quieres mostrar
            $areasPermitidas = [
              "contabilidad",
              "ventas-aspel",
              "ventas-soft",
              "administracion-general",
              "rh",
              "soporte-aspel",
              "soporte-soft",
              "programacion",
              "diseno",
              "marketing"
            ];

            try {
              $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $user, $pass);
              $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

              // Avance por correo
              $sql = "
        SELECT 
            ca.ID_CORREO,
            COUNT(*) AS total_areas,
            SUM(CASE WHEN ca.ESTADO = 'TERMINADO' THEN 1 ELSE 0 END) AS areas_terminadas,
            ROUND(SUM(CASE WHEN ca.ESTADO = 'TERMINADO' THEN 1 ELSE 0 END) * 100 / COUNT(*), 0) AS porcentaje_avance
        FROM correo_areas ca
        WHERE ca.AREA IN (" . implode(',', array_fill(0, count($areasPermitidas), '?')) . ")
        GROUP BY ca.ID_CORREO
        ORDER BY ca.ID_CORREO DESC
    ";
              $stmt = $pdo->prepare($sql);
              $stmt->execute($areasPermitidas);
              $correos = $stmt->fetchAll(PDO::FETCH_ASSOC);

              // Detalle por correo
              $detalleSql = "
        SELECT c.ID_CORREO, c.REMITENTE, c.DESTINATARIO, c.ASUNTO, c.MENSAJE, c.FECHA_ENVIO,
               ca.AREA, ca.ESTADO, ca.NOTA
        FROM correo_areas ca
        JOIN correo c ON c.ID_CORREO = ca.ID_CORREO
        WHERE ca.AREA IN (" . implode(',', array_fill(0, count($areasPermitidas), '?')) . ")
        ORDER BY ca.ID_CORREO, ca.AREA
    ";
              $detalleStmt = $pdo->prepare($detalleSql);
              $detalleStmt->execute($areasPermitidas);
              $detalleCorreos = $detalleStmt->fetchAll(PDO::FETCH_ASSOC);
            } catch (PDOException $e) {
              die("Error: " . $e->getMessage());
            }
            ?>


            <div class="card">
              <div class="card-header">
                <h5 class="card-title">Avance de Correos por Área</h5>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table id="clientesTable" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>ID Correo</th>
                        <th>Total Áreas</th>
                        <th>Áreas Terminadas</th>
                        <th>Avance</th>
                        <th>Acciones</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php foreach ($correos as $correo): ?>
                        <?php
                        $pendientes = [];
                        $datosCorreo = null;
                        foreach ($detalleCorreos as $d) {
                          if ($d['ID_CORREO'] == $correo['ID_CORREO']) {
                            if ($d['ESTADO'] != 'TERMINADO') $pendientes[] = $d;
                            if (!$datosCorreo) $datosCorreo = $d;
                          }
                        }
                        ?>
                        <tr>
                          <td><?= htmlspecialchars($correo['ID_CORREO']) ?></td>
                          <td><?= htmlspecialchars($correo['total_areas']) ?></td>
                          <td><?= htmlspecialchars($correo['areas_terminadas']) ?></td>
                          <td>
                            <div class="progress" style="height: 20px;">
                              <div class="progress-bar"
                                role="progressbar"
                                style="width: <?= $correo['porcentaje_avance'] ?>%; background-color: <?= $correo['porcentaje_avance'] == 100 ? '#0063a0ff' : '#0dcaf0' ?>;"
                                aria-valuenow="<?= $correo['porcentaje_avance'] ?>"
                                aria-valuemin="0"
                                aria-valuemax="100">
                                <?= $correo['porcentaje_avance'] ?>%
                              </div>
                            </div>
                          </td>
                          <td>
                            <button class="btn " data-bs-toggle="modal" data-bs-target="#modalCorreo<?= $correo['ID_CORREO'] ?>">
                              <i class="icon-base bx bx-edit icon-md"></i>
                            </button>


                            <button class="btn btn-sm btn-success btn-agregar-nota-global" data-idcorreo="<?= $correo['ID_CORREO'] ?>">
                              Agregar Nota
                            </button>

                            <!-- Modal Detalle -->
                            <div class="modal fade" id="modalCorreo<?= $correo['ID_CORREO'] ?>" tabindex="-1" aria-hidden="true">
                              <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title">Detalle Correo <?= $correo['ID_CORREO'] ?>: <?= htmlspecialchars($datosCorreo['ASUNTO']) ?></h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                  </div>
                                  <div class="modal-body">
                                    <h6>Información del Correo:</h6>
                                    <p><strong>Remitente:</strong> <?= htmlspecialchars($datosCorreo['REMITENTE']) ?></p>
                                    <p><strong>Destinatario:</strong> <?= htmlspecialchars($datosCorreo['DESTINATARIO']) ?></p>
                                    <p><strong>Asunto:</strong> <?= htmlspecialchars($datosCorreo['ASUNTO']) ?></p>
                                    <p><strong>Mensaje:</strong><br><?= nl2br(htmlspecialchars($datosCorreo['MENSAJE'])) ?></p>
                                    <p><strong>Fecha de envío:</strong> <?= htmlspecialchars($datosCorreo['FECHA_ENVIO']) ?></p>

                                    <h6>Áreas Asignadas:</h6>
                                    <ul>
                                      <?php foreach ($detalleCorreos as $d): ?>
                                        <?php if ($d['ID_CORREO'] == $correo['ID_CORREO']): ?>
                                          <li style="padding: 5px; margin-bottom: 3px; border-radius: 4px; background-color: <?= $d['ESTADO'] != 'TERMINADO' ? '#f8d7da' : '#d4edda' ?>;">
                                            <?= htmlspecialchars($d['AREA']) ?> - <strong><?= $d['ESTADO'] != 'TERMINADO' ? 'Pendiente' : 'Terminado' ?></strong>
                                            <?php if ($d['NOTA']): ?> - Nota: <?= htmlspecialchars($d['NOTA']) ?> <?php endif; ?>
                                          </li>
                                        <?php endif; ?>
                                      <?php endforeach; ?>
                                    </ul>

                                    <h6>Notas de Seguimiento:</h6>
                                    <ul id="listaNotas<?= $correo['ID_CORREO'] ?>">
                                      <?php
                                      $stmtNotas = $pdo->prepare("SELECT * FROM correo_notas WHERE ID_CORREO = ? ORDER BY FECHA DESC");
                                      $stmtNotas->execute([$correo['ID_CORREO']]);
                                      $notas = $stmtNotas->fetchAll(PDO::FETCH_ASSOC);
                                      if ($notas):
                                        foreach ($notas as $n): ?>
                                          <li style="background-color: #fff3cd; padding: 5px 10px; border-radius: 5px; margin-bottom: 5px;">
                                            <?= htmlspecialchars($n['NOTA']) ?>
                                            <small class="text-muted">(<?= $n['FECHA'] ?>)</small>
                                          </li>
                                        <?php endforeach;
                                      else: ?>
                                        <li><em>Sin notas</em></li>
                                      <?php endif; ?>
                                    </ul>

                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                      <?php endforeach; ?>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>


            <div class="content-backdrop fade"></div>
          </div>
        </div>

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

      <!-- Modal para agregar nota -->
      <div class="modal fade" id="modalAgregarNota" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Agregar Nota</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
              <input type="hidden" id="notaIdCorreo">
              <div class="mb-3">
                <label for="notaTexto" class="form-label">Escribe tu nota:</label>
                <textarea class="form-control" id="notaTexto" rows="4"></textarea>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
              <button type="button" class="btn btn-primary" id="btnGuardarNota">Guardar Nota</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Toast de éxito -->
      <div class="toast align-items-center text-bg-success border-0 position-fixed bottom-0 end-0 m-3" id="toastCorreo" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
          <div class="toast-body">
            Nota guardada con éxito
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Cerrar"></button>
        </div>
      </div>

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



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




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

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

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

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

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

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

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

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/natural.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-material-ui/material-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- QuillJS -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Toast de éxito -->
<div class="toast align-items-center text-bg-success border-0 position-fixed bottom-0 end-0 m-3" id="toastCorreo" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Nota guardada con éxito
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Cerrar"></button>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  let modalAgregarNota = new bootstrap.Modal(document.getElementById("modalAgregarNota"));
  let toastElement = document.getElementById("toastCorreo");
  let toastBootstrap = new bootstrap.Toast(toastElement, { delay: 3000 }); // se oculta automáticamente en 3s

  // Abrir modal
  document.querySelectorAll(".btn-agregar-nota-global").forEach(btn => {
    btn.addEventListener("click", () => {
      const idCorreo = btn.dataset.idcorreo;
      document.getElementById("notaIdCorreo").value = idCorreo;
      document.getElementById("notaTexto").value = "";
      modalAgregarNota.show();
    });
  });

  // Guardar nota
  document.getElementById("btnGuardarNota").addEventListener("click", () => {
    const idCorreo = document.getElementById("notaIdCorreo").value;
    const nota = document.getElementById("notaTexto").value.trim();

    if(nota === "") {
      alert("La nota no puede estar vacía.");
      return;
    }

    fetch("guardar_nota.php", {
      method: "POST",
      headers: {"Content-Type": "application/x-www-form-urlencoded"},
      body: "idCorreo=" + encodeURIComponent(idCorreo) + "&nota=" + encodeURIComponent(nota)
    })
    .then(r => r.text())
    .then(resp => {
      modalAgregarNota.hide();

      // Mostrar toast con animación
      toastBootstrap.show();

      // Opcional: actualizar lista de notas sin recargar
      setTimeout(() => location.reload(), 1000); // recarga después de mostrar toast
    })
    .catch(err => console.error(err));
  });
});
</script>

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

    // Filtrado por estatus usando DataTables API
    $('.date-filter').click(function() {
      var filter = $(this).data('filter'); // activo, baja, moroso, suspendido
      // La columna 2 es Estatus, usamos regex case-insensitive
      table.column(2).search(filter, true, false, true).draw();
    });

    // Borrar filtros
    $('#clearFilters').click(function() {
      table.column(2).search('').draw();
    });
  });
</script>


<script>
  // Datos de ejemplo (estos vendrían de tu consulta SQL en backend)
  const datosCorreos = [{
      ID_CORREO: 101,
      total_areas: 2,
      areas_terminadas: 1,
      porcentaje_avance: 50
    },
    {
      ID_CORREO: 102,
      total_areas: 3,
      areas_terminadas: 3,
      porcentaje_avance: 100
    },
    {
      ID_CORREO: 103,
      total_areas: 4,
      areas_terminadas: 0,
      porcentaje_avance: 0
    },
  ];

  const tbody = document.getElementById("tablaCorreos");

  datosCorreos.forEach(c => {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${c.ID_CORREO}</td>
      <td>${c.total_areas}</td>
      <td>${c.areas_terminadas}</td>
      <td>
        <div class="progress" style="height: 20px;">
          <div class="progress-bar ${c.porcentaje_avance == 100 ? '#0063a0' : 'bg-info'}" 
               role="progressbar" 
               style="width: ${c.porcentaje_avance}%" 
               aria-valuenow="${c.porcentaje_avance}" aria-valuemin="0" aria-valuemax="100">
            ${c.porcentaje_avance}%
          </div>
        </div>
      </td>
    `;
    tbody.appendChild(tr);
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const modalBuscarEl = document.getElementById("modalBuscarCliente");
    const modalRedactarEl = document.getElementById("emailComposeSidebar");

    const modalBuscar = new bootstrap.Modal(modalBuscarEl);
    const modalRedactar = new bootstrap.Modal(modalRedactarEl);

    const btnCerrarBuscar = modalBuscarEl.querySelector(".btn-close");

    btnCerrarBuscar.addEventListener("click", () => {
      // Cerrar modal Buscar
      modalBuscar.hide();

      // Cuando termine de cerrarse
      modalBuscarEl.addEventListener("hidden.bs.modal", () => {
        // 🔹 Elimina cualquier backdrop residual
        document.querySelectorAll(".modal-backdrop").forEach(b => b.remove());

        // Abrir modal Redactar
        modalRedactar.show();
      }, {
        once: true
      });
    });
  });
</script>


<script>
  document.addEventListener('DOMContentLoaded', () => {
    const firmaSelect = document.getElementById('firma');
    const firmaPreview = document.getElementById('firmaPreview');
    const firmaImg = document.getElementById('firmaImg');

    firmaSelect.addEventListener('change', () => {
      if (firmaSelect.value) {
        firmaImg.src = firmaSelect.value;
        firmaPreview.style.display = 'block';
      } else {
        firmaImg.src = '';
        firmaPreview.style.display = 'none';
      }
    });
  });
</script>

</html>