@extends('layouts.app')
@section('title', $page_title)

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card custom-card dash-analytics-card">
            <div class="card-body">
                <form id="frm-api" action="{{ route('ai_providers') }}" method="post" class="needs-validation" novalidate>
                    @csrf
                    @method('PUT')

                    <div class="mb-3 pb-3 border-bottom">
                        <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.ai_default_fallback') }}</div>
                        <p class="mb-0 small text-muted">{{ __('app.ai_default_fallback_help') }}</p>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="visually-hidden" for="ai_default_fallback">{{ __('app.ai_default_fallback') }}</label>
                                    <select class="form-select mt-2" id="ai_default_fallback" name="ai_default_fallback" required>
                                        @foreach(\App\Http\Helper\Helper::aiDefaultFallbackOptions() as $value => $label)
                                        <option value="{{ $value }}" {{ ($user->ai_default_fallback ?? 'chatgpt_gemini') == $value ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3 pb-3 border-bottom">
                        <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.chatGPT') }}</div>
                        <p class="mb-0 small text-muted">{{ __('app.chatgpt_settings_description') }}</p>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label fw-semibold mt-2">{{__('app.status')}} <span class="text-danger">*</span></label>
                                    <select class="form-select" name="chatgpt_enabled" required>
                                        <option value="1" {{ $user->chatgpt_enabled ? 'selected' : ''}}>{{__('app.active')}}</option>
                                        <option value="0" {{ !$user->chatgpt_enabled ? 'selected' : ''}}>{{__('app.in_active')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label fw-semibold mt-2">{{__('app.chatGPT_model')}} <span class="text-danger">*</span></label>
                                    <select class="form-select" name="chatgpt_model" required>
                                        @foreach(\App\Http\Helper\Helper::chatGPTModles() as $model)
                                        <option value="{{$model}}" {{ ($user->chatgpt_model ?? 'gpt-3.5-turbo') == $model ? 'selected' : ''}}>{{$model}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="form-label fw-semibold mt-2">{{__('app.chatGPT_key')}}</label>
                                    <div class="input-group">
                                        <input id="chatgpt_key" type="password" class="form-control" name="chatgpt_key" value="{{ $user->chatgpt_key ?? '' }}" placeholder="{{ __('app.optional_if_using_gemini_only') }}" autocomplete="off">
                                        <button class="btn btn-outline-secondary ai-key-copy" type="button" data-target="#chatgpt_key" title="{{ __('app.copy') }}">
                                            <i class="bi bi-clipboard"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary ai-key-toggle" type="button" data-target="#chatgpt_key" title="Show/Hide">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <span class="input-group-text" title="{{ __('app.chatGPT_key') }}">
                                            <i class="bi bi-key"></i>
                                        </span>
                                    </div>
                                    <div class="form-text">{{__('app.chatgpt_key_help')}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-0">
                        <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.gemini') }}</div>
                        <p class="mb-0 small text-muted">{{ __('app.gemini_settings_description') }}</p>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label fw-semibold mt-2">{{__('app.status')}} <span class="text-danger">*</span></label>
                                    <select class="form-select" name="gemini_enabled" required>
                                        <option value="1" {{ ($user->gemini_enabled ?? false) ? 'selected' : ''}}>{{__('app.active')}}</option>
                                        <option value="0" {{ !($user->gemini_enabled ?? false) ? 'selected' : ''}}>{{__('app.in_active')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label fw-semibold mt-2">{{__('app.gemini_model')}} <span class="text-danger">*</span></label>
                                    <select class="form-select" name="gemini_model" required>
                                        @foreach(\App\Http\Helper\Helper::geminiModels() as $model)
                                        <option value="{{$model}}" {{ ($user->gemini_model ?? 'gemini-1.5-flash') == $model ? 'selected' : ''}}>{{$model}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="form-label fw-semibold mt-2">{{__('app.gemini_key')}}</label>
                                    <div class="input-group">
                                        <input id="gemini_key" type="password" class="form-control" name="gemini_key" value="{{ $user->gemini_key ?? '' }}" placeholder="{{ __('app.optional_if_using_chatgpt_only') }}" autocomplete="off">
                                        <button class="btn btn-outline-secondary ai-key-copy" type="button" data-target="#gemini_key" title="{{ __('app.copy') }}">
                                            <i class="bi bi-clipboard"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary ai-key-toggle" type="button" data-target="#gemini_key" title="Show/Hide">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <span class="input-group-text" title="{{ __('app.gemini_key') }}">
                                            <i class="bi bi-key"></i>
                                        </span>
                                    </div>
                                    <div class="form-text">{{__('app.gemini_key_help')}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary btn-loading">
                                    <i class="bi bi-check-circle me-1"></i>{{__('app.update')}}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<span id="api_msg_regenerate" data-value="{{__('app.api_msg_regenerate')}}"></span>
@endsection

@push('scripts')
<script>
  $(function () {
    function copyText(text) {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        return navigator.clipboard.writeText(text);
      }
      return new Promise(function(resolve, reject) {
        try {
          var ta = document.createElement('textarea');
          ta.value = text;
          ta.setAttribute('readonly', '');
          ta.style.position = 'absolute';
          ta.style.left = '-9999px';
          document.body.appendChild(ta);
          ta.select();
          document.execCommand('copy');
          document.body.removeChild(ta);
          resolve();
        } catch (e) {
          reject(e);
        }
      });
    }

    $('.ai-key-toggle').on('click', function () {
      var target = $(this).data('target');
      var $input = $(target);
      if (!$input.length) return;

      var isHidden = ($input.attr('type') === 'password');
      $input.attr('type', isHidden ? 'text' : 'password');
      $(this).find('i').toggleClass('bi-eye bi-eye-slash');
    });

    $('.ai-key-copy').on('click', function () {
      var target = $(this).data('target');
      var $input = $(target);
      if (!$input.length) return;

      var val = ($input.val() || '').toString();
      if (!val) {
        toastr.error('No data found');
        return;
      }

      copyText(val).then(function () {
        toastr.success('{{ __("app.saved") }}');
      }).catch(function () {
        toastr.error('{{ __("app.connection_failed") }}');
      });
    });
  });
</script>
@endpush