@extends('workers.cabinet_layout', ['title' => 'Добавление стандартного документа - РекаМоре'])
  
  @section('cabinet_content')
  <h3 class="cabinet__h4 font30">Сертификат / документ</h3>

  <div class="cabinet__inputs">

      @csrf
      <input type="hidden" name="worker_id" id="worker_id" class="input" value="{{ $worker->id }}">

      <div class="error-block"></div>

      <div class="cabinet__body-item width100">

          <div class="cabinet__inputs sertificate-form-inputs">

              <div class="cabinet__inputs-item form-group">
                  <label class="form-group__label">Название сертификата:</label>
                  <div class="form-group__item">
                      @error('name')
                          <div class="error red">{{ $message }}</div>
                      @enderror

                      <input type="text" name="name" id="name" class="input" value="{{ old('name') ?? '' }}" required>

                  </div>

              </div>
              <div class="cabinet__inputs-item form-group">
                  <label class="form-group__label">Действия сертификата до:</label>
                  <div class="form-group__item">
                      @error('end_begin')
                          <div class="error red">{{ $message }}</div>
                      @enderror

                      <input
                          type="text"
                          name="end_begin"
                          id="end_begin"
                          class="input"
                          placeholder="11.11.2011"
                          value="{{ old('end_begin') ?? '' }}"
                          required>

                  </div>
              </div>
          </div>

          <div class="flex">

              <button class="button add-serificate-button mr-10">Сохранить</button>
              <a href="{{ route('worker.cabinet') }}" class="button button_light">Назад</a>
          </div>
      </div>
  </div>
  
  <div class="hide">
      <div id="after_add_serificate_chat" class="modal-dialog">
          <div class="modal-dialog-title">
              <h2>Сертификат / документ успешно добавлен</h2>
          </div>
          <div class="modal-dialog-body pt-20"></div>
          <div class="modal-dialog-footer center">
              <a href="{{ route('worker.new_sertificate',['worker' => $worker->id]) }}" class="button remove-chat-button mr-20">Добавить еще</a>
              <a href="{{ route('worker.cabinet') }}" class="button button_light" onclick="$.fancybox.close();">Закончить</a>

          </div>
      </div>

      <button class="open-after_add_serificate_chat-button" data-fancybox data-src="#after_add_serificate_chat"></button>
  </div>
  @endsection
  
  @section('scripts')
      <script>
          $(function(){
              $('.add-serificate-button').click(function(){
                  var this_btn = $(this);
                  spinStart(this_btn);
                  var wrap = this_btn.closest('.cabinet__inputs');

                  var name = wrap.find('[name="name"]').val().trim();
                  var end_date = wrap.find('[name="end_begin"]').val().trim();

                  var worker_id = wrap.find('[name="worker_id"]').val();

                  var date_format_regex = /^\d{2}\.\d{2}\.\d{4}$/; // Format: DD.MM.YYYY

  
                  wrap.find('.error-block').html('');
                  wrap.find('input').removeClass('border-red');
  
                  if (!name) {
                      wrap.find('[name="name"]').addClass('border-red');
                      spinStop(this_btn);
                      return;
                  }
                  if (!end_date) {
                      wrap.find('[name="end_begin"]').addClass('border-red');

                      wrap.find('[name="end_begin"]').after('<span class="error-block">Поле "Дата окончания" обязательно для заполнения.</span>');
                      spinStop(this_btn);
                      return;
                  } else if (!date_format_regex.test(end_date)) {
                      wrap.find('[name="end_begin"]').addClass('border-red');
                      wrap.find('[name="end_begin"]').after('<span class="error-block">Неверный формат даты (дд.мм.гггг).</span>');

                      spinStop(this_btn);
                      return;
                  }
  
                  $.ajax({
                      type: 'POST',
                      url: "{{ route('worker.add_serificate') }}",
                      data: {
                          worker_id: worker_id,
                          name: name,
                          end_begin: end_date
                      },
                      dataType: 'json',
                      headers: {
                          'X-CSRF-TOKEN': $('[name="_token"]').val()
                      },
                      success: function(res){

                          spinStop(this_btn);
                          $('.open-after_add_serificate_chat-button').click();
                      },
                      error: function(jqXHR, exception){
                          if (jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.message){
                              wrap.find('.error-block').html(jqXHR.responseJSON.message);
                          }
                          spinStop(this_btn);
                      }
                  });
              });
  
  
          });
      </script>

  @endsection