{{-- Tooltip flotante reutilizable para puertos (equipos + mapa de red) --}}

<style>
.port-btn-eq {
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:30px; border:none; border-radius:6px;
    font-size:0.72rem; font-weight:700; cursor:pointer;
    transition:transform 0.15s, box-shadow 0.15s;
    position:relative;
}
.port-btn-eq.libre {
    background:#d1fae5; color:#065f46;
    border:1px solid #6ee7b7;
}
.port-btn-eq.libre:hover { background:#6ee7b7; transform:scale(1.1); }
.port-btn-eq.ocupado {
    background:#fee2e2; color:#991b1b;
    border:1px solid #fca5a5;
}
.port-btn-eq.ocupado:hover { background:#fca5a5; transform:scale(1.1); }
.port-btn-eq.seleccionado {
    box-shadow:0 0 0 3px rgba(103,30,117,0.6);
    transform:scale(1.12); z-index:3;
}
[data-theme="dark"] .port-btn-eq.libre   { background:#064e3b; color:#6ee7b7; border-color:#065f46; }
[data-theme="dark"] .port-btn-eq.libre:hover { background:#065f46; }
[data-theme="dark"] .port-btn-eq.ocupado { background:#450a0a; color:#fca5a5; border-color:#991b1b; }
[data-theme="dark"] .port-btn-eq.ocupado:hover { background:#7f1d1d; }

#portTooltipEq {
    position:fixed; z-index:9999;
    background:var(--bg-card, #fff);
    color:var(--text-primary, #222);
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,0.2);
    padding:1rem 1.25rem;
    min-width:250px; max-width:310px;
    display:none; pointer-events:all;
    border-left:4px solid var(--nf-purple,#671E75);
}
#portTooltipEq.visible { display:block; }
#portTooltipEq .tt-title {
    font-weight:700; font-size:0.95rem;
    color:var(--text-primary,#222);
}
#portTooltipEq dl { font-size:0.82rem; margin-bottom:0; }
#portTooltipEq dt { color:var(--text-muted,#6c757d); font-weight:600; margin-top:4px; }
#portTooltipEq dd { margin-bottom:0; }
#portTooltipEq .tt-footer { margin-top:8px; padding-top:8px; border-top:1px solid var(--border-color,#f0f0f0); }
</style>

<div id="portTooltipEq">
    <div class="d-flex align-items-center justify-content-between mb-2">
        <span class="tt-title" id="eqTtLabel"></span>
        <span id="eqTtEstado" class="badge"></span>
    </div>
    <div id="eqTtLibre">
        <div class="d-flex align-items-center gap-2 text-success">
            <i class="bi bi-check-circle-fill"></i>
            <span style="font-size:0.85rem">Puerto disponible</span>
        </div>
    </div>
    <div id="eqTtOcupado" class="d-none">
        <dl>
            <dt>Etiqueta</dt><dd><code id="eqTtEtiqueta"></code></dd>
            <dt>Cliente</dt><dd id="eqTtCliente"></dd>
            <dt>Zona</dt><dd id="eqTtZona"></dd>
            <dt>Fecha</dt><dd id="eqTtFecha"></dd>
        </dl>
        <div id="eqTtPares" class="mt-2 d-flex flex-wrap gap-1"></div>
        <a id="eqTtLink" href="#" class="btn btn-nf-secondary btn-sm w-100 mt-2">
            <i class="bi bi-eye me-1"></i>Ver conexión completa
        </a>
    </div>
    <div class="tt-footer">
        <small class="text-muted"><i class="bi bi-keyboard me-1"></i>ESC o clic fuera para cerrar</small>
    </div>
</div>

<div id="eqTooltipBackdrop" onclick="eqCloseTooltip()"
     style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9990;"></div>

<script>
const eqPortInfoUrl  = "{{ route('red-visual.port-info') }}";
const eqConexionBase = "{{ url('/conexiones') }}/";
let eqActiveBtn = null;

function eqShowPortInfo(tipo, id, btn) {
    if (eqActiveBtn === btn) { eqCloseTooltip(); return; }
    if (eqActiveBtn) eqActiveBtn.classList.remove('seleccionado');
    btn.classList.add('seleccionado');
    eqActiveBtn = btn;

    const tt = document.getElementById('portTooltipEq');
    tt.classList.remove('visible');
    document.getElementById('eqTtLabel').textContent = 'Cargando...';

    fetch(`${eqPortInfoUrl}?tipo=${tipo}&id=${id}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('eqTtLabel').textContent = data.label;
            const badge = document.getElementById('eqTtEstado');

            if (data.estado === 'ocupado') {
                badge.textContent = 'Ocupado';
                badge.className = 'badge bg-danger';
                document.getElementById('eqTtLibre').classList.add('d-none');
                document.getElementById('eqTtOcupado').classList.remove('d-none');

                const c = data.conexion;
                document.getElementById('eqTtEtiqueta').textContent = c.etiqueta || '—';
                document.getElementById('eqTtCliente').textContent  = c.cliente  || '—';
                document.getElementById('eqTtZona').textContent     = c.zona     || '—';
                document.getElementById('eqTtFecha').textContent    = c.fecha    || '—';

                let pares = '';
                if (c.olt)  pares += `<span class="badge-olt">${c.olt}</span>`;
                if (c.edfa) pares += `<span class="badge-edfa">${c.edfa}</span>`;
                if (c.odf)  pares += `<span class="badge-odf">${c.odf}</span>`;
                document.getElementById('eqTtPares').innerHTML = pares;
                document.getElementById('eqTtLink').href = eqConexionBase + c.id;
            } else {
                badge.textContent = 'Libre';
                badge.className = 'badge bg-success';
                document.getElementById('eqTtLibre').classList.remove('d-none');
                document.getElementById('eqTtOcupado').classList.add('d-none');
            }

            // Posicionar tooltip junto al botón (position:fixed → coordenadas relativas al viewport)
            const rect = btn.getBoundingClientRect();
            let top  = rect.bottom + 8;
            let left = rect.left;
            tt.style.top  = top  + 'px';
            tt.style.left = left + 'px';
            tt.classList.add('visible');

            // Ajustar si sale de pantalla
            setTimeout(() => {
                const tw = tt.offsetWidth, th = tt.offsetHeight;
                if (left + tw > window.innerWidth - 16)
                    tt.style.left = (window.innerWidth - tw - 16) + 'px';
                if (top + th > window.innerHeight - 16)
                    tt.style.top = (rect.top - th - 8) + 'px';
            }, 0);

            document.getElementById('eqTooltipBackdrop').style.display = 'block';
        })
        .catch(() => {
            document.getElementById('eqTtLabel').textContent = 'Error al cargar';
            tt.classList.add('visible');
        });
}

function eqCloseTooltip() {
    document.getElementById('portTooltipEq').classList.remove('visible');
    document.getElementById('eqTooltipBackdrop').style.display = 'none';
    if (eqActiveBtn) { eqActiveBtn.classList.remove('seleccionado'); eqActiveBtn = null; }
}

document.addEventListener('keydown', e => { if (e.key === 'Escape') eqCloseTooltip(); });
</script>