<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('title', null, []); ?> Monitor OLT <?php $__env->endSlot(); ?>
     <?php $__env->slot('breadcrumb', null, []); ?> 
        <span class="text-gray-400">Monitor OLT</span>
     <?php $__env->endSlot(); ?>

    <div class="mb-6">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <svg class="w-5 h-5 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
            Monitor en Tiempo Real
        </h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
            Trafico PON, CPU/Memoria y estado de ONUs
        </p>
    </div>

    
    <div class="card mb-5">
        <div class="card-body py-4">
            <div class="flex flex-wrap gap-3 items-end">
                <div>
                    <label class="label text-xs">Dispositivo OLT *</label>
                    <select id="deviceSelect" class="input text-sm py-1.5 min-w-56" onchange="onDeviceChange()">
                        <option value="">— Seleccionar OLT —</option>
                        <?php $__currentLoopData = $devices; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $device): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($device->id); ?>"><?php echo e($device->name); ?> (<?php echo e($device->host); ?>)</option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div>
                    <label class="label text-xs">Frame</label>
                    <input type="number" id="frame" value="1" min="1" class="input text-sm py-1.5 w-20 font-mono">
                </div>
                <div>
                    <label class="label text-xs">Slot *</label>
                    <select id="slotSelect" class="input text-sm py-1.5 w-28 font-mono" onchange="onSlotChange()" disabled>
                        <option value="">—</option>
                    </select>
                </div>
                <div>
                    <label class="label text-xs">Auto-refresh</label>
                    <select id="refreshInterval" class="input text-sm py-1.5 w-28" onchange="updateRefreshInterval()">
                        <option value="0">Desactivado</option>
                        <option value="30" selected>30 seg</option>
                        <option value="60">1 min</option>
                        <option value="120">2 min</option>
                    </select>
                </div>
                <button onclick="startMonitoring()" id="startBtn" disabled
                        class="btn btn-sm bg-accent-600 hover:bg-accent-500 text-white focus:ring-accent-400">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                    </svg>
                    Iniciar Monitor
                </button>
            </div>

            <div id="slotLoading" class="hidden mt-3">
                <div class="flex items-center gap-2 text-xs text-gray-400">
                    <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                    Consultando slots de la OLT...
                </div>
            </div>

            
            <div id="monitorActive" class="hidden mt-3">
                <div class="flex items-center gap-2 text-xs">
                    <span class="w-2 h-2 rounded-full bg-accent-500 animate-pulse-slow"></span>
                    <span class="text-accent-600 dark:text-accent-400 font-medium">Monitoreando</span>
                    <span class="text-gray-400">— Ultima lectura: <span id="lastUpdate" class="font-mono">—</span></span>
                    <button onclick="stopMonitoring()" class="ml-2 text-red-500 hover:text-red-400 text-xs font-medium">Detener</button>
                </div>
            </div>
        </div>
    </div>

    
    <div id="resourcesPanel" class="hidden mb-5">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            
            <div class="card p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                        <svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
                        </svg>
                        CPU
                    </h3>
                    <span class="text-2xl font-bold font-mono" id="cpuValue">—</span>
                </div>
                <div class="h-3 rounded-full bg-gray-100 dark:bg-white/10 overflow-hidden">
                    <div id="cpuBar" class="h-full rounded-full bg-primary-500 transition-all duration-700" style="width: 0%"></div>
                </div>
                <div class="flex justify-between mt-2 text-xs text-gray-400">
                    <span>0%</span><span>50%</span><span>100%</span>
                </div>
                
                <div class="mt-3 flex items-end gap-px h-12" id="cpuHistory"></div>
            </div>

            
            <div class="card p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                        <svg class="w-4 h-4 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                        Memoria
                    </h3>
                    <span class="text-2xl font-bold font-mono" id="memValue">—</span>
                </div>
                <div class="h-3 rounded-full bg-gray-100 dark:bg-white/10 overflow-hidden">
                    <div id="memBar" class="h-full rounded-full bg-yellow-500 transition-all duration-700" style="width: 0%"></div>
                </div>
                <div class="flex justify-between mt-2 text-xs text-gray-400 font-mono">
                    <span id="memUsed">—</span>
                    <span id="memTotal">—</span>
                </div>
                <div class="mt-3 flex items-end gap-px h-12" id="memHistory"></div>
            </div>
        </div>
    </div>

    
    <div id="trafficPanel" class="hidden mb-5">
        <div class="card">
            <div class="card-header">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-accent-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                    </svg>
                    Trafico por Puerto PON
                </h3>
                <span class="text-xs text-gray-400 font-mono" id="trafficSlotLabel"></span>
            </div>
            <div class="card-body">
                <div id="trafficChart" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-2"></div>

                <div class="flex items-center gap-4 mt-4 text-xs text-gray-500 dark:text-gray-400">
                    <span class="flex items-center gap-1.5">
                        <span class="w-3 h-3 rounded-sm bg-accent-500"></span> Download (In)
                    </span>
                    <span class="flex items-center gap-1.5">
                        <span class="w-3 h-3 rounded-sm bg-primary-500"></span> Upload (Out)
                    </span>
                </div>
            </div>
        </div>
    </div>

    
    <div id="trafficLoading" class="hidden card p-12 text-center mb-5">
        <div class="flex flex-col items-center gap-3">
            <svg class="w-7 h-7 animate-spin text-accent-500" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <p class="text-sm text-gray-500 dark:text-gray-400">Consultando trafico de los 16 puertos...</p>
        </div>
    </div>

    
    <div id="onuPanel" class="hidden mb-5">
        <div class="card">
            <div class="card-header">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    ONUs Online / Offline por Puerto
                </h3>
                <div class="flex items-center gap-3">
                    <span class="badge-green font-mono" id="onuTotalOnline">0 online</span>
                    <span class="badge-red font-mono" id="onuTotalOffline">0 offline</span>
                    <span class="badge-purple font-mono" id="onuTotalAll">0 total</span>
                </div>
            </div>
            <div class="card-body">
                
                <div class="flex flex-col lg:flex-row gap-6">
                    
                    <div class="flex-shrink-0 flex flex-col items-center justify-center">
                        <div class="relative w-36 h-36">
                            <svg viewBox="0 0 36 36" class="w-full h-full -rotate-90">
                                <circle cx="18" cy="18" r="14" fill="none" stroke-width="4"
                                        class="stroke-gray-100 dark:stroke-white/10"/>
                                <circle id="donutOnline" cx="18" cy="18" r="14" fill="none" stroke-width="4"
                                        class="stroke-accent-500 transition-all duration-700"
                                        stroke-dasharray="0 88" stroke-linecap="round"/>
                            </svg>
                            <div class="absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-2xl font-bold font-mono text-gray-900 dark:text-white" id="donutPct">0%</span>
                                <span class="text-xs text-gray-400">online</span>
                            </div>
                        </div>
                    </div>

                    
                    <div class="flex-1">
                        <div id="onuPortBars" class="grid grid-cols-2 sm:grid-cols-4 gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div id="debugPanel" class="hidden mb-5" x-data="{ open: false }">
        <div class="card">
            <button @click="open = !open" class="w-full card-header cursor-pointer hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
                <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 flex items-center gap-2">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                    </svg>
                    Debug: SSH Raw Output (PON 1)
                </h3>
                <svg class="w-4 h-4 text-gray-400 transition-transform" :class="open && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div x-show="open" x-collapse class="card-body p-0">
                <pre id="trafficDebug" class="text-xs font-mono text-gray-400 p-4 max-h-64 overflow-auto whitespace-pre-wrap bg-gray-900 dark:bg-black/50 rounded-b-xl">Sin datos aun...</pre>
            </div>
        </div>
    </div>

    
    <div id="monitorError" class="hidden alert-error mb-5">
        <svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span class="text-sm" id="monitorErrorMsg"></span>
    </div>

    
    <div id="emptyState" class="card p-16 text-center">
        <div class="flex flex-col items-center gap-3 text-gray-400">
            <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-white/5 flex items-center justify-center">
                <svg class="w-8 h-8 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
            </div>
            <p class="text-sm">Selecciona un <strong>OLT</strong> y un <strong>slot</strong> para iniciar el monitoreo</p>
        </div>
    </div>

    <script>
    const baseUrl   = '<?php echo e(url("/")); ?>';
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    let refreshTimer = null;
    let isMonitoring = false;
    let cpuHistoryData = [];
    let memHistoryData = [];
    const MAX_HISTORY = 20;

    // ---- Selector cascade ----
    function onDeviceChange() {
        const deviceId = document.getElementById('deviceSelect').value;
        const slotSel  = document.getElementById('slotSelect');

        slotSel.innerHTML = '<option value="">—</option>';
        slotSel.disabled = true;
        document.getElementById('startBtn').disabled = true;
        stopMonitoring();
        hideAllPanels();

        if (!deviceId) return;

        document.getElementById('slotLoading').classList.remove('hidden');

        fetch(`${baseUrl}/monitor/${deviceId}/slots`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        })
        .then(r => r.json())
        .then(data => {
            document.getElementById('slotLoading').classList.add('hidden');
            if (!data.success) return;

            slotSel.innerHTML = '<option value="">— Slot —</option>';
            data.slots.forEach(s => {
                const opt = document.createElement('option');
                opt.value = s.slot;
                opt.textContent = `Slot ${s.slot} (${s.type})`;
                slotSel.appendChild(opt);
            });
            slotSel.disabled = false;
        })
        .catch(() => document.getElementById('slotLoading').classList.add('hidden'));
    }

    function onSlotChange() {
        const slot = document.getElementById('slotSelect').value;
        document.getElementById('startBtn').disabled = !slot;
        stopMonitoring();
        hideAllPanels();
    }

    function hideAllPanels() {
        ['resourcesPanel', 'trafficPanel', 'trafficLoading', 'onuPanel', 'monitorError', 'debugPanel'].forEach(id =>
            document.getElementById(id).classList.add('hidden'));
        document.getElementById('emptyState').classList.remove('hidden');
        document.getElementById('monitorActive').classList.add('hidden');
        cpuHistoryData = [];
        memHistoryData = [];
    }

    // ---- Monitoring control ----
    function startMonitoring() {
        isMonitoring = true;
        document.getElementById('emptyState').classList.add('hidden');
        document.getElementById('monitorActive').classList.remove('hidden');
        document.getElementById('monitorError').classList.add('hidden');

        cpuHistoryData = [];
        memHistoryData = [];

        fetchAllData();
        updateRefreshInterval();
    }

    function stopMonitoring() {
        isMonitoring = false;
        if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
        document.getElementById('monitorActive').classList.add('hidden');
    }

    function updateRefreshInterval() {
        if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
        const secs = parseInt(document.getElementById('refreshInterval').value);
        if (secs > 0 && isMonitoring) {
            refreshTimer = setInterval(fetchAllData, secs * 1000);
        }
    }

    // ---- Fetch all data ----
    function fetchAllData() {
        if (!isMonitoring) return;

        const deviceId = document.getElementById('deviceSelect').value;
        const frame    = document.getElementById('frame').value || 1;
        const slot     = document.getElementById('slotSelect').value;

        if (!deviceId || !slot) return;

        // Fire all 3 requests in parallel
        fetchResources(deviceId);
        fetchTraffic(deviceId, frame, slot);
        fetchOnuSummary(deviceId, frame, slot);

        document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString('es-SV');
    }

    // ---- 1. CPU / Memory ----
    function fetchResources(deviceId) {
        fetch(`${baseUrl}/monitor/${deviceId}/resources`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) return;
            const res = data.resources;

            // CPU
            const cpuPct = res.cpu_usage !== null ? res.cpu_usage : 0;
            document.getElementById('cpuValue').textContent = cpuPct + '%';
            document.getElementById('cpuValue').className = `text-2xl font-bold font-mono ${cpuColor(cpuPct)}`;
            document.getElementById('cpuBar').style.width = cpuPct + '%';
            document.getElementById('cpuBar').className = `h-full rounded-full transition-all duration-700 ${cpuBarColor(cpuPct)}`;

            cpuHistoryData.push(cpuPct);
            if (cpuHistoryData.length > MAX_HISTORY) cpuHistoryData.shift();
            renderMiniChart('cpuHistory', cpuHistoryData, 'bg-primary-500');

            // Memory
            const memPct = res.mem_pct !== null ? res.mem_pct : 0;
            document.getElementById('memValue').textContent = memPct + '%';
            document.getElementById('memValue').className = `text-2xl font-bold font-mono ${cpuColor(memPct)}`;
            document.getElementById('memBar').style.width = memPct + '%';
            document.getElementById('memBar').className = `h-full rounded-full transition-all duration-700 ${memPct > 80 ? 'bg-red-500' : memPct > 60 ? 'bg-yellow-500' : 'bg-yellow-500'}`;

            if (res.mem_used !== null && res.mem_total !== null) {
                document.getElementById('memUsed').textContent = res.mem_used + ' MB usado';
                document.getElementById('memTotal').textContent = res.mem_total + ' MB total';
            }

            memHistoryData.push(memPct);
            if (memHistoryData.length > MAX_HISTORY) memHistoryData.shift();
            renderMiniChart('memHistory', memHistoryData, 'bg-yellow-500');

            document.getElementById('resourcesPanel').classList.remove('hidden');
        })
        .catch(() => {});
    }

    function cpuColor(pct) {
        if (pct > 80) return 'text-red-500';
        if (pct > 60) return 'text-yellow-500 dark:text-yellow-400';
        return 'text-accent-600 dark:text-accent-400';
    }

    function cpuBarColor(pct) {
        if (pct > 80) return 'bg-red-500';
        if (pct > 60) return 'bg-yellow-500';
        return 'bg-primary-500';
    }

    function renderMiniChart(containerId, data, colorClass) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';
        const max = Math.max(100, ...data);

        data.forEach((v, i) => {
            const bar = document.createElement('div');
            const h = Math.max(2, (v / max) * 48);
            bar.className = `flex-1 rounded-t-sm ${colorClass} transition-all duration-300`;
            bar.style.height = h + 'px';
            bar.style.opacity = 0.4 + (i / data.length) * 0.6;
            bar.title = v + '%';
            container.appendChild(bar);
        });
    }

    // ---- 2. Traffic (bulk — single SSH session for all 16 ports) ----
    function fetchTraffic(deviceId, frame, slot) {
        document.getElementById('trafficLoading').classList.remove('hidden');
        document.getElementById('trafficPanel').classList.add('hidden');
        document.getElementById('trafficSlotLabel').textContent = `Slot ${slot}`;

        fetch(`${baseUrl}/monitor/${deviceId}/slot-traffic`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: JSON.stringify({ frame: parseInt(frame), slot: parseInt(slot) })
        })
        .then(r => r.json())
        .then(data => {
            document.getElementById('trafficLoading').classList.add('hidden');

            if (!data.success) {
                document.getElementById('monitorError').classList.remove('hidden');
                document.getElementById('monitorErrorMsg').textContent = data.message;
                return;
            }

            buildTrafficChart(data.ports);
            document.getElementById('trafficPanel').classList.remove('hidden');

            // Show raw debug for first port (helps diagnosing parse issues)
            if (data.sample_raw) {
                const debugEl = document.getElementById('trafficDebug');
                if (debugEl) debugEl.textContent = data.sample_raw;
                document.getElementById('debugPanel').classList.remove('hidden');
            }
        })
        .catch(err => {
            document.getElementById('trafficLoading').classList.add('hidden');
            document.getElementById('monitorError').classList.remove('hidden');
            document.getElementById('monitorErrorMsg').textContent = 'Error trafico: ' + (err.message || '');
        });
    }

    function buildTrafficChart(ports) {
        const container = document.getElementById('trafficChart');
        container.innerHTML = '';

        const maxMbps = Math.max(1, ...ports.map(p => Math.max(p.in_mbps || 0, p.out_mbps || 0)));

        ports.forEach(p => {
            const inMbps  = p.in_mbps || 0;
            const outMbps = p.out_mbps || 0;
            const maxH = 80;
            const inH  = Math.max(2, (inMbps / maxMbps) * maxH);
            const outH = Math.max(2, (outMbps / maxMbps) * maxH);

            const card = document.createElement('div');
            card.className = 'card p-2 flex flex-col items-center';

            card.innerHTML = `
                <div class="text-xs font-bold font-mono text-gray-500 dark:text-gray-400 mb-2">PON ${p.port}</div>
                <div class="flex items-end gap-1 h-20">
                    <div class="w-4 rounded-t-sm bg-accent-500 transition-all duration-500" style="height:${inH}px"
                         title="In: ${inMbps.toFixed(2)} Mbps"></div>
                    <div class="w-4 rounded-t-sm bg-primary-500 transition-all duration-500" style="height:${outH}px"
                         title="Out: ${outMbps.toFixed(2)} Mbps"></div>
                </div>
                <div class="mt-1.5 text-center">
                    <div class="text-xs font-mono text-accent-600 dark:text-accent-400">${inMbps.toFixed(1)}</div>
                    <div class="text-xs font-mono text-primary-600 dark:text-primary-400">${outMbps.toFixed(1)}</div>
                    <div class="text-xs text-gray-400">Mbps</div>
                </div>
            `;

            container.appendChild(card);
        });
    }

    // ---- 3. ONU Summary ----
    function fetchOnuSummary(deviceId, frame, slot) {
        fetch(`${baseUrl}/monitor/${deviceId}/onu-summary`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: JSON.stringify({ frame: parseInt(frame), slot: parseInt(slot) })
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) return;
            const s = data.summary;

            // Totals
            document.getElementById('onuTotalOnline').textContent  = s.online + ' online';
            document.getElementById('onuTotalOffline').textContent = s.offline + ' offline';
            document.getElementById('onuTotalAll').textContent     = s.total + ' total';

            // Donut
            const pct = s.total > 0 ? Math.round((s.online / s.total) * 100) : 0;
            const circumference = 2 * Math.PI * 14; // ~87.96
            const dashLen = (pct / 100) * circumference;
            document.getElementById('donutOnline').setAttribute('stroke-dasharray', `${dashLen} ${circumference}`);
            document.getElementById('donutPct').textContent = pct + '%';

            // Port bars
            buildOnuPortBars(s.ports);

            document.getElementById('onuPanel').classList.remove('hidden');
        })
        .catch(() => {});
    }

    function buildOnuPortBars(ports) {
        const container = document.getElementById('onuPortBars');
        container.innerHTML = '';

        ports.forEach(p => {
            const pct = p.total > 0 ? Math.round((p.online / p.total) * 100) : 0;

            const el = document.createElement('div');
            el.className = 'flex items-center gap-2 rounded-lg px-2.5 py-1.5 bg-gray-50 dark:bg-white/5';

            el.innerHTML = `
                <span class="text-xs font-mono font-bold text-gray-500 dark:text-gray-400 w-8">P${p.port}</span>
                <div class="flex-1 h-2 rounded-full bg-gray-200 dark:bg-white/10 overflow-hidden">
                    <div class="h-full rounded-full ${pct === 100 ? 'bg-accent-500' : pct > 0 ? 'bg-yellow-500' : 'bg-gray-300 dark:bg-gray-600'}
                                transition-all duration-500" style="width:${pct}%"></div>
                </div>
                <span class="text-xs font-mono w-14 text-right">
                    <span class="text-accent-600 dark:text-accent-400">${p.online}</span>/<span class="text-gray-400">${p.total}</span>
                </span>
            `;

            container.appendChild(el);
        });
    }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\xampp\htdocs\adminolt\resources\views/monitor/index.blade.php ENDPATH**/ ?>