function menuOpen(menuSelector) {
    menuSelector.classList.toggle('active');
    document.body.classList.toggle('lock');
}

function menuClose(menuSelector) {
    menuSelector.classList.remove('active');
    document.body.classList.remove('lock');
}

function setWidthScrollBar() {
    let div = document.createElement('div');

    div.style.position = 'absolute';
    div.style.overflowY = 'scroll';
    div.style.width = '50px';
    div.style.height = '50px';

    document.body.append(div);
    let scrollWidth = div.offsetWidth - div.clientWidth;

    div.remove();

    return scrollWidth;
}

function bodyLock(bool) {
    if (bool) {
        document.body.classList.add('lock');
    } else {
        document.body.classList.remove('lock');
    }
}

function initModalWorker() {
    const modalList = document.querySelectorAll('.modal');
    const modalWindow = document.querySelector('#modal-window');
    const modalWindowCity = document.querySelector('#modal-city');
    const modalButtons = document.querySelectorAll('.modal-button');
    const modalClosers = document.querySelectorAll('.modal-close');

    modalClosers.forEach((closer) => {
        closer.addEventListener('click', () => {
            const responseBlockList = document.querySelectorAll('.response-block');
            bodyLock(false);
            document.querySelector('html').style.paddingRight = 0;
            modalList.forEach(function (modal) {
                modal.classList.remove('active');
            });
            responseBlockList.forEach(function (responseBlock) {
                responseBlock.remove();
            });
            modalWindow.querySelectorAll('.form').forEach((form) => {
                form.reset();
            });
        });
    });

    modalButtons.forEach((button) => {
        button.addEventListener('click', () => {
            const target = button.dataset?.target || 'application';
            const title = button.dataset?.title || 'Заявка на консультацию';
            const additional = button.dataset?.additional || '';

            bodyLock(true);
            document.querySelector('html').style.paddingRight = setWidthScrollBar() + 'px';
            if (button.classList.contains('modal-button_city')) {
                modalWindowCity.classList.add('active');
                $.ajax({
                    url: '/ajax/',
                    type: "POST",
                    dataType: "html",
                    data: {
                        "QUERY_CITIES": true,
                    },
                    success: function (response) {
                        $('.modal-city__list').html(response);
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });
            } else {
                modalWindow.classList.add('active');
                modalWindow.querySelectorAll('.form').forEach((form) => {
                    if (form.getAttribute('data-target') === target) {
                        form.style.display = '';
                        form.querySelector('.form__title').innerText = title;

                        const addition = form.querySelector('.additional__field');
                        if (addition) {
                            addition.value = additional;
                        }
                    } else {
                        form.style.display = 'none';
                    }
                });
            }
        });
    })
}

function initPhoneMask() {
    const phoneFields = document.querySelectorAll('.field-phone');
    const maskOptions = {
        mask: '+{7} (000) 000 00-00'
    };

    phoneFields.forEach((phoneField) => {
        IMask(phoneField, maskOptions);
    });
}

function hide(element) {
    element.style.pointerEvents = 'none';
    element.style.opacity = '0.3';
}

function show(element) {
    element.style.pointerEvents = '';
    element.style.opacity = '';
}

function checkCorrectField(field) {
    switch (field.name) {
        case 'f_name':
            const regex = new RegExp("^[а-яА-Я-ёЁ ]+$");
            if (!(field.value.match(regex))) {
                field.style.border = '1px solid red';
                setTimeout(() => {
                    field.style.border = '';
                }, 3000);
                return false;
            }
            return true;
        case 'f_text':
            if (field.value.length === 0) {
                field.style.border = '1px solid red';
                setTimeout(() => {
                    field.style.border = '';
                }, 3000);
                return false;
            }
            return true;
        case 'f_question':
            if (field.value.length === 0) {
                field.style.border = '1px solid red';
                setTimeout(() => {
                    field.style.border = '';
                }, 3000);
                return false;
            }
            return true;
        case 'f_age':
            if (field.value.length === 0) {
                field.style.border = '1px solid red';
                setTimeout(() => {
                    field.style.border = '';
                }, 3000);
                return false;
            }
            return true;
        case 'f_phone':
            if (field.value.length !== 18) {
                field.style.border = '1px solid red';
                setTimeout(() => {
                    field.style.border = '';
                }, 3000);
                return false;
            }
            return true;
        default:
            return true;
    }
}

function sendRequestToCall(event) {
    event.preventDefault();

    hide(event.target);

    let valid = true;
    const formData = new FormData();
    const fetchBody = {};

    Object.keys(event.target).forEach((key) => {
        const field = event.target[key];

        if (!checkCorrectField(field)) {
            valid = false;
        }

        if (field.name && field.value !== undefined) {
            fetchBody[field.name] = field.value;
            let flag = false;
            if (field.type !== 'radio') {
                formData.append(field.name, field.value);
            } else {
                if (field.checked === true) {
                    formData.append(field.name, field.value);
                    flag = true;
                } else {
                    if (flag !== true) {
                        formData.append(field.name, '0');
                    }
                }
            }
        }
    });

    if (valid) {
        show(event.target);
        fetch('/netcat/add.php', {
            method: 'POST',
            body: formData,
        }).then(async (response) => {
            try {
                show(event.target);
                let responseResult = await response.json();

                if (event.target.getAttribute('data-target') === 'application-page') {
                    event.target.style.pointerEvents = 'none';
                    const popupResponce = document.querySelector('#modal-response');
                    const responseBlock = document.createElement('p');
                    responseBlock.classList.add('form__title');
                    responseBlock.classList.add('response-block');
                    responseBlock.style.marginBottom = 0;
                    responseBlock.innerHTML = responseResult.response;
                    popupResponce.querySelector('.modal__content').append(responseBlock);
                    popupResponce.classList.add('active');
                    bodyLock(true);
                    document.querySelector('html').style.paddingRight = setWidthScrollBar() + 'px';
                    event.target.reset();
                    initModalWorker();
                    event.target.style.pointerEvents = 'all';
                } else {
                    const responseBlock = document.createElement('p');
                    responseBlock.classList.add('form__title');
                    responseBlock.classList.add('response-block');
                    responseBlock.style.marginBottom = 0;

                    responseBlock.innerHTML = responseResult.response;
                    event.target.before(responseBlock);

                    event.target.reset();
                    event.target.style.display = 'none';

                    setTimeout(() => {
                        responseBlock.remove();
                        event.target.style.display = '';
                    }, 3000);
                }
            } catch (e) {
                show(event.target);
                alert('Возникла ошибка. Повторите попытку позже')
            }
        });
    } else {
        show(event.target);
    }
}

function initFormSender() {
    document.querySelectorAll('.form').forEach((form) => {
        form.addEventListener('submit', (event) => {
            sendRequestToCall(event);
        });
    });
}

document.addEventListener("DOMContentLoaded", function () {
    // mobile-menu
    const header = document.querySelector('.header');
    const openMenuBtns = document.querySelectorAll('.open-menu');
    const closeMenuBtns = document.querySelectorAll('.close-menu');
    const menuList = document.querySelector('.menu__list');
    const menuSubListWrapper = document.querySelectorAll('.menu__sub-list-wrapper');

    openMenuBtns.forEach(function (openMenuBtn) {
        openMenuBtn.addEventListener('click', function () {
            menuOpen(header);
        })
    });

    closeMenuBtns.forEach(function (closeMenuBtn) {
        closeMenuBtn.addEventListener('click', function () {
            menuClose(header);
        })
    });

    if (window.innerWidth <= 1024) {
        menuList.classList.add('accor-wrapper');
        menuList.setAttribute('data-accordion-list', '');
        for (let i = 0; i < menuSubListWrapper.length; i += 1) {
            menuSubListWrapper[i].classList.add('accor-full');
            menuSubListWrapper[i].closest('.menu__item').classList.add('accor');
            menuSubListWrapper[i].querySelector('.menu__sub-list').setAttribute('data-accordion-content', '');
            menuSubListWrapper[i].querySelector('.menu__sub-list').classList.add('accor-full-content');
        }
    } else {
        menuList.classList.remove('accor-wrapper');
        menuList.removeAttribute('data-accordion-list', '');
        for (let i = 0; i > menuSubListWrapper.length; i += 1) {
            menuSubListWrapper[i].classList.remove('accor-full');
            menuSubListWrapper[i].closest('.menu__item').classList.remove('accor');
            menuSubListWrapper[i].querySelector('.menu__sub-list').removeAttribute('data-accordion-content', '');
            menuSubListWrapper[i].querySelector('.menu__sub-list').classList.remove('accor-full-content');
        }
    }

    window.addEventListener('resize', () => {
        if (window.innerWidth <= 1024) {
            menuList.classList.add('accor-wrapper');
            menuList.setAttribute('data-accordion-list', '');
            for (let i = 0; i > menuSubListWrapper.length; i += 1) {
                menuSubListWrapper[i].classList.add('accor-full');
                menuSubListWrapper[i].closest('.menu__item').classList.add('accor');
                menuSubListWrapper[i].querySelector('.menu__sub-list').setAttribute('data-accordion-content', '');
                menuSubListWrapper[i].querySelector('.menu__sub-list').classList.add('accor-full-content');
            }
        } else {
            menuList.classList.remove('accor-wrapper');
            menuList.removeAttribute('data-accordion-list', '');
            for (let i = 0; i > menuSubListWrapper.length; i += 1) {
                menuSubListWrapper[i].classList.remove('accor-full');
                menuSubListWrapper[i].closest('.menu__item').classList.remove('accor');
                menuSubListWrapper[i].querySelector('.menu__sub-list').removeAttribute('data-accordion-content', '');
                menuSubListWrapper[i].querySelector('.menu__sub-list').classList.remove('accor-full-content');
            }
        }
    });

    // accordion
    const ACCORDION_LIST = 'data-accordion-list'
    const ACCORDION_BUTTON = 'data-accordion-button'
    const ACCORDION_ARROW = 'data-accordion-arrow'
    const ACCORDION_CONTENT = 'data-accordion-content'
    const SECTION_OPENED = 'active'
    const ICON_ROTATED = 'rotated'

    class Accordion {
        static apply(accordionNode) {
            if (!accordionNode) {
                return
            }

            const acc = new Accordion()
            acc.accordion = accordionNode
            accordionNode.onclick = acc.onClick.bind(acc)
        }

        handleClick(button) {
            const innerSection = button.closest('.accor').querySelector('.accor-full');
            const isOpened = innerSection.classList.contains(SECTION_OPENED)

            if (isOpened) {
                this.close(innerSection)
                return
            }
            this.open(innerSection)
        }

        open(section) {
            const accordion = section.querySelector(`[${ACCORDION_CONTENT}`).closest('.accor');
            const accordionContent = section.querySelector(`[${ACCORDION_CONTENT}`)
            const accordionList = accordionContent.querySelector(`[${ACCORDION_LIST}`)
            const innerSectionHeight = accordionContent.clientHeight
            let countOfScrollHeight = 0;
            const allElementContentData = section.querySelectorAll(`[${ACCORDION_CONTENT}`)
            accordion.classList.add(SECTION_OPENED)
            section.classList.add(SECTION_OPENED)
            this.rotateIconFor(section.previousElementSibling)

            for (const item of allElementContentData) {
                countOfScrollHeight = countOfScrollHeight + item.scrollHeight;
            }

            if (accordionContent.contains(accordionList)) {
                section.style.maxHeight = `${innerSectionHeight + countOfScrollHeight}px`
                return
            }
            section.style.maxHeight = `${innerSectionHeight}px`
        }

        close(section) {
            const accordion = section.querySelector(`[${ACCORDION_CONTENT}`).closest('.accor');
            section.style.maxHeight = 0
            accordion.classList.remove(SECTION_OPENED)
            section.classList.remove(SECTION_OPENED)
            this.rotateIconFor(section.previousElementSibling)
        }

        rotateIconFor(button) {
            const rotatedIconClass = ICON_ROTATED
            const arrowElement = button.dataset.hasOwnProperty('accordionArrow') ?
                button :
                button.querySelector(`[${ACCORDION_ARROW}]`)

            if (!arrowElement) {
                return
            }

            const isOpened = arrowElement.classList.contains(rotatedIconClass)
            if (!isOpened) {
                arrowElement.classList.add(rotatedIconClass)
                return
            }
            arrowElement.classList.remove(rotatedIconClass)
        }

        onClick(event) {
            let button = event.target.closest(`[${ACCORDION_BUTTON}]`)
            if (button && button.dataset.accordionButton !== undefined) {
                this.handleClick(button)
                console.log('test');
            }
        }
    }

    const accorWrapperList = document.querySelectorAll('.accor-wrapper');

    if (accorWrapperList.length > 0) {
        setTimeout(function () {
            accorWrapperList.forEach(function (elem) {
                Accordion.apply(elem);
            });
        }, 1500);
    }

    // video
    const video = document.querySelector('.about__video-item');
    const playVideo = document.querySelector('.about__video-start');

    if (video) {
        playVideo.addEventListener('click', function () {
            video.play();
            playVideo.classList.add('hidden');
        });
    }

    // services slider
    const servicesSlider = new Swiper('.services__slider', {
        navigation: {
            prevEl: '.services__navigation-btn_prev',
            nextEl: '.services__navigation-btn_next',
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
                spaceBetween: 16,
                autoHeight: true,
            },
            575: {
                slidesPerView: 2,
                spaceBetween: 16,
            },
            768: {
                slidesPerView: 1.5,
                spaceBetween: 16,
            },
            992: {
                slidesPerView: 2,
                spaceBetween: 16,
            },
            1200: {
                slidesPerView: 2.5,
                spaceBetween: 32,
            },
            1600: {
                slidesPerView: 3.1,
                spaceBetween: 32,
            }
        }
    });

    // conditions slider
    const conditionsSlider = new Swiper('.conditions__slider', {
        loop: true,
        centeredSlides: true,
        slideToClickedSlide: true,
        navigation: {
            prevEl: '.conditions__navigation-btn_prev',
            nextEl: '.conditions__navigation-btn_next',
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
                spaceBetween: 16,
                autoHeight: true,
            },
            575: {
                slidesPerView: 1.5,
                spaceBetween: 16,
            },
            992: {
                slidesPerView: 2,
                spaceBetween: 16,
            },
            1200: {
                slidesPerView: 2.24,
                spaceBetween: 32,
            }
        }
    });

    // specialists slider
    const specialistsSlider = new Swiper('.specialists__slider', {
        loop: true,
        autoHeight: true,
        slidesPerView: 1,
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        pagination: {
            el: ".specialists__slider-pagination-item",
            type: "fraction",
        },
        navigation: {
            prevEl: '.specialists__slider-btn_prev',
            nextEl: '.specialists__slider-btn_next',
        },
    });

    // stories slider
    const storiesSlider = new Swiper('.stories__slider', {
        loop: true,
        centeredSlides: true,
        breakpoints: {
            0: {
                slidesPerView: 1.2,
                spaceBetween: 8,
            },
            575: {
                slidesPerView: 1.5,
                spaceBetween: 16,
            },
            991: {
                slidesPerView: 2.3,
                spaceBetween: 16,
            },
            1600: {
                slidesPerView: 3.35,
                spaceBetween: 36,
            }
        }
    });

    // licenses slider
    const licensesSlider = new Swiper('.licenses__slider', {
        loop: true,
        centeredSlides: true,
        breakpoints: {
            0: {
                slidesPerView: 2,
                spaceBetween: 8,
            },
            575: {
                slidesPerView: 4,
                spaceBetween: 16,
            },
            1025: {
                slidesPerView: 4,
                spaceBetween: 32,
            },
            1400: {
                slidesPerView: 6.35,
                spaceBetween: 32,
            }
        }
    });

    // specialist-reviews slider
    setTimeout(function () {
        const specialistReviewsSlider = new Swiper('.specialist-reviews__slider', {
            loop: true,
            autoHeight: true,
            slidesPerView: 1,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            navigation: {
                prevEl: '.specialist-reviews__slider-btn_prev',
                nextEl: '.specialist-reviews__slider-btn_next',
            },
        });
    }, 1000);

    // specialist-documents slider
    const specialistDocumentsSlider = new Swiper('.specialist-documents__slider', {
        slidesPerView: 4,
        spaceBetween: 32,
        navigation: {
            prevEl: '.specialist-documents__slider-btn_prev',
            nextEl: '.specialist-documents__slider-btn_next',
        },
        breakpoints: {
            0: {
                slidesPerView: 2,
                spaceBetween: 8,
            },
            767: {
                slidesPerView: 3,
                spaceBetween: 16,
            },
            1025: {
                slidesPerView: 4,
                spaceBetween: 32,
            },
        }
    });

    // licenses fancybox
    Fancybox.bind('[data-fancybox="licenses"]', {
        placeFocusBack: false,
    });

    const btnUp = {
        el: document.querySelector('.btn-to-top'),
        scrolling: false,
        show() {
            if (this.el.classList.contains('btn-to-top_hide') && !this.el.classList.contains('btn-to-top_hiding')) {
                this.el.classList.remove('btn-to-top_hide');
                this.el.classList.add('btn-to-top_hiding');
                window.setTimeout(() => {
                    this.el.classList.remove('btn-to-top_hiding');
                }, 300);
            }
        },
        hide() {
            if (!this.el.classList.contains('btn-to-top_hide') && !this.el.classList.contains('btn-to-top_hiding')) {
                this.el.classList.add('btn-to-top_hiding');
                window.setTimeout(() => {
                    this.el.classList.add('btn-to-top_hide');
                    this.el.classList.remove('btn-to-top_hiding');
                }, 300);
            }
        },
        addEventListener() {
            window.addEventListener('scroll', () => {
                const scrollY = window.scrollY || document.documentElement.scrollTop;
                if (this.scrolling && scrollY > 0) {
                    return;
                }
                this.scrolling = false;
                if (scrollY > 400) {
                    this.show();
                } else {
                    this.hide();
                }
            });
            document.querySelector('.btn-to-top').onclick = () => {
                this.scrolling = true;
                this.hide();
                window.scrollTo({
                    top: 0,
                    left: 0,
                    behavior: 'smooth'
                });
            }
        }
    }

    // search city
    const timeout = 500;
    let timer;

    $('body').on('input', '.city-filter', function () {
        let content = $('.modal-city__list');
        let inputValue = $('.city-filter').val();

        clearTimeout(timer);

        timer = setTimeout(() => {
            $.ajax({
                url: '/ajax/',
                type: "POST",
                dataType: "html",
                data: {
                    "INPUT_VALUE": inputValue,
                },
                success: function (response) {
                    $(content).html(response);
                },
                error: function (response) {
                    $(content).html(response);
                    console.log(response);
                }
            });
        }, timeout);
    });

    btnUp.addEventListener();
    initPhoneMask();
    initModalWorker();
    initFormSender();


    const similar_slider = new Swiper('.similar__slider', {
        // Optional parameters
        slidesPerView: 1.1,
        spaceBetween: 15,
        // Navigation arrows
        navigation: {
          nextEl: '.similar__slider-next',
          prevEl: '.similar__slider-prev',
        },
        breakpoints: {
          1800: {
            slidesPerView: 4,      
          },
          1600: {
            spaceBetween: 32,
          },
          1450: {
            slidesPerView: 3,
          },
          1030: {
            slidesPerView: 2,
          },
        },
      });
      
      
      const clinics__slider = new Swiper('.clinics__slider', {
        // Optional parameters
        slidesPerView: 1.1,
        spaceBetween: 10,
        // Navigation arrows
        navigation: {
          nextEl: '.clinics__slider-next',
          prevEl: '.clinics__slider-prev',
        },
        breakpoints: {
          1800: {
            slidesPerView: 4,      
          },
          1600: {
            spaceBetween: 32,
          },
          1450: {
            slidesPerView: 3,
          },
          1030: {
            slidesPerView: 2,
          },
        },
      });
      
});

/* drugs navigation */
const drugsNavigation = document.querySelector('.navigation-drugs');

if (drugsNavigation) {
    const jsScrollBlockList = document.querySelectorAll('.text-section__drugs-content h2, .text-section__drugs-content h3, .text-section__drugs-content h4, .text-section__drugs-content h5, .text-section__drugs-content h6');

    if (jsScrollBlockList.length > 0) {
        for (let i = 0; i < jsScrollBlockList.length; i += 1) {
            const jsScrollBlock = jsScrollBlockList[i];
            const titleBlock = jsScrollBlock.textContent;
            const drugsNavigationList = document.querySelector('.navigation-drugs__list');
            const drugsNavigationItem = document.createElement('li');
            const drugsNavigationLink = document.createElement('a');
            drugsNavigationItem.classList.add('navigation-drugs__item');
            drugsNavigationLink.classList.add('navigation-drugs__link');
            jsScrollBlock.setAttribute('id', `${i}`)
            drugsNavigationLink.setAttribute('href', `#${i}`);
            drugsNavigationLink.textContent = ' ' + titleBlock;
            drugsNavigationItem.append(drugsNavigationLink);
            drugsNavigationList.append(drugsNavigationItem);
        }

        document.querySelectorAll('a[href^="#"').forEach(link => {

            link.addEventListener('click', function (e) {
                e.preventDefault();

                let href = this.getAttribute('href').substring(1);

                const scrollTarget = document.getElementById(href);

                // const topOffset = document.querySelector('.scrollto').offsetHeight;
                const topOffset = 180;
                const elementPosition = scrollTarget.getBoundingClientRect().top;
                const offsetPosition = elementPosition - topOffset;

                window.scrollBy({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            });
        });
    } else {
        drugsNavigation.querySelector('.navigation-drugs__content').remove();
        drugsNavigation.querySelector('.navigation-drugs__wrapper').style.justifyContent = 'center';
    }
}

let UL = document.querySelector('.comment__inner');
if (UL) {
    let ANKORS = UL.querySelectorAll('li');
    let BUTTON = UL.querySelector('.comments__btn');

    ANKORS.forEach(el => {
        el.style.display = "none";
    });
    for (let i = 0; i < 5; i++) {
        ANKORS[i].style.display = "block";
    }

    BUTTON.addEventListener('click', () => {
        UL.classList.toggle('hiden');
        if (UL.classList.contains('hiden')) {
            ANKORS.forEach(el => {
                el.style.display = "block";
            });
        } else {
            ANKORS.forEach(el => {
                el.style.display = "none";
            });
            for (let i = 0; i < 5; i++) {
                ANKORS[i].style.display = "block";
            }
        }
    });
}
/* end drugs navigation */

let converseCardWrapper = document.querySelector(".converse__card-wrapper")
if (converseCardWrapper) {
    let converseClose = document.querySelector(".converse__close")
    converseClose.addEventListener("click", () => {
        converseClose.classList.toggle("converse__close_hidden")
        converseCardWrapper.classList.toggle("converse__card-wrapper_hidden")
    })
}

// Услуги в футере    
const tabs = document.querySelectorAll('.tabs-js');

if (tabs.length > 0) {
  tabs.forEach(elem => {
    const buttons = elem.querySelectorAll('.tab-js');
    const contents = elem.querySelectorAll('.tab-content-js');
    if (buttons.length > 0 && contents.length > 0) {
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', () => {
          if (!buttons[i].classList.contains('active')) {
            buttons.forEach(element => {
              element.classList.remove('active');
            });
            contents.forEach(element => {
              element.classList.remove('active');
            });
            buttons[i].classList.add('active');
            contents[i].classList.add('active');
          } else {
            contents.forEach(element => {
              element.classList.remove('active');
            });
            buttons.forEach(element => {
              element.classList.remove('active');
            });
          }
        })
      }
    }
  })
}