@extends('layouts.master') @section('title') api keys @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') Maps @endslot @endcomponent  --}}
<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">Api Keys</h4>
      </div>
   </div>
</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="#google-api-settings" data-bs-toggle="tab">
          <i class="ri-map-pin-line me-2"></i> Google Maps API
        </a>
      </li>
      @if (setting('smartolt_enabled') === 'enabled')
      <li class="nav-item">
        <a class="nav-link" href="#smartolt-api-settings" data-bs-toggle="tab">
          <i class="ri-router-line me-2"></i> SmartOLT API
        </a>
      </li>
      @endif
    </ul>
  </div>

  <!-- Content -->
  <div class="settings-content">
    <form action="{{ route('settings.general_save') }}" method="POST">
      @csrf
      <div class="tab-content">
        <!-- Google Map API -->
        <div class="tab-pane fade show active" id="google-api-settings">
          <div class="settings-card">
            <div class="settings-card-header">
              <h4><i class="ri-map-pin-line me-2 text-info"></i> Google Map API Key</h4>
              <p class="text-muted">Set your Google Maps API key for map functionality.</p>
            </div>
            <div class="settings-card-body">
              <div class="mb-3">
                <input type="text" name="google_map_api_key" value="{{ setting('google_map_api_key') }}" class="form-control" placeholder="Google Map API Key">
              </div>
            </div>
          </div>
        </div>

        <!-- SmartOLT API Settings -->
        <div class="tab-pane fade" id="smartolt-api-settings">
          @if (setting('smartolt_enabled') === 'enabled')
          <div class="settings-card">
            <div class="settings-card-header">
              <h4><i class="ri-router-line me-2 text-info"></i> SmartOLT API Configuration</h4>
              <p class="text-muted">Set SmartOLT connection credentials and VLAN mappings</p>
            </div>
            <div class="settings-card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="smartolt_subdomain" class="form-label">SmartOLT Subdomain</label>
                  <input type="text" name="smartolt_subdomain" value="{{ setting('smartolt_subdomain') }}" class="form-control" placeholder="e.g., mycompany">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="smartolt_api_key" class="form-label">SmartOLT API Key</label>
                  <input type="text" name="smartolt_api_key" value="{{ setting('smartolt_api_key') }}" class="form-control" placeholder="Enter your SmartOLT API key">
                </div>
              </div>

              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="smartolt_tr069_profile_name" class="form-label">TR069 Profile Name</label>
                  <input type="text" name="smartolt_tr069_profile_name" value="{{ setting('smartolt_tr069_profile_name', 'Default-TR069') }}" class="form-control" placeholder="e.g., Default-TR069">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="smartolt_pppoe_vlan" class="form-label">Default PPPoE VLAN</label>
                  <input type="number" name="smartolt_pppoe_vlan" value="{{ setting('smartolt_pppoe_vlan') }}" class="form-control" placeholder="e.g., 100">
                </div>
              </div>

              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="smartolt_mgmt_vlan" class="form-label">Management VLAN</label>
                  <input type="number" name="smartolt_mgmt_vlan" value="{{ setting('smartolt_mgmt_vlan') }}" class="form-control" placeholder="e.g., 11">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="smartolt_hotspot_vlan" class="form-label">Hotspot VLAN</label>
                  <input type="number" name="smartolt_hotspot_vlan" value="{{ setting('smartolt_hotspot_vlan') }}" class="form-control" placeholder="e.g., 200">
                </div>
              </div>

              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="smartolt_hotspot_devices_vlan" class="form-label">Hotspot Devices VLAN</label>
                  <input type="number" name="smartolt_hotspot_devices_vlan" value="{{ setting('smartolt_hotspot_devices_vlan') }}" class="form-control" placeholder="e.g., 201">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="smartolt_hotspot_wifi_name" class="form-label">Hotspot Wifi Name</label>
                  <input type="text" name="smartolt_hotspot_wifi_name" value="{{ setting('smartolt_hotspot_wifi_name') }}" class="form-control" placeholder="e.g., Spotnet-Hotspot">
                </div>
              </div>
            </div>
          </div>
          @endif
        </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>
   // 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