// FORMS

.form-wrap
  form.form-main.form
    .form-main__close
    h2.form-main__title <span>заказать</span> обратный звонок
    .form-main__fields
      input(type="text" name="name" placeholder="Введите ваше имя")
      input(type="text" name="phone" placeholder="Введите ваш телефон" required)
      input(type="text" name="contact" placeholder="Введите ваш телефон или email" required)
    button.btn-main записаться

// end forms


.form-wrap
  display: none
  position: fixed
  top: 0
  bottom: 0
  right: 0
  left: 0
  z-index: 50
  background: rgba(0,0,0,.7)

.form-main
  position: relative
  z-index: 100
  top: 15%
  margin-left: auto
  margin-right: auto
  max-width: 420px
  background-color: #fff
  padding: 45px 30px
  text-align: center

  .btn-main
    min-width: 260px
    padding-top: 12px
    padding-bottom: 12px

.form-main__title
  margin-bottom: 40px
  text-align: center
  font-size: rem(33)
  text-transform: uppercase
  font-weight: 700
  line-height: 1.2

  span
    color: $c-accent

.form-main__fields
  margin-bottom: 25px
  input
    width: 100%
    border-radius: 10px
    margin-bottom: 20px
    padding: 10px 12px
    border: 1px solid #242d32
    background-color: #ffffff
    font-style: italic
    font-family: $f-main
    font-size: rem(18)
    transition: box-shadow .2s

    &:focus
      box-shadow: inset 0 0 3px 1px rgba(#000, .5)

    &.hidden
      display: none

.form-main__close
  width: 23px
  height: 23px
  position: absolute
  top: 20px
  right: 20px
  background: url(../img/decor/cross.png) no-repeat center
  cursor: pointer


  // ========>> FORMS <<========

  const $form = $('.form');
  const $formMain = $('.form-main');
  const $formWrap = $('.form-wrap');
  const $formFields = $('.form-main__fields > *', $formMain);
  const $formTrigger = $('.form-trigger');
  const $formMainTitle = $('.form-main__title');
  const $formMainBtn = $('.btn-main', $formMain);
  // title for email
  let title = '';

  function hideFields() {
    $formFields.each((i, field) => {
      field.setAttribute('disabled', '');
      field.classList.add('hidden');
    });
  }
  hideFields();

  $formWrap.on('click', function (event) {
    if ($(event.target).hasClass('form-wrap') || $(event.target).hasClass('form-main__close')) {
      $(this).fadeOut(200);
      $(document.documentElement).removeClass('modal-open');
    }
  });

  $formTrigger.on('click', (event) => {
    hideFields();
    title = '';
    $formMain.trigger('reset');

    const target = event.target;
    const currFieldsName = target.getAttribute('data-fields').split(',');
    const currTitle = target.getAttribute('data-title');
    const currBtnText = target.getAttribute('data-btn-text');
    const currEmailTitle = target.getAttribute('data-email-title');

    // Set current titles
    if (currTitle) $formMainTitle.html(currTitle);
    if (currBtnText) $formMainBtn.text(currBtnText);
    if (currEmailTitle) title = currEmailTitle;

    // Enable current fields
    $formFields.each((i, field) => {
      if (currFieldsName.indexOf(field.getAttribute('name')) !== -1) {
        field.removeAttribute('disabled');
        field.classList.remove('hidden');
      }
    });

    $formWrap.fadeIn(200);
    $(document.documentElement).addClass('modal-open');
  });

  $form.submit((event) => {
    const $target = $(event.target);
    event.preventDefault();

    if ($target.hasClass('feedback-form')) title = 'Вопрос';

    $.ajax({
      url: './mail.php',
      type: 'POST',
      data: `${$target.serialize()}&title=${encodeURIComponent(title)}`
    }).done(() => {
      $form.trigger("reset");

      const loc = window.location;
      window.location.href = `${loc.origin}/thank-you.html`;
    }).fail(() => {
      $formMain.trigger("reset");
      alert("Ошибка отправки формы");
    });
  });

  // end forms