@extends('layouts.master')
@section('title') {{ $statusFilter }} ONUs @endsection
@section('css')
<link href="{{ URL::asset('assets/js/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/css/datatable-custom.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
<div class="row">
   <div class="col-12">
      <div class="page-title-box d-sm-flex align-items-center justify-content-between">
         <h4 class="mb-sm-0 font-size-18">{{ $statusFilter }} ONUs</h4>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-lg-12">
      <form method="GET" class="card p-3 mb-4 shadow-sm rounded">
         <div class="row g-3 align-items-end">
            {{-- OLT Dropdown --}}
            <div class="col-12 col-md-3">
               <label for="olt_id" class="form-label fw-semibold small">
               <i class="ri-router-line me-1 text-muted"></i> OLT
               </label>
               <select name="olt_id" id="olt_id" class="form-select form-select-sm">
                  <option value="">All OLTs</option>
                  @foreach ($allOnus->pluck('olt_id', 'olt_name')->unique() as $oltName => $oltId)
                  <option value="{{ $oltId }}" {{ request('olt_id') == $oltId ? 'selected' : '' }}>
                  {{ $oltName }} (ID: {{ $oltId }})
                  </option>
                  @endforeach
               </select>
            </div>
            {{-- Status --}}
            <div class="col-6 col-md-2">
               <label for="status" class="form-label fw-semibold small">
               <i class="ri-signal-wifi-3-fill me-1 text-muted"></i> Status
               </label>
               <select name="status" class="form-select form-select-sm">
                  <option value="">All Status</option>
                  <option value="online" {{ request('status') == 'online' ? 'selected' : '' }}>Online</option>
                  <option value="offline" {{ request('status') == 'offline' ? 'selected' : '' }}>Offline</option>
                  <option value="power fail" {{ request('status') == 'power fail' ? 'selected' : '' }}>Power Fail</option>
                  <option value="low_signal" {{ request('status') == 'low_signal' ? 'selected' : '' }}>Low Signal</option>
                  <option value="los" {{ request('status') == 'los' ? 'selected' : '' }}>Loss of Signal</option>
               </select>
            </div>
            {{-- Board --}}
            <div class="col-6 col-md-2">
               <label for="board" class="form-label fw-semibold small">
               <i class="ri-server-fill me-1 text-muted"></i> Board
               </label>
               <select name="board" id="board" class="form-select form-select-sm" {{ request('olt_id') ? '' : 'disabled' }}>
               <option value="">All Boards</option>
               @foreach ($allOnus->pluck('board')->unique()->sort() as $board)
               <option value="{{ $board }}" {{ request('board') == $board ? 'selected' : '' }}>
               {{ $board }}
               </option>
               @endforeach
               </select>
            </div>
            {{-- Port --}}
            <div class="col-6 col-md-2">
               <label for="port" class="form-label fw-semibold small">
               <i class="ri-plug-line me-1 text-muted"></i> Port
               </label>
               <select name="port" id="port" class="form-select form-select-sm" {{ request('olt_id') ? '' : 'disabled' }}>
               <option value="">All Ports</option>
               @foreach ($allOnus->pluck('port')->unique()->sort() as $port)
               <option value="{{ $port }}" {{ request('port') == $port ? 'selected' : '' }}>
               {{ $port }}
               </option>
               @endforeach
               </select>
            </div>
            {{-- Filter Button --}}
            <div class="col-6 col-md-3">
               <button class="btn btn-primary btn-sm w-100 d-flex justify-content-center align-items-center" type="submit">
               <i class="ri-filter-3-line me-1"></i> 
               <span class="d-none d-md-inline">Apply</span>
               <span class="d-inline d-md-none">Filter</span>
               </button>
            </div>
         </div>
      </form>
      <div class="card shadow-sm rounded mb-4">
         @php
         $total = max($stats['total'], 1); // prevent div by 0
         $offlineTotal = $stats['offline'] + $stats['power_fail'] + $stats['los'];
         @endphp
         <div class="card-body p-3">
            <h6 class="card-title text-muted mb-3 d-flex align-items-center">
               <i class="ri-dashboard-2-line me-2"></i> ONU Status Overview
            </h6>
            <div class="row g-3">
               <!-- Online -->
               <div class="col-6 col-md-3">
                  <div class="p-3 rounded border-start border-4 border-success bg-light shadow-sm h-100">
                     <div class="d-flex justify-content-between align-items-center">
                        <div>
                           <h6 class="text-muted mb-1 small">Online</h6>
                           <h4 class="mb-0 fw-bold">{{ number_format($stats['online']) }}</h4>
                        </div>
                        <div class="bg-success bg-opacity-10 p-2 rounded d-none d-md-block">
                           <i class="ri-checkbox-circle-fill text-success fs-5"></i>
                        </div>
                     </div>
                     <div class="mt-1">
                        <span class="badge bg-success bg-opacity-10 text-success small">
                        <i class="ri-arrow-right-line align-middle"></i>
                        {{ number_format(($stats['online'] / $total) * 100, 1) }}%
                        </span>
                     </div>
                  </div>
               </div>
               <!-- Combined Offline -->
               <div class="col-6 col-md-3">
                  <div class="p-3 rounded border-start border-4 border-danger bg-light shadow-sm h-100">
                     <div class="d-flex justify-content-between align-items-center">
                        <div>
                           <h6 class="text-muted mb-1 small">Total Offline</h6>
                           <h4 class="mb-0 fw-bold">{{ number_format($offlineTotal) }}</h4>
                        </div>
                        <div class="bg-danger bg-opacity-10 p-2 rounded d-none d-md-block">
                           <i class="ri-close-circle-fill text-danger fs-5"></i>
                        </div>
                     </div>
                     <div class="mt-1">
                        <span class="badge bg-danger bg-opacity-10 text-danger small">
                        <i class="ri-arrow-right-line align-middle"></i>
                        {{ number_format(($offlineTotal / $total) * 100, 1) }}%
                        </span>
                     </div>
                  </div>
               </div>
               <!-- Offline Breakdown -->
               <div class="col-6 col-md-3">
                  <div class="p-3 rounded-3 border-start border-4 border-secondary bg-light shadow-sm h-100">
                     <div class="d-flex flex-column gap-2">
                        <div class="d-flex align-items-center">
                           <span class="badge bg-danger bg-opacity-10 text-danger small me-2">
                           Offline
                           </span>
                           <div class="progress flex-grow-1" style="height: 4px;">
                              <div class="progress-bar bg-danger" role="progressbar" 
                                 style="width: {{ $offlineTotal > 0 ? ($stats['offline'] / $offlineTotal) * 100 : 0 }}%" 
                                 aria-valuenow="{{ $offlineTotal > 0 ? ($stats['offline'] / $offlineTotal) * 100 : 0 }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                              </div>
                           </div>
                           <span class="ms-2 small text-muted fw-medium">
                              <!-- {{ $offlineTotal > 0 ? number_format(($stats['offline'] / $offlineTotal) * 100, 1) : '0.0' }}% -->
                              {{$stats['offline']}}
                           </span>
                        </div>
                        <div class="d-flex align-items-center">
                           <span class="badge bg-dark bg-opacity-10 text-dark small me-2">
                           Power Fail
                           </span>
                           <div class="progress flex-grow-1" style="height: 4px;">
                              <div class="progress-bar bg-dark" role="progressbar" 
                                 style="width: {{ $offlineTotal > 0 ? ($stats['power_fail'] / $offlineTotal) * 100 : 0 }}%" 
                                 aria-valuenow="{{ $offlineTotal > 0 ? ($stats['power_fail'] / $offlineTotal) * 100 : 0 }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                              </div>
                           </div>
                           <span class="ms-2 small text-muted fw-medium">
                              <!-- {{ $offlineTotal > 0 ? number_format(($stats['power_fail'] / $offlineTotal) * 100, 1) : '0.0' }}% -->
                              {{$stats['power_fail']}}
                           </span>
                        </div>
                        <div class="d-flex align-items-center">
                           <span class="badge bg-soft-warning text-warning small me-2">
                           LOS
                           </span>
                           <div class="progress flex-grow-1" style="height: 4px;">
                              <div class="progress-bar bg-warning" role="progressbar" 
                                 style="width: {{ $offlineTotal > 0 ? ($stats['los'] / $offlineTotal) * 100 : 0 }}%" 
                                 aria-valuenow="{{ $offlineTotal > 0 ? ($stats['los'] / $offlineTotal) * 100 : 0 }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                              </div>
                           </div>
                           <span class="ms-2 small text-muted fw-medium">
                              <!-- {{ $offlineTotal > 0 ? number_format(($stats['los'] / $offlineTotal) * 100, 1) : '0.0' }}% -->
                              {{$stats['los']}}
                           </span>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- Low Signal -->
               <div class="col-6 col-md-3">
                  <div class="p-3 rounded border-start border-4 border-warning bg-light shadow-sm h-100">
                     <div class="d-flex justify-content-between align-items-center">
                        <div>
                           <h6 class="text-muted mb-1 small">Low Signal</h6>
                           <h4 class="mb-0 fw-bold">{{ number_format($stats['low_signal']) }}</h4>
                        </div>
                        <div class="bg-warning bg-opacity-10 p-2 rounded d-none d-md-block">
                           <i class="ri-signal-wifi-off-fill text-warning fs-5"></i>
                        </div>
                     </div>
                     <div class="mt-1">
                        <span class="badge bg-warning bg-opacity-10 text-warning small">
                        <i class="ri-arrow-right-line align-middle"></i>
                        {{ number_format(($stats['low_signal'] / $total) * 100, 1) }}%
                        </span>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Progress Bar -->
            <div class="mt-3">
               <div class="d-flex justify-content-between small text-muted mb-1">
                  <span>Status Distribution</span>
                  <span>{{ number_format($stats['total']) }} Total ONUs</span>
               </div>
               <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: {{ ($stats['online'] / $total) * 100 }}%"></div>
                  <div class="progress-bar bg-danger" role="progressbar" style="width: {{ ($offlineTotal / $total) * 100 }}%"></div>
                  <div class="progress-bar bg-warning" role="progressbar" style="width: {{ ($stats['low_signal'] / $total) * 100 }}%"></div>
               </div>
            </div>
         </div>
      </div>
      @if (session('status'))
      <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
         <i class="ri-check-double-line label-icon"></i><strong>Success</strong> - {{ session('status') }}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      @if (session('error'))
      <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-xl-0" role="alert">
         <i class="ri-error-warning-line label-icon"></i><strong>Failed</strong> - {{ session('error') }}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <br />
      @endif
      <div class="card">
         <div class="card-body">
            @if($onus->isEmpty())
            <div class="noresult" style="display: block;">
               <div class="text-center">
                  <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width: 75px; height: 75px;"></lord-icon>
                  <h5 class="mt-2 text-danger">No online ONUs found</h5>
                  <p class="text-muted">There are no ONUs online currently</p>
               </div>
            </div>
            @else
            <div class="table-responsive table-card mb-1">
               <table class="table align-middle" id="datatable" style="width: 100%;">
                  <thead class="table-light text-muted">
                     <tr>
                        <th></th>
                        <th>Serial Number</th>
                        <th>Name</th>
                        <th>OLT</th>
                        <th>Board</th>
                        <th>Port</th>
                        <th>Signal</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach ($onus as $key => $onu)
                     <tr>
                        <td>
                           @php
                           $signalText = strtolower($onu['signal'] ?? '');
                           $status = strtolower($onu['status'] ?? '');
                           $color = 'text-muted';
                           $icon = 'ri-earth-line'; // Default icon
                           if ($status === 'power fail') {
                           $icon = 'ri-plug-2-fill';
                           $color = 'text-dark';
                           } elseif ($status === 'los') {
                           $icon = 'ri-link-unlink-m'; // 🔌 Broken link icon for loss of signal
                           $color = 'text-danger';
                           } elseif (str_contains($signalText, 'very good')) {
                           $color = 'text-success';
                           } elseif (str_contains($signalText, 'warning')) {
                           $color = 'text-warning';
                           } elseif (str_contains($signalText, 'critical')) {
                           $color = 'text-danger';
                           }
                           @endphp
                           <i class="{{ $icon }} {{ $color }} fs-4" title="{{ ucfirst($status ?: $signalText) }}"></i>
                        </td>
                        <td>
                           <a href="{{ route('smartolt.view-onu', ['sn' => $onu['sn']]) }}" class="text-decoration-none text-info">
                           {{ $onu['sn'] ?? '-' }}
                           </a>
                        </td>
                        <td>{{ $onu['name'] ?? '-' }}</td>
                        <td>{{ $onu['olt_name'] ?? '-' }}</td>
                        <td>{{ $onu['board'] ?? '-' }}</td>
                        <td>{{ $onu['port'] ?? '-' }}</td>
                        <td>
                           @php
                           $color = 'text-muted';
                           if ($status === 'los') {
                           $color = 'text-danger';
                           } elseif (str_contains($signalText, 'very good')) {
                           $color = 'text-success';
                           } elseif (str_contains($signalText, 'warning')) {
                           $color = 'text-warning';
                           } elseif (str_contains($signalText, 'critical')) {
                           $color = 'text-danger';
                           }
                           @endphp
                           <!-- <span class="{{ $color }}">
                              {{ isset($onu['signal_1310'], $onu['signal_1490']) 
                              ? "{$onu['signal_1310']} / {$onu['signal_1490']}" 
                              : '-' }}
                              </span> -->
                           <span class="{{ $color }}">
                           {{ isset($onu['signal_1310']) 
                           ? "{$onu['signal_1310']}" 
                           : '-' }}
                           </span>
                        </td>
                     </tr>
                     @endforeach
                  </tbody>
               </table>
            </div>
            @endif
         </div>
      </div>
   </div>
</div>
@endsection
@section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js') }}"></script>
<script src="{{ URL::asset('/assets/js/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/datatable.js') }}"></script>
<script>
   const allOnus = @json($allOnus);
</script>
{{-- JS to toggle disabled state --}}
<script>
   document.addEventListener('DOMContentLoaded', () => {
      const oltSelect = document.getElementById('olt_id');
      const boardSelect = document.getElementById('board');
      const portSelect = document.getElementById('port');
   
      function populateDependentFields() {
         const selectedOlt = oltSelect.value;
   
         // Reset and disable if no OLT
         if (!selectedOlt) {
            boardSelect.innerHTML = '<option value="">All</option>';
            boardSelect.disabled = true;
   
            portSelect.innerHTML = '<option value="">All</option>';
            portSelect.disabled = true;
            return;
         }
   
         boardSelect.disabled = false;
         portSelect.disabled = false;
   
         const filteredOnus = allOnus.filter(o => o.olt_id == selectedOlt);
   
         // Get unique boards
         const boards = [...new Set(filteredOnus.map(o => o.board))].sort((a, b) => a - b);
         boardSelect.innerHTML = '<option value="">All</option>' + boards.map(b => {
            return `<option value="${b}" ${b == "{{ request('board') }}" ? 'selected' : ''}>Board ${b}</option>`;
         }).join('');
   
         // Get unique ports
         const ports = [...new Set(filteredOnus.map(o => o.port))].sort((a, b) => a - b);
         portSelect.innerHTML = '<option value="">All</option>' + ports.map(p => {
            return `<option value="${p}" ${p == "{{ request('port') }}" ? 'selected' : ''}>Port ${p}</option>`;
         }).join('');
      }
   
      oltSelect.addEventListener('change', populateDependentFields);
   
      // Populate on page load if OLT is pre-selected
      populateDependentFields();
   });
</script>
@endsection