@csrf
  
  @isset($question)
      @method('PUT')
  @endisset
  
  <script>
      function translit(word){
          var answer = '';
          var converter = {
              'а': 'a',    'б': 'b',    'в': 'v',    'г': 'g',    'д': 'd',
              'е': 'e',    'ё': 'e',    'ж': 'zh',   'з': 'z',    'и': 'i',
              'й': 'y',    'к': 'k',    'л': 'l',    'м': 'm',    'н': 'n',
              'о': 'o',    'п': 'p',    'р': 'r',    'с': 's',    'т': 't',
              'у': 'u',    'ф': 'f',    'х': 'h',    'ц': 'c',    'ч': 'ch',
              'ш': 'sh',   'щ': 'sch',  'ь': '',     'ы': 'y',    'ъ': '',
              'э': 'e',    'ю': 'yu',   'я': 'ya',
  
              'А': 'A',    'Б': 'B',    'В': 'V',    'Г': 'G',    'Д': 'D',
              'Е': 'E',    'Ё': 'E',    'Ж': 'Zh',   'З': 'Z',    'И': 'I',
              'Й': 'Y',    'К': 'K',    'Л': 'L',    'М': 'M',    'Н': 'N',
              'О': 'O',    'П': 'P',    'Р': 'R',    'С': 'S',    'Т': 'T',
              'У': 'U',    'Ф': 'F',    'Х': 'H',    'Ц': 'C',    'Ч': 'Ch',
              'Ш': 'Sh',   'Щ': 'Sch',  'Ь': '',     'Ы': 'Y',    'Ъ': '',
              'Э': 'E',    'Ю': 'Yu',   'Я': 'Ya',   ' ': '-'
          };
  
          for (var i = 0; i < word.length; ++i ) {
              if (converter[word[i]] == undefined){
                  answer += word[i];
              } else {
                  answer += converter[word[i]];
              }
          }
  
          return answer;
      }
  
      window.addEventListener("DOMContentLoaded", (event) => {
          let title = document.querySelector('#name');
          let text = document.querySelector('#slug');
  
          title.addEventListener('input', function() {
              text.value = translit(this.value);
          });
      });
  
  </script>
  <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
      <label class="block text-sm">
          <span class="text-gray-700 dark:text-gray-400">Вопрос</span>
          <input name="question" id="question"
                 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                 placeholder="Вопрос" value="{{ old('name') ?? $question->question ?? '' }}"
          />
          @error('question')
          <span class="text-xs text-red-600 dark:text-red-400">
                    {{ $message }}
              </span>
          @enderror
      </label><br>
  
      <label class="block text-sm">
          <span class="text-gray-700 dark:text-gray-400">Ответ</span>
          <textarea class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray ckeditor" name="answer" placeholder="Ответ" required rows="10">
              {{ old('text2') ?? $question->answer ?? '' }}
          </textarea>
          @error('answer')
          <span class="text-xs text-red-600 dark:text-red-400">
                    {{ $message }}
              </span>
          @enderror
      </label><br>
  
      <label class="block text-sm">
          <span class="text-gray-700 dark:text-gray-400">Ответ</span>
          <select name="target" id="target" placeholder="Для кого"
              class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
              <option value="{{ \App\Enums\FaqTarget::EMPLOYER->value }}" @if (isset($question) && \App\Enums\FaqTarget::EMPLOYER->value==$question->target) selected @endif>Работодатель</option>
              <option value="{{ \App\Enums\FaqTarget::EMPLOYEE->value }}" @if (isset($question) && \App\Enums\FaqTarget::EMPLOYEE->value==$question->target) selected @endif>Работник</option>
          </select>
          @error('target')
          <span class="text-xs text-red-600 dark:text-red-400">
                    {{ $message }}
              </span>
          @enderror
      </label><br>
  
      <div class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4">
          <div>
              <button type="submit" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                  Сохранить
              </button>
              <a href="{{ route('admin.faq.list') }}"
                 class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
                 style="display: -webkit-inline-box; height: 30px!important;"
              >Назад</a>
          </div>
      </div>
  </div>

  
  
  <script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
  
  <script>
      CKEDITOR.replace( 'answer', {
          filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
          filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
          filebrowserUploadMethod: 'form'
      });
  </script>