@extends('layouts.master') 
@section('title', 'ONU Details') 
@section('css') 
<style>
   .swal2-validation-message {
   align-items: center;
   justify-content: center;
   margin: 1em 0 0;
   padding: .625em;
   overflow: hidden;
   background: rgba(240, 101, 72, .18) !important;
   color: var(--vz-danger-rgb) !important;
   font-size: 1em;
   font-weight: 300;
   }
</style>
@endsection 
@section('content')
<div class="row">
   <div class="col-lg-12">
      @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="page-title-box d-flex justify-content-between align-items-center">
         <h4 class="mb-0"><code>{{ $onuDetails['sn'] }}</code></h4>
         <div>
            @if(isset($service) && $service->client)
            <a href="{{ route('client.service', [$service->client->username]) }}" class="btn btn-sm btn-secondary">
            <i class="ri-arrow-go-back-line"></i> Go Back
            </a>
            @else
            <a href="{{ route('smartolt.onus') }}" class="btn btn-sm btn-secondary">
            <i class="ri-arrow-go-back-line"></i> Go Back
            </a>
            @endif
         </div>
      </div>
      <div class="d-flex justify-content-center">
         <div class="mt-3 mt-lg-0">
            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center">
                  @php $wifiPorts = $onuDetails['wifi_ports']; @endphp

                  {{-- WiFi Config --}}
                  @can('wifi config')
                     @if(count($wifiPorts) > 0)
                     <button class="btn btn-sm btn-primary flex-grow-1 flex-lg-grow-0"
                        onclick='SmartOltActions.showSsidPrompt("{{ $onuDetails["unique_external_id"] }}", {!! json_encode($wifiPorts) !!})'
                        style="min-width: 120px;">
                        <i class="ri-wifi-line"></i> WiFi Config
                     </button>
                     @endif
                  @endcan

                  {{-- Enable/Disable Hotspot --}}
                  @php
                     $hotspotPorts = collect($onuDetails['wifi_ports']);
                     $hotspotPort = $hotspotPorts->firstWhere('port', 'wifi_0/2') ?: $hotspotPorts->firstWhere('port', 'wifi_0/6');
                     $isHotspotEnabled = $hotspotPort && strtolower($hotspotPort['admin_state'] ?? '') === 'enabled';
                  @endphp

                  @if ($hotspotPorts->isNotEmpty())
                     @if ($isHotspotEnabled)
                        @can('disable hotspot')
                              <button class="btn btn-sm btn-danger flex-grow-1 flex-lg-grow-0"
                                 onclick="SmartOltActions.disableHotspot('{{ $onuDetails['unique_external_id'] }}')"
                                 style="min-width: 120px;">
                                 <i class="ri-close-line"></i> Disable Hotspot
                              </button>
                        @endcan
                     @else
                        @can('enable hotspot')
                              <button class="btn btn-sm btn-success flex-grow-1 flex-lg-grow-0"
                                 onclick="SmartOltActions.enableHotspot('{{ $onuDetails['unique_external_id'] }}')"
                                 style="min-width: 120px;">
                                 <i class="ri-hotspot-line"></i> Enable Hotspot
                              </button>
                        @endcan
                     @endif
                  @endif

                  {{-- Hotspot Hybrid Ports --}}
                  @can('manage ports')
                     <button class="btn btn-sm btn-secondary flex-grow-1 flex-lg-grow-0"
                        onclick="SmartOltActions.hotspotHybridPorts('{{ $onuDetails['unique_external_id'] }}')"
                        style="min-width: 140px;">
                        <i class="ri-exchange-line"></i> Hotspot Hybrid Ports
                     </button>
                  @endcan

                  {{-- Reboot --}}
                  @can('reboot onu')
                     <button class="btn btn-sm btn-danger flex-grow-1 flex-lg-grow-0" 
                        onclick="SmartOltActions.reboot('{{ $onuDetails['unique_external_id'] }}')"
                        style="min-width: 100px;">
                        <i class="ri-shut-down-line"></i> Reboot
                     </button>
                  @endcan

                  {{-- Resync --}}
                  @can('resync onu')
                     <button class="btn btn-sm btn-info flex-grow-1 flex-lg-grow-0" 
                        onclick="SmartOltActions.resync('{{ $onuDetails['unique_external_id'] }}')"
                        style="min-width: 100px;">
                        <i class="ri-refresh-line"></i> Resync
                     </button>
                  @endcan

                  {{-- Reconfigure --}}
                  @php
                     $primaryWifi = collect($onuDetails['wifi_ports'])->firstWhere('port', 'wifi_0/1') ?? ['ssid' => '', 'password' => ''];
                     $localOnu = \App\Models\Onu::where('onu_external_id', $onuDetails['unique_external_id'])->first();
                  @endphp

                  @if ($localOnu)
                     @can('reconfigure onu')
                        <button class="btn btn-sm btn-warning flex-grow-1 flex-lg-grow-0" 
                              onclick='SmartOltActions.reconfigure({
                                 onu_external_id: "{{ $onuDetails['unique_external_id'] }}",
                                 mode: "{{ $onuDetails['mode'] ?? 'Routing' }}",
                                 wifi_name: "{{ $primaryWifi['ssid'] ?? '' }}",
                                 wifi_password: "{{ $primaryWifi['password'] ?? '' }}",
                                 pppoe_username: "{{ $onuDetails['username'] ?? '' }}",
                                 pppoe_password: "{{ $onuDetails['password'] ?? '' }}",
                                 configuration_method: "{{ $configurationMethod ?? 'TR069' }}"
                              })'
                              style="min-width: 120px;">
                              <i class="ri-tools-line"></i> <span class="d-none d-sm-inline">Re</span>config
                        </button>
                     @endcan
                  @endif
            </div>
         </div>
      </div>

      <div class="card shadow-sm mt-4 border-0">
         <div class="card-body p-3">
            <h5 class="card-title text-info fw-semibold mb-3 d-flex align-items-center">
               <i class="ri-information-line me-2"></i>Basic Info
            </h5>
            <div class="d-md-none">
               <!-- Mobile Stacked View -->
               <div class="list-group list-group-flush">
                  @if(isset($onuStatus['onu_status']))
                  @php
                  $statusText = strtolower($onuStatus['onu_status']);
                  switch ($statusText) {
                  case 'online':
                  $badgeClass = 'bg-success';
                  break;
                  case 'offline':
                  $badgeClass = 'bg-danger';
                  break;
                  case 'power fail':
                  $badgeClass = 'bg-dark';
                  break;
                  case 'los':
                  $badgeClass = 'bg-warning';
                  break;
                  default:
                  $badgeClass = 'bg-secondary';
                  }
                  @endphp
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Status</span>
                        <span class="fw-medium text-end">
                        <span class="badge {{ $badgeClass }} text-uppercase">
                        {{ ucfirst($onuStatus['onu_status']) }}
                        </span>
                        </span>
                     </div>
                  </div>
                  @endif
                  <div class="list-group-item py-2 px-0 border-top-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">OLT</span>
                        <span class="fw-medium text-end">{{ $onuDetails['olt_name'] }}</span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Board/Port/Onu</span>
                        <span class="fw-medium text-end">{{ $onuDetails['board'] }}/{{ $onuDetails['port'] }}/{{ $onuDetails['onu'] }}</span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Type</span>
                        <div class="text-end">
                           {{ $onuDetails['onu_type_name'] }} 
                           <span class="badge bg-info text-uppercase border ms-1">{{ strtoupper($onuDetails['pon_type']) }}</span>
                        </div>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Zone</span>
                        <span class="fw-medium text-end">{{ $onuDetails['zone_name'] }}</span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Name</span>
                        <span class="fw-medium text-end">{{ $onuDetails['name'] }}</span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Mode</span>
                        <span class="fw-medium text-end">{{ $onuDetails['mode'] }}</span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">VLANs</span>
                        <span class="fw-medium text-end">
                        {{ collect($onuDetails['service_ports'])->pluck('vlan')->filter()->unique()->implode(', ') ?: '-' }}
                        </span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Admin Status</span>
                        <span class="fw-medium text-end">
                        <span class="badge {{ $onuDetails['administrative_status'] == 'Enabled' ? 'bg-success' : 'bg-danger' }}">
                        {{ $onuDetails['administrative_status'] }}
                        </span>
                        </span>
                     </div>
                  </div>
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Auth Date</span>
                        <span class="fw-medium text-end">{{ $onuDetails['authorization_date'] }}</span>
                     </div>
                  </div>
                  @if(isset($onuSignal))
                  <div class="list-group-item py-2 px-0">
                     <div class="d-flex justify-content-between">
                        <span class="text-muted small">Signal</span>
                        <div class="text-end">
                           {{ $onuSignal['onu_signal_1310'] ?? '-' }}/{{ $onuSignal['onu_signal_1490'] ?? '-' }}
                           @php 
                           $signalQuality = strtolower($onuSignal['onu_signal'] ?? '');
                           if ($signalQuality === 'very good') { 
                           $signalClass = 'bg-success'; 
                           } elseif ($signalQuality === 'good') { 
                           $signalClass = 'bg-warning'; 
                           } elseif ($signalQuality === 'critical') { 
                           $signalClass = 'bg-danger'; 
                           } else { 
                           $signalClass = 'bg-secondary'; 
                           }
                           @endphp
                           <span class="badge {{ $signalClass }} border ms-1">
                           {{ $onuSignal['onu_signal'] ?? 'N/A' }}
                           </span>
                        </div>
                     </div>
                  </div>
                  @endif
               </div>
            </div>
            <div class="d-none d-md-block">
               <!-- Desktop Table View -->
               <div class="table-responsive">
                  <table class="table table-sm align-middle">
                     <tbody class="table-borderless">
                        @if(isset($onuStatus['onu_status']))
                        @php
                        $statusText = strtolower($onuStatus['onu_status']);
                        switch ($statusText) {
                        case 'online':
                        $badgeClass = 'bg-success';
                        break;
                        case 'offline':
                        $badgeClass = 'bg-danger';
                        break;
                        case 'power fail':
                        $badgeClass = 'bg-dark';
                        break;
                        case 'los':
                        $badgeClass = 'bg-danger';
                        break;
                        default:
                        $badgeClass = 'bg-secondary';
                        }
                        @endphp
                        <tr>
                           <th class="text-muted">Status</th>
                           <td>
                              <span class="badge {{ $badgeClass }} text-uppercase">
                              {{ ucfirst($onuStatus['onu_status']) }}
                              </span>
                           </td>
                        </tr>
                        @endif
                        <tr>
                           <th class="text-muted">OLT</th>
                           <td>{{ $onuDetails['olt_name'] }}</td>
                        </tr>
                        <tr>
                           <th class="text-muted">Board/Port/Onu</th>
                           <td>{{ $onuDetails['board'] }} / {{ $onuDetails['port'] }} / {{ $onuDetails['onu'] }}</td>
                        </tr>
                        <tr>
                           <th class="text-muted">Type</th>
                           <td>
                              {{ $onuDetails['onu_type_name'] }} 
                              <span class="badge bg-info text-uppercase border">{{ strtoupper($onuDetails['pon_type']) }}</span>
                           </td>
                        </tr>
                        <tr>
                           <th class="text-muted">Zone</th>
                           <td>{{ $onuDetails['zone_name'] }}</td>
                        </tr>
                        <tr>
                           <th class="text-muted">Name</th>
                           <td>{{ $onuDetails['name'] }}</td>
                        </tr>
                        <tr>
                           <th class="text-muted">Mode</th>
                           <td>{{ $onuDetails['mode'] }}</td>
                        </tr>
                        <tr>
                           <th class="text-muted">VLANs</th>
                           <td>
                              {{ collect($onuDetails['service_ports'])->pluck('vlan')->filter()->unique()->implode(', ') ?: '-' }}
                           </td>
                        </tr>
                        <tr>
                           <th class="text-muted">Admin Status</th>
                           <td>
                              <span class="badge {{ $onuDetails['administrative_status'] == 'Enabled' ? 'bg-success' : 'bg-danger' }}">
                              {{ $onuDetails['administrative_status'] }}
                              </span>
                           </td>
                        </tr>
                        <tr>
                           <th class="text-muted">Auth Date</th>
                           <td>{{ $onuDetails['authorization_date'] }}</td>
                        </tr>
                        @if(isset($onuSignal))
                        <tr>
                           <th class="text-muted">Signal</th>
                           <td>
                              {{ $onuSignal['onu_signal_1310'] ?? '-' }} / {{ $onuSignal['onu_signal_1490'] ?? '-' }}
                              <span class="ms-2 badge {{ $signalClass }} border">
                              {{ $onuSignal['onu_signal'] ?? 'N/A' }}
                              </span>
                           </td>
                        </tr>
                        @endif
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
      {{-- 
      <div class="card shadow-sm border-0 mt-4">
         <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
               <h5 class="card-title text-primary fw-semibold mb-0">
                  <i class="ri-exchange-line me-2"></i>Service Ports
               </h5>
               <span class="badge bg-light text-muted">{{ count($onuDetails['service_ports']) }} Total</span>
            </div>
            <div class="row g-3">
               @foreach($onuDetails['service_ports'] as $port)
               <div class="col-md-6 col-lg-4">
                  <div class="border-start border-3 border-info bg-light rounded-3 p-3 h-100 shadow-sm">
                     <div class="mb-1">
                        <span class="fw-semibold text-dark">Port:</span> {{ $port['service_port'] }}
                     </div>
                     <div class="mb-1">
                        <span class="fw-semibold text-dark">VLAN:</span> {{ $port['vlan'] ?: '-' }}
                     </div>
                     <div>
                        <span class="fw-semibold text-dark">Speed:</span> {{ $port['upload_speed'] }} / {{ $port['download_speed'] }}
                     </div>
                  </div>
               </div>
               @endforeach
            </div>
         </div>
      </div>
      --}}
      @if(count($wifiPorts) > 0)
      <div class="card shadow-sm mt-4 border-0">
         <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
               <h5 class="card-title text-info fw-semibold mb-0"><i class="ri-wireless-charging-line me-2"></i>WiFi Config</h5>
               <!-- <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="showAdvancedWifi" onchange="SmartOltActions.toggleAdvancedWifi()" />
                  <label class="form-check-label" for="showAdvancedWifi">Show Advanced Info</label>
                  </div> -->
            </div>
            <div class="row g-3" id="wifiPortsContainer">
               @foreach($onuDetails['wifi_ports'] as $port)
               @php
               $portName = $port['port'];
               $isStandard = in_array($portName, ['wifi_0/1', 'wifi_0/5']);
               $isHotspot = in_array($portName, ['wifi_0/2', 'wifi_0/6']);
               // Define badge label without match() for PHP 7.x compatibility
               if ($portName === 'wifi_0/1') {
               $badgeLabel = '2.4GHz';
               } elseif ($portName === 'wifi_0/5') {
               $badgeLabel = '5GHz';
               } elseif ($portName === 'wifi_0/2') {
               $badgeLabel = 'Hotspot';
               } elseif ($portName === 'wifi_0/6') {
               $badgeLabel = '5G Hotspot';
               } else {
               $badgeLabel = strtoupper($portName);
               }
               $adminState = strtolower($port['admin_state'] ?? '');
               $stateClass = $adminState === 'enabled' ? 'text-success' : 'text-danger';
               // Skip disabled hotspot ports
               if ($isHotspot && $adminState !== 'enabled') {
               continue;
               }
               @endphp
               <div class="col-12 col-sm-6 col-md-4 col-lg-3 wifi-port-card {{ $isStandard || $isHotspot ? 'standard-port' : 'advanced-port d-none' }}" data-port="{{ $portName }}">
                  <div class="bg-light rounded-3 p-3 h-100 border-start border-3 border-success position-relative">
                     <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-secondary text-uppercase label-text">{{ $badgeLabel }}</span>
                        <span class="{{ $stateClass }} small text-capitalize">{{ $adminState }}</span>
                     </div>
                     <p class="mb-1"><strong>Auth:</strong> {{ $port['auth_mode'] ?? 'N/A' }}</p>
                     <p class="mb-2"><strong>SSID:</strong> {{ $port['ssid'] ?? '-' }}</p>
                  </div>
               </div>
               @endforeach
            </div>
         </div>
      </div>
      @endif
      <div class="card shadow-sm mt-4 border-0">
         <div class="card-body">
            <h5 class="card-title text-info fw-semibold mb-3"><i class="ri-plug-line me-2"></i>Ethernet Ports</h5>
            <div class="row g-3">
               @foreach($onuDetails['ethernet_ports'] as $port)
               @php
               $badgeClass = (strtolower($port['mode'] ?? '') === 'hybrid') ? 'bg-success' : 'bg-secondary';
               $adminState = strtolower($port['admin_state'] ?? '');
               $stateClass = $adminState === 'enabled' ? 'text-success' : 'text-danger';
               @endphp
               <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <div class="bg-light rounded-3 p-3 h-100 border-start border-3 border-info position-relative">
                     <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge {{ $badgeClass }} text-uppercase">{{ $port['port'] }}</span>
                        <span class="{{ $adminState === 'enabled' ? 'text-success' : 'text-danger' }} small">
                        {{ $port['admin_state'] }}
                        </span>
                     </div>
                     <p class="mb-1"><strong>Mode:</strong> {{ $port['mode'] ?? 'N/A' }}</p>
                     <p class="mb-2"><strong>DHCP:</strong> {{ $port['dhcp'] ?? 'N/A' }}</p>
                  </div>
               </div>
               @endforeach
            </div>
         </div>
      </div>
   </div>
</div>
@endsection @section('script')
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- <script>
    window.SmartOltConfig = {
        csrfToken: "{{ csrf_token() }}",
        routes: {
            reboot: "{{ route('smartolt.wifi.reboot', ':id') }}",
            resync: "{{ route('smartolt.wifi.resync', ':id') }}",
            updateWifi: "{{ route('smartolt.wifi.update', ':id') }}",
            reconfigure: "{{ route('smartolt.reconfigure') }}",
            hotspotAccess: "{{ route('smartolt.wifi.set-access', ':id') }}",
            hotspotDisable: "{{ route('smartolt.hotspot.disable', ':id') }}",
            setHybrid: "{{ route('smartolt.ethernet.set-hybrid', ':id') }}"
        },
        settings: {
            hotspotDefaultSsid: "{{ setting('smartolt_hotspot_wifi_name') }}"
        }
    };
</script> -->
<!-- <script src="{{ asset('js/smartolt-actions.js') }}" defer></script> -->


<script>
   const SmartOltActions = {
       csrfToken: "{{ csrf_token() }}",
       reboot: (externalId) => {
           Swal.fire({
               title: "Are you sure?",
               text: "Reboot this ONU device?",
               icon: "warning",
               showCancelButton: true,
               confirmButtonText: "Yes, reboot it!",
           }).then((result) => {
               if (result.isConfirmed) {
                   fetch(`{{ route('smartolt.wifi.reboot', ':id') }}`.replace(':id', externalId), {
                       method: "POST",
                       headers: { "X-CSRF-TOKEN": SmartOltActions.csrfToken }
                   })
                       .then(res => res.json())
                       .then(data => {
                           Swal.fire(
                               data.status ? "Rebooted!" : "Failed",
                               data.message || "Unknown response",
                               data.status ? "success" : "error"
                           );
                       })
                       .catch(() => Swal.fire("Error", "An error occurred while rebooting.", "error"));
               }
           });
       },
   
       resync: (externalId) => {
           Swal.fire({
               title: "Are you sure?",
               text: "Resync this ONU's configuration?",
               icon: "question",
               showCancelButton: true,
               confirmButtonText: "Yes, resync it!",
           }).then((result) => {
               if (result.isConfirmed) {
                   Swal.fire({
                       title: "Resyncing...",
                       text: "Please wait while configuration is applied.",
                       allowOutsideClick: false,
                       didOpen: () => Swal.showLoading()
                   });
   
                   fetch(`{{ route('smartolt.wifi.resync', ':id') }}`.replace(':id', externalId), {
                       method: "POST",
                       headers: { "X-CSRF-TOKEN": SmartOltActions.csrfToken }
                   })
                       .then(res => res.json())
                       .then(data => {
                           Swal.fire(
                               data.status ? "Resynced!" : "Failed",
                               data.message || "Unknown response",
                               data.status ? "success" : "error"
                           );
                       })
                       .catch(() => Swal.fire("Error", "An error occurred while resyncing.", "error"));
               }
           });
       },
   
       showSsidPrompt: async (externalId, ports = []) => {
            const getPortLabel = (port) => port === "wifi_0/1" ? "2.4GHz" : port === "wifi_0/5" ? "5GHz" : port;
            const options = ports.filter(p => ["wifi_0/1", "wifi_0/5"].includes(p.port));
   
            const { value: result } = await Swal.fire({
                title: "Change WiFi SSID",
                html: `
                    <div class="text-start">
                        <label class="form-label fw-semibold mt-2">WiFi Band</label>
                        <select id="wifi_port" class="form-select mb-3">
                            ${options.map(p => `<option value="${p.port}">${getPortLabel(p.port)}</option>`).join("")}
                        </select>
   
                        <label class="form-label fw-semibold">WiFi Name</label>
                        <input type="text" class="form-control mb-3" id="ssid" placeholder="Enter new SSID">
   
                        <div id="passwordGroup">
                            <label class="form-label fw-semibold">WiFi Password</label>
                            <input type="text" class="form-control mb-1" id="password" placeholder="Enter WiFi password">
                        </div>
   
                        <div class="d-flex justify-content-center mt-4">
                            <div class="form-check form-switch text-muted">
                                <input class="form-check-input" type="checkbox" id="no_password">
                                <label class="form-check-label ms-2" for="no_password">No Password (Open Network)</label>
                            </div>
                        </div>
                    </div>
                `,
                didOpen: () => {
                    const portInput = Swal.getPopup().querySelector("#wifi_port");
                    const ssidInput = Swal.getPopup().querySelector("#ssid");
                    const passInput = Swal.getPopup().querySelector("#password");
                    const passwordGroup = Swal.getPopup().querySelector("#passwordGroup");
                    const noPassCheck = Swal.getPopup().querySelector("#no_password");
   
                    const togglePassword = () => {
                        passwordGroup.style.display = noPassCheck.checked ? "none" : "block";
                    };
   
                    const updateFields = (port) => {
                        const selected = ports.find(p => p.port === port);
                        ssidInput.value = selected?.ssid || "";
                        passInput.value = selected?.password || "";
   
                        const isOpen = (selected?.auth_mode || '').toLowerCase() === 'open_system';
                        noPassCheck.checked = isOpen;
                        togglePassword();
                    };
   
                    updateFields(portInput.value);
                    portInput.addEventListener("change", () => updateFields(portInput.value));
                    noPassCheck.addEventListener("change", togglePassword);
                },
                showCancelButton: true,
                confirmButtonText: "Update WiFi",
                preConfirm: async () => {
                    const popup = Swal.getPopup();
                    const port = popup.querySelector("#wifi_port").value.trim();
                    const ssid = popup.querySelector("#ssid").value.trim();
                    const password = popup.querySelector("#password")?.value.trim();
                    const noPassword = popup.querySelector("#no_password").checked;
   
                    if (!port || !ssid || (!noPassword && !password)) {
                        Swal.showValidationMessage("Please fill in all required fields");
                        return false;
                    }
   
                    Swal.showLoading();
   
                    try {
                        const response = await fetch(`{{ route('smartolt.wifi.update', ':id') }}`.replace(":id", externalId), {
                            method: "POST",
                            headers: {
                                "X-CSRF-TOKEN": SmartOltActions.csrfToken,
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                wifi_port: port,
                                ssid: ssid,
                                password: noPassword ? "" : password,
                                authentication_mode: noPassword ? "Open-system" : "WPA2",
                                onu_external_id: externalId,
                            }),
                        });
   
                        const data = await response.json();
                        if (!response.ok) throw new Error(data.message || "Update failed");
                        return data;
                    } catch (error) {
                        Swal.showValidationMessage(error.message);
                        return false;
                    }
                },
            });
   
            if (result?.status) {
                await Swal.fire("Success!", result.message || "WiFi SSID updated.", "success");
                location.reload();
            } else if (result?.message) {
                Swal.fire("Failed", result.message, "error");
            }
       },
   
       configurePort: (port) => {
           Swal.fire({
               title: `Configure ${port}`,
               text: "Add your configuration logic here.",
               icon: "info",
               confirmButtonText: "OK"
           });
       },
   
       configureEthernetPort: (port) => {
           Swal.fire({
               title: `Configure ${port}`,
               text: "Add configuration options here.",
               icon: "info",
               confirmButtonText: "OK"
           });
       },
   
        reconfigure(onu) {
            const {
                onu_external_id,
                mode = 'Routing',
                wifi_name = '',
                wifi_password = '',
                configuration_method = 'TR069'
            } = onu;
   
            Swal.fire({
                title: 'Reconfigure ONU',
                html: `
                    <div class="text-start">
                        <label class="form-label">ONU Mode</label>
                        <select id="onu_mode" class="form-control mb-3">
                            <option value="Routing" ${mode === 'Routing' ? 'selected' : ''}>Routing</option>
                            <option value="Bridging" ${mode === 'Bridging' ? 'selected' : ''}>Bridging</option>
                        </select>
   
                        <label class="form-label">Configuration Method</label>
                        <select id="configuration_method" class="form-control mb-3">
                            <option value="TR069" ${configuration_method === 'TR069' ? 'selected' : ''}>TR069</option>
                            <option value="OMCI" ${configuration_method === 'OMCI' ? 'selected' : ''}>OMCI</option>
                        </select>
   
                        <div id="config_fields" style="display: ${mode === 'Bridging' ? 'none' : 'block'};">
                            <label class="form-label">WiFi Name (SSID)</label>
                            <input id="ssid" class="form-control mb-2" value="${wifi_name}" placeholder="e.g. HomeWifi">
   
                            <label class="form-label">WiFi Password</label>
                            <input id="wifi_password" class="form-control" value="${wifi_password}" placeholder="e.g. mypass123">
                        </div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Confirm',
                didOpen: () => {
                    const modeSelect = document.getElementById('onu_mode');
                    const configFields = document.getElementById('config_fields');
   
                    modeSelect.addEventListener('change', () => {
                        configFields.style.display = modeSelect.value === 'Bridging' ? 'none' : 'block';
                    });
                },
                preConfirm: () => {
                    const mode = document.getElementById('onu_mode').value;
                    const isBridging = mode === 'Bridging';
   
                    return {
                        external_id: onu_external_id,
                        mode,
                        configuration_method: document.getElementById('configuration_method').value,
                        ssid: isBridging ? null : document.getElementById('ssid').value,
                        wifi_password: isBridging ? null : document.getElementById('wifi_password').value,
                    };
                }
            }).then(result => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we reconfigure the ONU.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
   
                    fetch(`{{ route('smartolt.reconfigure') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify(result.value)
                    })
                    .then(async res => {
                        if (!res.ok) {
                            const error = await res.json();
                            let message = error.message || 'Failed to reconfigure ONU.';
                            if (error.errors) {
                                message += '<br>' + Object.values(error.errors).flat().join('<br>');
                            }
                            throw new Error(message);
                        }
                        return res.json();
                    })
                    .then(res => {
                        Swal.fire('Success', res.message || 'Reconfiguration started.', 'success');
                    })
                    .catch(err => {
                        Swal.fire('Error', err.message, 'error');
                    });
                }
            });
        },
   
         enableHotspot(externalId) {
            const defaultSsid = '{{ setting('smartolt_hotspot_wifi_name') }}';
   
            Swal.fire({
               title: 'Enable Hotspot Mode',
               html: `
                     <div class="text-start">
                        <label class="form-label">WiFi Name (SSID)</label>
                        <input id="ssid" class="form-control mb-3" value="${defaultSsid}" placeholder="e.g. MyHotspot" required>
                     </div>
               `,
               showCancelButton: true,
               confirmButtonText: 'Enable',
               preConfirm: () => {
                     const ssid = document.getElementById('ssid').value.trim();
                     if (!ssid) {
                        Swal.showValidationMessage('SSID is required');
                        return false;
                     }
                     return { ssid };
               }
            }).then(result => {
               if (result.isConfirmed) {
                     Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we enable the hotspot.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                     });
   
                     fetch(`{{ route('smartolt.wifi.set-access', ':id') }}`.replace(':id', externalId), {
                        method: 'POST',
                        headers: {
                           'Content-Type': 'application/json',
                           'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({ ssid: result.value.ssid })
                     })
                     .then(async res => {
                        if (!res.ok) {
                           const error = await res.json();
                           let message = error.message || 'Failed to enable hotspot.';
                           if (error.errors) {
                                 message += '<br>' + Object.values(error.errors).flat().join('<br>');
                           }
                           throw new Error(message);
                        }
                        return res.json();
                     })
                     .then(res => {
                        Swal.fire({
                           icon: 'success',
                           title: 'Success',
                           text: res.message || 'Hotspot has been enabled.',
                        }).then(() => {
                           location.reload();
                        });
                     })
                     .catch(err => {
                        Swal.fire('Error', err.message, 'error');
                     });
               }
            });
         },
   
         disableHotspot(externalId) {
            Swal.fire({
               title: 'Disable Hotspot?',
               icon: 'warning',
               html: `
                     <div class="text-center">
                        <p class="mb-0">You're about to disable the hotspot for this ONU.</p>
                        <p class="text-danger mb-0">This will shut down the public hotspot interface.</p>
                     </div>
               `,
               showCancelButton: true,
               confirmButtonText: 'Yes, Disable',
               cancelButtonText: 'Cancel',
               confirmButtonColor: '#d33',
            }).then(result => {
               if (result.isConfirmed) {
                     Swal.fire({
                        title: 'Disabling...',
                        text: 'Please wait...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                     });
   
                     fetch(`{{ route('smartolt.hotspot.disable', ':id') }}`.replace(':id', externalId), {
                        method: 'POST',
                        headers: {
                           'Content-Type': 'application/json',
                           'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                     })
                     .then(async res => {
                        const data = await res.json();
                        if (!res.ok || !data.status) throw new Error(data.message || 'Failed to disable hotspot.');
                        Swal.fire('Success', data.message, 'success').then(() => location.reload());
                     })
                     .catch(err => {
                        Swal.fire('Error', err.message, 'error');
                     });
               }
            });
         },
   
         toggleAdvancedWifi() {
             const isAdvanced = document.getElementById("showAdvancedWifi").checked;
         
             // Show all cards
             document.querySelectorAll(".wifi-port-card").forEach((card) => {
                 card.classList.remove("d-none");
             });
         
             // Update labels
             document.querySelectorAll(".wifi-port-card").forEach((card) => {
                 const port = card.getAttribute("data-port");
                 const label = card.querySelector(".label-text");
         
                 if (isAdvanced) {
                     label.textContent = port.toUpperCase(); // Raw label
                 } else {
                     if (port === "wifi_0/1") label.textContent = "2.4GHz";
                     else if (port === "wifi_0/5") label.textContent = "5GHz";
                     else card.classList.add("d-none"); // Hide non-defaults
                 }
             });
         },
          
         hotspotHybridPorts(externalId) {
            const ethernetPorts = @json($onuDetails['ethernet_ports']);
            // Create checkboxes for each port
            const checkboxes = ethernetPorts.map(p => `
               <div class="form-check form-check-inline mx-2">
                     <input class="form-check-input" type="checkbox" 
                           id="port-${p.port}" value="${p.port}"
                           ${(p.mode && p.mode.toLowerCase() === 'hybrid') ? 'checked' : ''}>
                     <label class="form-check-label" for="port-${p.port}">${p.port}</label>
               </div>
            `).join('');
   
            Swal.fire({
               title: 'Configure Hybrid Port',
               html: `
                     <div class="text-center">
                        <label class="form-label fw-semibold mb-3">Select Ethernet Port(s)</label>
                        <div class="d-flex justify-content-center flex-wrap">
                           ${checkboxes}
                        </div>
                        <small class="text-muted d-block mt-2">Checked ports are currently in Hybrid mode</small>
                     </div>
               `,
               showCancelButton: true,
               confirmButtonText: 'Confirm',
               customClass: {
                     popup: 'text-center'
               },
               preConfirm: () => {
            const selectedPorts = [];
            const allPorts = ethernetPorts.map(p => p.port);

            ethernetPorts.forEach(p => {
                const checkbox = document.getElementById(`port-${p.port}`);
                if (checkbox.checked) selectedPorts.push(p.port);
            });

            return { ethernet_ports: selectedPorts, all_ports: allPorts };
        }
            }).then(result => {
               if (result.isConfirmed) {
                     Swal.fire({
                        title: 'Applying Hybrid Mode...',
                        text: 'Please wait while we configure the ONU Ethernet port(s).',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading(),
                        customClass: {
                           popup: 'text-center'
                        }
                     });
   
                     fetch(`{{ route('smartolt.ethernet.set-hybrid', ':id') }}`.replace(':id', externalId), {
                        method: 'POST',
                        headers: {
                           'Content-Type': 'application/json',
                           'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify(result.value)
                     })
                     .then(async res => {
                        if (!res.ok) {
                           const error = await res.json();
                           let message = error.message || 'Failed to set hybrid mode.';
                           if (error.errors) {
                                 message += '<br>' + Object.values(error.errors).flat().join('<br>');
                           }
                           throw new Error(message);
                        }
                        return res.json();
                     })
                     .then(res => {
                        Swal.fire({
                           icon: 'success',
                           title: 'Success',
                           text: res.message || 'Hybrid mode applied successfully.',
                           customClass: {
                                 popup: 'text-center'
                           }
                        }).then(() => {
                           location.reload();
                        });
                     })
                     .catch(err => {
                        Swal.fire({
                           title: 'Error',
                           text: err.message,
                           icon: 'error',
                           customClass: {
                                 popup: 'text-center'
                           }
                        });
                     });
               }
            });
         },
   };
</script>
@endsection