@extends('layouts.master')
@section('title', 'Authorize ONU')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
@endsection
@section('content')
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">Authorize ONU</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
         <li class="breadcrumb-item active"><a href="{{ route('smartolt.unauthorized') }}">Unauthorized ONUS</a></li>
      </ol>
   </div>
</div>
<div class="row justify-content-center">
   <div class="col-lg-8">
      @if ($errors->any())
      <div class="alert alert-danger shadow-sm rounded p-3 mb-3 small">
         <strong><i class="ri-error-warning-line"></i> Please fix the following errors:</strong>
         <ul class="mb-0 mt-2 ps-3">
            @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
            @endforeach
         </ul>
      </div>
      @endif

      <div class="card">
         <!-- <div class="card-header bg-soft-light">
            <h5 class="mb-0 text-muted">Authorize ONU</h5>
         </div> -->
         <div class="card-body">
            <form id="authorize-onu-form" action="{{ route('smartolt.authorize') }}" method="POST">
               @csrf
               <div class="form-check form-switch mb-4">
                  <input class="form-check-input" type="checkbox" id="basic-auth-toggle" name="basic_auth">
                  <label class="form-check-label fw-bold text-muted" for="basic-auth-toggle">
                  <i class="ri-lock-unlock-line me-2"></i>Use Basic Authorization Only
                  </label>
               </div>
               <div class="row g-3">
                  <div class="card shadow-sm rounded p-4 mb-2 border bg-soft-info" id="advanced-config-section">
                     <h5 class="card-title mb-3">
                        <i class="ri-settings-3-line text-primary"></i> Advanced Configuration
                     </h5>

                     <!-- Service Search -->
                     <div class="position-relative mb-3" id="service-search-section" style="z-index: 1000;">
                        <label class="form-label">🔍 Search Service</label>
                        <div class="input-group shadow-sm rounded">
                              <span class="input-group-text bg-light border-end-0">
                                 <i class="ri-search-line text-muted"></i>
                              </span>
                              <input type="text" id="service-search" class="form-control border-start-0" 
                                    placeholder="Type PPPoE username or Service ID..." autocomplete="off">
                        </div>
                        <small class="text-muted d-block mt-1">Search to auto-fill client name</small>
                        <ul id="service-suggestions" class="list-group bg-white rounded shadow-sm"
                              style="position: absolute; left: 0; right: 0; top: 100%; display: none; max-height: 250px; overflow-y: auto;">
                        </ul>
                     </div>

                     <div class="row g-3">
                        <!-- WiFi Name -->
                        <div class="col-md-6" id="wifi-name-field">
                              <label class="form-label">WiFi Name (SSID)</label>
                              <input type="text" name="ssid" class="form-control @error('ssid') is-invalid @enderror"
                                    value="{{ old('ssid', setting('default_wifi_ssid', 'HomeWifi')) }}"
                                    placeholder="e.g. HomeWifi" required>
                              @error('ssid')
                                 <div class="invalid-feedback">{{ $message }}</div>
                              @enderror
                        </div>

                        <!-- WiFi Password -->
                        <div class="col-md-6" id="wifi-password-field">
                              <label class="form-label">WiFi Password</label>
                              <input type="text" name="wifi_password" class="form-control @error('wifi_password') is-invalid @enderror"
                                    value="{{ old('wifi_password', setting('default_wifi_password', 'mypassword123')) }}"
                                    placeholder="e.g. mypassword123" required>
                              @error('wifi_password')
                                 <div class="invalid-feedback">{{ $message }}</div>
                              @enderror
                        </div>

                        <!-- Configuration Method -->
                        <div class="col-md-6" id="config-method-section">
                              <label class="form-label">Configuration Method</label>
                              <select name="configuration_method" class="form-select @error('configuration_method') is-invalid @enderror" required>
                                 <option value="TR069" {{ old('configuration_method', 'TR069') == 'TR069' ? 'selected' : '' }}>TR069</option>
                                 <option value="OMCI" {{ old('configuration_method') == 'OMCI' ? 'selected' : '' }}>OMCI</option>
                              </select>
                              @error('configuration_method')
                                 <div class="invalid-feedback">{{ $message }}</div>
                              @enderror
                        </div>

                        <!-- VLAN -->
                        @php $defaultPppoeVlan = setting('smartolt_pppoe_vlan'); @endphp
                        <div class="col-md-6" id="vlan-section">
                              <label class="form-label">VLAN</label>
                              <select name="vlan" class="form-select @error('vlan') is-invalid @enderror" required>
                                 <option value="">-- Select VLAN --</option>
                                 @foreach($vlans as $vlan)
                                    <option value="{{ $vlan['vlan'] }}" {{ old('vlan', $defaultPppoeVlan) == $vlan['vlan'] ? 'selected' : '' }}>
                                          {{ $vlan['vlan'] }}{{ $vlan['description'] ? ' - ' . $vlan['description'] : '' }}
                                    </option>
                                 @endforeach
                              </select>
                              @error('vlan')
                                 <div class="invalid-feedback">{{ $message }}</div>
                              @enderror
                        </div>
                     </div>
                  </div>
                  <input type="hidden" id="service-id" name="service_id">
                  <div class="card shadow-sm rounded p-4 mb-2 border bg-soft-dark" id="advanced-config-section">
                     <h5 class="card-title mb-3">
                        <i class="ri-settings-3-line text-warning"></i> Basic Configuration
                     </h5>
                     <div class="row g-3">
                        {{-- OLT --}}
                        <div class="col-md-4">
                           <label class="form-label">OLT</label>
                           <input type="text" class="form-control bg-light" 
                              value="{{ collect($olts)->firstWhere('id', $onu['olt_id'])['name'] ?? 'Unknown' }}" 
                              readonly>
                           <input type="hidden" name="olt_id" value="{{ $onu['olt_id'] }}">
                        </div>
                        {{-- PON Type --}}
                        <div class="col-md-4">
                           <label class="form-label">PON Type</label>
                           <div class="form-control bg-light">
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="pon_type_display" value="gpon"
                                 {{ ($onu['pon_type'] ?? 'gpon') === 'gpon' ? 'checked' : '' }} disabled>
                                 <label class="form-check-label">GPON</label>
                              </div>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="pon_type_display" value="epon"
                                 {{ ($onu['pon_type'] ?? 'gpon') === 'epon' ? 'checked' : '' }} disabled>
                                 <label class="form-check-label">EPON</label>
                              </div>
                              <input type="hidden" name="pon_type" value="{{ $onu['pon_type'] ?? 'gpon' }}">
                           </div>
                        </div>
                        {{-- ONU External ID --}}
                        <div class="col-md-4">
                           <label class="form-label">ONU External ID</label>
                           <input type="text" name="onu_external_id" value="{{ $onu['sn'] }}" class="form-control">
                        </div>
                        {{-- Board & Port --}}
                        <div class="col-md-3">
                           <label class="form-label">Board</label>
                           <input type="text" name="board" class="form-control bg-light" value="{{ $onu['board'] }}" readonly>
                        </div>
                        <div class="col-md-3">
                           <label class="form-label">Port</label>
                           <input type="text" name="port" class="form-control bg-light" value="{{ $onu['port'] }}" readonly>
                        </div>
                        {{-- SN --}}
                        <div class="col-md-6">
                           <label class="form-label">Serial Number (SN)</label>
                           <input type="text" name="sn" class="form-control bg-light" value="{{ $onu['sn'] }}" readonly>
                        </div>
                        {{-- ONU Type --}}
                        <div class="col-md-6">
                           <label class="form-label">ONU Type</label>
                           <select name="onu_type" class="form-select" required>
                           @foreach($onuTypes as $type)
                           @if($type['pon_type'] === $onu['pon_type'])
                           <option value="{{ $type['name'] }}" {{ $type['name'] === $onu['onu_type_name'] ? 'selected' : '' }}>
                           {{ $type['name'] }} ({{ $type['capability'] }})
                           </option>
                           @endif
                           @endforeach
                           </select>
                        </div>
                        {{-- Zone --}}
                        <div class="col-md-6">
                           <label class="form-label">Zone</label>
                           <select name="zone" class="form-select" required>
                           @foreach(collect($zones)->sortBy('name')->values() as $zone)
                           <option value="{{ $zone['name'] }}" {{ $loop->first ? 'selected' : '' }}>
                           {{ $zone['name'] }}
                           </option>
                           @endforeach
                           </select>
                        </div>
                        {{-- ODB --}}
                        <div class="col-md-6">
                           <label class="form-label">ODB</label>
                           <select name="odb" id="odb-dropdown" class="form-select">
                              <option value="">None</option>
                           </select>
                        </div>
                        {{-- Name --}}
                        <div class="col-md-6">
                           <label class="form-label">Name</label>
                           <input type="text" name="name" id="client-name" class="form-control" required>
                        </div>
                        {{-- Address --}}
                        <div class="col-md-6">
                           <label class="form-label">Address / Comment</label>
                           <input type="text" name="address_or_comment" class="form-control">
                        </div>
                        {{-- ONU Mode --}}
                        <div class="col-md-6">
                           <label class="form-label">ONU Mode</label>
                           <div class="form-control">
                              <div class="form-check form-check-inline">
                                 <input type="radio" class="form-check-input" name="onu_mode" value="Routing" checked onchange="toggleWifiFields()">
                                 <label class="form-check-label">Routing</label>
                              </div>
                              <div class="form-check form-check-inline">
                                 <input type="radio" class="form-check-input" name="onu_mode" value="Bridging" onchange="toggleWifiFields()">
                                 <label class="form-check-label">Bridging</label>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  {{-- Submit --}}
                  <div class="col-12 text-end mt-3">
                     <button type="submit" class="btn btn-success px-4">
                     <i class="ri-check-line"></i> Authorize
                     </button>
                  </div>
               </div>
            </form>
         </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>
   const subdomain = '{{ setting("smartolt_subdomain") }}';
   
   document.querySelector('select[name="zone"]').addEventListener('change', function () {
       const selectedZone = this.value;
       const odbDropdown = document.getElementById('odb-dropdown');
   
       // Always keep the first option as "None"
       odbDropdown.innerHTML = '<option value="">None</option>';
   
       if (!selectedZone) return;
   
       fetch(`https://${subdomain}.smartolt.com/api/system/get_odbs/${encodeURIComponent(selectedZone)}`)
           .then(response => response.json())
           .then(data => {
               if (data.status && Array.isArray(data.response) && data.response.length > 0) {
                   data.response.forEach(odb => {
                       const option = document.createElement('option');
                       option.value = odb.name;
                       option.text = odb.name;
                       odbDropdown.appendChild(option);
                   });
               } else {
                   odbDropdown.innerHTML = '<option value="">None (No ODBs found)</option>';
               }
           })
           .catch(error => {
               console.error('Error fetching ODBs:', error);
               odbDropdown.innerHTML = '<option value="">None</option>';
           });
   });
   
   // Trigger load if zone is pre-filled
   document.querySelector('select[name="zone"]').dispatchEvent(new Event('change'));
</script>
<script>
   const input = document.getElementById('service-search');
   const suggestions = document.getElementById('service-suggestions');
   const clientNameInput = document.getElementById('client-name');
   const serviceIdInput = document.getElementById('service-id');
   
   let typingTimer;
   const debounceDelay = 300;
   
   input.addEventListener('input', () => {
       clearTimeout(typingTimer);
       const query = input.value.trim();
   
       if (query.length < 2) {
           suggestions.style.display = 'none';
           return;
       }
   
       typingTimer = setTimeout(() => {
           const url = `{{ route('smartolt.service.lookup', ':term') }}`.replace(':term', encodeURIComponent(query));
   
           fetch(url)
               .then(res => res.json())
               .then(data => {
                   suggestions.innerHTML = '';
   
                   if (data.success && Array.isArray(data.services) && data.services.length > 0) {
                       data.services.forEach(service => {
                           const li = document.createElement('li');
                           li.className = 'list-group-item list-group-item-action';
                           li.style.cursor = 'pointer';
                           li.innerHTML = `<strong>${service.username}</strong> — ${service.client_name}`;
                           li.dataset.clientName = service.client_name;
                           li.dataset.serviceId = service.id;
   
                           li.addEventListener('click', () => {
                               input.value = service.username;
                               clientNameInput.value = service.client_name;
                               serviceIdInput.value = service.id;
                               suggestions.innerHTML = '';
                               suggestions.style.display = 'none';
                           });
   
                           suggestions.appendChild(li);
                       });
                       suggestions.style.display = 'block';
                   } else {
                       suggestions.innerHTML = `
                           <li class="list-group-item text-muted no-result">
                               No results
                           </li>`;
                       suggestions.style.display = 'block';
                   }
               })
               .catch(() => {
                   suggestions.innerHTML = `
                       <li class="list-group-item text-danger">
                           Error loading services
                       </li>`;
                   suggestions.style.display = 'block';
               });
       }, debounceDelay);
   });
   
   // Hide dropdown when clicking outside
   document.addEventListener('click', (e) => {
       if (!input.contains(e.target) && !suggestions.contains(e.target)) {
           suggestions.style.display = 'none';
       }
   });
</script>
<script>
   document.getElementById('authorize-onu-form').addEventListener('submit', function (e) {
       Swal.fire({
           title: 'Authorizing ONU...',
           text: 'Please wait while we communicate with SmartOLT.',
           icon: 'info',
           allowOutsideClick: false,
           allowEscapeKey: false,
           showConfirmButton: false,
           didOpen: () => {
               Swal.showLoading();
           }
       });
   });
</script>
<script>
   function toggleWifiFields() {
      const mode = document.querySelector('input[name="onu_mode"]:checked')?.value;
      const ssidField = document.getElementById('wifi-name-field');
      const passwordField = document.getElementById('wifi-password-field');
   
      const shouldHide = mode === 'Bridging';
   
      ssidField.classList.toggle('d-none', shouldHide);
      passwordField.classList.toggle('d-none', shouldHide);
   }
   
   document.addEventListener('DOMContentLoaded', toggleWifiFields);
   document.querySelectorAll('input[name="onu_mode"]').forEach(radio =>
      radio.addEventListener('change', toggleWifiFields)
   );
</script>
<script>
   document.getElementById('basic-auth-toggle').addEventListener('change', function() {
       const advancedSection = document.getElementById('advanced-config-section');
       if (advancedSection) {
           advancedSection.style.display = this.checked ? 'none' : 'block';
       }
   });
</script>
@endsection