$(function () {
  $(".order__input_date").datepicker({
    maxDate: new Date()
  });
  $("[type='tel']").mask('+38-XXX-XXX-XX-XX');
});

const catalogAll = document.querySelector('.catalog__all');
const closeCatalog = document.querySelector('.close_catalog');
const catalogList = document.querySelector('.catalog__wrapper');
if (catalogAll) {
  catalogAll.onclick = () => {
    catalogList.classList.add('active');
  };
  closeCatalog.onclick = () => {
    catalogList.classList.remove('active');
  };
}

const imageBg = new IntersectionObserver((entries, imgObserver) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const lazyBackground = entry.target;
      lazyBackground.style.backgroundImage = `url(${lazyBackground.dataset.image})`;
      lazyBackground.classList.remove('lzy_bg');
      imgObserver.unobserve(lazyBackground);
    }
  });
});
const arrBg = document.querySelectorAll('.lzy_bg');
arrBg.forEach((v) => {
  imageBg.observe(v);
});

// Lazy load img

const imageBlockObserver = new IntersectionObserver((entries, imgObserver) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const lazyBlock = entry.target;
      const lazyImage = lazyBlock.querySelectorAll('.lzy_img_new');
      lazyImage.forEach((elem) => {
        elem.src = elem.dataset.src;
        elem.classList.remove('lzy_img_new');
      });
      lazyBlock.classList.remove('lzy_img_bl');
      imgObserver.unobserve(lazyBlock);
    }
  });
});
const arrBlockImg = document.querySelectorAll('.lzy_img_bl');
arrBlockImg.forEach((v) => {
  imageBlockObserver.observe(v);
});

const imageEffect = new IntersectionObserver((entries, imgObserver) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      lazyImage.classList.remove('lzy_effect');
      imgObserver.unobserve(lazyImage);
    }
  });
});
const arrImg = document.querySelectorAll('.lzy_effect');
arrImg.forEach((v) => {
  imageEffect.observe(v);
});

// PARALLAX
let scene = document.querySelectorAll('.scene');
scene.forEach((element) => {
  var parallax = new Parallax(element);
});

// Скролл по клику
function currentYPosition() {
  // Firefox, Chrome, Opera, Safari
  if (self.pageYOffset) return self.pageYOffset;
  // Internet Explorer 6 - standards mode
  if (document.documentElement && document.documentElement.scrollTop)
    return document.documentElement.scrollTop;
  // Internet Explorer 6, 7 and 8init_pointer
  if (document.body.scrollTop) return document.body.scrollTop;
  return 0;
}

function elmYPosition(eID) {
  let elm = document.querySelector(eID);
  let y = elm.offsetTop;
  let node = elm;
  while (node.offsetParent && node.offsetParent != document.body) {
    node = node.offsetParent;
    y += node.offsetTop;
  }
  return y;
}

function smoothScroll(eID) {
  let startY = currentYPosition();
  let stopY = elmYPosition(eID) - 50;
  let distance = stopY > startY ? stopY - startY : startY - stopY;
  if (distance < 100) {
    scrollTo(0, stopY);
    return;
  }
  let speed = Math.round(distance / 100);
  if (speed >= 20) speed = 20;
  let step = Math.round(distance / 30);
  let leapY = stopY > startY ? startY + step : startY - step;
  let timer = 0;
  if (stopY > startY) {
    for (let i = startY; i < stopY; i += step) {
      setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
      leapY += step;
      if (leapY > stopY) leapY = stopY;
      timer++;
    }
    return;
  }
  for (let i = startY; i > stopY; i -= step) {
    setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
    leapY -= step;
    if (leapY < stopY) leapY = stopY;
    timer++;
  }
}
document.querySelectorAll('.scroll_to').forEach((anchor) => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    smoothScroll(this.getAttribute('href'));
  });
});

// Change lang

// const langWordCurrent = document.querySelector(
//   '.lang__block_desk .current-lang a'
// ).textContent;

// const langCurrent = document.querySelector('.lang__desk .current__lang');
// console.log(langWordCurrent);
// langCurrent.innerHTML = langWordCurrent;

const bodyClick = document.querySelector('body'),
  currentLang = document.querySelector('.current__lang'),
  langBlock = document.querySelector('.lang__block_desk');
bodyClick.addEventListener('click', function (e) {
  if (e.target.classList.contains('current__lang')) {
    console.log(1);
    currentLang.classList.toggle('active');
    langBlock.classList.toggle('open');
  } else {
    currentLang.classList.remove('active');
    langBlock.classList.remove('open');
  }
});

const btnBurger = document.querySelectorAll('.menu__burger');
const overlayMenu = document.querySelector('.menu');
const menuLimk = document.querySelectorAll('.nav__item a');

btnBurger.forEach((elem) => {
  elem.onclick = () => {
    document.querySelector('body').classList.toggle('locked');
    overlayMenu.classList.add('open_menu');
    overlayMenu.classList.remove('close__burger');
  };
});
document.querySelectorAll('.menu__close').forEach((elem) => {
  elem.onclick = function (e) {
    overlayMenu.classList.remove('open_menu');
    overlayMenu.classList.add('close__burger');
  };
});
const hasChild = document.querySelectorAll('.menu .menu-item-has-children>a');
const childList = document.querySelectorAll('.menu .sub-menu');

hasChild.forEach((elem, index) => {
  const hasChildBtn = document.createElement('span');
  hasChildBtn.classList.add('open_child_menu');
  elem.append(hasChildBtn);
  hasChildBtn.onclick = (e) => {
    e.preventDefault();
    childList[index].classList.add('active');
  };
});

childList.forEach((elem, index) => {
  const hasChildBtnBack = document.createElement('span');
  hasChildBtnBack.classList.add('close_child_menu');
  elem.append(hasChildBtnBack);
  hasChildBtnBack.onclick = (e) => {
    console.log(1);
    e.preventDefault();
    elem.classList.remove('active');
  };
});

const headerFixed = document.querySelector('.header');
// const arrowFixed = document.querySelector(".scroll_to_top");
const mainHeadSection = document.querySelector('.head_section_main ');
window.addEventListener('scroll', function () {
  pageYOffset > 200
    ? headerFixed.classList.add('fixed_header')
    : headerFixed.classList.remove('fixed_header');
  // pageYOffset > 750
  //   ? arrowFixed.classList.add("visible_arrow")
  //   : arrowFixed.classList.remove("visible_arrow");
});
if (window.pageYOffset > 450) headerFixed.classList.add('fixed_header');

// if (window.pageYOffset > 450) arrowFixed.classList.add("visible_arrow");
const catalogMenuItem = document.querySelectorAll('.catalog__menu>.menu-item-has-children');

catalogMenuItem.forEach(elem => {
  const catalogBtn = document.createElement('span')
  catalogBtn.classList.add('open_sub_menu')
  elem.append(catalogBtn)
  const catalogSubMnu = elem.querySelector('.catalog__menu>.menu-item-has-children>.sub-menu')
  elem.setAttribute('data-accordion', 'item')
  catalogBtn.setAttribute('data-accordion', 'title')
  catalogSubMnu.setAttribute('data-accordion', 'text')
  if (elem.classList.contains('current-menu-item') || elem.classList.contains('current-menu-parent')) elem.classList.add('open')

})

const slideDownPure = (el) => {
  el.style.height = `${el.scrollHeight}px`;
  el.style.opacity = '1';
  el.style.overflow = 'visible';
  // setTimeout(() => {
  //   el.style.height = `auto`
  // }, 600);
};

const slideUpPure = (el) => {
  // el.style.height = `${el.scrollHeight}px`;
  el.style.height = '0';
  el.style.opacity = '0';
  el.style.overflow = 'hidden';
  el.style.marginBottom = '0';
};

function doctorTabs(secondsTransition) {
  const buttons = document.querySelectorAll('[data-tab="doctor_button"]');
  const contents = document.querySelectorAll('[data-tab="doctor_content"]');
  const declarationChange = document.querySelectorAll('.declaration__change');
  contents.forEach((content) => {
    content.style.opacity = '0';
    content.style.height = '0';
    content.style.overflow = 'hidden';
    content.style.transition = `all ${secondsTransition}s ease`;
  });

  buttons.forEach((button, index) => {
    if (button.classList.contains('active')) {
      slideDownPure(contents[index]);
      console.log(button.dataset.adress_id);
      declarationChange.forEach(elem => {
        elem.style.display = 'none'
        if (elem.classList.contains(button.dataset.adress_id)) {
          elem.style.display = 'block'
        }
      })
    }
    button.addEventListener('click', (e) => {

      if (!button.classList.contains('active')) {
        declarationChange.forEach(elem => {
          elem.style.display = 'none'
          if (elem.classList.contains(e.target.dataset.adress_id)) {
            elem.style.display = 'block'
          }
        })
        contents.forEach((content) => slideUpPure(content));
        buttons.forEach((button) => button.classList.remove('active'));
        button.classList.add('active');
        slideDownPure(contents[index]);
        console.log(button.textContent);
        console.log(contents[index]);
      }
    });
  });
}
function tabs(secondsTransition) {
  const buttons = document.querySelectorAll('[data-tab="button"]');
  const contents = document.querySelectorAll('[data-tab="content"]');
  contents.forEach((content) => {
    content.style.opacity = '0';
    content.style.height = '0';
    content.style.overflow = 'hidden';
    content.style.transition = `all ${secondsTransition}s ease`;
  });

  buttons.forEach((button, index) => {
    if (button.classList.contains('active')) {
      slideDownPure(contents[index]);
    }
    button.addEventListener('click', (e) => {
      if (!button.classList.contains('active')) {
        contents.forEach((content) => slideUpPure(content));
        buttons.forEach((button) => button.classList.remove('active'));
        button.classList.add('active');
        slideDownPure(contents[index]);
      }
    });
  });
}

const priceWrap = document.querySelector('#price_wrap')



const smoothScroll2 = function (targetEl, duration) {

  let target = document.querySelector(targetEl);
  let targetPosition = target.getBoundingClientRect().top - 174;
  let startPosition = window.pageYOffset;
  let startTime = null;

  const ease = function (t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  };

  const animation = function (currentTime) {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  };
  requestAnimationFrame(animation);

};

const scrollTo = function () {
  // const currentTarget = this.getAttribute('href');
  smoothScroll2('#price_wrap', 500);
};

function priceTabs(secondsTransition) {
  const buttons = document.querySelectorAll('[data-tab="price_button"]');
  const contents = document.querySelectorAll('[data-tab="price_content"]');

  contents.forEach((content) => {
    content.style.opacity = '0';
    content.style.height = '0';
    content.style.overflow = 'hidden';
    content.style.transition = `all ${secondsTransition}s ease`;
  });

  buttons.forEach((button, index) => {
    if (button.classList.contains('active')) {
      slideDownPure(contents[index]);
    }
    button.addEventListener('click', (e) => {

      scrollTo();
      catalogList.classList.remove('active');
      if (!button.classList.contains('active')) {
        contents.forEach((content) => slideUpPure(content));
        buttons.forEach((button) => button.classList.remove('active'));
        button.classList.add('active');
        slideDownPure(contents[index]);
      }
    });
  });
}




function Maps() {
  const buttons = document.querySelectorAll('[data-tab="map_btn"]');
  const contents = document.querySelectorAll('[data-tab="map_content"]');
  const mapPhone = document.querySelectorAll('[data-tab="map_phone"]');

  contents.forEach((content) => {
    content.style.opacity = '0';
    content.style.display = 'none';
  });
  mapPhone.forEach((content) => {
    content.style.opacity = '0';
    content.style.display = 'none';
  });

  buttons.forEach((button, index) => {
    if (button.classList.contains('active')) {
      contents[index].style.display = 'block';
      contents[index].style.opacity = '1';
      mapPhone[index].style.display = 'block';
      mapPhone[index].style.opacity = '1';
    }
    button.addEventListener('click', (e) => {
      if (!button.classList.contains('active')) {
        mapPhone.forEach((content) => (content.style.display = 'none'));
        contents.forEach((content) => (content.style.display = 'none'));
        buttons.forEach((button) => button.classList.remove('active'));
        button.classList.add('active');
        contents[index].style.display = 'block';
        contents[index].style.opacity = '1';
        mapPhone[index].style.display = 'block';
        mapPhone[index].style.opacity = '1';
      }
    });
  });
}
Maps();
function accordion(secondsTransition) {
  const items = document.querySelectorAll('[data-accordion="item"]');
  const texts = document.querySelectorAll('[data-accordion="text"]');

  items.forEach((item) => {
    const title = item.querySelector('[data-accordion="title"]');
    const text = item.querySelector('[data-accordion="text"]');

    text.style.opacity = "0";
    text.style.height = "0";
    text.style.overflow = "hidden";
    text.style.transition = `all ${secondsTransition}s ease`;
    if (item.classList.contains("open")) {
      slideDownPure(text);
    }

    title.onclick = (e) => {
      e.preventDefault()
      if (item.classList.contains("open")) {
        item.classList.remove("open");
        slideUpPure(text);
      } else {
        texts.forEach((text) => slideUpPure(text));
        items.forEach((item) => item.classList.remove("open"));
        item.classList.add("open");
        slideDownPure(text);
      }
    };
  });
}

doctorTabs(0.5);
priceTabs(0.5);
accordion(0.5);

tabs(0.5);





//////////////////////////
// const calculateSelect = document.querySelectorAll('.select__group');
// calculateSelect.forEach((elem) => {
//   const filterBtn = elem.querySelectorAll('.select__btn');
//   const filterBtnMainText = elem.querySelector('.select__btn_main');
//   const filterWrap = elem.querySelector('.select__options');
//   if (filterBtn) {
//     filterBtn.forEach((item) => {
//       if (item.classList.contains('show')) {
//         showList(item);
//       }
//       const filterBtnMain = elem.querySelector('.select__btn_main');
//       item.addEventListener('click', (e) => {
//         e.preventDefault();
//         if (e.target.classList.contains('select__btn_main')) {
//           e.target.classList.toggle('active');
//           filterWrap.classList.toggle('open');
//         } else {
//           filterBtnMain.classList.toggle('active');
//           filterWrap.classList.toggle('open');
//           showList(e.target);
//           const phoneWrap = document.querySelectorAll('.phones  [data-accordion="item"]'
//           );
//           const phoneBlock = document.querySelectorAll('.phones  [data-accordion="text"]'
//           );
//           phoneWrap.forEach((wrap, idx) => {
//             if (wrap.classList.contains('open')) {
//               wrap.classList.remove('open');
//               slideUpPure(phoneBlock[idx]);
//             }
//           });
//         }
//       });
//     });
//     function showList(element) {
//       filterBtnMainText.innerHTML = element.innerHTML;
//     }
//   }
// });

const $sliderInint = document.querySelectorAll('.slider_init');
if ($sliderInint) {
  $sliderInint.forEach((slider) => {
    let sliderNew = slider.querySelector('.swiper-container'),
      sliderPrev = slider.querySelector('.swiper__arrow_left'),
      sliderNext = slider.querySelector('.swiper__arrow_right'),
      // sliderPag = slider.querySelector(".swiper_pagination"),
      breakpoints = {},
      xl = window.elementorFrontend
        ? window.elementorFrontend.config.breakpoints.xl - 1
        : 1200,
      lg = window.elementorFrontend
        ? window.elementorFrontend.config.breakpoints.lg - 1
        : 991,
      md = window.elementorFrontend
        ? window.elementorFrontend.config.breakpoints.md - 1
        : 768,
      sm = window.elementorFrontend
        ? window.elementorFrontend.config.breakpoints.sm - 1
        : 560,
      xsm = window.elementorFrontend
        ? window.elementorFrontend.config.breakpoints.xsm - 1
        : 300;

    breakpoints[xl] = {
      slidesPerView: sliderNew.dataset.slides_xl || 4,
    };
    breakpoints[lg] = {
      slidesPerView: sliderNew.dataset.slides_lg || 3,
    };
    breakpoints[md] = {
      slidesPerView: sliderNew.dataset.slides_md || 2,
    };
    breakpoints[sm] = {
      slidesPerView: sliderNew.dataset.slides_sm || 1,
    };
    breakpoints[xsm] = {
      slidesPerView: sliderNew.dataset.slides_xsm || 1,
    };

    new Swiper(sliderNew, {
      spaceBetween: +sliderNew.dataset.space_between || 30,
      loop: !sliderNew.dataset.loop,
      // freeMode: !sliderNew.dataset.freeMode,
      autoHeight: false,
      breakpoints: breakpoints,
      allowTouchMove: !sliderNew.dataset.touch_dis,
      // pagination: {
      //   el: sliderPag,
      //   clickable: true,
      // },
      navigation: {
        nextEl: sliderNext || false,
        prevEl: sliderPrev || false,
      },
    });
  });
}

const headSwiper = new Swiper('.head__swiper', {
  spaceBetween: 30,
  slidesPerView: 1,
  lazy: true,
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.head__section .swiper__next',
    prevEl: '.head__section .swiper__prev',
  },
  pagination: {
    el: '.head_pagination',
    clickable: true,
  },
});
const doctorsItem = document.querySelectorAll('.doctors__item')
doctorsItem.forEach(item => {
  let doctorContainer = item.querySelector('.doctor__swiper')
  let swiperNext = item.querySelector('.swiper__next')
  let swiperPrev = item.querySelector('.swiper__prev')
  let paginationDoc = item.querySelector('.doctor_pagination')
  const doctorSwiper = new Swiper(doctorContainer, {
    spaceBetween: 30,
    slidesPerView: 3,
    //   loop: true,
    pagination: {
      el: paginationDoc,
      clickable: true,
    },
    navigation: {
      nextEl: swiperNext,
      prevEl: swiperPrev,
    },
    breakpoints: {
      300: {
        slidesPerView: 1,
        pagination: {
          el: '.sub__pag',
          clickable: true,
        },
      },
      400: {
        slidesPerView: 1.2,
        pagination: {
          el: '.sub__pag',
          clickable: true,
        },
      },
      768: {
        slidesPerView: 2,
      },

      1200: {
        slidesPerView: 3,
      },
    },
  });
});
const gallary = document.querySelectorAll('.gallary')
gallary.forEach(item => {
  let gallaryContainer = item.querySelector('.gallary__swiper')
  let swiperNext = item.querySelector('.swiper__next')
  let swiperPrev = item.querySelector('.swiper__prev')
  // let paginationDoc = item.querySelector('.doctor_pagination')
  const gallarySwiper = new Swiper(gallaryContainer, {
    // speed: 3500,
    // loop: true,
    lazy: true,
    slidesPerView: 2,
    autoheight: 'true',
    // pagination: {
    //   el: ".team_sertificate_nav .team__pag",
    // },
    navigation: {
      nextEl: swiperNext,
      prevEl: swiperPrev,
    },
    breakpoints: {
      300: {
        slidesPerView: 1.15,
        spaceBetween: 20,
        freeMode: true,
        watchSlidesProgress: true,
      },
      576: {
        slidesPerView: 1.5,
        spaceBetween: 20,
        freeMode: false,
        watchSlidesProgress: false,
      },
      768: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      992: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      1200: {
        slidesPerView: 3,
        spaceBetween: 20,
      },
    },
  })
});

const reviewWrap = document.querySelectorAll('.review')
reviewWrap.forEach(elem => {
  const swiperWrap = elem.querySelector('.review__swiper')
  const swiperNext = elem.querySelector('.review .swiper__next')
  const swiperPrev = elem.querySelector('.review .swiper__prev')
  const reviewPag = elem.querySelector('.review .review__pag')
  const reviewSwiper = new Swiper(swiperWrap, {
    spaceBetween: 30,
    slidesPerView: 2,
    loop: true,
    pagination: {
      el: reviewPag,
      clickable: true,
    },
    navigation: {
      nextEl: swiperNext,
      prevEl: swiperPrev,
    },
    breakpoints: {
      300: {
        slidesPerView: 1,

        autoHeight: true,
      },
      576: {
        slidesPerView: 1.2,

        autoHeight: false,
      },
      992: {
        slidesPerView: 2,
      },

      1200: {
        slidesPerView: 2,
      },
    },
  });
})

const newsSwiper = new Swiper('.news_swiper', {
  slidesPerView: 3,
  // centeredSlides: true,
  // loop: true,
  // lazy: true,
  // autoplay: {
  //   delay: 3000,
  //   disableOnInteraction: false,
  // },
  // autoHeight: true,
  navigation: {
    nextEl: '.news .swiper__next',
    prevEl: '.news .swiper__prev',
  },
  breakpoints: {
    300: {
      slidesPerView: 1.2,
      spaceBetween: 15,
    },
    576: {
      slidesPerView: 2,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 20,
    },

    1200: {
      slidesPerView: 3,
      spaceBetween: 30,
    },
  },
});
const sertificateSlider = new Swiper('.sertificate_slider', {
  spaceBetween: 30,
  slidesPerView: 4,
  // centeredSlides: true,
  loop: true,
  // lazy: true,
  // autoplay: {
  //   delay: 3000,
  //   disableOnInteraction: false,
  // },
  // autoHeight: true,
  navigation: {
    nextEl: '.sertificate .swiper__next',
    prevEl: '.sertificate .swiper__prev',
  },
  breakpoints: {
    300: {
      slidesPerView: 1.2,
    },
    576: {
      slidesPerView: 2,
    },
    992: {
      slidesPerView: 3,
    },

    1200: {
      slidesPerView: 4,
    },
  },
});

//////////////////////////
// Open lang
//////////////////////////

const formWrap = document.querySelectorAll('.input__group');
formWrap.forEach((elem) => {
  let formInput = elem.querySelector('.order__input');
  let formLabel = elem.querySelector('.place_span');
  if (formInput && formLabel) {
    formInput.onfocus = () => {
      formLabel.classList.add('fixed_span');
    };
    formInput.onfocusout = (e) => {
      // console.log(e.target.value);
      setTimeout(() => {
        if (e.target.value === '') {
          formLabel.classList.remove('fixed_span');
        }
      }, 150)
    };
    // formInput.onchange = (e) => {
    //   console.log(e.target.value);

    // };
  }

});
const checkWrap = document.querySelectorAll('.wpcf7-acceptance');
checkWrap.forEach((elem) => {
  let checkBox = elem.querySelector('.check_input');
  if (checkBox.checked) {
    elem.classList.add('checked_inp');
  }
  checkBox.onchange = (el) => {
    elem.classList.toggle('checked_inp');
  };
});

const radioWrap = document.querySelectorAll('.wpcf7-radio');
// const hiddenSelect = document.querySelectorAll(".hidden_select option");
// const reviewSelect = document.querySelector(".review__select");
// const selectGroup  = document.querySelector(".select__group ");
// reviewSelect.innerHTML =`<option value="${hiddenSelect[0].value}" checked selected>${hiddenSelect[0].value}</option>`

// hiddenSelect.forEach((elem, index) =>{
//   if(index>0){
//     reviewSelect.innerHTML += `<option value="${hiddenSelect[index].value}">${hiddenSelect[index].value}</option>`
//   }

// })

// radioWrap.forEach((elem) => {
//   let radioBox = elem.querySelector(".order__input_radio");
//   let radioInput = elem.querySelector("input");
//   if(radioInput.checked){
//     elem.classList.add("checked_radio");
//   }
//   if(radioInput.checked && elem.classList.contains('order__input_doctor')){
//     selectGroup.classList.add('show')
//   }

//   radioInput.onchange = (el) => {
//     radioWrap.forEach(inp => {
//       inp.classList.remove("checked_radio");
//     })
//     elem.classList.toggle("checked_radio");
//     if(radioInput.checked && elem.classList.contains('order__input_doctor')){
//       selectGroup.classList.add('show')
//     } else{
//       selectGroup.classList.remove('show')
//     }
//   };
// });

ScrollOut({
  targets: '.xyz_start',
  onShown: (el) => {
    el.classList.add('xyz-in');
  },
});

const filterBtn = document.querySelector('.filter_btn');
const filterClose = document.querySelector('.close_filter');
const filterWrap = document.querySelector('.catalog_filter');
if (filterBtn) {
  filterBtn.onclick = () => {
    filterWrap.classList.toggle('open');
  };
  filterClose.onclick = () => {
    filterWrap.classList.toggle('open');
  };
}

const popupForm = document.querySelector('.consult_popup');
const openForm = document.querySelectorAll('.open__form');

const openFormCatalog = document.querySelector('#main');

const hiddenInp = document.querySelector('.hidden_inp');

// openForm.forEach((elem) => {
//   elem.onclick = (e) => {
//     let formOpen = document.querySelector(e.target.dataset.form);
//     if (formOpen) {
//       formOpen.classList.add('open');
//     }
//   };
// });

const popupWrap = document.querySelectorAll('.popup');
popupWrap.forEach((elem) => {
  elem.onclick = (e) => {
    if (elem.classList.contains('check_clinick') && !getCookie('clinick_id')) {
      return
    } else if (
      e.target.classList.contains('popup') ||
      e.target.classList.contains('close_popup')
    ) {
      elem.classList.remove('open');
    } else if (e.target.classList.contains('open__consult')) {
      e.preventDefault();
      elem.classList.remove('open');
      document.querySelector(e.target.dataset.form).classList.add('open');
    }
  };
});

document.addEventListener('click', (btn) => {
  if (btn.target.classList.contains('open__form')) {
    if (btn.target.dataset.title) {
      hiddenInp.value = btn.target.dataset.title;
    }
    let formOpen = document.querySelector(btn.target.dataset.form);
    if (formOpen) {
      formOpen.classList.add('open');
    }
  }
});

const filterOpen = document.querySelector('.filter_open');
if (filterOpen) {
  const priceContainer = document.querySelector('.price__container');
  const closePrice = document.querySelector('.close_price');
  filterOpen.onclick = function () {
    priceContainer.classList.add('show');
  };
  closePrice.onclick = function () {
    priceContainer.classList.remove('show');
  };
  window.addEventListener('click', function (e) {
    if (e.target.classList.contains('data__btn')) {
      priceContainer.classList.remove('show');
    }
  });
}

const searchWrap = document.querySelector('.search__wrap');
const searchResult = document.querySelector('.search__result');
const searchInputPrice = document.querySelector('.search__input_price');
const searchBtnPrice = document.querySelector('.search__btn_price');
const notResult = document.querySelector('.not__result');
const priceItem = document.querySelectorAll(
  '.tablepress tr'
);
if (searchBtnPrice) {
  searchBtnPrice.onclick = () => {
    searchResult.innerHTML = '';
    let inputVal = searchInputPrice.value.toLowerCase();
    if (inputVal != '') {
      let resultIer = 0;
      const tablePrice = document.createElement('table')
      tablePrice.classList.add('table__result')
      priceItem.forEach((elem) => {
        let itemList = elem.cloneNode(true);
        // inputVal = RegExp(inputVal,"gi")
        let catalogName = elem.querySelector('.column-2').textContent;
        let catalogNameLower = catalogName.toLowerCase();
        let inputValLover = inputVal.toLowerCase();
        if (catalogNameLower.includes(inputValLover)) {
          let str = catalogName;
          itemList.querySelector('.column-2').innerHTML = AddMark(
            str,
            catalogNameLower.search(inputVal),
            inputVal.length
          );
          tablePrice.append(itemList);
          resultIer++;
          console.log(resultIer);
        }
      });

      if (resultIer > 0) {
        searchWrap.classList.add('active');
        searchResult.innerHTML = ''
        searchResult.append(tablePrice)
      } else {
        searchWrap.classList.remove('active');
      }
    } else {
      slideDownPure(notResult)
      notResult.style.marginBottom = '20px';
      setTimeout(() => {
        slideUpPure(notResult)
        notResult.style.marginBottom = '0px';
      }, 3000);
    }
  };
  function AddMark(string, pos, len) {
    return (
      string.slice(0, pos) +
      '<mark>' +
      string.slice(pos, pos + len) +
      '</mark>' +
      string.slice(pos + len)
    );
  }
}

const chooseDoctor = document.querySelectorAll('.choose-doctor__input')
const chooseDoctorResult = document.querySelector('.doctor__choose')
chooseDoctor.forEach(elem => {
  if (elem.checked) {
    console.log(chooseDoctorResult.value);
    chooseDoctorResult.value = elem.value
    console.log(chooseDoctorResult.value);
  }
  elem.onchange = (e) => {
    if (e.target.checked) {
      chooseDoctorResult.value = e.target.value
    }
  }
})


const inputGroupFile = document.querySelectorAll('.input__group_file');
inputGroupFile.forEach(elem => {
  const formImage = elem.querySelector('.wpcf7-file');
  const formPrevie = elem.querySelector('.show_file ');
  const deliteFifle = elem.querySelector('.delite__file');
  deliteFifle
  deliteFifle.onclick = () => {
    formImage.value = '';
    formPrevie.innerHTML = '';
  };

  formImage.addEventListener('change', () => {
    uploadFile(formImage.files[0]);
  });
  function uploadFile(file) {
    //Проверяем тип файла
    if (
      !['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)
    ) {
      alert('Разрешены только изображения');
      formImage.value = '';
      return;
    }
    //Проверяем размер
    if (file.size > 2 * 1020 * 1024) {
      alert('Файл должен быть менее 2 МБ');
      return;
    }
    var reader = new FileReader();
    reader.onload = function (e) {
      formPrevie.innerHTML = `<img src="${e.target.result}" alt="Фото">`;
    };
    reader.onerror = function (e) {
      alert('Ошибка');
    };
    reader.readAsDataURL(file);
  }
})

const inputGroupFileInn = document.querySelectorAll('.input_group_file_inn')
const checkInputInn = document.querySelectorAll('.check_input_inn')
const childInputWrap = document.querySelectorAll('.child__input_wrap')

checkInputInn.forEach((elem, idx) => {
  slideUpPure(inputGroupFileInn[idx])
  slideUpPure(childInputWrap[idx])

  elem.addEventListener('change', (e) => {

    if (e.target.checked) {
      slideDownPure(inputGroupFileInn[idx])
      inputGroupFileInn[idx].style.marginBottom = '25px'
      slideDownPure(childInputWrap[idx])
      childInputWrap[idx].style.marginBottom = '25px'
      setTimeout(function () {
        inputGroupFileInn[idx].style.height = 'auto'
        childInputWrap[idx].style.height = 'auto'
      }, 100)
    } else {
      slideUpPure(inputGroupFileInn[idx])
      inputGroupFileInn[idx].style.marginBottom = '0px'
      slideUpPure(childInputWrap[idx])
      childInputWrap[idx].style.marginBottom = '0px'
    }
  })
})

// const popupChange = document.querySelector('.popup_change')
// const popupFormChange = document.querySelectorAll('.popup__form_change')
// popupFormChange.forEach(elem => elem.style.display = 'none')
// popupChange.addEventListener('change', (e) => {
//   console.log(e.target.value);
//   popupFormChange.forEach(elem => {
//     elem.style.display = 'none'
//     if (elem.classList.contains(e.target.value)) {
//       elem.style.display = 'block'
//     }
//   })
// })

const vacancyForm = document.querySelector('.vacancy_form')
if (vacancyForm) {
  const orderVnputVacancy = document.querySelector('.order__input_vacancy')
  orderVnputVacancy.value = vacancyForm.dataset.text + vacancyForm.dataset.title
}


const team_Blog = new Swiper('.team__blog', {
  // speed: 3500,
  // loop: true,
  lazy: true,
  slidesPerView: 3,
  autoheight: 'true',
  // pagination: {
  //   el: ".team_blog_nav .team__pag",
  // },
  navigation: {
    nextEl: ".team_blog_nav .swiper__arrow_right",
    prevEl: ".team_blog_nav .swiper__arrow_left",
  },
  breakpoints: {
    300: {
      slidesPerView: 1.15,
      spaceBetween: 20,
      freeMode: true,
      watchSlidesProgress: true,
    },
    576: {
      slidesPerView: 1.5,
      spaceBetween: 20,
      freeMode: false,
      watchSlidesProgress: false,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    992: {
      slidesPerView: 2,
      spaceBetween: 20,
    },

    1200: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
  },
})

const team_Sertificate = new Swiper('.team_sertificate', {
  // speed: 3500,
  // loop: true,
  lazy: true,
  slidesPerView: 4,
  autoheight: 'true',
  // pagination: {
  //   el: ".team_sertificate_nav .team__pag",
  // },
  navigation: {
    nextEl: ".team_sertificate_nav .swiper__arrow_right",
    prevEl: ".team_sertificate_nav .swiper__arrow_left",
  },
  breakpoints: {
    300: {
      slidesPerView: 1.15,
      spaceBetween: 20,
      freeMode: true,
      watchSlidesProgress: true,
    },
    576: {
      slidesPerView: 1.5,
      spaceBetween: 20,
      freeMode: false,
      watchSlidesProgress: false,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    992: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1200: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
  },
})


function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) { return parts.pop().split(';').shift() }
  else {
    return ''
  }
}

let clinickId = getCookie('clinick_id')
const checkClinickPopup = document.querySelector('.check_clinick')
const clinickItem = document.querySelectorAll('.clinick_item')
if (clinickId) {
  console.log(clinickId);

} else {
  checkClinickPopup.classList.add('open')
  document.addEventListener('click', function (e) {
    console.log(e.target);
    if (e.target.classList.contains('.close_popup') || e.target.classList.contains('.popup ')) {
      console.log(e.target);
      return
    }
  })
  console.log(clinickId);

  // document.cookie = `clinick_id = ${favorites};  path=/;`
}




const selectClinick = document.querySelector('.select_clinick')
console.log(selectClinick.value);
selectClinick.onchange = () => {
  //  console.log(selectClinick.value);
  if (+selectClinick.value != 0) {
    checkClinickPopup.classList.remove('open')
    console.log(selectClinick.value);
    CheckClinickId(selectClinick.value)

    document.cookie = `clinick_id = ${selectClinick.value};  path=/;`
  }
}


function CheckClinickId(id) {
  clinickItem.forEach(elem => {
    if(elem.closest('.catalog__wrap')){
      const buttons = document.querySelectorAll('[data-tab="price_button"]');
      const contents = document.querySelectorAll('[data-tab="price_content"]');
    
      contents.forEach((content) => {
        content.style.opacity = '0';
        content.style.height = '0';
        content.style.overflow = 'hidden';
        content.style.transition = `all 0.5s ease`;
      });
      buttons.forEach(btn => btn.classList.remove('active'))
      console.log('catalog__wrap');
      
    }
    if (elem.dataset.clinick == id) {
      elem.classList.add('active')
    } else {
      elem.classList.remove('active')
    }
  })
}




function tabs(btnName, contentName) {
  const buttons = document.querySelectorAll(`[data-tabbtn="${btnName}"]`)
  const contents = document.querySelectorAll(`[data-tabcontent="${contentName}"]`)

  contents.forEach((content) => {
    content.classList.remove('active')
  })

  buttons.forEach((button, index) => {
    if (button.classList.contains('active')) {
      contents[index].classList.add('active')
      if (button.dataset.tabbtn == 'photo_btn') {
        document.querySelectorAll('.photo__address')[index].classList.add('active')
      }
    }

    button.onclick = () => {
      if (!button.classList.contains('active')) {
        contents.forEach((content) => content.classList.remove('active'))
        buttons.forEach((button) => button.classList.remove('active'))
        button.classList.add('active')
        contents[index].classList.add('active')
      } else {
        contents.forEach((content) => content.classList.remove('active'))
        buttons.forEach((button) => button.classList.remove('active'))
      }

    }
  })
}
tabs('title', 'text');