# Cómo integrar WhatsApp en `dashboard_coordinador.php`

Sigue la misma arquitectura que ya usan con `boton_panico`. Copia estos fragmentos
en los lugares indicados (busca el texto de referencia en tu archivo actual).

## 1. Contador para el sidebar

Junto a los otros `contar(...)` al inicio del archivo:

```php
$whatsappPendientes = contar("SELECT COUNT(*) AS TOTAL FROM alertas_whatsapp WHERE estado = 'pendiente'");
```

## 2. Link en el sidebar

Junto a los demás `<a href="...">` del sidebar (por ejemplo cerca de "Reporte Accidente"):

```php
<a href="ver_alertas_whatsapp.php" id="whatsappLink">
  Alertas WhatsApp
  <?php if ($whatsappPendientes > 0): ?><span class="notificacion" id="whatsappBadge"><?= $whatsappPendientes ?></span><?php endif; ?>
</a>
<a href="vincular_whatsapp.php">Vincular WhatsApp</a>
```

## 3. Contador inicial en el bloque de JS de estado inicial

Junto a `let currentAccidentes = ...`:

```javascript
let currentWhatsapp = <?= $whatsappPendientes ?>;
```

## 4. Agregar el campo al polling de notificaciones existente

En tu `check_notifications_coordinador.php` (el que ya consultan con `checkNotifications()`),
agrega al JSON de salida:

```php
$whatsapp = (int)(db_select_to_array("SELECT COUNT(*) AS TOTAL FROM alertas_whatsapp WHERE estado = 'pendiente'")[0]['TOTAL'] ?? 0);
// ...dentro del array que armas para json_encode:
'whatsapp' => $whatsapp,
```

Y en `updateNotifications(d)` dentro de `dashboard_coordinador.php`, agrega la línea:

```javascript
currentWhatsapp = chk(currentWhatsapp, d.whatsapp, 'whatsappBadge', 'whatsappLink', 'Nueva alerta de seguridad en WhatsApp');
```

## 5. (Recomendado) Alerta emergente igual a la de bodega/técnicos

Como las palabras clave son de emergencia real (accidente, herido, auxilio...), conviene
mostrar el mismo overlay con sirena que ya usan para `boton_panico`, no solo un badge silencioso.
Puedes reutilizar el mismo CSS que ya existe (`.alerta-panico-overlay`, `.alerta-panico-modal`, etc.)
sin agregar una sola línea de CSS nueva.

Agrega este bloque de PHP donde están los otros `<?php if ($mostrar_alerta...) ?>` (después del
de técnicos), y este bloque de JS junto a `verificarEstadoPanicoTecnicos()`:

```php
<?php
$rawAlertaWa = db_select_to_array(
    "SELECT * FROM (
        SELECT id, grupo_nombre, remitente_nombre, remitente_numero,
               DBMS_LOB.SUBSTR(mensaje, 500, 1) AS mensaje,
               palabra_clave,
               TO_CHAR(fecha_mensaje,'YYYY-MM-DD HH24:MI:SS') AS fecha_mensaje
        FROM alertas_whatsapp
        WHERE estado = 'pendiente'
        ORDER BY fecha_registro DESC
     ) WHERE ROWNUM = 1"
);
$alerta_wa_activa = !empty($rawAlertaWa);
$total_alertas_wa = (int)($whatsappPendientes ?? 0);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['marcar_vista_alerta_wa'])) {
    if ($alerta_wa_activa) {
        $_SESSION['alerta_wa_vista_id'] = $rawAlertaWa[0]['ID'];
    }
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}
$alerta_wa_ya_vista = isset($_SESSION['alerta_wa_vista_id']) && $alerta_wa_activa
    && $_SESSION['alerta_wa_vista_id'] == $rawAlertaWa[0]['ID'];
$mostrar_alerta_wa = $alerta_wa_activa && !$alerta_wa_ya_vista;
?>

<?php if ($mostrar_alerta_wa): ?>
<div class="alerta-panico-overlay" id="alertaPanicoWa">
  <div class="alerta-panico-modal">
    <div class="alerta-header">
      <h2>🚨 ALERTA DE SEGURIDAD EN GRUPO</h2>
    </div>
    <div class="alerta-info">
      <p><strong>📌 Grupo:</strong> <?= htmlspecialchars($rawAlertaWa[0]['GRUPO_NOMBRE']) ?></p>
      <p><strong>👤 Remitente:</strong> <?= htmlspecialchars($rawAlertaWa[0]['REMITENTE_NOMBRE']) ?> (<?= htmlspecialchars($rawAlertaWa[0]['REMITENTE_NUMERO']) ?>)</p>
      <p><strong>💬 Mensaje:</strong> <?= htmlspecialchars($rawAlertaWa[0]['MENSAJE']) ?></p>
      <p><strong>🔑 Palabra detectada:</strong> <?= htmlspecialchars($rawAlertaWa[0]['PALABRA_CLAVE']) ?></p>
      <p><strong>⏰ Hora:</strong> <?= date('d/m/Y H:i:s', strtotime($rawAlertaWa[0]['FECHA_MENSAJE'])) ?></p>
    </div>
    <div style="display:flex; gap:1rem; margin-top:1.5rem;">
      <form method="POST" style="flex:1;">
        <button type="submit" name="marcar_vista_alerta_wa" class="btn-marcar-vista" style="width:100%;">✅ YA VI LA ALERTA</button>
      </form>
      <a href="ver_alertas_whatsapp.php" class="btn-marcar-vista" style="background:#007bff;text-decoration:none;display:flex;align-items:center;justify-content:center;flex:1;">📋 VER TODAS</a>
    </div>
  </div>
</div>
<script>
  setTimeout(iniciarReproduccionContinua, 500); // reutiliza el mismo audio de pánico
</script>
<?php endif; ?>
```

```javascript
// Junto a verificarEstadoPanicoTecnicos, agrega el polling de WhatsApp:
function verificarAlertasWhatsapp() {
  fetch('check_alertas_whatsapp.php?t=' + Date.now())
    .then(r => r.json())
    .then(d => {
      if (d.total > 0) {
        // el badge ya se actualiza por checkNotifications();
        // aquí podrías forzar el reload si quieres el overlay emergente inmediato:
        // ejecutarRecargaSegura();
      }
    }).catch(() => {});
}
setInterval(verificarAlertasWhatsapp, 10000);
```

> Nota: el overlay de arriba se muestra al cargar/recargar la página (igual que el de
> bodega). Si quieres que aparezca sin recargar en cuanto Node inserta la alerta,
> descomenta `ejecutarRecargaSegura()` dentro de `verificarAlertasWhatsapp()`.