source/js/modules/headerScripts.js - master - lr-ru_gitVerse/front

source/js/modules/headerScripts.js
1 156 строк56 KB
Artem Naumov
init
28 окт 2024, 01:39
28 окт 2024, 01:399aa6803
// toogle hidding menu button
function toggleHiddenMenuBtn(){
  let hiddenMenuBtn = document.querySelector('.hidden-btn__icon');
  let hiddenMenu = document.querySelector('.user-wrapper__hidden-menu');
  let header = document.querySelector('.header');
  let body = document.querySelector('body');

  if(hiddenMenuBtn){
    let glassBackground = document.createElement("div");
    glassBackground.classList.add('header-blur-wrap');
    header.after(glassBackground);

    hiddenMenuBtn.addEventListener('click', function() {
      this.classList.toggle('active');
      hiddenMenu.classList.toggle('hidden-menu--on');
      glassBackground.classList.toggle('header-blur-wrap--on');
      body.classList.toggle('page-body__no-scroll');
    });

    glassBackground.addEventListener('click', function(){
      hiddenMenuBtn.classList.remove('active');
      hiddenMenu.classList.remove('hidden-menu--on');
      glassBackground.classList.remove('header-blur-wrap--on');
      body.classList.remove('page-body__no-scroll');
    });

     //close blocks on document cliks 
     function handleClick(event) {
      const target = event.target;
      const isClickedOnExcludedBlock = target.matches('.hidden-btn__icon, .hb-line, .hidden-menu__link a, .hidden-menu__call-btn, .user-wrapper__hidden-menu');
      if (!isClickedOnExcludedBlock) {

        // Handle the click event here for clicks outside the excluded blocks
        hiddenMenuBtn.classList.remove('active');
        hiddenMenu.classList.remove('hidden-menu--on');
        glassBackground.classList.remove('header-blur-wrap--on');
        body.classList.remove('page-body__no-scroll');
      }
    }
    document.addEventListener('click', handleClick);
  }
}
toggleHiddenMenuBtn();

//toogle search form
function headerSearchToogleMobile(){
  const searchBtnHeader = document.querySelector('.user-mobile__search-btn');
  const searchForm = document.querySelector('.search-mobile');
  if(searchBtnHeader && searchForm){
    searchBtnHeader.addEventListener('click', function(){
      searchForm.classList.toggle('search-mobile--on');
    });

    document.addEventListener('click', function(e){
      if(!searchBtnHeader.contains(e.target) && !searchForm.contains(e.target)){
        searchForm.classList.remove('search-mobile--on');
      }
    });
  }
}
headerSearchToogleMobile()
//ContactUsModalOpener
function headerContactUsModal() {
  let mainHeader = document.querySelector('.header');
  if (mainHeader) {
    let contactUsModal = document.querySelector('.header-contact-us');
    let contactUsModalWrapper = document.querySelector('.header-contact-us__wrapper');
    let contactUsModalClose = document.querySelector('.header-contact-us__close');
    let footerCallBtn = document.querySelector('.footer-panel__button');
    let contactUsDesktopHeaderNumbers = document.querySelectorAll('.contacts__number');
    let contactUsDesktopHeaderNumbersSticky = document.querySelectorAll('.sticky-header-desktop__number');
    let contactUsHeaderMobileHidden = document.querySelector('.hidden-menu__call-btn');
    let contactUsHeaderGlassBack = document.querySelector('.header-contact-us__blur');
    let body = document.querySelector('body');

    function openContactUsModal(e) {
      if (e) e.preventDefault();
      contactUsModal.style.display = 'block';
      body.classList.add('page-body__no-scroll');
      contactUsModalWrapper.classList.add('header-contact-us__wrapper--opening');
    }

    function closeContactUsModal() {
      contactUsModalWrapper.classList.remove('header-contact-us__wrapper--opening');
      contactUsModalWrapper.classList.add('header-contact-us__wrapper--closing');
      
      const handleAnimationEnd = function() {
        contactUsModal.style.display = 'none';
        body.classList.remove('page-body__no-scroll');
        contactUsModalWrapper.classList.remove('header-contact-us__wrapper--closing');
        contactUsModalWrapper.removeEventListener('animationend', handleAnimationEnd);
      };
      
      contactUsModalWrapper.addEventListener('animationend', handleAnimationEnd);
    }

    if (contactUsModal && contactUsModalClose) {
      contactUsDesktopHeaderNumbers.forEach(number => number.addEventListener('click', openContactUsModal));
      contactUsDesktopHeaderNumbersSticky.forEach(number => number.addEventListener('click', openContactUsModal));
      contactUsHeaderMobileHidden.addEventListener('click', openContactUsModal);

      contactUsModalClose.addEventListener('click', closeContactUsModal);
      contactUsHeaderGlassBack.addEventListener('click', closeContactUsModal);

      if (footerCallBtn) {
        footerCallBtn.addEventListener('click', openContactUsModal);
      }
    } else {
      console.log('No Header modal on the page');
    }
  }
}

headerContactUsModal();

//Green navigation arrow mech
function navArrowMech(){
  let navLeftArrow = document.querySelector('.navigation__arrow-left');
  let navRightArrow = document.querySelector('.navigation__arrow-right');
  let navFirstItem = document.querySelector('.navigation__nav-item');
  let navItemsList = document.querySelectorAll('.navigation__nav-item');
  let navItemsListParent = document.querySelector('.navigation__nav-list');
  

  if(navLeftArrow === null || navRightArrow === null || navFirstItem === null){
    // console.log('no navigation on the page');
  }else{

    let lastItem = navItemsList[navItemsList.length - 1];
    
    let intViewportWidth = window.innerWidth;
    // console.warn(intViewportWidth);

    if(intViewportWidth > 1140){

      let coordOfLastItem = lastItem.getBoundingClientRect();
  
      
      
      if(coordOfLastItem.right > intViewportWidth){
        // console.warn('last item out of viewport');

        navRightArrow.style.display = 'block';

        navRightArrow.addEventListener('click', function(){
          lastItem.scrollIntoView({ block: 'end',  behavior: 'smooth' });
          navRightArrow.style.display = 'none';
          navLeftArrow.style.display = 'block';
        });

        navLeftArrow.addEventListener('click', function(){
          navFirstItem.scrollIntoView({ block: 'end', inline: 'end',  behavior: 'smooth' });
          navLeftArrow.style.display = 'none';
          navRightArrow.style.display = 'block';
          
        });

      } else{
        console.warn('last item in viewport');

        let summ = 0;
        for(let i = 0; i < navItemsList.length; i++){
          summ += navItemsList[i].offsetWidth;
        }

        let summPlusPl = summ + 550;
        // console.log('sum of items width ' + summPlusPl + 'px');
        // console.log(intViewportWidth);

        if(intViewportWidth > summPlusPl ){
          navItemsListParent.style.justifyContent = 'flex-end';
          navItemsListParent.style.paddingRight = '40px';
          navRightArrow.style.display = 'none';
          navLeftArrow.style.display = 'none';
        }
      }
    } else {
      console.warn('mobile viewport');
    }
  }
}

//dadataHeaderCity init;
function dadataModalSuccessInit(){
  //check lacalStorage parametr dadataModalSuccessConfirmCity which contain chosen city
  const dadataModalSuccessConfirmCity = localStorage.getItem('dadataModalSuccessConfirmCity');
  if(dadataModalSuccessConfirmCity){
    //if dadataModalSuccessConfirmCity is available
    let userLocationHeader = document.querySelector('.search-panel__user-location span');
    if(userLocationHeader){
      let userLocationHeaderMobile = document.querySelector('.search-panel-mobile__user-location span');

      userLocationHeader.classList.add('search-panel__user-location--confirm-location');
      userLocationHeader.innerText = dadataModalSuccessConfirmCity;
      
      userLocationHeaderMobile.classList.add('search-panel__user-location--confirm-location');
      userLocationHeaderMobile.innerText = dadataModalSuccessConfirmCity;
    }else{
      let userLocationCartHeader = document.querySelector('.header-cart-desktop__user-location span');
      let userLocationCartHeaderMobile = document.querySelector('.header-cart-mobile__user-location span');

      userLocationCartHeader.classList.add('search-panel__user-location--confirm-location');
      userLocationCartHeader.innerText = dadataModalSuccessConfirmCity;
      
      userLocationCartHeaderMobile.classList.add('search-panel__user-location--confirm-location');
      userLocationCartHeaderMobile.innerText = dadataModalSuccessConfirmCity;
    }
    dadataPopUpsDesktopGenerate();
    dadataPopUpsMobileGenerate();
    dadataPopUpsCartDesktopGenerate();
    dadataPopUpsCartMobileGenerate();
    setTimeout(dadataAutoCity, 2000);
  }else{
    //if dadataModalSuccessConfirmCity NOT available
    console.warn('dadataModalSuccessConfirmCity NO PARAMS');
    dadataHeaderCity();
  }
}
dadataModalSuccessInit();

//Dadata header current IP and City func
function dadataHeaderCity(){  
  const currentIp = fetch('https://ipwho.is/')
  .then((responce) => responce.json())
  .then((data) => {
      const currentIpResult = data.ip
      const currentIpCountry = data.country
      let url = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/iplocate/address?ip=";
      let token = "7d7a4b089cea1b122a5a6e748afc75458f420444";
      let query = currentIpResult;
  
      let options = {
          method: "GET",
          mode: "cors",
          headers: {
              "Content-Type": "application/json",
              "Accept": "application/json",
              "Authorization": "Token " + token
          }
      }

      if(currentIpCountry === 'Russia'){
        fetch(url + query, options)
        .then(response => response.json())
        .then((result) => {
          // console.log(result.location.data.city)
          const currentCity = result.location.data.city
          //First - cart, second - default
          let userLocationCartHeader = document.querySelector('.header-cart-desktop__user-location span');
          let userLocationCartHeaderMobile = document.querySelector('.header-cart-mobile__user-location span');
          if(userLocationCartHeader){
            userLocationCartHeader.classList.add('search-panel__user-location--ask-fadeInOut-span');
            userLocationCartHeaderMobile.classList.add('search-panel__user-location--ask-fadeInOut-span');
            userLocationCartHeader.innerText = currentCity;
            userLocationCartHeaderMobile.innerText = currentCity;
            dadataPopUpsCartDesktopGenerate();
            dadataPopUpsCartMobileGenerate();
            setTimeout(dadataAutoCity, 2000);

          }else{
            let userLocationHeader = document.querySelector('.search-panel__user-location span');
            let userLocationHeaderMobile = document.querySelector('.search-panel-mobile__user-location span');

            if (userLocationHeader) {
              userLocationHeader.classList.add('search-panel__user-location--ask-fadeInOut-span');
              userLocationHeaderMobile.classList.add('search-panel__user-location--ask-fadeInOut-span');
              userLocationHeader.innerText = currentCity;
              userLocationHeaderMobile.innerText = currentCity;
              //DESKTOP WAY OUT
              dadataPopUpsDesktopGenerate();
              dadataPopUpsMobileGenerate();
              setTimeout(dadataAutoCity, 2000);
            }
          }
        })
        .catch(error => {
          console.warn(error);
        });
      }else{
        console.warn('ВЫ НАХОДИТЕСЬ ЗА ПРЕДЕЛАМИ РФ!');
        //First - cart, second - default
        let userLocationCartHeader = document.querySelector('.header-cart-desktop__user-location span');
        let userLocationCartHeaderMobile = document.querySelector('.header-cart-mobile__user-location span');
        if(userLocationCartHeader){
          userLocationCartHeader.classList.add('search-panel__user-location--ask-fadeInOut-span');
          userLocationCartHeaderMobile.classList.add('search-panel__user-location--ask-fadeInOut-span');
          userLocationCartHeader.innerText = 'Москва';
          userLocationCartHeaderMobile.innerText = 'Москва';
          dadataPopUpsCartDesktopGenerate();
          dadataPopUpsCartMobileGenerate();
          setTimeout(dadataAutoCity, 2000);

        }else{
          let userLocationHeader = document.querySelector('.search-panel__user-location span');
          let userLocationHeaderMobile = document.querySelector('.search-panel-mobile__user-location span');

          if (userLocationHeader) {
            userLocationHeader.classList.add('search-panel__user-location--ask-fadeInOut-span');
            userLocationHeaderMobile.classList.add('search-panel__user-location--ask-fadeInOut-span');
            userLocationHeader.innerText = 'Москва';
            userLocationHeaderMobile.innerText = 'Москва';
            //DESKTOP WAY OUT
            dadataPopUpsDesktopGenerate();
            dadataPopUpsMobileGenerate();
            setTimeout(dadataAutoCity, 2000);
          }
        }
      }
  });      
}

//generate dadata pop-ups default desktop
function dadataPopUpsDesktopGenerate(){
  let userLocationHeader = document.querySelector('.search-panel__user-location span');
  if(userLocationHeader){
    //calculate position of header location block
    let userLocationHeaderText = userLocationHeader.innerText;
    let userLocationHeaderTextFromStorageChosenCity = localStorage.getItem('dadataModalSuccessConfirmCity');
    if(userLocationHeaderTextFromStorageChosenCity === null){
        //generate success pop-ups without saved city
        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderText}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;
        userLocationHeader.after(dadataModalSuccess);
    }else{
        //generate success pop-ups
        let userLocationHeaderTextFromStorageChosenCityFresh = localStorage.getItem('dadataModalSuccessConfirmCity');
        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderTextFromStorageChosenCityFresh}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;
        userLocationHeader.after(dadataModalSuccess);
    }

    //generate find pop-ups
    let dadataModalFind = document.createElement('div');
    dadataModalFind.classList.add('search-panel__user-location--dadataModalFind');
    dadataModalFind.innerHTML = `
      <div class="search-panel__user-location--dadataModalFind-wrapper">
          <img src="/img/search-icon-dadataFind.svg" alt="">
          <div class="search-panel__user-location--dadataModalFind-confirmBtn"></div> 
          <input type="text" id="dadataHeaderCity" placeholder="Введите название вашего города" autocomplete="off">
          
          <ul class="search-panel__user-location--dadataModalFind-quickPickList">
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Москва</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Санкт-Петербург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Новосибирск</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Екатеринбург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Казань</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Нижний Новгород</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Челябинск</li>
          </ul>
          
          <a href="/pages/outside-delivery" target="_blank">*Хочу доставку в Другую страну</a>
      </div>
    `;

    userLocationHeader.after(dadataModalFind);

    const els = document.getElementsByClassName("search-panel__user-location--dadataModalFind-quickPickList");

    Array.prototype.forEach.call(els, function(el) {
      el.addEventListener('wheel', (event) => {
          event.preventDefault();
          el.scrollBy({
              left: event.deltaY < 0 ? -30 : 30,
          });
      });
    });

    //show succeess modal
    userLocationHeader.addEventListener('click', function(){
      dadataModalSuccess.classList.toggle('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'none';
    });

    //confirm city/set local storage + show find modal
    const dadataModalSuccess = document.querySelector('.search-panel__user-location--dadataModalSuccess');
    const dadataModalSuccessQuestionBlock = document.querySelector('.search-panel__user-location--dadataModalSuccess-question');
    const dadataModalSuccessConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalSuccess-confirmBtn');
    const dadataModalSuccessAnoterCity = document.querySelector('.search-panel__user-location--dadataModalSuccess-anotherCity');
    const dadataModalFindInput = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper input');
    const dadataModalFindInputImg = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper img');
    const dadataModalFindInputConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalFind-confirmBtn');
  
    dadataModalSuccessConfirmBtn.addEventListener('click', function(){
      if(userLocationHeaderTextFromStorageChosenCity === null){
        localStorage.setItem('dadataModalSuccessConfirmCity', userLocationHeaderText);

        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationHeader.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationHeader.classList.add('search-panel__user-location--confirm-location');
      }else{
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationHeader.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationHeader.classList.add('search-panel__user-location--confirm-location');
      }
    });

    dadataModalSuccessAnoterCity.addEventListener('click', function(){
      dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'block';
    });

    //confirm and choose from find input
    dadataModalFindInput.addEventListener('click', function(){
      dadataModalFindInputImg.style.display = 'none';
      dadataModalFindInputConfirmBtn.style.display = 'block';
    });

    dadataModalFindInputConfirmBtn.addEventListener('click', function(){
      const dadataModalFindInputValue = dadataModalFindInput.value;
      if(dadataModalFindInputValue){
    
        userLocationHeader.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationHeader.classList.add('search-panel__user-location--confirm-location');
    
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        // setTimeout(dadataPopUpsDesktopGenerateReplay, 1000);
        localStorage.setItem('dadataModalSuccessConfirmCity', dadataModalFindInputValue);
        dadataModalSuccessQuestionBlock.innerHTML = `Ваш город ${dadataModalFindInputValue}?`;
        userLocationHeader.innerText = dadataModalFindInputValue;
      }else{
        //false
        console.warn('dadataModalFindInputValue');
        console.warn(dadataModalFindInputValue);
      }
    });

    //quick choose find btns
    const modalFindQuickChooseBtn = document.querySelectorAll('.search-panel__user-location--dadataModalFind-quickPickItem');
    modalFindQuickChooseBtn.forEach(item => {
      const itemText = item.innerText;
      item.addEventListener('click', function(){
        dadataModalFindInput.value = itemText;

        dadataModalFindInputImg.style.display = 'none';
        dadataModalFindInputConfirmBtn.style.display = 'block';
      });
    });
    

    //close blocks on document cliks 
    function handleClick(event) {
      const target = event.target;
      const isClickedOnExcludedBlock = target.matches('.search-panel__user-location--confirm-location, .search-panel__user-location--dadataModalSuccess-wrapper, #dadataHeaderCity, .search-panel__user-location--dadataModalFind, .search-panel__user-location--dadataModalFind-wrapper, .search-panel__user-location--ask-fadeInOut-span, .search-panel__user-location--dadataModalSuccess-confirmBtn, .search-panel__user-location--dadataModalSuccess-anotherCity, .search-panel__user-location--dadataModalSuccess-question, .suggestions-input, .search-panel__user-location--dadataModalFind-confirmBtn, .search-panel__user-location--dadataModalFind-quickPickItem, .suggestions-wrapper, .suggestions-hint, .suggestions-value');
      if (!isClickedOnExcludedBlock) {

        // Handle the click event here for clicks outside the excluded blocks
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';
      }
    }
    document.addEventListener('click', handleClick);
  }
}


//generate dadata pop-ups CART desktop
function dadataPopUpsCartDesktopGenerate(){
  let userLocationCartHeader = document.querySelector('.header-cart-desktop__user-location span');
  if(userLocationCartHeader){
    //calculate position of header location block
    let userLocationHeaderPosition = userLocationCartHeader.getBoundingClientRect();
    let userLocationHeaderText = userLocationCartHeader.innerText;
    let userLocationHeaderPositionTop = parseInt(userLocationHeaderPosition.top);
    let userLocationHeaderPositionRight = parseInt(userLocationHeaderPosition.right);
    let userLocationHeaderTextFromStorageChosenCity = localStorage.getItem('dadataModalSuccessConfirmCity');
    if(userLocationHeaderTextFromStorageChosenCity === null){
        //generate success and find pop-ups
        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderText}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;
        userLocationCartHeader.after(dadataModalSuccess);
    }else{
        //generate success and find pop-ups
        let userLocationHeaderTextFromStorageChosenCityFresh = localStorage.getItem('dadataModalSuccessConfirmCity');

        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderTextFromStorageChosenCityFresh}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;

        userLocationCartHeader.after(dadataModalSuccess);
    }

    //generate ask and find pop-ups
    let dadataModalFind = document.createElement('div');
    dadataModalFind.classList.add('search-panel__user-location--dadataModalFind');
    dadataModalFind.innerHTML = `
      <div class="search-panel__user-location--dadataModalFind-wrapper">
          <img src="/img/search-icon-dadataFind.svg" alt="">
          <div class="search-panel__user-location--dadataModalFind-confirmBtn"></div> 
          <input type="text" id="dadataHeaderCity" placeholder="Введите название вашего города">
          
          <ul class="search-panel__user-location--dadataModalFind-quickPickList">
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Москва</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Санкт-Петербург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Новосибирск</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Екатеринбург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Казань</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Нижний Новгород</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Челябинск</li>
          </ul>
          
          <a href="/pages/outside-delivery" target="_blank">*Хочу доставку в Другую страну</a>
      </div>
    `;

    userLocationCartHeader.after(dadataModalFind);

    const els = document.getElementsByClassName("search-panel__user-location--dadataModalFind-quickPickList");

    Array.prototype.forEach.call(els, function(el) {
      el.addEventListener('wheel', (event) => {
          event.preventDefault();
          el.scrollBy({
              left: event.deltaY < 0 ? -30 : 30,
          });
      });
    });

    //show succeess modal
    userLocationCartHeader.addEventListener('click', function(){
      dadataModalSuccess.classList.toggle('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'none';
    });

    //confirm city/set local storage + show find modal
    const dadataModalSuccess = document.querySelector('.search-panel__user-location--dadataModalSuccess');
    const dadataModalSuccessQuestionBlock = document.querySelector('.search-panel__user-location--dadataModalSuccess-question');
    const dadataModalSuccessConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalSuccess-confirmBtn');
    const dadataModalSuccessAnoterCity = document.querySelector('.search-panel__user-location--dadataModalSuccess-anotherCity');
    const dadataModalFindInput = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper input');
    const dadataModalFindInputImg = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper img');
    const dadataModalFindInputConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalFind-confirmBtn');
  
    dadataModalSuccessConfirmBtn.addEventListener('click', function(){
      if(userLocationHeaderTextFromStorageChosenCity === null){
        localStorage.setItem('dadataModalSuccessConfirmCity', userLocationHeaderText);

        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationCartHeader.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationCartHeader.classList.add('search-panel__user-location--confirm-location');
      }else{
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationCartHeader.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationCartHeader.classList.add('search-panel__user-location--confirm-location');
      }
    });

    dadataModalSuccessAnoterCity.addEventListener('click', function(){
      dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'block';
    });

    //confirm and choose from find input
    dadataModalFindInput.addEventListener('click', function(){
      dadataModalFindInputImg.style.display = 'none';
      dadataModalFindInputConfirmBtn.style.display = 'block';
    });

    dadataModalFindInputConfirmBtn.addEventListener('click', function(){
      const dadataModalFindInputValue = dadataModalFindInput.value;
      if(dadataModalFindInputValue){
        // console.warn('dadataModalFindInputValue');
        // console.warn(dadataModalFindInputValue);
        userLocationCartHeader.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationCartHeader.classList.add('search-panel__user-location--confirm-location');
    
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        localStorage.setItem('dadataModalSuccessConfirmCity', dadataModalFindInputValue);
        dadataModalSuccessQuestionBlock.innerHTML = `Ваш город ${dadataModalFindInputValue}?`;
        userLocationCartHeader.innerText = dadataModalFindInputValue;
        
      }else{
        //false
        console.warn('dadataModalFindInputValue');
        console.warn(dadataModalFindInputValue);
      }
    });

    //quick choose find btns
    const modalFindQuickChooseBtn = document.querySelectorAll('.search-panel__user-location--dadataModalFind-quickPickItem');
    modalFindQuickChooseBtn.forEach(item => {
      const itemText = item.innerText;
      item.addEventListener('click', function(){
        dadataModalFindInput.value = itemText;
        dadataModalFindInputImg.style.display = 'none';
        dadataModalFindInputConfirmBtn.style.display = 'block';
      });
    });

    //close blocks on document cliks 
    function handleClick(event) {
      const target = event.target;
      const isClickedOnExcludedBlock = target.matches('.search-panel__user-location--confirm-location, .search-panel__user-location--dadataModalSuccess-wrapper, #dadataHeaderCity, .search-panel__user-location--dadataModalFind, .search-panel__user-location--dadataModalFind-wrapper, .search-panel__user-location--ask-fadeInOut-span, .search-panel__user-location--dadataModalSuccess-confirmBtn, .search-panel__user-location--dadataModalSuccess-anotherCity, .search-panel__user-location--dadataModalSuccess-question, .suggestions-input, .search-panel__user-location--dadataModalFind-confirmBtn, .search-panel__user-location--dadataModalFind-quickPickItem, .suggestions-wrapper, .suggestions-hint, .suggestions-value');
      if (!isClickedOnExcludedBlock) {

        // Handle the click event here for clicks outside the excluded blocks
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';
      }
    }
    document.addEventListener('click', handleClick);
  }
}

//generate dadata pop-ups default Mobile
function dadataPopUpsMobileGenerate(){
  let userLocationHeaderMobile = document.querySelector('.search-panel-mobile__user-location span');
  if(userLocationHeaderMobile){

    let userLocationHeaderText = userLocationHeaderMobile.innerText;
    let userLocationHeaderTextFromStorageChosenCity = localStorage.getItem('dadataModalSuccessConfirmCity');
    if(userLocationHeaderTextFromStorageChosenCity === null){
        //generate success and find pop-ups
        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderText}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;

        userLocationHeaderMobile.after(dadataModalSuccess);
    }else{
        //generate success and find pop-ups
        let userLocationHeaderTextFromStorageChosenCityFresh = localStorage.getItem('dadataModalSuccessConfirmCity');

        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderTextFromStorageChosenCityFresh}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;

        userLocationHeaderMobile.after(dadataModalSuccess);
    }

    //generate ask and find pop-ups
    let dadataModalFind = document.createElement('div');
    dadataModalFind.classList.add('search-panel__user-location--dadataModalFind');
    dadataModalFind.innerHTML = `
      <div class="search-panel__user-location--dadataModalFind-wrapper">
          <img src="/img/search-icon-dadataFind.svg" alt="">
          <div class="search-panel__user-location--dadataModalFind-confirmBtn"></div> 
          <input type="text" autocomplete="off" id="dadataHeaderCityMobile" placeholder="Введите название вашего города" >
          
          <ul class="search-panel__user-location--dadataModalFind-quickPickList">
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Москва</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Санкт-Петербург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Новосибирск</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Екатеринбург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Казань</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Нижний Новгород</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Челябинск</li>
          </ul>
          
          <a href="/pages/outside-delivery" target="_blank">*Хочу доставку в Другую страну</a>
      </div>
    `;

    userLocationHeaderMobile.after(dadataModalFind);

    //show succeess modal
    userLocationHeaderMobile.addEventListener('click', function(){
      dadataModalSuccess.classList.toggle('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'none';
    });

    //confirm city/set local storage + show find modal
    const dadataModalSuccess = document.querySelector('.search-panel__user-location--dadataModalSuccess');
    const dadataModalSuccessQuestionBlock = document.querySelector('.search-panel__user-location--dadataModalSuccess-question');
    const dadataModalSuccessConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalSuccess-confirmBtn');
    const dadataModalSuccessAnoterCity = document.querySelector('.search-panel__user-location--dadataModalSuccess-anotherCity');
    const dadataModalFindInput = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper input');
    const dadataModalFindInputImg = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper img');
    const dadataModalFindInputConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalFind-confirmBtn');
  
    dadataModalSuccessConfirmBtn.addEventListener('click', function(){
      if(userLocationHeaderTextFromStorageChosenCity === null){
        localStorage.setItem('dadataModalSuccessConfirmCity', userLocationHeaderText);

        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationHeaderMobile.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationHeaderMobile.classList.add('search-panel__user-location--confirm-location');
      }else{
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationHeaderMobile.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationHeaderMobile.classList.add('search-panel__user-location--confirm-location');
      }
    });

    dadataModalSuccessAnoterCity.addEventListener('click', function(){
      dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'block';
    });

    //confirm and choose from find input
    dadataModalFindInput.addEventListener('click', function(){
      dadataModalFindInputImg.style.display = 'none';
      dadataModalFindInputConfirmBtn.style.display = 'block';
    });

    dadataModalFindInputConfirmBtn.addEventListener('click', function(){
      const dadataModalFindInputValue = dadataModalFindInput.value;
      if(dadataModalFindInputValue){
        
        userLocationHeaderMobile.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationHeaderMobile.classList.add('search-panel__user-location--confirm-location');
    
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';
        dadataModalSuccessQuestionBlock.innerHTML = `Ваш город ${dadataModalFindInputValue}?`;

        localStorage.setItem('dadataModalSuccessConfirmCity', dadataModalFindInputValue);
        userLocationHeaderMobile.innerText = dadataModalFindInputValue;
      
      }else{
        //false
        console.warn('dadataModalFindInputValue');
        console.warn(dadataModalFindInputValue);
      }
    });

    //quick choose find btns
    const modalFindQuickChooseBtn = document.querySelectorAll('.search-panel__user-location--dadataModalFind-quickPickItem');
    modalFindQuickChooseBtn.forEach(item => {
      const itemText = item.innerText;
      item.addEventListener('click', function(){
        dadataModalFindInput.value = itemText;
        dadataModalFindInputImg.style.display = 'none';
        dadataModalFindInputConfirmBtn.style.display = 'block';
      });
    });

    function handleClick(event) {
      const target = event.target;
      const isClickedOnExcludedBlock = target.matches('.search-panel__user-location--confirm-location, .search-panel__user-location--dadataModalSuccess-wrapper, #dadataHeaderCity, .search-panel__user-location--dadataModalFind, .search-panel__user-location--dadataModalFind-wrapper, .search-panel__user-location--ask-fadeInOut-span, .search-panel__user-location--dadataModalSuccess-confirmBtn, .search-panel__user-location--dadataModalSuccess-anotherCity, .search-panel__user-location--dadataModalSuccess-question, .suggestions-input, .search-panel__user-location--dadataModalFind-confirmBtn, .search-panel__user-location--dadataModalFind-quickPickItem, .suggestions-wrapper, .suggestions-hint, .suggestions-value');
      if (!isClickedOnExcludedBlock) {

        // Handle the click event here for clicks outside the excluded blocks
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';
      }
    }
    document.addEventListener('click', handleClick);

  }
}

//generate dadata pop-ups cart desktop
function dadataPopUpsCartMobileGenerate(){
  let userLocationCartHeaderMobile = document.querySelector('.header-cart-mobile__user-location span');
  if(userLocationCartHeaderMobile){

    let userLocationHeaderText = userLocationCartHeaderMobile.innerText;
    let userLocationHeaderTextFromStorageChosenCity = localStorage.getItem('dadataModalSuccessConfirmCity');
    if(userLocationHeaderTextFromStorageChosenCity === null){
        //generate success and find pop-ups
        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderText}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;

        userLocationCartHeaderMobile.after(dadataModalSuccess);
    }else{
        //generate success and find pop-ups
        let userLocationHeaderTextFromStorageChosenCityFresh = localStorage.getItem('dadataModalSuccessConfirmCity');

        let dadataModalSuccess = document.createElement('div');
        dadataModalSuccess.classList.add('search-panel__user-location--dadataModalSuccess');
        dadataModalSuccess.innerHTML = `
          <div class="search-panel__user-location--dadataModalSuccess-wrapper">
            <div class="search-panel__user-location--dadataModalSuccess-question">
                Ваш город ${userLocationHeaderTextFromStorageChosenCityFresh}?
            </div>

            <div class="search-panel__user-location--dadataModalSuccess-inner">
                <div class="search-panel__user-location--dadataModalSuccess-confirmBtn">Все верно!</div>
                <div class="search-panel__user-location--dadataModalSuccess-anotherCity">Выбрать город</div>
            </div>
          </div> 
        `;

        userLocationCartHeaderMobile.after(dadataModalSuccess);
    }

    //generate ask and find pop-ups
    let dadataModalFind = document.createElement('div');
    dadataModalFind.classList.add('search-panel__user-location--dadataModalFind');
    dadataModalFind.innerHTML = `
      <div class="search-panel__user-location--dadataModalFind-wrapper">
          <img src="/img/search-icon-dadataFind.svg" alt="">
          <div class="search-panel__user-location--dadataModalFind-confirmBtn"></div> 
          <input type="text" id="dadataHeaderCityMobile" placeholder="Введите название вашего города">
          
          <ul class="search-panel__user-location--dadataModalFind-quickPickList">
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Москва</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Санкт-Петербург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Новосибирск</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Екатеринбург</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Казань</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Нижний Новгород</li>
              <li class="search-panel__user-location--dadataModalFind-quickPickItem">Челябинск</li>
          </ul>
          
          <a href="/pages/outside-delivery" target="_blank">*Хочу доставку в Другую страну</a>
      </div>
    `;

    userLocationCartHeaderMobile.after(dadataModalFind);

    const els = document.getElementsByClassName("search-panel__user-location--dadataModalFind-quickPickList");

    Array.prototype.forEach.call(els, function(el) {
      el.addEventListener('wheel', (event) => {
          event.preventDefault();
          el.scrollBy({
              left: event.deltaY < 0 ? -30 : 30,
          });
      });
    });
    
    //show succeess modal
    userLocationCartHeaderMobile.addEventListener('click', function(){
      dadataModalSuccess.classList.toggle('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'none';
    });

    //confirm city/set local storage + show find modal
    const dadataModalSuccess = document.querySelector('.search-panel__user-location--dadataModalSuccess');
    const dadataModalSuccessQuestionBlock = document.querySelector('.search-panel__user-location--dadataModalSuccess-question');
    const dadataModalSuccessConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalSuccess-confirmBtn');
    const dadataModalSuccessAnoterCity = document.querySelector('.search-panel__user-location--dadataModalSuccess-anotherCity');
    const dadataModalFindInput = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper input');
    const dadataModalFindInputImg = document.querySelector('.search-panel__user-location--dadataModalFind-wrapper img');
    const dadataModalFindInputConfirmBtn = document.querySelector('.search-panel__user-location--dadataModalFind-confirmBtn');
  
    dadataModalSuccessConfirmBtn.addEventListener('click', function(){
      if(userLocationHeaderTextFromStorageChosenCity === null){
        localStorage.setItem('dadataModalSuccessConfirmCity', userLocationHeaderText);

        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationCartHeaderMobile.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationCartHeaderMobile.classList.add('search-panel__user-location--confirm-location');
      }else{
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        userLocationCartHeaderMobile.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationCartHeaderMobile.classList.add('search-panel__user-location--confirm-location');
      }
    });

    dadataModalSuccessAnoterCity.addEventListener('click', function(){
      dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
      dadataModalFind.style.display = 'block';
    });

    //confirm and choose from find input
    dadataModalFindInput.addEventListener('click', function(){
      dadataModalFindInputImg.style.display = 'none';
      dadataModalFindInputConfirmBtn.style.display = 'block';
    });

    dadataModalFindInputConfirmBtn.addEventListener('click', function(){
      const dadataModalFindInputValue = dadataModalFindInput.value;
      if(dadataModalFindInputValue){
        userLocationCartHeaderMobile.classList.remove('search-panel__user-location--ask-fadeInOut-span');
        userLocationCartHeaderMobile.classList.add('search-panel__user-location--confirm-location');
    
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';

        dadataModalSuccessQuestionBlock.innerHTML = `Ваш город ${dadataModalFindInputValue}?`;
        localStorage.setItem('dadataModalSuccessConfirmCity', dadataModalFindInputValue);
        userLocationCartHeaderMobile.innerText = dadataModalFindInputValue;
        
      }else{
        //false
        console.warn('dadataModalFindInputValue');
        console.warn(dadataModalFindInputValue);
      }
    });

    //quick choose find btns
    const modalFindQuickChooseBtn = document.querySelectorAll('.search-panel__user-location--dadataModalFind-quickPickItem');
    modalFindQuickChooseBtn.forEach(item => {
      const itemText = item.innerText;
      item.addEventListener('click', function(){
        dadataModalFindInput.value = itemText;

        dadataModalFindInputImg.style.display = 'none';
        dadataModalFindInputConfirmBtn.style.display = 'block';
      });
    });

    function handleClick(event) {
      const target = event.target;
      const isClickedOnExcludedBlock = target.matches('.search-panel__user-location--confirm-location, .search-panel__user-location--dadataModalSuccess-wrapper, #dadataHeaderCity, .search-panel__user-location--dadataModalFind, .search-panel__user-location--dadataModalFind-wrapper, .search-panel__user-location--ask-fadeInOut-span, .search-panel__user-location--dadataModalSuccess-confirmBtn, .search-panel__user-location--dadataModalSuccess-anotherCity, .search-panel__user-location--dadataModalSuccess-question, .suggestions-input, .search-panel__user-location--dadataModalFind-confirmBtn, .search-panel__user-location--dadataModalFind-quickPickItem, .suggestions-wrapper, .suggestions-hint, .suggestions-value');
      if (!isClickedOnExcludedBlock) {

        // Handle the click event here for clicks outside the excluded blocks
        dadataModalSuccess.classList.remove('search-panel__user-location--dadataModalSuccess-on');
        dadataModalFind.style.display = 'none';
      }
    }
    document.addEventListener('click', handleClick);
  }
}

//inject jQuery on page for real-time suggestion
function dadataAutoCity(){
    //jquery to dadata
       
    let intViewportWidth = window.innerWidth;
    if(intViewportWidth < 1140){
      //mobile
      const scriptHeaderDadataJqueryMobile = document.createElement('script');
      scriptHeaderDadataJqueryMobile.async = false;
      scriptHeaderDadataJqueryMobile.innerHTML = `
      jQuery(document).ready(function($){
            let token = "7d7a4b089cea1b122a5a6e748afc75458f420444";
            let type  = "address";
            let $city = $("#dadataHeaderCityMobile");
            let $address = $("#address") ;
            
            function iplocate() {
              let serviceUrl = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address";
              let params = {
                type: "GET",
                contentType: "application/json",
                headers: {
                  "Authorization": "Token " + token
                }
              };
              return $.ajax(serviceUrl, params);
            }
  
            let defaultFormatResult = $.Suggestions.prototype.formatResult;
  
            function formatResult(value, currentValue, suggestion, options) {
              let newValue = suggestion.data.city;
              suggestion.value = newValue;
              return defaultFormatResult.call(this, newValue, currentValue, suggestion, options);
            }
  
            function formatSelected(suggestion) {
              return suggestion.data.city;
            }
            
            // город и населенный пункт
            $city.suggestions({
              token: token,
              type: "ADDRESS",
              hint: false,
              bounds: "city",
              constraints: {
                locations: { city_type_full: "город" }
              },
              formatResult: formatResult,
              formatSelected: formatSelected,
              onSelect: function(suggestion) {
                console.log(suggestion);
              }
            });

            disableAutocomplete();

            // console.warn( '$city.suggestions ')
            // console.warn( $city.suggestions() )
        });
      `;
      document.body.appendChild(scriptHeaderDadataJqueryMobile);

    }else{
      //desktop
      const scriptHeaderDadataJquery = document.createElement('script');
      scriptHeaderDadataJquery.async = false;
      scriptHeaderDadataJquery.innerHTML = `
      jQuery(document).ready(function($){
            let token = "7d7a4b089cea1b122a5a6e748afc75458f420444";
            let type  = "address";
            let $city = $("#dadataHeaderCity");
            let $address = $("#address") ;
            
            function iplocate() {
              let serviceUrl = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address";
              let params = {
                type: "GET",
                contentType: "application/json",
                headers: {
                  "Authorization": "Token " + token
                }
              };
              return $.ajax(serviceUrl, params);
            }
  
            let defaultFormatResult = $.Suggestions.prototype.formatResult;
  
            function formatResult(value, currentValue, suggestion, options) {
              let newValue = suggestion.data.city;
              suggestion.value = newValue;
              return defaultFormatResult.call(this, newValue, currentValue, suggestion, options);
            }
  
            function formatSelected(suggestion) {
              return suggestion.data.city;
            }
            
            // город и населенный пункт
            $city.suggestions({
              token: token,
              type: "ADDRESS",
              hint: false,
              bounds: "city",
              constraints: {
                locations: { city_type_full: "город" }
              },
              formatResult: formatResult,
              formatSelected: formatSelected,
              onSelect: function(suggestion) {
                console.log(suggestion);
              }
            });
  
            disableAutocomplete();

            // console.warn( '$city.suggestions ')
            // console.warn( $city.suggestions() )
        });
      `;
      document.body.appendChild(scriptHeaderDadataJquery);
    }
}


function searchModalToggle() {
	const searchForm = document.querySelectorAll('form[action="/search"]');
	let settingBtn, settingsModalWrapper;

	if (searchForm !== null) {
		searchForm.forEach(item => {
			settingBtn = item.querySelector('.toggle-settings');
			if (settingBtn !== null) {
				settingBtn.addEventListener('click', function (e) {
					e.preventDefault();
					settingsModalWrapper = e.target.parentElement.querySelector('.search__modal-wrapper');
					settingsModalWrapper.classList.toggle("search__modal-wrapper--visible");
					this.classList.toggle("search__setting--active");
				});
			}
		});
		
		document.onclick = function (e) {
			searchForm.forEach(item => {
				settingsModalWrapper = item.querySelector('.search__modal-wrapper');
				settingBtn = item.querySelector('.toggle-settings');
				if (settingBtn) {
					if (!settingsModalWrapper.contains(e.target) && !e.target.classList.contains('toggle-settings') || e.target.classList.contains('search__modal-close')) {
						settingsModalWrapper.classList.remove("search__modal-wrapper--visible");
						settingBtn.classList.remove("search__setting--active");
					}
				}
			});
		}
	}
}
searchModalToggle();