@extends('layouts.master') @section('title') preferences settings @endsection
@section('css')
<link rel="stylesheet" href="{{ URL::asset('/assets/css/config.css') }}" />
@endsection
@section('content') 
{{-- @component('components.breadcrumb') @slot('li_1') Settings @endslot @slot('title') General @endslot @endcomponent  --}}
<div class="row">
   <div class="col-lg-12">
      <div class="card mt-n4 mx-n4">
         <div class="bg-soft-light">
            @include('settings.general.header')
            <!-- end card body -->
         </div>
      </div>
      <!-- end card -->
   </div>
   <!-- end col -->
</div>
<!-- Status messages -->
@if (session('status'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
   <i class="ri-checkbox-circle-line me-2"></i>{{ session('status') }}
   <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
   <i class="ri-error-warning-line me-2"></i>{{ session('error') }}
   <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
<div class="settings-container mb-4">
   <!-- Sidebar -->
   <div class="settings-sidebar">
      <ul class="nav flex-column config-nav">
         <li class="nav-item">
            <a class="nav-link active" href="#system-settings" data-bs-toggle="tab">
            <i class="ri-tools-line me-2"></i> System 
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#billing-settings" data-bs-toggle="tab">
            <i class="ri-money-dollar-circle-line me-2"></i> Billing
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#nas-settings" data-bs-toggle="tab">
            <i class="ri-base-station-line me-2"></i> NAS Management
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#smartolt-settings" data-bs-toggle="tab">
            <i class="ri-router-line me-2"></i> SmartOLT Integration
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#portal-settings" data-bs-toggle="tab">
            <i class="ri-user-settings-line me-2"></i> Customer Portal
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#prefix-settings" data-bs-toggle="tab">
            <i class="ri-hashtag me-2"></i> Accounts Prefix
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#services-settings" data-bs-toggle="tab">
            <i class="ri-service-line me-2"></i> Service Defaults
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#misc-settings" data-bs-toggle="tab">
            <i class="ri-settings-2-line me-2"></i> Miscellaneous
            </a>
         </li>
      </ul>
   </div>
   <!-- Content -->
   <div class="settings-content">
      <form action="{{ route('settings.preferences_save') }}" method="POST">
         @csrf
         <div class="tab-content">
            <!-- SYSTEM SETTINGS -->
            <div class="tab-pane fade show active" id="system-settings">
               @include('settings.partials.preferences.system')
            </div>
            <!-- BILLING SETTINGS -->
            <div class="tab-pane fade" id="billing-settings">
               @include('settings.partials.preferences.billing')
            </div>
            <!-- NAS SETTINGS -->
            <div class="tab-pane fade" id="nas-settings">
               @include('settings.partials.preferences.nas')
            </div>
            <!-- SMARTOLT SETTINGS -->
            <div class="tab-pane fade" id="smartolt-settings">
               @include('settings.partials.preferences.smartolt')
            </div>
            <!-- CUSTOMER PORTAL SETTINGS -->
            <div class="tab-pane fade" id="portal-settings">
               @include('settings.partials.preferences.portal')
            </div>
            <!-- ACCOUNT PREFIX SETTINGS -->
            <div class="tab-pane fade" id="prefix-settings">
               @include('settings.partials.preferences.prefix')
            </div>
            <!-- SERVICES SETTINGS -->
            <div class="tab-pane fade" id="services-settings">
               @include('settings.partials.preferences.services')
            </div>
            <!-- MISC SETTINGS -->
            <div class="tab-pane fade" id="misc-settings">
               @include('settings.partials.preferences.misc')
            </div>
         </div>
         <!-- Save button -->
         <div class="form-actions text-end mt-3">
            <button type="submit" class="btn btn-primary">
            <i class="ri-save-line me-1"></i> Save Settings
            </button>
         </div>
      </form>
   </div>
</div>
@endsection
@section('script')
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script>
   // Get the checkbox for customer portal
   var customerPortalCheckbox = document.getElementById('customerPortalSwitch');

   // Get the div for changing services (make sure this exists in your HTML)
   var changeServicesDiv = document.getElementById('changeServicesDiv');

   if (customerPortalCheckbox && changeServicesDiv) {
       // Add event listener
       customerPortalCheckbox.addEventListener('change', function() {
           changeServicesDiv.style.display = this.checked ? 'block' : 'none';
       });

       // Trigger on load to reflect the current checkbox state
       changeServicesDiv.style.display = customerPortalCheckbox.checked ? 'block' : 'none';
   }
</script>

<script>
   // Tab persistence
   document.addEventListener('DOMContentLoaded', function() {
   const tabs = document.querySelectorAll('.nav-link[data-bs-toggle="tab"]');
   tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      localStorage.setItem('lastSettingsTab', this.getAttribute('href'));
    });
   });
   
   const lastTab = localStorage.getItem('lastSettingsTab');
   if (lastTab) {
    const tab = new bootstrap.Tab(document.querySelector(`.nav-link[href="${lastTab}"]`));
    tab.show();
   }
   });
</script>
@endsection