<?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, []); ?> ONU <?php echo e($onu->serial_number); ?> <?php $__env->endSlot(); ?>
     <?php $__env->slot('breadcrumb', null, []); ?> 
        <a href="<?php echo e(route('onus.index')); ?>" class="hover:text-gray-600 dark:hover:text-gray-300 transition-colors">ONUs</a>
        <svg class="w-3 h-3 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-gray-400 font-mono"><?php echo e($onu->serial_number); ?></span>
     <?php $__env->endSlot(); ?>

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div class="flex items-center gap-3">
            <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-accent-500 to-accent-700 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
                </svg>
            </div>
            <div>
                <h1 class="text-xl font-bold font-mono text-gray-900 dark:text-white"><?php echo e($onu->serial_number); ?></h1>
                <code class="text-xs text-gray-400"><?php echo e($onu->interface_name); ?></code>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="<?php echo e(route('onus.edit', $onu)); ?>" class="btn-outline btn-sm">
                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Editar
            </a>
            <form method="POST" action="<?php echo e(route('onus.destroy', $onu)); ?>"
                  onsubmit="return confirm('¿Deshabilitar esta ONU?')">
                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                <button type="submit" class="btn-danger btn-sm">Deshabilitar</button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-5 gap-5">
        
        <div class="lg:col-span-2 space-y-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Información ONU</h3>
                    <?php if($onu->status === 'authorized'): ?>
                        <span class="badge-green"><span class="w-1 h-1 rounded-full bg-accent-500 animate-pulse-slow"></span> Activa</span>
                    <?php elseif($onu->status === 'pending'): ?>
                        <span class="badge-yellow">Pendiente</span>
                    <?php else: ?>
                        <span class="badge-red">Deshabilitada</span>
                    <?php endif; ?>
                </div>
                <div class="card-body space-y-3">
                    <div class="flex justify-between items-center py-1.5 border-b border-gray-100 dark:border-white/5">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Dispositivo</span>
                        <a href="<?php echo e(route('devices.show', $onu->port->device)); ?>"
                           class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
                            <?php echo e($onu->port->device->name); ?>

                        </a>
                    </div>
                    <div class="flex justify-between items-center py-1.5 border-b border-gray-100 dark:border-white/5">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Interfaz OLT</span>
                        <code class="text-xs font-mono text-gray-700 dark:text-gray-300"><?php echo e($onu->olt_interface_name); ?></code>
                    </div>
                    <div class="flex justify-between items-center py-1.5 border-b border-gray-100 dark:border-white/5">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Interfaz ONU</span>
                        <code class="text-xs font-mono text-gray-700 dark:text-gray-300"><?php echo e($onu->interface_name); ?></code>
                    </div>
                    <div class="flex justify-between items-center py-1.5 border-b border-gray-100 dark:border-white/5">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Serial</span>
                        <code class="text-xs font-mono font-bold text-primary-700 dark:text-primary-300 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
                            <?php echo e($onu->serial_number); ?>

                        </code>
                    </div>
                    <div class="flex justify-between items-center py-1.5 border-b border-gray-100 dark:border-white/5">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Tipo</span>
                        <span class="text-sm text-gray-700 dark:text-gray-300"><?php echo e($onu->onu_type); ?></span>
                    </div>
                    <div class="flex justify-between items-center py-1.5 border-b border-gray-100 dark:border-white/5">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Cliente</span>
                        <span class="text-sm font-medium text-gray-800 dark:text-gray-200"><?php echo e($onu->customer_name ?? '—'); ?></span>
                    </div>
                    <?php if($onu->customer_description): ?>
                        <div class="flex justify-between items-start py-1.5 border-b border-gray-100 dark:border-white/5">
                            <span class="text-xs text-gray-500 dark:text-gray-400">Descripción</span>
                            <span class="text-sm text-gray-600 dark:text-gray-400 text-right max-w-48"><?php echo e($onu->customer_description); ?></span>
                        </div>
                    <?php endif; ?>
                    <?php if($onu->authorized_at): ?>
                        <div class="flex justify-between items-center py-1.5">
                            <span class="text-xs text-gray-500 dark:text-gray-400">Autorizado</span>
                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                <?php echo e($onu->authorized_at->format('d/m/Y H:i')); ?>

                                <?php if($onu->authorizedBy): ?>
                                    por <?php echo e($onu->authorizedBy->name); ?>

                                <?php endif; ?>
                            </span>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Servicio</h3>
                </div>
                <div class="card-body space-y-3">
                    <div class="grid grid-cols-2 gap-3">
                        <div class="p-3 rounded-lg bg-gray-50 dark:bg-white/3 text-center">
                            <div class="text-lg font-bold font-mono text-primary-600 dark:text-primary-400"><?php echo e($onu->vlan); ?></div>
                            <div class="text-xs text-gray-400 mt-0.5">VLAN</div>
                        </div>
                        <div class="p-3 rounded-lg bg-gray-50 dark:bg-white/3 text-center">
                            <div class="text-lg font-bold font-mono text-accent-600 dark:text-accent-400"><?php echo e($onu->service_port); ?></div>
                            <div class="text-xs text-gray-400 mt-0.5">Service Port</div>
                        </div>
                        <div class="p-3 rounded-lg bg-gray-50 dark:bg-white/3 text-center col-span-2">
                            <div class="text-sm font-bold font-mono text-gray-800 dark:text-gray-200"><?php echo e($onu->tcont_profile); ?></div>
                            <div class="text-xs text-gray-400 mt-0.5">Perfil TCONT</div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="card" id="powerCard">
                <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="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Potencia Óptica
                    </h3>
                    <button onclick="fetchOpticalPower()" id="powerBtn" class="btn-outline btn-sm">
                        <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        Consultar
                    </button>
                </div>
                <div class="card-body" id="powerBody">
                    <div id="powerLoading" class="hidden py-6 text-center">
                        <svg class="w-6 h-6 animate-spin text-primary-500 mx-auto" 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-xs text-gray-400 mt-2">Consultando OLT...</p>
                    </div>
                    <div id="powerData" class="hidden">
                        <div class="grid grid-cols-2 gap-3">
                            
                            <div class="p-3 rounded-lg border text-center" id="oltRxBox">
                                <div class="flex items-center justify-center gap-1 mb-1">
                                    <svg class="w-3.5 h-3.5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/>
                                    </svg>
                                    <span class="text-xs font-semibold text-blue-600 dark:text-blue-400">UP (OLT Rx)</span>
                                </div>
                                <div class="text-xl font-bold font-mono" id="oltRxVal">—</div>
                                <div class="text-xs text-gray-400 mt-0.5">dBm</div>
                            </div>
                            
                            <div class="p-3 rounded-lg border text-center" id="onuRxBox">
                                <div class="flex items-center justify-center gap-1 mb-1">
                                    <svg class="w-3.5 h-3.5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"/>
                                    </svg>
                                    <span class="text-xs font-semibold text-green-600 dark:text-green-400">DOWN (ONU Rx)</span>
                                </div>
                                <div class="text-xl font-bold font-mono" id="onuRxVal">—</div>
                                <div class="text-xs text-gray-400 mt-0.5">dBm</div>
                            </div>
                            
                            <div class="p-3 rounded-lg bg-gray-50 dark:bg-white/3 text-center">
                                <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">OLT Tx</div>
                                <div class="text-sm font-bold font-mono text-gray-700 dark:text-gray-300" id="oltTxVal">—</div>
                                <div class="text-xs text-gray-400">dBm</div>
                            </div>
                            
                            <div class="p-3 rounded-lg bg-gray-50 dark:bg-white/3 text-center">
                                <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">ONU Tx</div>
                                <div class="text-sm font-bold font-mono text-gray-700 dark:text-gray-300" id="onuTxVal">—</div>
                                <div class="text-xs text-gray-400">dBm</div>
                            </div>
                        </div>
                    </div>
                    <div id="powerError" class="hidden py-4 text-center">
                        <p class="text-sm text-red-500" id="powerErrorMsg"></p>
                    </div>
                    <div id="powerEmpty" class="py-4 text-center">
                        <p class="text-xs text-gray-400">Haz clic en <strong>"Consultar"</strong> para leer la potencia óptica</p>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="lg:col-span-3">
            <div class="bg-surface-950 dark:bg-black/60 rounded-xl border border-white/5 overflow-hidden h-full">
                <div class="flex items-center justify-between px-4 py-3 bg-white/3 border-b border-white/5">
                    <div class="flex items-center gap-2">
                        <div class="flex gap-1.5">
                            <span class="w-3 h-3 rounded-full bg-red-500/70"></span>
                            <span class="w-3 h-3 rounded-full bg-yellow-500/70"></span>
                            <span class="w-3 h-3 rounded-full bg-accent-500/70"></span>
                        </div>
                        <span class="text-xs text-gray-400 font-mono ml-2">Configuración CLI aplicada</span>
                    </div>
                    <button onclick="copyText()"
                            class="flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-200 transition-colors
                                   border border-white/10 hover:border-white/20 px-2.5 py-1 rounded-md">
                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                        </svg>
                        Copiar
                    </button>
                </div>
                <div class="p-5">
                    <pre id="cliConfig" class="text-accent-300 font-mono text-sm leading-7 whitespace-pre overflow-x-auto"><?php echo e($onu->buildCliCommands()); ?></pre>
                </div>
            </div>
        </div>
    </div>

    <script>
    function copyText() {
        navigator.clipboard.writeText(document.getElementById('cliConfig').textContent).then(() => {
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-4 right-4 z-50 px-4 py-3 rounded-xl text-sm font-medium shadow-lg bg-accent-600 text-white animate-fade-in';
            toast.textContent = 'Copiado al portapapeles';
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        });
    }

    function powerColor(dbm) {
        if (dbm === null || dbm === undefined) return { text: 'text-gray-400', border: 'border-gray-200 dark:border-white/10', bg: '' };
        const v = parseFloat(dbm);
        if (v >= -25)  return { text: 'text-accent-600 dark:text-accent-400', border: 'border-accent-200 dark:border-accent-800', bg: 'bg-accent-50 dark:bg-accent-900/20' };
        if (v >= -28)  return { text: 'text-yellow-600 dark:text-yellow-400', border: 'border-yellow-200 dark:border-yellow-800', bg: 'bg-yellow-50 dark:bg-yellow-900/20' };
        return { text: 'text-red-600 dark:text-red-400', border: 'border-red-200 dark:border-red-800', bg: 'bg-red-50 dark:bg-red-900/20' };
    }

    function applyPowerStyle(boxId, valId, dbm) {
        const el = document.getElementById(valId);
        const box = document.getElementById(boxId);
        if (!dbm || dbm === 'N/A' || dbm === 'no signal') {
            el.textContent = dbm || 'N/A';
            el.className = 'text-xl font-bold font-mono text-gray-400';
            box.className = 'p-3 rounded-lg border border-gray-200 dark:border-white/10 text-center';
            return;
        }
        const c = powerColor(dbm);
        el.textContent = dbm;
        el.className = 'text-xl font-bold font-mono ' + c.text;
        box.className = 'p-3 rounded-lg border text-center ' + c.border + ' ' + c.bg;
    }

    function fetchOpticalPower() {
        const btn = document.getElementById('powerBtn');
        const original = btn.innerHTML;
        btn.innerHTML = '<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...';
        btn.disabled = true;

        document.getElementById('powerEmpty').classList.add('hidden');
        document.getElementById('powerError').classList.add('hidden');
        document.getElementById('powerData').classList.add('hidden');
        document.getElementById('powerLoading').classList.remove('hidden');

        fetch(`<?php echo e(url('/')); ?>/onus/<?php echo e($onu->id); ?>/optical-power`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            }
        })
        .then(r => r.json())
        .then(data => {
            document.getElementById('powerLoading').classList.add('hidden');

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

            const p = data.power;

            // Parse "no signal" as display value
            const oltRx = p.olt_rx || (p.raw && p.raw.includes('no signal') ? 'no signal' : 'N/A');
            const onuRx = p.onu_rx || 'N/A';

            applyPowerStyle('oltRxBox', 'oltRxVal', oltRx);
            applyPowerStyle('onuRxBox', 'onuRxVal', onuRx);
            document.getElementById('oltTxVal').textContent = p.olt_tx || 'N/A';
            document.getElementById('onuTxVal').textContent = p.onu_tx || 'N/A';

            document.getElementById('powerData').classList.remove('hidden');
        })
        .catch(err => {
            document.getElementById('powerLoading').classList.add('hidden');
            document.getElementById('powerError').classList.remove('hidden');
            document.getElementById('powerErrorMsg').textContent = 'Error al consultar: ' + (err.message || '');
        })
        .finally(() => {
            btn.innerHTML = original;
            btn.disabled = false;
        });
    }

    // Auto-fetch on page load if ONU is authorized
    <?php if($onu->status === 'authorized'): ?>
        document.addEventListener('DOMContentLoaded', fetchOpticalPower);
    <?php endif; ?>
    </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/onus/show.blade.php ENDPATH**/ ?>