<style>
      #captcha {
          background-color: #d0d0d0;
      }
  
      #captcha2 {
          background-color: #d0d0d0;
      }
  </style>

  @include('modals.successful_registration_worker')
  @include('modals.successful_registration_employer')

  <div id="reg" class="modal">
      <div class="modal__body">
          <div class="modal__title left">Регистрация</div>

          <div class="notify notify_red" style="display:none" id="block-info">
              <svg>
                  <use xlink:href="{{ asset('images/sprite.svg#i') }}"></use>
              </svg><br>
              <span id="messages_error_reg" name="messages_error_reg"></span>
          </div>

          <div class="modal__tabs">
              <button type="button" class="modal__tabs-item button button_light active" data-tab="1">Кандидат</button>
              <button type="button" class="modal__tabs-item button button_light" data-tab="2">Работодатель</button>
          </div>

          <form class="modal__reg showed" data-body="1" id="form1" name="form1" onsubmit="return validateCaptcha()" method="POST" action="{{ route('register_worker') }}">
              @csrf

              <input type="hidden" name="is_worker" id="is_worker" value="1"/>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Электронная почта *</label>

                  <div class="form-group__item">

                      <input type="email" id="email_worker" name="email" class="input" placeholder="info@rekamore.su">
                      <span id="email_error" class="error-message"></span>

                  </div>
              </div>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Пароль  *</label>

                  <div class="form-group__item">

                      <input type="password" id="password_worker" name="password" class="input" placeholder="**********">

                      <button type="button" class="eye">
                          <svg class="js-password-show">

                              <use xlink:href="{{ asset('images/sprite.svg#eye') }}"></use>

                          </svg>
                          <svg class="js-password-hide">

                              <use xlink:href="{{ asset('images/sprite.svg#eye-2') }}"></use>

                          </svg>
                      </button>

                      <span id="password_error" class="error-message"></span>

                  </div>
              </div>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Подтвердить пароль *</label>

                  <div class="form-group__item">

                      <input type="password" id="password_confirmation_worker" name="password_confirmation" class="input" placeholder="**********">

                      <button type="button" class="eye">
                          <svg class="js-password-show">

                              <use xlink:href="{{ asset('images/sprite.svg#eye') }}"></use>

                          </svg>
                          <svg class="js-password-hide">

                              <use xlink:href="{{ asset('images/sprite.svg#eye-2') }}"></use>

                          </svg>
                      </button>
                  </div>

                  <span id="password_confirmation_error" class="error-message"></span>

              </div>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Фамилия *</label>

                  <div class="form-group__item">

                      <input type="text" id="surname_worker" name="surname" class="input" placeholder="Шестаков">
                      <span id="surname_error" class="error-message"></span>

                  </div>
              </div>
  
              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Имя *</label>

                  <div class="form-group__item">

                      <input type="text" id="name_man_worker" name="name_man" class="input" placeholder="Андрей">
                      <span id="name_man_error" class="error-message"></span>

                  </div>
              </div>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Отчество</label>

                  <div class="form-group__item">

                      <input type="text" id="surname2_worker" name="surname2" class="input" placeholder="Васильевич">

                  </div>
              </div>

              <!--

              <div class="modal__reg-item form-group">
                  <label class="form-group__label">Должность</label>
                  <div class="form-group__item">
                      <input type="text" class="input" placeholder="Палуба" required>
                  </div>

              </div>-->
  
              <div class="modal__reg-item form-group">
                  <label class="form-group__label">Должность</label>
                  <div class="form-group__item">
                      <div class="select">

                          <select class="js-select2" name="job_titles" id="job_titles_worker">

                              <option value="" selected>Не указано</option>

                              @if ($Job_titles->count())
                                  @foreach($Job_titles as $it)
                                      <option value="{{ $it->id }}">{{ $it->name }}</option>
                                  @endforeach
                              @endif
                          </select>

                          <span id="job_titles_error" class="error-message"></span>

                      </div>
                  </div>

              </div>

              <div class="modal__reg-item form-group">
                  <label class="form-group__label">Номер телефона</label>
                  <div class="form-group__item">

                      <input type="tel" name="telephone" id="telephone_worker" class="input" placeholder="+7 (___) ___-__-__">
                      <span id="telephone_error" class="error-message"></span>

                  </div>
              </div>

              <!--<div class="modal__reg-item">

                  <img src="images/catpcha.jpg" alt="" class="captcha">

              </div>-->

              <div id="Reloadcapcha1" name="Reloadcapcha1" class="button">Обновить капчу</div>

              <div id="captcha1" style="width:190px" class="modal__reg-item form-group">321</div>
              <input type="text" placeholder="Captcha" class="input registr-form__input" id="cpatchaTextBox1" style="width: 100%"/>

              <div class="modal__reg-item">

                  <span id="captcha_error" class="error-message"></span>

                  <label class="checkbox">

                      <input type="checkbox" name="politik" id="politik" value="1" class="checkbox__input">

                      <span class="checkbox__icon">
                                  <svg>

                                      <use xlink:href="{{ asset('images/sprite.svg#v') }}"></use>

                                  </svg>
                              </span>
                      <span class="checkbox__text">

                          <span>
                              Я согласен(на) с <a href="{{ route('page', ['pages' => 'Politika-konfidencialnosti']) }}">Политикой конфиденциальности</a>
                          </span>
                      </span>

                  </label>

                  <span id="politik_error" class="error-message"></span>

              </div>

              <button type="submit" id="button_reg_worker" name="button_reg_worker" class="button">Зарегистрироваться</button>

          </form>

          <form class="modal__reg" data-body="2" id="form2" name="name2" onsubmit="return validateCaptcha2()" method="POST" action="{{ route('register_employer') }}">
              @csrf

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Электронная почта *</label>

                  <div class="form-group__item">

                      <input type="email" id="email_employer" name="email" class="input" placeholder="info@rekamore.su">
                      <span id="email_employer_error" class="employer_error-message"></span>

                  </div>
              </div>
              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Пароль *</label>

                  <div class="form-group__item">

                      <input type="password" id="password_employer" name="password" class="input" placeholder="**********">

                      <button type="button" class="eye">
                          <svg class="js-password-show">

                              <use xlink:href="{{ asset('images/sprite.svg#eye') }}"></use>

                          </svg>
                          <svg class="js-password-hide">

                              <use xlink:href="{{ asset('images/sprite.svg#eye-2') }}"></use>

                          </svg>
                      </button>

                      <span id="password_employer_error" class="employer_error-message"></span>

                  </div>
              </div>
              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Подтвердить пароль *</label>

                  <div class="form-group__item">

                      <input type="password" id="password_confirmation_employer" name="password_confirmation" class="input" placeholder="**********">

                      <button type="button" class="eye">
                          <svg class="js-password-show">

                              <use xlink:href="{{ asset('images/sprite.svg#eye') }}"></use>

                          </svg>
                          <svg class="js-password-hide">

                              <use xlink:href="{{ asset('images/sprite.svg#eye-2') }}"></use>

                          </svg>
                      </button>
                  </div>

                  <span id="password_confirmation_employer_error" class="employer_error-message"></span>

              </div>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Фамилия работодателя *</label>

                  <div class="form-group__item">

                      <input type="text" id="surname_employer" name="surname" class="input" placeholder="Шестаков">
                      <span id="surname_employer_error" class="employer_error-message"></span>

                  </div>
              </div>
  
              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Имя работодателя *</label>

                  <div class="form-group__item">

                      <input type="text" id="name_man_employer" name="name_man" class="input" placeholder="Андрей">

                  </div>
              </div>
  
              <div class="modal__reg-item form-group">
                  <label class="form-group__label">Отчество работодателя</label>

                  <div class="form-group__item">

                      <input type="text" id="surname2_employer" name="surname2" class="input" placeholder="Васильевич">

                  </div>
              </div>

              <div class="modal__reg-item form-group">

                  <label class="form-group__label">Название судоходной компании *</label>

                  <div class="form-group__item">

                      <input type="text" name="name_company" id="name_company_employer" class="input" placeholder="ООО Река Море">
                      <span id="name_company_employer_error" class="employer_error-message"></span>

                  </div>
              </div>

  
              <div class="modal__reg-item form-group">
                  <label class="form-group__label">Номер телефона</label>
                  <div class="form-group__item">

                      <input type="tel" name="telephone" id="telephone_employer" class="input" placeholder="+7 (___) ___-__-__">

                  </div>

              </div>

              <!--<div class="modal__reg-item">
                  <img src="images/catpcha.jpg" alt="" class="captcha">
              </div>-->

              <div id="Reloadcapcha2" name="Reloadcapcha2" class="button">Обновить капчу</div>

              <div id="captcha2" style="width:190px" class="modal__reg-item form-group">123</div>
              <input type="text" placeholder="Captcha" class="input registr-form__input" id="cpatchaTextBox2" style="width: 100%"/>

              <div class="modal__reg-item">

                  <span id="captcha_employer_error" class="employer_error-message"></span>

                  <label class="checkbox">

                      <input type="checkbox" name="politik" id="politik_employer" value="1" class="checkbox__input">

                      <span class="checkbox__icon">
                                  <svg>

                                      <use xlink:href="{{ asset('images/sprite.svg#v') }}"></use>

                                  </svg>
                              </span>
                      <span class="checkbox__text">

                          <span>
                              Я согласен(на) с <a href="{{ route('page', ['pages' => 'Politika-konfidencialnosti']) }}">Политикой конфиденциальности</a>
                          </span>
                      </span>

                  </label>

                  <span id="politik_employer_error" class="employer_error-message"></span>

              </div>

              <button type="submit" id="button_reg_employer" name="button_reg_employer" class="button">Зарегистрироваться</button>

          </form>

          <div class="modal__text">
              <span>Вспомнили пароль?</span>
              &nbsp;

              <a data-fancybox data-src="#sign" data-options='{"touch":false,"autoFocus":false}'>Войти</a>

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