<x-app-layout>
    <x-slot name="header">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            <h2 class="h4 mb-0">ONU Tx/Rx</h2>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.olts.show', $olt) }}" class="btn btn-outline-secondary"><i data-feather="layout" class="me-1"></i>Overview</a>
                <a href="{{ route('admin.olts.interfaces', $olt) }}" class="btn btn-primary"><i data-feather="activity" class="me-1"></i>Interfaces</a>
            </div>
        </div>
    </x-slot>

    @php($snapshot = $olt->gateway_snapshot ?? [])
    @php($devices = $snapshot['devices'] ?? [])
    @php($hasDevices = count($devices) > 0)
    @php($matches = $snapshot['customer_match_summary'] ?? ['total_devices' => count($devices), 'matched' => 0, 'unmatched' => count($devices)])

    <div class="olt-page-panel mb-3"><div class="olt-summary-grid">
        @foreach([['Total ONU', $matches['total_devices'], 'radio', 'primary'], ['Matched', $matches['matched'], 'check-circle', 'success'], ['Unmatched', $matches['unmatched'], 'user-x', 'warning'], ['Offline', collect($devices)->where('status', 'offline')->count(), 'wifi-off', 'danger']] as $stat)
            <div class="olt-summary-item"><span class="olt-summary-icon text-{{ $stat[3] }} bg-{{ $stat[3] }}-subtle" data-feather="{{ $stat[2] }}"></span><div><span>{{ $stat[0] }}</span><strong>{{ $stat[1] }}</strong></div></div>
        @endforeach
    </div></div>

    <div class="olt-page-panel">
        @if($hasDevices)
            <div class="table-responsive"><table id="oltOnuTable" class="table olt-data-table align-middle mb-0 w-100">
                <thead><tr><th>ONU</th><th>MAC / Serial / IP</th><th>Status</th><th>Rx</th><th>Tx</th><th>Offline Reason</th><th>Customer ID</th><th>Customer</th><th>Phone</th></tr></thead>
                <tbody>@foreach($devices as $device) @php($customer = $device['customer'] ?? null)
                    <tr>
                        <td><strong>{{ $device['name'] ?? 'ONU '.$device['index'] }}</strong><small class="d-block">{{ $device['pon'] ?? $device['interface_index'] ?? '—' }}</small></td>
                        <td><div>{{ $device['mac'] ?? '—' }}</div><small>{{ $device['serial'] ?? $device['ip'] ?? '—' }}</small></td>
                        <td><span class="olt-status-pill is-{{ $device['status'] ?? 'unknown' }}">{{ ucfirst($device['status'] ?? 'unknown') }}</span></td>
                        <td>{{ isset($device['rx_power_dbm']) ? $device['rx_power_dbm'].' dBm' : '—' }}</td><td>{{ isset($device['tx_power_dbm']) ? $device['tx_power_dbm'].' dBm' : '—' }}</td><td>{{ $device['offline_reason'] ?? '—' }}</td>
                        <td>@if($customer)<a class="customer-code-link" href="{{ route('admin.customers.ledger', $customer['id']) }}">{{ $customer['code'] }}</a>@else — @endif</td><td>{{ $customer['name'] ?? 'Unmatched' }}</td><td>{{ $customer['phone'] ?? '—' }}</td>
                    </tr>
                @endforeach</tbody>
            </table></div>
        @else
            <div class="olt-empty-state"><span class="olt-empty-icon" data-feather="radio"></span><strong>No ONU Tx/Rx data in the latest snapshot</strong><span>Run one successful sync after the device profile is available.</span></div>
        @endif
    </div>

    @push('scripts')<style>
        .olt-page-panel{padding:1rem;border:1px solid #e4ebf3;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.045)}.olt-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.olt-summary-item{display:flex;align-items:center;gap:.75rem;padding:.85rem;border:1px solid #edf1f6;border-radius:14px;background:#fbfcfe}.olt-summary-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px}.olt-summary-icon svg{width:18px;height:18px}.olt-summary-item span:not(.olt-summary-icon){display:block;color:#64748b;font-size:.72rem}.olt-summary-item strong{display:block;color:#102a43;font-size:1.05rem}.olt-data-table{border-collapse:separate;border-spacing:0}.olt-data-table thead th{padding:.85rem .75rem;border:0;border-bottom:1px solid #e7edf4;background:#f7f9fc;color:#52647a;font-size:.71rem;font-weight:750;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}.olt-data-table tbody td{padding:.88rem .75rem;border-color:#edf1f5;color:#243b53;font-size:.82rem}.olt-data-table tbody tr:hover{background:#f8fbff}.olt-data-table small{color:#7b8ba1;font-size:.72rem}.olt-status-pill{display:inline-flex;padding:.26rem .55rem;border-radius:999px;font-size:.7rem;font-weight:700}.olt-status-pill.is-online{color:#087443;background:#dcfce7}.olt-status-pill.is-offline{color:#b42318;background:#fee4e2}.olt-status-pill.is-unknown{color:#596780;background:#edf2f7}.customer-code-link{display:inline-flex;padding:.28rem .52rem;border:1px solid #9adfb0;border-radius:8px;color:#087443;font-size:.72rem;font-weight:750;text-decoration:none}.olt-empty-state{min-height:260px;display:grid;place-content:center;justify-items:center;gap:.65rem;text-align:center;color:#65758b;padding:1.5rem}.olt-empty-state strong{color:#263b53;font-size:1rem}.olt-empty-state span:last-child{max-width:470px;font-size:.83rem}.olt-empty-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#eef2ff;color:#4f46e5}.olt-empty-icon svg{width:25px;height:25px}#oltOnuTable_wrapper .dataTables_filter{float:right!important}#oltOnuTable_wrapper .dataTables_filter input{width:250px;max-width:100%;height:38px;border:1px solid #dce5ef;border-radius:10px;padding:0 .75rem;outline:0}#oltOnuTable_wrapper .dataTables_length select{height:38px;border:1px solid #dce5ef;border-radius:10px;padding:0 .5rem;background:#fff}@media(max-width:767.98px){.olt-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.olt-page-panel{padding:.7rem}#oltOnuTable_wrapper .dataTables_filter{float:none!important;margin-top:.75rem}#oltOnuTable_wrapper .dataTables_filter input{width:100%}}
    </style>@if($hasDevices)<script>$(function(){$('#oltOnuTable').DataTable({pageLength:10,lengthMenu:[[10,25,50,100,-1],[10,25,50,100,'All']],order:[[0,'asc']],responsive:true,autoWidth:false,language:{search:'',searchPlaceholder:'Search ONU, MAC, customer...',lengthMenu:'_MENU_ entries per page',info:'Showing _START_ to _END_ of _TOTAL_ ONU',infoEmpty:'No ONU data',zeroRecords:'No matching ONU found'},columnDefs:[{orderable:false,targets:[6,8]}]});});</script>@endif @endpush
</x-app-layout>
