<?php
/**
 * ASISMA CRM - Panel visual de Rotacion de Leads (solo matriz)
 * La rueda por segmento con arrastre (franquiciados = prioridad de cascada,
 * vendedores = orden de la cola) + leads rotando en vivo con su reloj.
 */
?>

<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-5">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Rotación de Leads</h1>
        <p class="text-slate-400 text-sm mt-1">Elige la vertical, y dentro de ella arrastra los franquiciados (quién recibe primero) y los vendedores de cada cola.</p>
    </div>
    <div id="estadoCron" class="flex items-center gap-2 px-4 py-2.5 bg-slate-900 border border-slate-800 rounded-xl text-sm">
        <span class="w-2.5 h-2.5 rounded-full bg-slate-600" id="cronPunto"></span>
        <span class="text-slate-400" id="cronTexto">Verificando el cron...</span>
    </div>
</div>

<!-- ══════════ LO PRIMERO: LA VERTICAL ══════════ -->
<div class="flex items-center flex-wrap gap-2 mb-8">
    <span class="text-xs font-semibold text-slate-500 uppercase tracking-wider mr-1">Vertical:</span>
    <?php foreach ($verticales as $v): $activa = (int)$v['id'] === (int)$verticalId; ?>
    <a href="<?php echo APP_URL; ?>/rotacion?vertical_id=<?php echo $v['id']; ?>"
       class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold border-2 transition-colors <?php echo $activa
            ? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-600/20'
            : 'bg-slate-900 border-slate-700 text-slate-300 hover:border-blue-500/60 hover:text-white'; ?>">
        <i data-lucide="layers" class="w-4 h-4 <?php echo $activa ? 'text-white' : 'text-indigo-400'; ?>"></i>
        <?php echo htmlspecialchars($v['nombre']); ?>
        <span class="text-[10px] font-black rounded-full px-1.5 py-0.5 <?php echo $activa ? 'bg-white/20' : 'bg-slate-800'; ?>"><?php echo $v['total_franquiciados']; ?></span>
    </a>
    <?php endforeach; ?>
    <?php if (empty($verticales)): ?>
    <span class="text-sm text-slate-500">No hay verticales con franquiciados.</span>
    <?php endif; ?>
</div>

<!-- ══════════ SEGUNDO NIVEL: LA MARCA (los leads rotan por vertical Y por marca) ══════════ -->
<?php if (!empty($marcas)): ?>
<div class="flex items-center flex-wrap gap-2 -mt-4 mb-8">
    <span class="text-xs font-semibold text-slate-500 uppercase tracking-wider mr-1">Marca:</span>
    <a href="<?php echo APP_URL; ?>/rotacion?vertical_id=<?php echo $verticalId; ?>"
       class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold border transition-colors <?php echo !$marcaId
            ? 'bg-indigo-600 border-indigo-500 text-white'
            : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-indigo-500/60 hover:text-white'; ?>">
        Todas las marcas
    </a>
    <?php foreach ($marcas as $mk): $activaMk = (int)$mk['id'] === (int)$marcaId; ?>
    <a href="<?php echo APP_URL; ?>/rotacion?vertical_id=<?php echo $verticalId; ?>&marca_id=<?php echo $mk['id']; ?>"
       class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold border transition-colors <?php echo $activaMk
            ? 'bg-indigo-600 border-indigo-500 text-white'
            : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-indigo-500/60 hover:text-white'; ?>">
        <i data-lucide="tag" class="w-3 h-3"></i><?php echo htmlspecialchars($mk['nombre']); ?>
    </a>
    <?php endforeach; ?>
    <?php if ($marcaId): ?>
    <span class="text-[11px] text-slate-500 ml-1">Los leads genéricos de la marca solo recorren a los de marca COMPLETA; los de producto específico también a los de producto suelto.</span>
    <?php endif; ?>
</div>
<?php endif; ?>

<!-- ══════════ ROTANDO AHORA ══════════ -->
<div class="mb-8">
    <h2 class="text-sm font-bold text-amber-400 uppercase tracking-wider mb-3 flex items-center gap-2">
        <i data-lucide="timer" class="w-4 h-4"></i> Rotando ahora
        <span id="rotandoContador" class="text-[11px] font-bold bg-amber-500/15 text-amber-300 border border-amber-500/30 rounded-full px-2 py-0.5">0</span>
    </h2>
    <div id="panelRotando" class="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <div class="px-4 py-6 bg-slate-900 border border-slate-800 rounded-2xl text-center text-slate-500 text-sm">Cargando...</div>
    </div>
</div>

<!-- ══════════ LA RUEDA (cascada por segmento) ══════════ -->
<div class="mb-8">
    <h2 class="text-sm font-bold text-blue-400 uppercase tracking-wider mb-3 flex items-center gap-2">
        <i data-lucide="refresh-cw" class="w-4 h-4"></i> La rueda: orden de la cascada
    </h2>

    <?php if (empty($segmentos)): ?>
    <div class="px-4 py-6 bg-slate-900 border border-slate-800 rounded-2xl text-center text-slate-500 text-sm">Esta vertical no tiene franquiciados registrados.</div>
    <?php endif; ?>

    <?php foreach ($segmentos as $claveSegmento => $seg): ?>
    <div class="bg-slate-900 border border-slate-800/80 rounded-2xl p-5 shadow-xl mb-5">
        <div class="flex items-center gap-2 mb-4">
            <span class="inline-flex items-center gap-1.5 rounded-lg bg-slate-800 border border-slate-700 px-2.5 py-1 text-xs font-semibold text-slate-300">
                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-blue-400"></i><?php echo htmlspecialchars($seg['region']); ?>
            </span>
            <span class="text-[11px] text-slate-500 ml-1">El lead recorre en este orden ↓ y si nadie lo toma, vuelve a la matriz</span>
        </div>

        <div class="flex flex-col xl:flex-row xl:items-stretch gap-3">
            <div class="flex flex-col xl:flex-row xl:items-stretch gap-3 flex-1 lista-cascada" data-segmento="<?php echo htmlspecialchars($claveSegmento); ?>">
                <?php foreach ($seg['franquiciados'] as $indiceF => $f): ?>
                <div class="tarjeta-franquicia relative flex-1 min-w-0 bg-slate-950 border-2 <?php echo $f['estado'] === 'activo' ? 'border-slate-700' : 'border-red-900/50 opacity-60'; ?> rounded-xl cursor-grab active:cursor-grabbing"
                     data-franquiciado="<?php echo $f['id']; ?>">
                    <div class="px-4 py-3 border-b border-slate-800 flex items-center gap-3">
                        <span class="numero-orden shrink-0 w-8 h-8 rounded-full bg-blue-600 text-white text-sm font-black flex items-center justify-center shadow-lg"><?php echo $indiceF + 1; ?></span>
                        <div class="min-w-0 flex-1">
                            <div class="font-bold text-white text-sm truncate"><?php echo htmlspecialchars($f['nombre_fantasia']); ?></div>
                            <div class="text-[11px] text-slate-500">
                                Toma: <?php echo round($f['tiempo_toma_lead'] / 60); ?> min
                                <?php if ($f['estado'] !== 'activo'): ?><span class="text-red-400 font-semibold"> · <?php echo $f['estado']; ?></span><?php endif; ?>
                            </div>
                            <?php if ($f['marca_completa'] === true): ?>
                            <span class="inline-flex items-center gap-1 mt-1 rounded-full px-2 py-0.5 text-[10px] font-bold bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">
                                <i data-lucide="badge-check" class="w-3 h-3"></i> Marca completa
                            </span>
                            <?php elseif ($f['marca_completa'] === false && !empty($f['sueltos_marca'])): ?>
                            <span class="inline-flex items-center gap-1 mt-1 rounded-full px-2 py-0.5 text-[10px] font-bold bg-amber-500/15 text-amber-300 border border-amber-500/30"
                                  title="<?php echo htmlspecialchars(implode(', ', $f['sueltos_marca'])); ?>">
                                <i data-lucide="package" class="w-3 h-3"></i> Solo por producto: <?php echo htmlspecialchars(implode(', ', array_slice($f['sueltos_marca'], 0, 2)) . (count($f['sueltos_marca']) > 2 ? '…' : '')); ?>
                            </span>
                            <?php endif; ?>
                        </div>
                        <i data-lucide="grip-vertical" class="w-4 h-4 text-slate-600 shrink-0"></i>
                    </div>
                    <div class="p-2">
                        <?php if (empty($f['vendedores'])): ?>
                        <div class="px-2 py-2 text-[11px] text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-1.5">
                            <i data-lucide="alert-triangle" class="w-3.5 h-3.5 shrink-0"></i> Sin vendedores en cola: NO recibe leads
                        </div>
                        <?php else: ?>
                        <div class="lista-vendedores space-y-1" data-franquiciado="<?php echo $f['id']; ?>">
                            <?php foreach ($f['vendedores'] as $indiceV => $vend):
                                $iniciales = '';
                                foreach (explode(' ', $vend['nombre']) as $palabra) { if ($palabra !== '') $iniciales .= mb_substr($palabra, 0, 1, 'UTF-8'); }
                                $iniciales = mb_strtoupper(mb_substr($iniciales, 0, 2, 'UTF-8'), 'UTF-8');
                            ?>
                            <div class="fila-vendedor flex items-center gap-2 px-2 py-1.5 bg-slate-900 border border-slate-800 rounded-lg cursor-grab active:cursor-grabbing hover:border-slate-600 transition-colors"
                                 data-usuario="<?php echo $vend['usuario_id']; ?>">
                                <span class="numero-vendedor text-[10px] font-bold text-slate-500 w-4 text-center"><?php echo $indiceV + 1; ?></span>
                                <span class="w-6 h-6 rounded-full bg-gradient-to-tr from-indigo-600 to-blue-500 text-white text-[10px] font-bold flex items-center justify-center shrink-0"><?php echo htmlspecialchars($iniciales); ?></span>
                                <span class="text-xs text-slate-300 truncate flex-1"><?php echo htmlspecialchars($vend['nombre']); ?></span>
                                <i data-lucide="grip-horizontal" class="w-3 h-3 text-slate-600 shrink-0"></i>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- La matriz siempre al final de la cascada -->
            <div class="shrink-0 xl:w-44 bg-slate-950 border-2 border-dashed border-slate-700 rounded-xl flex flex-col items-center justify-center gap-2 px-4 py-5 text-center">
                <span class="w-8 h-8 rounded-full bg-slate-700 text-white flex items-center justify-center"><i data-lucide="landmark" class="w-4 h-4"></i></span>
                <div class="text-xs font-bold text-slate-300">MATRIZ ASISMA</div>
                <div class="text-[10px] text-slate-500">Si nadie lo toma, el lead vuelve acá</div>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- ══════════ HUERFANOS + ULTIMAS ROTACIONES ══════════ -->
<div class="grid grid-cols-1 xl:grid-cols-2 gap-5 mb-8">
    <div>
        <h2 class="text-sm font-bold text-red-400 uppercase tracking-wider mb-3 flex items-center gap-2">
            <i data-lucide="user-x" class="w-4 h-4"></i> Huérfanos esperando al cron
            <span id="huerfanosContador" class="text-[11px] font-bold bg-red-500/15 text-red-300 border border-red-500/30 rounded-full px-2 py-0.5">0</span>
        </h2>
        <div id="panelHuerfanos" class="space-y-2"></div>
    </div>
    <div>
        <h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-2">
            <i data-lucide="history" class="w-4 h-4"></i> Últimas rotaciones
        </h2>
        <div id="panelRecientes" class="space-y-2"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
var APP_URL     = '<?php echo APP_URL; ?>';
var VERTICAL_ID = <?php echo (int)$verticalId; ?>;
var MARCA_ID    = <?php echo (int)$marcaId; ?>;

function escaparHtml(t) { return $('<i>').text(t == null ? '' : t).html(); }

// ---------- Arrastre: cascada de franquiciados por segmento ----------
document.querySelectorAll('.lista-cascada').forEach(function(lista) {
    new Sortable(lista, {
        animation: 200,
        handle: '.tarjeta-franquicia',
        ghostClass: 'opacity-40',
        onEnd: function() {
            var ids = [];
            lista.querySelectorAll('.tarjeta-franquicia').forEach(function(tarjeta, i) {
                ids.push(tarjeta.dataset.franquiciado);
                tarjeta.querySelector('.numero-orden').textContent = i + 1;
            });
            $.post(APP_URL + '/rotacion/ordenar-franquiciados', { franquiciados: ids }, function(r) {
                avisoCorto(r.success ? 'Cascada actualizada' : (r.message || 'Error'), r.success);
            }, 'json');
        }
    });
});

// ---------- Arrastre: vendedores dentro de cada franquicia ----------
document.querySelectorAll('.lista-vendedores').forEach(function(lista) {
    new Sortable(lista, {
        animation: 150,
        ghostClass: 'opacity-40',
        onEnd: function() {
            var ids = [];
            lista.querySelectorAll('.fila-vendedor').forEach(function(fila, i) {
                ids.push(fila.dataset.usuario);
                fila.querySelector('.numero-vendedor').textContent = i + 1;
            });
            $.post(APP_URL + '/rotacion/ordenar-cola', { franquiciado_id: lista.dataset.franquiciado, usuarios: ids }, function(r) {
                avisoCorto(r.success ? 'Cola actualizada' : (r.message || 'Error'), r.success);
            }, 'json');
        }
    });
});

function avisoCorto(texto, ok) {
    Swal.fire({
        toast: true, position: 'top-end', timer: 1600, showConfirmButton: false,
        icon: ok ? 'success' : 'error', title: texto,
        background: '#1e293b', color: '#f8fafc'
    });
}

// ---------- Recorrido del lead como cadena de chips ----------
function chipsRecorrido(recorrido) {
    if (!recorrido || !recorrido.length) return '<span class="text-[11px] text-slate-600">sin intentos aún</span>';
    var html = '<div class="flex items-center flex-wrap gap-1">';
    recorrido.forEach(function(paso, i) {
        if (i > 0) html += '<i data-lucide="chevron-right" class="w-3 h-3 text-slate-600"></i>';
        var clases = {
            pendiente: 'bg-amber-500/15 text-amber-300 border-amber-500/40 animate-pulse',
            aceptado:  'bg-emerald-500/15 text-emerald-300 border-emerald-500/40',
            timeout:   'bg-red-500/10 text-red-400 border-red-500/30 line-through',
            rechazado: 'bg-slate-700/40 text-slate-500 border-slate-600 line-through'
        };
        html += '<span class="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold ' + (clases[paso.estado] || clases.rechazado) + '">' +
                escaparHtml(paso.franquicia) + (paso.vendedor ? ' · ' + escaparHtml(paso.vendedor.split(' ')[0]) : '') + '</span>';
    });
    html += '</div>';
    return html;
}

function formatoTiempo(segundos) {
    if (segundos <= 0) return '0:00';
    var min = Math.floor(segundos / 60), seg = segundos % 60;
    return min + ':' + (seg < 10 ? '0' : '') + seg;
}

// ---------- Refresco en vivo ----------
var datosVivos = null;

function pintarPanel() {
    if (!datosVivos) return;

    // Cron
    var cron = datosVivos.cron;
    var punto = document.getElementById('cronPunto'), texto = document.getElementById('cronTexto');
    if (cron.activo) {
        punto.className = 'w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse';
        texto.textContent = 'Cron activo — última corrida hace ' + cron.hace_segundos + ' s';
    } else if (cron.ultima_corrida) {
        punto.className = 'w-2.5 h-2.5 rounded-full bg-red-500';
        texto.textContent = 'Cron DETENIDO — última corrida: ' + cron.ultima_corrida;
    } else {
        punto.className = 'w-2.5 h-2.5 rounded-full bg-red-500';
        texto.textContent = 'Cron sin registros: aún no corre';
    }

    // Rotando ahora
    $('#rotandoContador').text(datosVivos.rotando.length);
    var $rot = $('#panelRotando').empty();
    if (!datosVivos.rotando.length) {
        $rot.append('<div class="px-4 py-6 bg-slate-900 border border-slate-800 rounded-2xl text-center text-slate-500 text-sm xl:col-span-2">No hay leads rotando en este momento. Cuando llegue uno por la API o lo suelte un timeout, aparecerá acá girando.</div>');
    }
    datosVivos.rotando.forEach(function(l) {
        var restante = Math.max(0, l.segundos_restantes);
        var pct = Math.max(0, Math.min(100, Math.round(restante * 100 / l.timeout_segundos)));
        var colorBarra = pct > 50 ? 'bg-emerald-500' : (pct > 20 ? 'bg-amber-500' : 'bg-red-500');
        var notificado = l.vendedor_notificado
            ? '<div class="flex items-center gap-1.5 mt-2 text-[11px] font-semibold text-amber-300">' +
              '<i data-lucide="bell-ring" class="w-3.5 h-3.5 animate-pulse"></i>' +
              'Notificando a <b>' + escaparHtml(l.vendedor_notificado) + '</b> (' + escaparHtml(l.franquicia_notificada || '') + ')</div>'
            : '';
        $rot.append(
            '<div class="bg-slate-900 border border-amber-500/30 rounded-2xl p-4 shadow-xl">' +
            '<div class="flex items-center justify-between gap-3 mb-2">' +
            '<div class="min-w-0"><div class="font-bold text-white text-sm truncate">' + escaparHtml(l.empresa || 'Lead #' + l.lead_id) + '</div>' +
            '<div class="text-[11px] text-slate-500">' + escaparHtml(l.interes) + ' · ' + escaparHtml(l.region || '') + '</div></div>' +
            '<div class="text-right shrink-0"><div class="reloj-lead font-mono text-lg font-black text-amber-300" data-restante="' + restante + '" data-timeout="' + l.timeout_segundos + '">' + formatoTiempo(restante) + '</div>' +
            '<div class="text-[10px] text-slate-500 uppercase">para tomarlo</div></div></div>' +
            '<div class="h-1.5 bg-slate-800 rounded-full overflow-hidden mb-2"><div class="barra-lead h-full ' + colorBarra + ' transition-all" style="width:' + pct + '%"></div></div>' +
            chipsRecorrido(datosVivos.recorridos[l.lead_id]) +
            notificado +
            '</div>'
        );
    });

    // ── Marcar EN LA RUEDA a quien se le esta notificando en este momento ──
    document.querySelectorAll('.tarjeta-franquicia').forEach(function(t) {
        t.classList.remove('ring-2', 'ring-amber-400', 'border-amber-400');
        var aviso = t.querySelector('.aviso-notificando');
        if (aviso) aviso.remove();
    });
    document.querySelectorAll('.fila-vendedor').forEach(function(f) {
        f.classList.remove('bg-amber-500/20', 'border-amber-400');
        var campana = f.querySelector('.campana-notificando');
        if (campana) campana.remove();
    });
    datosVivos.rotando.forEach(function(l) {
        var tarjeta = document.querySelector('.tarjeta-franquicia[data-franquiciado="' + l.franquiciado_id + '"]');
        if (tarjeta) {
            tarjeta.classList.add('ring-2', 'ring-amber-400', 'border-amber-400');
            if (!tarjeta.querySelector('.aviso-notificando')) {
                var aviso = document.createElement('div');
                aviso.className = 'aviso-notificando absolute -top-2.5 left-1/2 -translate-x-1/2 z-10 inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-black bg-amber-400 text-slate-950 shadow-lg animate-pulse whitespace-nowrap';
                aviso.innerHTML = '<i data-lucide="bell-ring" class="w-3 h-3"></i>NOTIFICANDO AHORA';
                tarjeta.appendChild(aviso);
            }
        }
        var fila = document.querySelector('.fila-vendedor[data-usuario="' + l.usuario_id + '"]');
        if (fila) {
            fila.classList.add('bg-amber-500/20', 'border-amber-400');
            if (!fila.querySelector('.campana-notificando')) {
                var campana = document.createElement('i');
                campana.setAttribute('data-lucide', 'bell-ring');
                campana.className = 'campana-notificando w-3.5 h-3.5 text-amber-300 animate-pulse shrink-0';
                fila.appendChild(campana);
            }
        }
    });

    // Huerfanos
    $('#huerfanosContador').text(datosVivos.huerfanos.length);
    var $hue = $('#panelHuerfanos').empty();
    if (!datosVivos.huerfanos.length) {
        $hue.append('<div class="px-4 py-4 bg-slate-900 border border-slate-800 rounded-xl text-center text-slate-500 text-xs">Sin leads huérfanos: todos asignados o en rotación.</div>');
    }
    datosVivos.huerfanos.forEach(function(l) {
        $hue.append(
            '<div class="flex items-center gap-3 px-4 py-2.5 bg-slate-900 border border-red-500/20 rounded-xl">' +
            '<i data-lucide="user-x" class="w-4 h-4 text-red-400 shrink-0"></i>' +
            '<div class="min-w-0 flex-1"><div class="text-sm font-semibold text-slate-200 truncate">' + escaparHtml(l.empresa || 'Lead #' + l.lead_id) + '</div>' +
            '<div class="text-[11px] text-slate-500">' + escaparHtml(l.interes) + ' · ' + escaparHtml(l.region || '') + ' / ' + escaparHtml(l.vertical || '') + '</div></div>' +
            '<span class="text-[11px] text-red-300 font-semibold shrink-0">esperando ' + l.minutos_esperando + ' min</span></div>'
        );
    });

    // Recientes
    var $rec = $('#panelRecientes').empty();
    if (!datosVivos.recientes.length) {
        $rec.append('<div class="px-4 py-4 bg-slate-900 border border-slate-800 rounded-xl text-center text-slate-500 text-xs">Aún no hay rotaciones registradas.</div>');
    }
    datosVivos.recientes.forEach(function(l) {
        $rec.append(
            '<div class="px-4 py-2.5 bg-slate-900 border border-slate-800 rounded-xl">' +
            '<div class="flex items-center justify-between gap-2 mb-1">' +
            '<span class="text-sm font-semibold text-slate-200 truncate">' + escaparHtml(l.empresa || 'Lead #' + l.lead_id) + '</span>' +
            '<span class="text-[10px] text-slate-500 uppercase font-semibold shrink-0">' + escaparHtml(l.estado_embudo) + '</span></div>' +
            chipsRecorrido(datosVivos.recorridos[l.lead_id]) +
            '</div>'
        );
    });

    lucide.createIcons();
}

function refrescar() {
    $.getJSON(APP_URL + '/rotacion/datos', { vertical_id: VERTICAL_ID, marca_id: MARCA_ID }, function(r) {
        if (r.success) { datosVivos = r; pintarPanel(); }
    });
}

// Los relojes corren cada segundo entre refresco y refresco
setInterval(function() {
    document.querySelectorAll('.reloj-lead').forEach(function(reloj) {
        var restante = Math.max(0, parseInt(reloj.dataset.restante, 10) - 1);
        reloj.dataset.restante = restante;
        reloj.textContent = formatoTiempo(restante);
        var barra = reloj.closest('.bg-slate-900').querySelector('.barra-lead');
        if (barra) {
            var pct = Math.max(0, Math.min(100, Math.round(restante * 100 / parseInt(reloj.dataset.timeout, 10))));
            barra.style.width = pct + '%';
            barra.className = 'barra-lead h-full transition-all ' + (pct > 50 ? 'bg-emerald-500' : (pct > 20 ? 'bg-amber-500' : 'bg-red-500'));
        }
    });
}, 1000);

refrescar();
setInterval(refrescar, 5000);
</script>
