https://toplivo-expert.ru/assets/js/app.js

1let urlParams = new URLSearchParams(window.location.search);
2$(".phone").mask("+7 (999) 999 99 99");
3const nextStepBtnTwo = document.querySelector(".popup__next-btn[data-step='2']");
4const nextStepBtnThree = document.querySelector(".popup__next-btn[data-step='3']");
5const nextStepBtnFour = document.querySelector(".popup__next-btn[data-step='4']");
6const nextStepBtnFive = document.querySelector(".popup__next-btn[data-step='5']");
7const nextStepBtnSix = document.querySelector(".popup__next-btn[data-step='6']");
8const resultCalcBtn = document.querySelector(".popup__step-btn[data-popup='popup-calc_result']");
9
10// ------------------------- start FANCYBOX: ---------------------------
11const body = document.querySelector("body");
12Fancybox.bind("[data-fancybox]", {
13  // Your custom options
14});
15// ------------------------- end FANCYBOX: ---------------------------
16
17// ---------------------------------- start menu ----------------------------------
18//#region menu
19const header = document.querySelector(".header");
20const main = document.querySelector(".main");
21if (header) {
22  document.addEventListener("scroll", (e) => {
23    if (window.innerWidth > 760) {
24      // console.log(window.scrollY);
25      if (window.scrollY > 115) {
26        header.classList.add("header_scroll");
27        main.classList.add("main_scroll");
28      } else {
29        header.classList.remove("header_scroll");
30        main.classList.remove("main_scroll");
31      }
32    }
33  });
34}
35
36// console.log(window.innerWidth);
37if (window.innerWidth < 1440) {
38  const runner = document.querySelector(".runner");
39  const partnersList = document.querySelector(".partners__list");
40  runner.style.display = "none";
41  partnersList.style.display = "flex";
42}
43
44let animates = Array.from(document.querySelectorAll(".animation")).filter((item) => {
45  if (item.style.display !== "none") {
46    return item;
47  }
48});
49

50animates.forEach((item) => {
51  // получаем параметры секции
52  const rect = item.getBoundingClientRect(); // положение элемента в окне
53  // console.log('item', item);
54  // console.log('rect.top', rect.top);
55  // console.log('window.innerHeight / 2', window.innerHeight / 2);
56  // console.log('rect.top', rect.top);
57  // проверяем что начало секции находится в первой половине экрана
58  // if (rect.top >= 0 && rect.top <= window.innerHeight / 2) {
59  if (rect.top <= window.innerHeight / 1.4) {
60    item.classList.add("animation_active");
61  }
62});
63
64document.addEventListener("scroll", () => {
65  // console.log(window.scrollY);
66
67  // console.log("scroll");
68  // получаем все секции с атрибутом id
69
70  // console.log("animates", animates);
71
72  animates.forEach((item) => {
73    // получаем параметры секции
74    const rect = item.getBoundingClientRect();
75    // console.log(rect);
76
77    // проверяем что начало секции находится в первой половине экрана
78    if (rect.top <= window.innerHeight / 1.4) {
79      // if (rect.top >= 0) {
80      // console.log(rect.top);
81      item.classList.add("animation_active");
82    }
83  });
84});
85
86// ---------------------------------- end menu ----------------------------------
87//#endregion
88
89// -------------------------------------------- start Карточки предложений: ---------------------------------------------
90//#region offer cards
91const offerCards = document.querySelectorAll(".offers__slider-item");
92if (offerCards.length) {
93  offerCards.forEach((item) => {
94    const id = item.dataset.id;
95    const cardTitle = item.querySelector(".off-card__title");
96    const cardSubtitle = item.querySelector(".off-card__subtitle");
97    const cardImg = item.querySelector(".off-card__img img");
98
99    const cardText = item.querySelector(".off-card__text");
100    const cardMoreBtn = item.querySelector(".btn_modal");
101    const cardConsultBtn = item.querySelector(".btn_cons");
102    const cardCalcBtn = item.querySelector(".btn_calc");
103    const truthCardText = cardText.innerHTML;
104
105    cardText.style.display = "none";
106
107    // $clamp(cardText, { clamp: 2 });
108
109    cardMoreBtn.addEventListener("click", function () {
110      // console.log("click");
111      const popup = document.querySelector(".popup-offer_more");
112      const popupTitle = popup.querySelector(".off-card__title");
113      const popupSubtitle = popup.querySelector(".off-card__subtitle");
114      const popupImg = popup.querySelector(".off-card__img img");
115      const popupText = popup.querySelector(".off-card__text");
116      const popupConsultBtn = popup.querySelector(".btn_cons");
117      const popupCalcBtn = popup.querySelector(".btn_calc");
118      const showBtn = popup.querySelector(".off-card__btn_show");
119      const hideBtn = popup.querySelector(".off-card__btn_hide");
120      const btnWrapper = popup.querySelector(".off-card__btn-wrap");
121      btnWrapper.style.display = "block";
122
123      popupTitle.textContent = cardTitle.textContent;
124      popupSubtitle.textContent = cardSubtitle.textContent;
125      popupImg.src = cardImg.src;
126      popupText.innerHTML = cardText.innerHTML;
127
128      const itemClasses = item.classList;
129      if (itemClasses.contains("off-card_cons")) {
130        popupConsultBtn.style.display = "block";
131        popupCalcBtn.style.display = "none";
132        showBtn.style.display = "block";
133        hideBtn.style.display = "none";
134      } else {
135        popupConsultBtn.style.display = "none";
136        popupCalcBtn.style.display = "block";
137        showBtn.style.display = "none";
138        hideBtn.style.display = "block";
139      }
140
141      if (popupText.innerHTML.length > 500) {
142        popupText.innerHTML = truthCardText.slice(0, 470) + "...";
143        showBtn.style.display = "block";
144        hideBtn.style.display = "none";
145      } else {
146        popupText.innerHTML = truthCardText;
147        showBtn.style.display = "none";
148        hideBtn.style.display = "none";
149      }
150
151      showBtn.addEventListener("click", function () {
152        // console.log("click");
153        popupText.innerHTML = truthCardText;
154        showBtn.style.display = "none";
155        hideBtn.style.display = "block";
156      });
157
158      hideBtn.addEventListener("click", function () {
159        // console.log("click");
160        popupText.innerHTML = truthCardText.slice(0, 470) + "...";
161        showBtn.style.display = "block";
162        hideBtn.style.display = "none";
163      });
164    });

165  });
166}
167
168// -------------------------------------------- end Карточки предложений ---------------------------------------------
169//#endregion
170
171// ---------------------------------- start плавающие кнопки: ----------------------------------
172//#region fly buttons
173// кнопка вверх:
174const btnToUp = document.querySelector(".btn-go-up");
175if (btnToUp) {
176  document.addEventListener("scroll", () => {
177    if (window.scrollY > 600) {
178      btnToUp.classList.remove("btn-go-up_hide");
179    } else {
180      btnToUp.classList.add("btn-go-up_hide");
181    }
182  });
183
184  btnToUp.addEventListener("click", () => {
185    window.scrollTo({
186      top: 0,
187      behavior: "smooth",
188    });
189  });
190}
191
192// кнопка социал:
193
194// const socialBtn = document.querySelector(".social-btn");
195
196// if (socialBtn) {
197//   const socialBlock = document.querySelector(".social-btn__wrap");
198//   socialBtn.addEventListener("click", () => {
199//     socialBtn.classList.toggle("social-btn_active");
200//     socialBlock.classList.toggle("social-btn__wrap_active");
201//   });
202// }
203
204// ---------------------------------- end плавающие кнопки: ----------------------------------
205//#endregion
206
207// ---------------------------------- start отправка и валидация формы ----------------------------------
208//#region send forms
209const formAll = document.querySelectorAll(".form");
210
211if (formAll) {
212  formAll.forEach((form) => {
213    form.addEventListener("submit", sendForm);
214
215    async function sendForm(e) {
216      e.preventDefault();
217
218      let errore = formvalidation(form);
219
220      if (errore === 0) {
221        let formData = new FormData(form);
222
223        const resPopup = document.getElementById("popup-calc_result");
224        if (resPopup && resPopup.classList.contains("open")) {
225          const img = resPopup.querySelector(".popup__result-img").querySelector("img").src;
226          const price = resPopup.querySelector(".popup__result-price").textContent;
227          const description = resPopup.querySelector(".popup__result-desc").textContent;
228          const params = resPopup.querySelector(".popup__result-params").textContent;
229          formData.append("image", img);
230          formData.append("price", price);
231          formData.append("description", description);
232          formData.append("params", params);
233        }
234
235        const wrapper = form.closest(".form-wrap");
236        wrapper.classList.add("_sending");
237
238        let response = await fetch("/backend/post-mail.php", {
239          method: "POST",
240          body: formData,
241        });
242
243        if (response.ok) {
244          form.reset();
245          // if(document.querySelector(".popup.open")){
246          // const popupActiveSend = document.querySelector(".popup.open");
247          // popupClose(popupActiveSend);
248
249          // }
250          
251          popupOpen(document.getElementById("popup-success"));
252          $("#popup-success").fadeIn(200);
253          wrapper.classList.remove("_sending");
254        } else {
255          wrapper.classList.remove("_sending");
256        }
257      } else {
258        alert("Заполните обязательные поля");
259      }
260    }
261  });
262
263  function formvalidation(item) {
264    let error = 0;
265    let formReq = item.querySelectorAll("._req");
266
267    for (let index = 0; index < formReq.length; index++) {
268      const input = formReq[index];
269
270      formRemoveError(input);
271
272      if (input.classList.contains("_email")) {
273        if (emailTest(input)) {
274          formAddError(input);
275          error++;
276        }
277      } else if (input.getAttribute("type") === "checkbox" && input.checked === false) {
278        formAddError(input);
279        error++;
280      } else {
281        if (input.value === "") {
282          formAddError(input);
283          error++;
284        }
285      }
286    }
287    return error;
288  }
289
290  function formAddError(input) {
291    input.parentElement.classList.add("_error");
292    input.classList.add("_error");
293  }
294
295  function formRemoveError(input) {
296    input.parentElement.classList.remove("_error");
297    input.classList.remove("_error");
298  }
299
300  function emailTest(input) {
301    return !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,8})+$/.test(input.value);
302  }
303}
304
305// ---------------------------------- end отправка и валидация формы ----------------------------------
306//#endregion
307
308// ------------------------- start WEBP: ---------------------------
309//#region webp class
310function testWebP(callback) {
311  let webP = new Image();
312  webP.onload = webP.onerror = function () {

313    callback(webP.height == 2);
314  };
315  webP.src =
316    "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
317}
318testWebP(function (support) {
319  let className = support === true ? "webp" : "no-webp";
320  document.documentElement.classList.add(className);
321});
322
323// ------------------------- end WEBP: ---------------------------
324//#endregion
325
326// -------------------------------------------- start slider: ---------------------------------------------
327//#region slider
328
329new Swiper(".banner_swiper", {
330  // Optional parameters
331  direction: "horizontal",
332  loop: true,
333  // allowTouchMove: true,
334  // slidesPerView: auto, // сколько слайдов показывать, можно дробно
335  slidesPerView: 1, // сколько слайдов показывать, можно дробно
336  // slidersPerGroup: 3, // сколько слайдов в группе
337  // centeredSlides: true, //выравнивание слайдов по центру
338  // initialSlide: 0, //начальный слайд (c нуля)
339  effect: "fade",
340  spaceBetween: 500,
341  // slideToClickedSlide: true, //перелистывание слайдов по клику
342  // grabCursor: true, //меняет курсор при наведении на руку
343  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
344
345  // Navigation arrows
346  navigation: {
347    nextEl: ".swiper-button-next-banner",
348    prevEl: ".swiper-button-prev-banner",
349  },
350  autoplay: {
351    delay: 7000,
352  },
353  // pagination: {
354  //   el: ".swiper-pagination",
355  //   clickable: true,
356  // },
357  pagination: {
358    el: ".swiper-pagination-banner",
359    type: "fraction",
360  },
361  // mousewheel: { //перелистывание слайдов по мышке
362  //   sensitivity: 1,
363  //   eventsTarget: ".news__slider",
364  // },
365  // keyboard: { //перелистывание слайдов по нажатию клавиш
366  //   enabled: true,
367  //   onlyInViewport: true,
368  //   // pageUpDown: true,
369  // },
370  breakpoints: {
371    0: {
372      // slidesPerView: 1,
373      // spaceBetween: 20,
374    },
375    960: {
376      // spaceBetween: 40,
377    },
378  },
379});
380// setTimeout(function() {
381//     const iframe = document.getElementById("banner-2");
382//     if (iframe) {
383//       iframe.src = iframe.dataset.src;
384//     }
385//   }, 2000);
386// setTimeout(function() {
387//     const iframe = document.getElementById("banner-3");
388//     if (iframe) {
389//       iframe.src = iframe.dataset.src;
390//     }
391//   }, 4000);
392
393new Swiper(".offers_swiper", {
394  // Optional parameters
395  direction: "horizontal",
396  speed: 1000,
397  // loop: true,
398  // allowTouchMove: true,
399  // slidesPerView: auto, // сколько слайдов показывать, можно дробно
400  slidesPerView: 2, // сколько слайдов показывать, можно дробно
401  // slidersPerGroup: 3, // сколько слайдов в группе
402  // centeredSlides: true, //выравнивание слайдов по центру
403  // initialSlide: 0, //начальный слайд (c нуля)
404
405  spaceBetween: 25,
406  // slideToClickedSlide: true, //перелистывание слайдов по клику
407  // grabCursor: true, //меняет курсор при наведении на руку
408  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
409
410  // Navigation arrows
411  navigation: {
412    nextEl: ".swiper-button-next-offer",
413    prevEl: ".swiper-button-prev-offer",
414  },
415  // autoplay: {
416  //   delay: 3000,
417  // },
418  // pagination: {
419  //   el: ".swiper-pagination",
420  //   clickable: true,
421  // },
422  pagination: {
423    el: ".swiper-pagination",
424    type: "fraction",
425  },
426  // mousewheel: { //перелистывание слайдов по мышке
427  //   sensitivity: 1,
428  //   eventsTarget: ".news__slider",
429  // },
430  // keyboard: { //перелистывание слайдов по нажатию клавиш
431  //   enabled: true,
432  //   onlyInViewport: true,
433  //   // pageUpDown: true,
434  // },
435  breakpoints: {
436    0: {
437      slidesPerView: 1,
438      // spaceBetween: 20,
439    },
440    660: {
441      spaceBetween: 15,
442      slidesPerView: 2,
443
444      // spaceBetween: 40,
445    },
446    960: {
447      spaceBetween: 25,
448      slidesPerView: 2,
449
450      // spaceBetween: 40,
451    },
452  },
453  on: {
454    slideChange: function (e) {

455      this.slides.forEach((item) => {
456        if (!item.classList.contains("swiper-slide-active") && !item.classList.contains("swiper-slide-next")) {
457          item.querySelector(".off-card__img").classList.remove("fade-in-right-1");
458        }
459      });
460    },
461    slideNextTransitionEnd: function () {
462      const activeSlide = this.slides.filter((slide) => slide.classList.contains("swiper-slide-active"))[0];
463      const index = this.slides.indexOf(activeSlide);
464      this.slides[index].querySelector(".off-card__img").classList.add("fade-in-right-1");
465      this.slides[index + 1].querySelector(".off-card__img").classList.add("fade-in-right-1");
466      if (this.slides[index + 2]) {
467        this.slides[index + 2].querySelector(".off-card__img").classList.add("fade-in-right-1");
468      }
469    },
470    slidePrevTransitionEnd: function () {
471      const activeSlide = this.slides.filter((slide) => slide.classList.contains("swiper-slide-active"))[0];
472      const index = this.slides.indexOf(activeSlide);
473      if (this.slides[index]) {
474        this.slides[index].querySelector(".off-card__img").classList.add("fade-in-right-1");
475      }
476      if (this.slides[index + 1]) {
477        this.slides[index + 1].querySelector(".off-card__img").classList.add("fade-in-right-1");
478      }
479    },
480  },
481});
482
483const offerActive = document.querySelector('.offers__slider-item.swiper-slide-active');
484const offerNext = document.querySelector('.offers__slider-item.swiper-slide-next');
485
486
487if (offerActive) {
488  const offerActiveImg = offerActive.querySelector('.animation_img')
489  setTimeout(function () {
490    // circles.forEach((item) => {
491      offerActiveImg.classList.add('fade-in-right-1');
492    // })
493  }, 500);
494}
495
496if (offerNext) {
497  const offerNextImg = offerNext.querySelector('.animation_img')
498
499  setTimeout(function () {
500    // circles.forEach((item) => {
501      offerNextImg.classList.add('fade-in-right-1');
502    // })
503  }, 800);
504}
505
506const thumbs_swiper = new Swiper(".results_top_swiper", {
507  loop: true,
508  spaceBetween: 15,
509  slidesPerView: 4, // сколько слайдов показывать, можно дробно
510  freeMode: true, // перелистывание слайдов при свободном положении
511  watchSlidesProgress: true, //перелистывание слайдов при свободном положении
512  breakpoints: {
513    0: {
514      slidesPerView: 1,
515      // spaceBetween: 20,
516    },
517    830: {
518      // spaceBetween: 40,
519      slidesPerView: 4, // сколько слайдов показывать, можно дробно
520    },
521  },
522});
523
524const resultsBotSwiper = new Swiper(".results_bot_swiper", {
525  // Optional parameters
526  // direction: "horizontal",
527  loop: true,
528  speed: 1000,
529  // allowTouchMove: true,
530  // slidesPerView: auto, // сколько слайдов показывать, можно дробно
531  // slidesPerView: 1, // сколько слайдов показывать, можно дробно
532  // slidersPerGroup: 3, // сколько слайдов в группе
533  // centeredSlides: true, //выравнивание слайдов по центру
534  // initialSlide: 0, //начальный слайд (c нуля)
535
536  spaceBetween: 100,
537  thumbs: {
538    swiper: thumbs_swiper,
539  },
540  // autoplay: {
541  //   delay: 5000,
542  // },
543  navigation: {
544    nextEl: ".swiper-button-next_res",
545    prevEl: ".swiper-button-prev_res",
546  },
547  // slideToClickedSlide: true, //перелистывание слайдов по клику
548  // grabCursor: true, //меняет курсор при наведении на руку
549  // watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
550
551  // Navigation arrows
552  // navigation: {
553  //   nextEl: ".swiper-button-next_res-card__right",
554  //   prevEl: ".swiper-button-prev_res-card__right",
555  // },
556
557  // autoplay: {
558  //   delay: 3000,
559  // },
560  // pagination: {
561  //   el: ".swiper-pagination",
562  //   clickable: true,
563  // },
564  // pagination: {
565  //   el: ".swiper-pagination",
566  //   // type: "fraction",
567  //   clickable: true,
568  // },
569  // mousewheel: { //перелистывание слайдов по мышке
570  //   sensitivity: 1,
571  //   eventsTarget: ".news__slider",
572  // },
573  // keyboard: { //перелистывание слайдов по нажатию клавиш
574  //   enabled: true,
575  //   onlyInViewport: true,
576  //   // pageUpDown: true,
577  // },
578  breakpoints: {
579    0: {
580      // slidesPerView: 1,
581      // spaceBetween: 20,
582    },
583    960: {
584      // spaceBetween: 40,
585    },
586  },
587  on: {
588    slideNextTransitionEnd: function () {
589      const activeSlide = this.slides.filter((slide) => slide.classList.contains("swiper-slide-active"))[0];
590      activeSlide.querySelectorAll(".circle-animate").forEach((el) => {
591        el.classList.add("circle-animate_active")
592      })

593      this.slides.forEach((item) => {
594        item.querySelectorAll(".circle-animate").forEach((el) => {
595          if (!el.closest(".swiper-slide-active")) {
596            // console.log(el);            
597            el.classList.remove("circle-animate_active")
598          }
599        })
600      });
601    },
602    slidePrevTransitionEnd: function () {
603      const activeSlide = this.slides.filter((slide) => slide.classList.contains("swiper-slide-active"))[0];
604      activeSlide.querySelectorAll(".circle-animate").forEach((el) => {
605        el.classList.add("circle-animate_active")
606      })
607      this.slides.forEach((item) => {
608        item.querySelectorAll(".circle-animate").forEach((el) => {
609          if (!el.closest(".swiper-slide-active")) {
610            // console.log(el);            
611            el.classList.remove("circle-animate_active")
612          }
613        })
614      });
615    },
616  },
617});
618
619const circles = document.querySelector('.results__bot-item.swiper-slide-active');
620
621
622if (circles) {
623  const circlesItem = circles.querySelectorAll('.circle-animate')
624  setTimeout(function () {
625    circlesItem.forEach((item) => {
626      item.classList.add('circle-animate_active');
627    })
628  }, 500);
629}
630
631
632new Swiper(".res-card_swiper-1", {
633  direction: "horizontal",
634  slidesPerView: 1,
635  spaceBetween: 50,
636  nested: true,
637  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
638  navigation: {
639    nextEl: ".swiper-button-next_res-card__right-1",
640    prevEl: ".swiper-button-prev_res-card__right-1",
641  },
642  pagination: {
643    el: ".swiper-pagination-res-1",
644    clickable: true,
645  },
646  breakpoints: {
647    0: {
648      // slidesPerView: 1,
649      // spaceBetween: 20,
650    },
651    960: {
652      // spaceBetween: 40,
653    },
654  },
655});
656
657// // if (deg <= 270) {
658//   // for (let i = 0; i <= 270; i++) {
659//   //   let deg = 0;
660//   //   setTimeout(function () {
661//   //     deg += 1;
662//   //   }, 1000);
663//     // circle25.style.backgroundImage = `conic-gradient(from 0deg at 50% 50%, #CDFAF6 0deg, #CDFAF6 ${deg}deg, #FAB502 ${deg}deg, #117074 360deg)`;
664
665//   //   // requestAnimationFrame(circle25
666    
667//   // }
668
669//   const target = 270;
670//   let deg = 0;
671
672//   while (deg <= target) {
673//     setTimeout(function () {
674//       deg++;
675//       console.log(deg);
676//       circle25.style.backgroundImage = `conic-gradient(from 0deg at 50% 50%, #CDFAF6 0deg, #CDFAF6 ${deg}deg, #FAB502 ${deg}deg, #117074 360deg)`;
677//     }, 10);
678
679//   }
680
681// // }
682
683
684
685new Swiper(".res-card_swiper-2", {
686  direction: "horizontal",
687  slidesPerView: 1, // сколько слайдов показывать, можно дробно
688  spaceBetween: 50,
689  nested: true,
690  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
691  navigation: {
692    nextEl: ".swiper-button-next_res-card__right-2",
693    prevEl: ".swiper-button-prev_res-card__right-2",
694  },
695  pagination: {
696    el: ".swiper-pagination-res-2",
697    // type: "fraction",
698    clickable: true,
699  },
700  breakpoints: {
701    0: {
702      // slidesPerView: 1,
703      // spaceBetween: 20,
704    },
705    960: {
706      // spaceBetween: 40,
707    },
708  },
709});
710
711new Swiper(".res-card_swiper-3", {
712  direction: "horizontal",
713  slidesPerView: 1, // сколько слайдов показывать, можно дробно
714  spaceBetween: 50,
715  nested: true,
716  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
717  navigation: {
718    nextEl: ".swiper-button-next_res-card__right-3",
719    prevEl: ".swiper-button-prev_res-card__right-3",
720  },
721  pagination: {
722    el: ".swiper-pagination-res-3",
723    clickable: true,
724  },
725  breakpoints: {
726    0: {
727      // slidesPerView: 1,
728      // spaceBetween: 20,
729    },
730    960: {
731      // spaceBetween: 40,
732    },
733  },
734});
735
736new Swiper(".res-card_swiper-4", {
737  direction: "horizontal",
738  slidesPerView: 1, // сколько слайдов показывать, можно дробно
739  spaceBetween: 50,
740  nested: true,
741  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
742  navigation: {
743    nextEl: ".swiper-button-next_res-card__right-4",
744    prevEl: ".swiper-button-prev_res-card__right-4",
745  },
746  pagination: {
747    el: ".swiper-pagination-res-4",
748    clickable: true,
749  },
750  pageUpDown: true,
751  // },
752  breakpoints: {
753    0: {
754      // slidesPerView: 1,
755      // spaceBetween: 20,
756    },
757    960: {
758      // spaceBetween: 40,
759    },
760  },
761});
762
763new Swiper(".news_swiper", {
764  direction: "horizontal",
765  // slidesPerView: 1, // сколько слайдов показывать, можно дробно
766  spaceBetween: 500,
767  // nested: true,
768  watchOverflow: true, //отключает слайдер если все слайды входят в область видимости
769  navigation: {
770    nextEl: ".swiper-button-next_res-card__news",
771    prevEl: ".swiper-button-prev_res-card__news",
772  },
773  pagination: {
774    el: ".swiper-pagination-news",
775    clickable: true,
776  },
777  pageUpDown: true,
778  // },
779  breakpoints: {
780    0: {
781      // slidesPerView: 1,
782      // spaceBetween: 20,
783    },
784    960: {
785      // spaceBetween: 40,
786    },
787  },
788});
789
790// -------------------------------------------- end slider: ---------------------------------------------
791//#endregion
792
793// -------------------------------------------- start popup: ---------------------------------------------
794//#region popup
795// вывод всех попап в список:
796const popupArr = document.querySelectorAll(".popup");
797if (popupArr.length > 0) {
798  // console.log("тест");
799  popupArr.forEach((popup) => {
800    const li = document.createElement("li");
801    li.classList.add("popup__item");
802    li.innerHTML = `<button style="margin-bottom: 10px" class="btn btn_gray popup-link" data-popup="${popup.getAttribute(
803      "id"
804    )}">${popup.getAttribute("id")}</button>`;
805    if (document.querySelector(".popup__list")) {
806      document.querySelector(".popup__list").appendChild(li);
807    }
808
809    popup.classList.add("active");
810  });
811}
812
813const popupLinks = document.querySelectorAll(".popup-link");
814const lockPadding = document.querySelectorAll(".lock-padding");
815// const btn = document.querySelector(".project-btn");
816
817let unlock = true;
818const timeout = 800;
819
820if (popupLinks.length > 0) {
821  for (let index = 0; index < popupLinks.length; index++) {
822    const popupLink = popupLinks[index];
823    popupLink.addEventListener("click", function (e) {
824      const popupName = popupLink.getAttribute("data-popup");
825
826      // функционал возврата на предыдущее окно:
827      const curentPopup = document.getElementById(popupName); //получаем id попап-окна
828      const dataStep = popupLink.getAttribute("data-step");
829      if (dataStep) {
830        const backBtn = curentPopup.querySelector(".calc-cansel-btn-no");
831        if (backBtn) {
832          const link = `popup-calc_${dataStep}`;
833          backBtn.setAttribute("data-popup", link);
834        }
835      }
836
837      popupOpen(curentPopup);
838      e.preventDefault();
839    });

840  }
841}
842
843const popupCloseIcon = document.querySelectorAll(".popup-close");
844if (popupCloseIcon.length > 0) {
845  for (let index = 0; index < popupCloseIcon.length; index++) {
846    const el = popupCloseIcon[index];
847    el.addEventListener("click", function (e) {
848      // console.log("тест");
849      popupClose(el.closest(".popup.open")); //ближайший родитель класса popup
850      e.preventDefault();
851    });
852  }
853}
854
855function popupOpen(curentPopup) {
856  if (curentPopup && unlock) {
857    const popupActive = document.querySelector(".popup.open");
858    // закрываем текущий открытый попап, если он есть
859    if (popupActive) {
860      if (popupActive.classList.contains("popup-calc_result")) {
861        popupActive.style.zIndex = 800;
862      } else {
863        popupClose(popupActive, false);
864      }
865    } else {
866      bodyLock();
867    }
868    // console.log(curentPopup);
869    curentPopup.classList.add("open");
870    curentPopup.addEventListener("click", function (e) {
871      // console.log("тест");
872      if (!e.target.closest(".popup__content")) {
873        // если клик был по области вокруг попапа то ничего не делаем, если это не калькулятор
874        if (!curentPopup.classList.contains("popup-calc")) {
875          popupClose(e.target.closest(".popup.open"));
876        }
877      }
878    });
879  }
880}
881
882function popupClose(popupActive, doUnlock = true) {
883  // console.log("popupClose");
884  if (unlock) {
885    popupActive.classList.remove("open");
886    if (doUnlock) {
887      const popupActiveMore = document.querySelector(".popup.open");
888      if (!popupActiveMore) {
889        bodyUnLock();
890      }
891    }
892  }
893}
894
895// добавляем боди padding-right при открытии попапа, на ширину скролл-бара
896function bodyLock() {
897  const lockPaddingValue = window.innerWidth - document.querySelector(".header").offsetWidth + "px";
898  // console.log(lockPaddingValue);
899  for (let index = 0; index < lockPadding.length; index++) {
900    const el = lockPadding[index];
901    el.style.marginRight = lockPaddingValue;
902    // console.log(el.style.marginRight);
903  }
904  body.style.paddingRight = lockPaddingValue;
905  // console.log(body.style.paddingRight);
906  body.classList.add("lock");
907
908  unlock = false;
909  setTimeout(function () {
910    unlock = true;
911  }, timeout);
912}
913
914function bodyUnLock() {
915  setTimeout(function () {
916    for (let index = 0; index < lockPadding.length; index++) {
917      const el = lockPadding[index];
918      el.style.marginRight = "0px";
919    }
920    body.style.paddingRight = "0px";
921    body.classList.remove("lock");
922  }, timeout);
923
924  unlock = false;
925  setTimeout(function () {
926    unlock = true;
927  }, timeout);
928}
929
930document.addEventListener("keydown", function (e) {
931  if (e.key === "Escape") {
932    const popupActive = document.querySelector(".popup.open");
933    popupClose(popupActive);
934  }
935});
936
937// сброс параметров калькулятора:
938const canselCalcBtn = document.querySelector(".calc-cansel-btn-yes");
939if (canselCalcBtn) {
940  canselCalcBtn.addEventListener("click", function (e) {
941    window.history.pushState({}, document.title, window.location.pathname);
942    urlParams = new URLSearchParams(window.location.search);
943    location.reload();
944  });
945}
946
947const canselCalcBtnNo = document.querySelector(".calc-cansel-btn-no");
948if (canselCalcBtnNo) {
949  canselCalcBtnNo.addEventListener("click", function (e) {
950    popupClose(e.target.closest(".popup"));
951  });
952}
953
954// -------------------------------------------- end popup: ---------------------------------------------
955//#endregion
956
957// // -------------------------------------------- start BURGER: ---------------------------------------------
958// //#region burger
959// document.addEventListener('DOMContentLoaded', function() {
960//   // Функция для открытия popup
961//   function popupOpen(popupElement) {
962//     // Простой пример: делаем popup видимым
963//     popupElement.style.display = 'block';
964//     // Здесь можно добавить блокировку прокрутки body и другие эффекты
965//   }
966
967//   // Функция для закрытия popup
968//   function popupClose(popupElement) {
969//     // Простой пример: скрываем popup
970//     popupElement.style.display = 'none';
971//     // Здесь можно добавить разблокировку body и другие эффекты
972//   }
973
974//   // Получаем элементы бургер-меню и popup
975//   const burger = document.querySelector(".burger");
976//   if (!burger) return; // если бургер-элемент не найден, выходим
977
978//   const popup = document.querySelector("#popup-menu");
979//   const popupContent = popup.querySelector(".popup__content");
980
981//   // Получаем оригинальное навигационное меню
982//   const originalNav = document.querySelector(".header__nav");
983//   // Если нужно вернуть меню в исходное место при закрытии popup
984//   const headerNavWrap = document.querySelector(".header__nav-wrap");
985
986//   // Обработчик клика по бургеру
987//   burger.addEventListener("click", function(e) {
988//     e.preventDefault();
989//     // Открываем popup
990//     popupOpen(popup);
991//     popup.classList.add("open");
992
993//     // Создаём клон оригинального меню (глубокое клонирование)
994//     const navClone = originalNav.cloneNode(true);
995
996//     // Очищаем содержимое popup и вставляем клон
997//     popupContent.innerHTML = "";
998//     popupContent.appendChild(navClone);
999
1000//     // Добавляем делегированный обработчик для кликов по ссылкам в popup
1001//     popupContent.addEventListener("click", onPopupContentClick);

1002//   });
1003
1004//   // Обработчик клика по иконке закрытия popup
1005//   const popupCloseIcon = popup.querySelector(".popup__close");
1006//   if (popupCloseIcon) {
1007//     popupCloseIcon.addEventListener("click", function(e) {
1008//       e.preventDefault();
1009//       closeBurgerPopup();
1010//     });
1011//   }
1012
1013//   // Делегированный обработчик: при клике по ссылке внутри клона закрываем popup
1014//   function onPopupContentClick(e) {
1015//     const link = e.target.closest("a");
1016//     if (link) {
1017//       // Добавляем небольшую задержку, чтобы браузер успел обработать переход по ссылке
1018//       setTimeout(() => {
1019//         closeBurgerPopup();
1020//       }, 100);
1021//     }
1022//   }
1023
1024//   // Функция закрытия popup и очистки клонированного меню
1025//   function closeBurgerPopup() {
1026//     popup.classList.remove("open");
1027//     popupClose(popup);
1028//     // Удаляем делегированный обработчик, чтобы избежать повторного навешивания
1029//     popupContent.removeEventListener("click", onPopupContentClick);
1030//     // Если требуется вернуть оригинальное меню обратно в исходное место:
1031//     if (!headerNavWrap.contains(originalNav)) {
1032//       headerNavWrap.appendChild(originalNav);
1033//     }
1034//   }
1035// });
1036
1037// // -------------------------------------------- end BURGER ---------------------------------------------
1038// //#endregion
1039
1040// -------------------------------------------- start Куки: ---------------------------------------------
1041// //#region cookie
1042// function setCookie(name, value, lifetimeDays = 30, path = "/") {
1043//   var expires = "";
1044//   if (lifetimeDays) {
1045//     var date = new Date();
1046//     date.setTime(date.getTime() + lifetimeDays * 24 * 60 * 60 * 1000);
1047//     expires = "; expires=" + date.toUTCString();
1048//   }
1049//   document.cookie = name + "=" + (value || "") + expires + "; path=" + path;
1050// }
1051
1052// function getCookie(name) {
1053//   var nameEQ = name + "=";
1054//   var cookies = document.cookie.split(";");
1055//   for (var i = 0; i < cookies.length; i++) {
1056//     var c = cookies[i];
1057//     while (c.charAt(0) == " ") c = c.substring(1, c.length);
1058//     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
1059//   }
1060//   return null;
1061// }
1062
1063// if (!getCookie("CookiePolicyAccepted")) {
1064//   $(".cookie").show();
1065// } else {
1066//   $(".cookie").hide();
1067// }
1068
1069// function acceptCookiePolicy() {
1070//   // console.log("acceptCookiePolicy");
1071//   setCookie("CookiePolicyAccepted", true);
1072//   $(".cookie").fadeTo(500, 0);
1073//   setTimeout(() => {
1074//     $(".cookie").hide();
1075//   }, 500);
1076// }
1077// function closeCookiePolicyNotification() {
1078//   // console.log("closeCookiePolicyNotification");
1079//   $(".cookie").fadeOut(300);
1080// }
1081
1082// const cookieBtn = document.querySelector(".cookie__btn");
1083// if (cookieBtn) {
1084//   cookieBtn.addEventListener("click", function (e) {
1085//     // console.log("тест");
1086//     e.preventDefault();
1087//     acceptCookiePolicy();
1088//   });
1089// }
1090
1091// const cookieCloseBtn = document.querySelector(".cookie__close");
1092// if (cookieCloseBtn) {
1093//   cookieCloseBtn.addEventListener("click", function (e) {
1094//     // console.log("тест");
1095//     e.preventDefault();
1096//     closeCookiePolicyNotification();
1097//   });
1098// }
1099// -------------------------------------------- end Куки ---------------------------------------------
1100//#endregion
1101
1102// -------------------------------------------- start Карта ---------------------------------------------
1103//#region Карта
1104
1105// Функция ymaps.ready() будет вызвана, когда
1106// загрузятся все компоненты API, а также когда будет готово DOM-дерево.
1107const map = document.getElementById("map");
1108const map2 = document.getElementById("mapTwo");
1109
1110
1111if (map) {
1112    setTimeout(function() {
1113      initMap(); // Инициализируем карту через 2 секунды (или другое значение)
1114    }, 5000);
1115  
1116
1117  // Главная функция, вызывается при запуске скрипта
1118  async function initMap() {
1119    // Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API
1120    await ymaps3.ready;
1121
1122    // Импорт модулей для элементов управления на карте
1123    const { YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker } = ymaps3;
1124
1125    // Координаты центра карты
1126
1127    // Иницилиазируем карту
1128    // Создание объекта карты
1129    if (document.getElementById("map")) {
1130      const map = new YMap(
1131        // Передаём ссылку на HTMLElement контейнера
1132        document.getElementById("map"),
1133        // Передаём параметры инициализации карты
1134        {
1135          location: {
1136            // Координаты центра карты
1137            center: [30.312446, 59.902154],
1138
1139            // Уровень масштабирования
1140            zoom: 12.5,
1141          },
1142        },
1143        [
1144          // Добавляем слой, скрываем POI
1145          new YMapDefaultSchemeLayer({
1146            customization: [
1147              {
1148                tags: {
1149                  any: ["poi", "transit"],
1150                },
1151                elements: "label",
1152                stylers: [
1153                  {
1154                    opacity: 1,
1155                  },
1156                ],
1157              },
1158            ],
1159          }),
1160          new YMapDefaultFeaturesLayer({}),
1161        ]
1162      );
1163
1164      // *******************************************************************
1165      // Добавляем коллекцию маркеров
1166      const markersArr = [
1167        { coordinates: [30.312446, 59.902154], title: "Setl center", dataId: 1, img: "/assets/img/pin.svg" },        
1168      ];
1169
1170      function renderMarks(arr) {
1171        arr.forEach((obj) => {
1172          const imgContainer = makeImgContainer(obj);
1173          const markerElement = makeMarkerElement(obj);
1174          const marker = makeMarker(obj, imgContainer);
1175          imgContainer.append(markerElement);
1176          map.addChild(marker);
1177        });
1178      }
1179
1180      renderMarks(markersArr);
1181
1182      // *******************************************************************
1183
1184      // Функция создания контейнера для маркера
1185      function makeImgContainer(obj) {
1186        const imgContainer = document.createElement("div");
1187        imgContainer.className = "marker-wrap";
1188        imgContainer.setAttribute("data-id", obj.dataId);
1189        return imgContainer;
1190      }
1191
1192      // Функция создания маркера
1193      function makeMarkerElement(obj) {
1194        const markerElement = document.createElement("img");
1195        markerElement.className = "marker";
1196        markerElement.src = obj.img;
1197        markerElement.title = obj.title;
1198        return markerElement;
1199      }
1200
1201      // Функция инициализации маркера
1202      function makeMarker(obj, container) {
1203        const marker = new YMapMarker(
1204          {
1205            coordinates: obj.coordinates,
1206            // draggable: true,
1207            mapFollowsOnDrag: true,
1208          },
1209          container
1210        );
1211        return marker;
1212      }
1213    }
1214  }
1215}
1216
1217// -------------------------------------------- end Карта ---------------------------------------------
1218//#endregion
1219

1220// -------------------------------------- start Url Query --------------------------
1221//#region url query
1222function parseUrlQuery() {
1223  // console.log("*************** Старт функции parseUrlQuery ***************");
1224  const urlParams = new URLSearchParams(window.location.search);
1225  const filterArr = [];
1226  urlParams.forEach((value, key) => {
1227    filterArr.push({ name: key, value: value });
1228  });
1229  // console.log(filterArr);
1230  return filterArr;
1231}
1232
1233function updateUrl() {
1234  const queryString = urlParams.toString();
1235  // Если queryString пустой, используем просто текущий путь, иначе добавляем знак "?"
1236  const newUrl = queryString ? "?" + queryString : window.location.pathname;
1237  window.history.pushState({}, "", newUrl);
1238}
1239
1240function setUrlQueryParam(param, value) {
1241  urlParams.set(param, value);
1242  updateUrl();
1243  pastImageName();
1244}
1245
1246function delUrlQueryParam(param) {
1247  urlParams.delete(param);
1248  updateUrl();
1249  pastImageName();
1250}
1251
1252// функции достают пармаетры из URL:
1253function getTemperature() {
1254  const queryParams = parseUrlQuery();
1255  let temp = "";
1256  if (queryParams.filter((item) => item.name == "temperature").length) {
1257    const tempParam = queryParams.filter((item) => item.name == "temperature");
1258    temp = tempParam[0]["value"];
1259  }
1260  return temp;
1261}
1262
1263function getInsulation() {
1264  const queryParams = parseUrlQuery();
1265  let ins = "";
1266  if (queryParams.filter((item) => item.name == "insulation").length) {
1267    const insParam = queryParams.filter((item) => item.name == "insulation");
1268    ins = insParam[0]["value"];
1269  }
1270  return ins;
1271}
1272
1273function getHeater() {
1274  const queryParams = parseUrlQuery();
1275  let heater = "";
1276  if (queryParams.filter((item) => item.name == "heater").length) {
1277    const heaterParam = queryParams.filter((item) => item.name == "heater");
1278    heater = heaterParam[0]["value"];
1279  }
1280  return heater;
1281}
1282
1283function getType() {
1284  const queryParams = parseUrlQuery();
1285  let type = "";
1286  if (queryParams.filter((item) => item.name == "type").length) {
1287    const typeParam = queryParams.filter((item) => item.name == "type");
1288    type = typeParam[0]["value"];
1289  }
1290  return type;
1291}
1292
1293function getVolume() {
1294  const queryParams = parseUrlQuery();
1295  let volume = "";
1296  if (queryParams.filter((item) => item.name == "volume").length) {
1297    const volumeParam = queryParams.filter((item) => item.name == "volume");
1298    volume = volumeParam[0]["value"];
1299  }
1300  return volume;
1301}
1302
1303function getSize() {
1304  let size = "";
1305  const volume = getVolume();
1306  if (volume) {
1307    if (volume < 25) {
1308      size = "S";
1309    } else if (volume < 45) {
1310      size = "M";
1311    } else {
1312      size = "L";
1313    }
1314  }
1315  return size;
1316}
1317
1318function getFuels() {
1319  const queryParams = parseUrlQuery();
1320  const fuels = [];
1321
1322  const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
1323  const allFuels = [];
1324  fuelBtns.forEach((item) => {
1325    allFuels.push(item.dataset.name);
1326  });
1327
1328  allFuels.forEach((el) => {
1329    if (queryParams.filter((item) => item.name == el).length) {
1330      let fuelPar = queryParams.filter((item) => item.name == el)[0]["name"];
1331      fuels.push(fuelPar);
1332    }
1333  });
1334  return fuels;
1335}
1336
1337function getCheckedFuels() {
1338  const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
1339  let numberOfChecked = 0;
1340  fuelBtns.forEach((el) => {
1341    if (el.checked) {
1342      numberOfChecked++;
1343    }
1344  });
1345  return numberOfChecked;
1346}
1347
1348function getSections() {
1349  const queryParams = parseUrlQuery();
1350  let sections = "";
1351  if (queryParams.filter((item) => item.name == "sections").length) {
1352    const sectionsParam = queryParams.filter((item) => item.name == "sections");
1353    sections = sectionsParam[0]["value"];
1354  }
1355  return sections;
1356}
1357
1358function getTrk() {
1359  const queryParams = parseUrlQuery();
1360  let trk = "";
1361  if (queryParams.filter((item) => item.name == "trk").length) {
1362    const trkParam = queryParams.filter((item) => item.name == "trk");
1363    trk = trkParam[0]["value"];
1364  }
1365  return trk;
1366}
1367
1368function getSide() {
1369  const queryParams = parseUrlQuery();
1370  let side = "";
1371  if (queryParams.filter((item) => item.name == "side").length) {
1372    const sideParam = queryParams.filter((item) => item.name == "side");
1373    side = sideParam[0]["value"];
1374  }
1375  return side;
1376}
1377
1378function getFast() {
1379  const queryParams = parseUrlQuery();
1380  let fast = "";
1381  if (queryParams.filter((item) => item.name == "fast").length) {
1382    const fastParam = queryParams.filter((item) => item.name == "fast");
1383    fast = fastParam[0]["value"];
1384  }
1385  return fast;
1386}
1387//#endregion
1388
1389// -------------------------------------- start image name --------------------------
1390//#region image name
1391//функция формирования имени изображения
1392function getImageName() {
1393  // console.log("*************** Старт функции getImageName ***************");
1394
1395  let name = "";
1396
1397  const queryParams = parseUrlQuery();
1398
1399  let type = "";
1400  let size = "";
1401  // let fuel = '';
1402  let sections = "";
1403  let trk = "";
1404  let side = "";
1405  let fast = "";
1406
1407  // console.log(queryParams);
1408  // тип
1409  if (getType()) {
1410    type = getType();
1411    name = `/assets/img/renders/${type}_S.png`;
1412  }
1413
1414  // объем
1415  if (getSize()) {
1416    size = getSize();
1417    name = `/assets/img/renders/${type}_${size}.png`;
1418  }
1419
1420  // секции
1421  if (getSections()) {
1422    sections = getSections();
1423    name = `/assets/img/renders/${type}_${size}_${sections}r.png`;
1424  }
1425
1426  // трк
1427  if (getTrk()) {
1428    trk = getTrk();
1429    name = `/assets/img/renders/${type}_${size}_${sections}r_${trk}k.png`;
1430  }
1431
1432  if (getTrk() == 2 && getSide()) {
1433    side = getSide();
1434    name = `/assets/img/renders/${type}_${size}_${sections}r_${trk}.${side}k.png`;
1435  }
1436
1437  // скоростная выдача
1438  if (getFast()) {
1439    fast = getFast() > 0 ? "f" : "";
1440
1441    if (fast) {
1442      // console.log(fast);
1443      name = `/assets/img/renders/${type}_${size}_${sections}r_${trk}k_${fast}.png`;
1444
1445      if (getTrk() == 2) {
1446        side = getSide();
1447        name = `/assets/img/renders/${type}_${size}_${sections}r_${trk}.${side}k_${fast}.png`;
1448      }
1449    }
1450  }
1451
1452  // console.log(name);
1453  return name;
1454}
1455
1456//функция подстановки имени изображения
1457function pastImageName() {
1458  // console.log("*************** Старт функции pastImageName ***************");

1459  const imageName = getImageName();
1460  const images = document.querySelectorAll(".popup__type-img");
1461  images.forEach((item) => {
1462    item.querySelector("img").src = imageName;
1463  });
1464}
1465
1466// -------------------------------------- end image name --------------------------
1467//#endregion
1468
1469// -------------------------------------------- start range-slider: ---------------------------------------------
1470//#region range-slider
1471const slider = document.querySelector(".popup__range-slider");
1472if (slider) {
1473  rangeSliderInit(slider, 5, 5, 60);
1474}
1475
1476function rangeSliderInit(slider, gap, minRange, maxRange) {
1477  // console.log('**************** Старт функции rangeSliderInit ***************");');
1478  const rangeSlider = slider.querySelector(".range-slider");
1479
1480  // рендж инпуты:
1481  const rangeInputs = slider.querySelectorAll(".range-inputs-wrap input");
1482  const rangeInputMax = slider.querySelector(".max-range");
1483
1484  // основные параметры:
1485
1486  rangeInputMax.min = minRange;
1487  rangeInputMax.max = maxRange;
1488  rangeInputMax.step = gap;
1489  rangeInputMax.value = minRange;
1490
1491  rangeInputs.forEach((input) => {
1492    input.addEventListener("input", (e) => {
1493      const type = getType();
1494      const sections = getSections();
1495      //получаем значения из текстовых инпутов:
1496      let minVal = minRange;
1497      let maxVal = parseInt(input.value);
1498      let value = parseInt(input.value);
1499      // ограничиваем значение max инпута:
1500      if (type == "Cont" && value >= 40) {
1501        input.value = 40;
1502        value = 40;
1503        maxVal = 40;
1504      }
1505      if (sections > 2 && value <= 25) {
1506        input.value = 25;
1507        value = 25;
1508        maxVal = 25;
1509      } else {
1510        if (maxVal >= maxRange) {
1511          rangeInputMax.value = maxRange;
1512          maxVal = maxRange;
1513        }
1514      }
1515
1516      // console.log("parseInt(input.value)", value);
1517      if (maxVal <= minVal) {
1518        value = minRange;
1519        maxVal = minRange;
1520      }
1521
1522      rangeSlider.style.right = `${100 - ((maxVal - minRange) * 100) / (maxRange - minRange)}%`;
1523
1524      const rangeNumbers = document.querySelectorAll(".popup__range-number");
1525
1526      if (rangeNumbers.length) {
1527        rangeNumbers.forEach((item) => {
1528          item.classList.remove("popup__range-number_active");
1529        });
1530
1531        rangeNumbers.forEach((item) => {
1532          if (item.innerHTML.trim() == value) {
1533            item.classList.add("popup__range-number_active");
1534          }
1535        });
1536      }
1537
1538      setUrlQueryParam("volume", value);
1539    });
1540  });
1541}
1542// -------------------------------------------- end range-slider: ---------------------------------------------
1543//#endregion
1544
1545// -------------------------------------------- start setCurrentParams: ---------------------------------------------
1546//#region setCurrentParams
1547// функция установки текущих значений фильтров из urlParams:
1548function setCurrentParams(arr) {
1549  // console.log("*************** Старт функции setCurrentParams ***************"); // имя функции
1550  // console.log(arr);
1551  let urlParams = new URLSearchParams(window.location.search);
1552
1553  if (!arr) {
1554    window.history.pushState({}, document.title, window.location.pathname);
1555    urlParams = new URLSearchParams(window.location.search);
1556    // console.log("сброс фильтров");
1557  }
1558
1559  // шаг 1
1560
1561  // шаг 2
1562  const tempBtns = document.querySelectorAll(".popup__btn_temp");
1563  if (tempBtns && arr.filter((item) => item.name === "temperature").length) {
1564    tempBtns.forEach((item) => {
1565      if (arr.filter((el) => el.name === "temperature")[0].value === item.dataset.value) {
1566        item.classList.add("popup__btn_temp_active");
1567        nextStepBtnTwo.classList.remove("btn_disabled");
1568      }
1569    });
1570  }
1571
1572  const insulationBtn = document.querySelector(".checkbox__input[data-name='insulation']");
1573  // console.log(insulationBtn);
1574
1575  if (insulationBtn && arr.filter((item) => item.name === "insulation").length) {
1576    insulationBtn.checked = true;
1577  }
1578
1579  const heaterBtn = document.querySelector(".checkbox__input[data-name='heater']");
1580
1581  if (arr.filter((item) => item.name === "heater").length) {
1582    heaterBtn.checked = true;
1583    heaterBtn.closest(".checkbox").classList.remove("checkbox_disabled");
1584  }
1585
1586  // шаг 3
1587  const typeBtns = document.querySelectorAll(".popup__type-item");
1588  if (typeBtns && arr.filter((item) => item.name === "type").length) {
1589    typeBtns.forEach((item) => {
1590      if (arr.filter((el) => el.name === "type")[0].value === item.dataset.value) {
1591        item.classList.add("popup__type-item_active");
1592        nextStepBtnThree.classList.remove("btn_disabled");
1593      }
1594    });

1595  }
1596
1597  // шаг 4
1598  const volumeBtn = document.querySelectorAll(".popup__range");
1599  if (volumeBtn && arr.filter((item) => item.name === "volume").length) {
1600    const slider = document.querySelector(".popup__range-slider");
1601    volumeBtn.value = arr.filter((el) => el.name === "volume")[0].value;
1602    rangeSliderUpdate(slider, volumeBtn.value);
1603  }
1604
1605  // шаг 5
1606  const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
1607  const fuels = [];
1608  fuelBtns.forEach((item) => {
1609    fuels.push(item.dataset.name);
1610  });
1611
1612  if (fuelBtns.length) {
1613    fuelBtns.forEach((item) => {
1614      if (arr.filter((el) => el.name === item.dataset.name).length) {
1615        item.checked = true;
1616      }
1617    });
1618  }
1619
1620  const sectionsBtns = document.querySelectorAll(".radio__input[data-name='sections']");
1621  if (sectionsBtns && arr.filter((item) => item.name === "sections").length) {
1622    sectionsBtns.forEach((item) => {
1623      if (arr.filter((el) => el.name === "sections")[0].value === item.dataset.value) {
1624        item.checked = true;
1625        nextStepBtnFive.classList.remove("btn_disabled");
1626
1627        if (arr.filter((el) => el.name === "volume")[0].value == "S") {
1628          sectionsBtns.forEach((el) => {
1629            if (el.dataset.value > 2) {
1630              el.closest(".radio").classList.remove("radio_disabled");
1631            }
1632          });
1633        }
1634      }
1635    });
1636  }
1637
1638  // шаг 6
1639  const trkBtns = document.querySelectorAll(".radio__input[name='trk']");
1640
1641  if (trkBtns && arr.filter((item) => item.name === "trk").length) {
1642    trkBtns.forEach((item) => {
1643      if (arr.filter((el) => el.name === "trk")[0].value === item.dataset.value) {
1644        item.checked = true;
1645        nextStepBtnSix.classList.remove("btn_disabled");
1646      }
1647    });
1648  }
1649
1650  const sideBtns = document.querySelectorAll(".radio__input[name='side']");
1651
1652  if (sideBtns && arr.filter((item) => item.name === "side").length) {
1653    sideBtns.forEach((item) => {
1654      if (arr.filter((el) => el.name === "side")[0].value === item.dataset.value) {
1655        item.checked = true;
1656        sideBtns.forEach((el) => {
1657          el.closest(".radio").classList.remove("radio_disabled");
1658        });
1659        nextStepBtnSix.classList.remove("btn_disabled");
1660      }
1661    });
1662  }
1663
1664  // шаг 7
1665  const fastBtns = document.querySelectorAll(".radio__input[name='fast']");
1666
1667  if (fastBtns && arr.filter((item) => item.name === "fast").length) {
1668    fastBtns.forEach((item) => {
1669      if (arr.filter((el) => el.name === "fast")[0].value === item.dataset.value) {
1670        item.checked = true;
1671      }
1672    });
1673  }
1674}
1675// -------------------------------------------- end setCurrentParams: ---------------------------------------------
1676//#endregion
1677
1678// -------------------------------------------- start rangeSliderUpdate: ---------------------------------------------
1679//#region rangeSliderUpdate
1680//функция установки значения рэндж слайдера:
1681function rangeSliderUpdate(slider, value) {
1682  // console.log("*************** Старт функции rangeSliderUpdate ***************"); // имя функции
1683  const rangeSlider = slider.querySelector(".range-slider");
1684  const rangeInputMax = slider.querySelector(".max-range");
1685
1686  // let minVal = 0;
1687  let maxVal = value;
1688  let minRange = rangeInputMax.min;
1689  let maxRange = rangeInputMax.max;
1690
1691  // присваиваем значения инпутам:
1692  rangeInputMax.value = value;
1693
1694  // вычисляем положение рендж инпутов:
1695  rangeSlider.style.right = `${100 - ((maxVal - minRange) * 100) / (maxRange - minRange)}%`;
1696
1697  const rangeNumbers = document.querySelectorAll(".popup__range-number");
1698
1699  if (rangeNumbers.length) {
1700    rangeNumbers.forEach((item) => {
1701      item.classList.remove("popup__range-number_active");
1702    });
1703
1704    rangeNumbers.forEach((item) => {
1705      if (item.innerHTML.trim() == value) {
1706        item.classList.add("popup__range-number_active");
1707      }
1708    });
1709  }
1710}
1711// -------------------------------------------- end rangeSliderUpd

1711ate: ---------------------------------------------
1712//#endregion
1713
1714
1715// ---------------------- start Формирование последнего шага -----------------
1716//#region result
1717if (resultCalcBtn) {
1718  resultCalcBtn.addEventListener("click", function (e) {
1719    // console.log("click");
1720    const finalImg = document.querySelector(".popup__result-img").querySelector("img");
1721    // console.log(finalImg);
1722    const img = getImageName();
1723    finalImg.src = img;
1724
1725    // [
1726    //   {
1727    //     "name": "temperature",
1728    //     "value": "-60"
1729    //   },
1730    //   {
1731    //     "name": "insulation",
1732    //     "value": "1"
1733    //   },
1734    //   {
1735    //     "name": "heater",
1736    //     "value": "1"
1737    //   },
1738    //   {
1739    //     "name": "type",
1740    //     "value": "Close"
1741    //   },
1742    //   {
1743    //     "name": "volume",
1744    //     "value": "60"
1745    //   },
1746    //   {
1747    //     "name": "sections",
1748    //     "value": "4"
1749    //   },
1750    //   {
1751    //     "name": "diesel",
1752    //     "value": "1"
1753    //   },
1754    //   {
1755    //     "name": "trk",
1756    //     "value": "4"
1757    //   },
1758    //   {
1759    //     "name": "petrol-92",
1760    //     "value": "1"
1761    //   },
1762    //   {
1763    //     "name": "petrol-95",
1764    //     "value": "1"
1765    //   },
1766    //   {
1767    //     "name": "other",
1768    //     "value": "1"
1769    //   },
1770    //   {
1771    //     "name": "fast",
1772    //     "value": "2"
1773    //   }
1774    // ]
1775
1776    // e.preventDefault();
1777    const params = parseUrlQuery();
1778    // console.log(params);
1779    let temperature = "";
1780    if (params.find((param) => param.name == "temperature")) {
1781      temperature = params.find((param) => param.name == "temperature")["value"];
1782    }
1783
1784    let insulations = "";
1785    if (params.find((param) => param.name == "insulations")) {
1786      insulations = params.find((param) => param.name == "insulations")["value"];
1787    }
1788
1789    let heater = "";
1790    if (params.find((param) => param.name == "heater")) {
1791      heater = params.find((param) => param.name == "heater")["value"];
1792    }
1793
1794    let type = "";
1795    if (params.find((param) => param.name == "type")) {
1796      type = params.find((param) => param.name == "type")["value"];
1797    }
1798
1799    let volume = "";
1800    if (params.find((param) => param.name == "volume")) {
1801      volume = params.find((param) => param.name == "volume")["value"];
1802    }
1803
1804    let sections = "";
1805    if (params.find((param) => param.name == "sections")) {
1806      sections = params.find((param) => param.name == "sections")["value"];
1807    }
1808
1809    let diesel = "";
1810    if (params.find((param) => param.name == "diesel")) {
1811      diesel = params.find((param) => param.name == "diesel")["value"];
1812    }
1813
1814    let trk = "";
1815    if (params.find((param) => param.name == "trk")) {
1816      trk = params.find((param) => param.name == "trk")["value"];
1817    }
1818
1819    let petrol92 = "";
1820    if (params.find((param) => param.name == "petrol-92")) {
1821      petrol92 = params.find((param) => param.name == "petrol-92")["value"];
1822    }
1823
1824    let petrol95 = "";
1825    if (params.find((param) => param.name == "petrol-95")) {
1826      petrol95 = params.find((param) => param.name == "petrol-95")["value"];
1827    }
1828
1829    let other = "";
1830    if (params.find((param) => param.name == "other")) {
1831      other = params.find((param) => param.name == "other")["value"];
1832    }
1833
1834    let fast = "";
1835    if (params.find((param) => param.name == "fast")) {
1836      fast = params.find((param) => param.name == "fast")["value"];
1837    }
1838
1839    let sectionVolume = parseInt(volume) / parseInt(sections);
1840    let textVolume = "";
1841    sectionVolume = Math.floor(sectionVolume * 100) / 100;
1842
1843    let titleSections = "";
1844    switch (sections) {
1845      case "1":
1846        titleSections = "односекционная";
1847        break;
1848      case "2":
1849        titleSections = "двухсекционная";
1850        textVolume = `(${sectionVolume}+${sectionVolume})`;
1851        break;
1852      case "3":
1853        titleSections = "трехсекционная";

1854        textVolume = `(${sectionVolume}+${sectionVolume}+${sectionVolume})`;
1855        break;
1856      case "4":
1857        titleSections = "четырехсекционная";
1858        textVolume = `(${sectionVolume}+${sectionVolume}+${sectionVolume}+${sectionVolume})`;
1859        break;
1860    }
1861
1862    let textSections = "";
1863    switch (sections) {
1864      case "1":
1865        textSections = "односекционный";
1866        break;
1867      case "2":
1868        textSections = "двухсекционный";
1869        break;
1870      case "3":
1871        textSections = "трехсекционный";
1872        break;
1873      case "4":
1874        textSections = "четырехсекционный";
1875        break;
1876    }
1877
1878    let titleType = "";
1879    switch (type) {
1880      case "Open":
1881        titleType = "окрытом";
1882        break;
1883      case "Close":
1884        titleType = "закрытом";
1885        break;
1886      case "Cont":
1887        titleType = "контейнером";
1888        break;
1889    }
1890
1891    let textBarrier = parseInt(sections) - 1;
1892
1893    // console.log(params);
1894
1895    //  TODO надо сформировать формирование цены, описания и характеристик, они будут использоваться в файле pdf и в формах обратной связи
1896
1897    // TODO посчитать стоимость и записать в переменную:
1898    const finalPrice = document.querySelector(".popup__result-price");
1899    const price = setPrice();
1900    console.log(price);
1901    finalPrice.innerHTML = `${price} руб.`;
1902
1903    //TODO добавить опитсание:
1904    const finalDesc = document.querySelector(".popup__result-desc");
1905    finalDesc.innerHTML = `Внутриведомственная ${titleSections} АЗС в ${titleType} исполнении общим объёмом ${volume}м3`;
1906//TODO добавить характеристики:
1907const finalParams = document.querySelector(".popup__result-params");
1908finalParams.innerHTML = `Резервуар:наземный горизонтальный двустенный ${textSections} резервуар объёмом ${volume} ${textVolume} м. куб. из стали Ст34 толщиной 4/4мм;<br>Межстенное пространство герметизировано, заполненно азотом, установлена система контроля межстенного пространства с сиреной; <br>Люк-лаз: 700мм с крышкой 800мм - ${sections}шт. <br>Перегородка: двустенная перегородка (Сталь Ст3 4/4мм) - ${textBarrier}шт. <br>Страховочные рымы: есть <br>Ложементы (опоры): есть <br>Лестница с площадкой обслуживания: есть <br>Технологический отсек: Закрытый, с поддоном сбора проливов <br>ТРК: однорукавная «GP» с однострочным отсчётным устройством, 50л/мин - ${trk} шт.(возможна установка других на 50-80л/мин) <br>Узел наполнения;<br>Узел выдачи;<br>Датчик уровня: ПМП-185 с сиреной ВС-5 - ${sections} комплекта <br>Сигнализатор: ВС-К-500, дисплейный <br>Система скоростной заправки (линия выдачи топлива в АТЗ);<br>Технологические линии: (наполнения, выдачи, деаэрации, замера и обесшламливания) - ${sections} комплекта <br>Освещение и щит силовой в исполнении Ех: есть <br>Система автоматического пожаротушения; <br>Наружное покрытие: грунт=эмаль ЭКОМАСТ <br>Молниеотвод: есть <br>Надпись “Огнеопасно”: 2 шт. <br>Метрошок: МШС 3,5 (в приклад) <br>
1909Электрический щит управления (Ex) – 1 шт.<br>
1910Ящик для хранения арбитражных проб с замком – 1 шт.<br>
1911Калибровочная таблица (геометрический метод).<br>
1912Паспорт изделия с пакетом разрешительной документацией - 1 шт.<br>
1913Максимально потребляемая мощность – Ð

1913½Ðµ более 7,0 кВт.<br>
1914Предел допускаемой погрешности ТРК – 0,25%.`;
1915
1916    // Габариты, мм: 5000х2200х2650 <br>
1917    // Масса, кг: 3700
1918
1919    createCalcFile();
1920  });
1921
1922
1923  async function createCalcFile() {
1924    // console.log("******************** Старт функции createCalcFile **********************");
1925
1926    const params = parseUrlQuery();
1927    const img = getImageName();
1928    const finalPrice = document.querySelector(".popup__result-price");
1929    const finalDesc = document.querySelector(".popup__result-desc");
1930    const finalParams = document.querySelector(".popup__result-params");
1931    const downlodBtn = document.querySelector(".popup__result-download");
1932    downlodBtn.classList.add("btn_disabled");
1933
1934    
1935    // const formattedNumber = String($newNumber).padStart(5, '0');
1936    let formData = new FormData();
1937    formData.append("image", img);
1938    // formData.append("numberCalc", formattedNumber);
1939    formData.append("price", finalPrice.innerHTML);
1940    formData.append("description", finalDesc.innerHTML);
1941    formData.append("characteristics", finalParams.innerHTML);
1942
1943    let response = await fetch("/backend/create-pdf.php", {
1944      method: "POST",
1945      body: formData,
1946    });
1947
1948    if (response.ok) {
1949      downlodBtn.classList.remove("btn_disabled");
1950    } else {
1951      downlodBtn.classList.add("btn_disabled");
1952    }
1953
1954        downlodBtn.addEventListener("click", async function (e) {
1955       // Отправка AJAX-запроса
1956       try {
1957          // Отправка запроса с помощью Fetch API
1958          const response = await fetch('/backend/post-mail.php', {
1959              method: 'POST',
1960              body: JSON.stringify({
1961                type: 'sendFile',
1962              }),
1963          });
1964
1965          if (response.ok) {
1966              const result = await response.text();
1967              console.log('Файл успешно отправлен:', result);
1968          } else {
1969            console.log('Произошла ошибка при отправке файла.');
1970          }
1971
1972        } catch (error) {
1973          console.log('Произошла ошибка при отправке файла:', error);
1974        }
1975    })
1976  }
1977}
1978// ---------------------- end Формирование последнего шага -----------------
1979//#endregion
1980
1981// -------------------------------------------- start вспомгательные функции: ---------------------------------------------
1982//#region functions
1983// разблокировка подогоревателя при выборе утеплителя:
1984const insulationBtn = document.querySelector(".insulation");
1985const heaterBtn = document.querySelector(".heater");
1986if (insulationBtn && heaterBtn) {
1987  insulationBtn.addEventListener("click", function (e) {
1988    // console.log("click");
1989
1990    if (insulationBtn.querySelector("input").checked) {
1991      heaterBtn.classList.remove("checkbox_disabled");
1992    } else {
1993      heaterBtn.classList.add("checkbox_disabled");
1994      heaterBtn.querySelector("input").checked = false;
1995      delUrlQueryParam("heater");
1996    }
1997  });
1998}
1999
2000// функция показа ошибки:
2001function showError(popup) {
2002  const error = popup.querySelector(".popup__error-text");
2003  error.classList.add("popup__error-text_active");
2004  setTimeout(function () {
2005    error.classList.remove("popup__error-text_active");
2006  }, 2000);
2007}
2008
2009// функция показа предупреждения:
2010function showWarning(popup) {
2011  const desc = popup.querySelector(".popup__info-text");
2012  if (desc) {
2013    desc.classList.add("popup__info-text_active");
2014    setTimeout(function () {
2015      desc.classList.remove("popup__info-text_active");
2016    }, 2000);
2017  }
2018}
2019
2020const btnTemp = document.querySelectorAll(".popup__btn_temp");
2021if (btnTemp.length) {
2022  const popup = btnTemp[0].closest(".popup");
2023  const nextBtn = popup.querySelector(".popup__next-btn");
2024  const recommendation = popup.querySelector(".popup__recommended-wrap");

2025  const insulationBtn = popup.querySelector(".checkbox__input[data-name='insulation']");
2026  const heaterBtn = popup.querySelector(".checkbox__input[data-name='heater']");
2027
2028  btnTemp.forEach((btn) => {
2029    btn.addEventListener("click", function () {
2030      // console.log("click");
2031      btnTemp.forEach((item) => {
2032        item.classList.remove("popup__btn_temp_active");
2033      });
2034
2035      btn.classList.add("popup__btn_temp_active");
2036      nextBtn.classList.remove("btn_disabled");
2037
2038      if (btn.dataset.value < -40) {
2039        recommendation.style.display = "grid";
2040      } else {
2041        recommendation.style.display = "none";
2042        delUrlQueryParam("insulation");
2043        insulationBtn.checked = false;
2044        delUrlQueryParam("heater");
2045        heaterBtn.checked = false;
2046      }
2047    });
2048  });
2049}
2050
2051//выбор параметров и запись / удаление их в строке поиска.
2052const calcBtns = document.querySelectorAll("[data-calc-btn]");
2053if (calcBtns.length) {
2054  calcBtns.forEach((btn) => {
2055    btn.addEventListener("click", function (e) {
2056      // console.log("click");
2057
2058      if (btn.closest(".radio_disabled") || btn.closest(".checkbox_disabled")) {
2059        e.preventDefault();
2060        const size = getSize();
2061        if ((btn.dataset.value == "4" || btn.dataset.value == "3") && size == "S") {
2062          showWarning(btn.closest(".popup"));
2063        }
2064      } else {
2065        const name = btn.dataset.name;
2066        const value = btn.dataset.value;
2067
2068        if (btn.type == "checkbox") {
2069          if (btn.checked) {
2070            setUrlQueryParam(name, value);
2071          } else {
2072            delUrlQueryParam(name);
2073          }
2074        } else {
2075          setUrlQueryParam(name, value);
2076        }
2077      }
2078    });
2079  });
2080}
2081
2082// подсветка подсказки при клике на не активные кнопки:
2083const checkbox = document.querySelectorAll(".checkbox");
2084if (checkbox.length) {

2085  checkbox.forEach((item) => {
2086    item.addEventListener("click", function (e) {
2087      // console.log("click");
2088      if (item.classList.contains("checkbox_disabled")) {
2089        e.preventDefault();
2090        const popup = item.closest(".popup");
2091        showWarning(popup);
2092      }
2093    });
2094  });
2095}
2096
2097function setSideFromTrk() {
2098  // console.log("******************** Старт функции setSideFromTrk **********************");
2099  const trk = getTrk();
2100  const type = getType();
2101  const oneSideBtn = document.querySelector(".radio__input[data-name='side'][data-value='1']");
2102  const twoSideBtn = document.querySelector(".radio__input[data-name='side'][data-value='2']");
2103  const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
2104  const sideBtns = document.querySelectorAll(".checkbox__input[name='side']");
2105  const trkBtns = Array.from(document.querySelectorAll("[data-calc-btn][data-name='trk']"));
2106  const size = getSize();
2107  let numberOfChecked = getCheckedFuels();
2108
2109  if (trk == 1) {
2110    oneSideBtn.closest(".radio").classList.add("radio_disabled");
2111    twoSideBtn.closest(".radio").classList.add("radio_disabled");
2112    oneSideBtn.checked = true;
2113    delUrlQueryParam("side");
2114  }
2115
2116  if (trk == 2) {
2117    oneSideBtn.closest(".radio").classList.remove("radio_disabled");
2118    twoSideBtn.closest(".radio").classList.remove("radio_disabled");
2119    oneSideBtn.checked = true;
2120    setUrlQueryParam("side", "1");
2121  }
2122
2123  if (trk > 2) {
2124    oneSideBtn.closest(".radio").classList.add("radio_disabled");
2125    twoSideBtn.closest(".radio").classList.add("radio_disabled");
2126    twoSideBtn.checked = true;
2127    delUrlQueryParam("side");
2128  }
2129
2130  if (type == "Cont") {
2131    oneSideBtn.closest(".radio").classList.add("radio_disabled");
2132    twoSideBtn.closest(".radio").classList.add("radio_disabled");
2133    oneSideBtn.checked = true;
2134    setUrlQueryParam("side", "1");
2135  }
2136
2137  // если это контейнер:
2138  if (type == "Cont") {
2139    trkBtns.forEach((item) => {
2140      if (item.dataset.value > 2) {
2141        item.closest(".radio").classList.add("radio_disabled");
2142        item.checked = false;
2143      }
2144    });
2145    sideBtns.forEach((item) => {
2146      item.closest(".radio").classList.add("radio_disabled");
2147      item.checked = false;
2148    });
2149  }
2150
2151  // если это не контейнер:
2152  if (type != "Cont") {
2153    if (numberOfChecked == 2) {
2154      trkBtns.forEach((item) => {
2155        if (item.dataset.value < 2) {
2156          item.closest(".radio").classList.add("radio_disabled");
2157        }
2158      });
2159    } else if (numberOfChecked == 3) {
2160      trkBtns.forEach((item) => {
2161        if (item.dataset.value < 3) {
2162          item.closest(".radio").classList.add("radio_disabled");
2163        }
2164      });
2165    } else if (numberOfChecked == 4) {
2166      trkBtns.forEach((item) => {
2167        if (item.dataset.value < 4) {
2168          item.closest(".radio").classList.add("radio_disabled");
2169        }
2170      });
2171    } else {
2172      trkBtns.forEach((item) => {
2173        item.closest(".radio").classList.remove("radio_disabled");
2174      });
2175    }
2176  }
2177}
2178
2179function setSections() {
2180  // console.log("******************** Старт функции setSections **********************");
2181  const size = getSize();
2182  const type = getType();
2183  const fuels = getFuels();

2184  const side = getSide();
2185  const sections = getSections();
2186  const trkBtns = document.querySelectorAll(".radio__input[name='trk']");
2187  const sideBtns = document.querySelectorAll(".radio__input[name='side']");
2188  const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
2189  const sectionsBtns = document.querySelectorAll(".radio__input[data-name='sections']");
2190  const desc = document.querySelector(".popup__info-wrap_section");
2191  const sectionInputOne = sectionsBtns.entries().find((el) => el[1].dataset.value == "1");
2192  const sectionInputTwo = sectionsBtns.entries().find((el) => el[1].dataset.value == "2");
2193  const sectionInputThree = sectionsBtns.entries().find((el) => el[1].dataset.value == "3");
2194  const sectionInputFour = sectionsBtns.entries().find((el) => el[1].dataset.value == "4");
2195  const radioSectionOne = sectionInputOne[1].closest(".radio");
2196  const radioSectionTwo = sectionInputTwo[1].closest(".radio");
2197  const radioSectionThree = sectionInputThree[1].closest(".radio");
2198  const radioSectionFour = sectionInputFour[1].closest(".radio");

2199  const trkInputOne = trkBtns.entries().find((el) => el[1].dataset.value == "1");
2200  const trkInputTwo = trkBtns.entries().find((el) => el[1].dataset.value == "2");
2201  const trkInputThree = trkBtns.entries().find((el) => el[1].dataset.value == "3");
2202  const trkInputFour = trkBtns.entries().find((el) => el[1].dataset.value == "4");
2203  const radioTrkOne = trkInputOne[1].closest(".radio");
2204  const radioTrkTwo = trkInputTwo[1].closest(".radio");
2205  const radioTrkThree = trkInputThree[1].closest(".radio");
2206  const radioTrkFour = trkInputFour[1].closest(".radio");
2207  let numberOfChecked = getCheckedFuels();
2208
2209  if (numberOfChecked) {
2210    nextStepBtnFive.classList.remove("btn_disabled");
2211  } else {
2212    nextStepBtnFive.classList.add("btn_disabled");
2213  }
2214
2215  sectionsBtns.forEach((item) => {
2216    item.closest(".radio").classList.remove("radio_disabled");
2217  });
2218
2219  fuelBtns.forEach((item) => {
2220    item.closest(".checkbox").classList.remove("checkbox_disabled");
2221  });
2222
2223  trkBtns.forEach((el) => {
2224    el.closest(".radio").classList.remove("radio_disabled");
2225  });
2226  desc.style.display = "none";
2227
2228  sideBtns.forEach((el) => {
2229    el.closest(".radio").classList.remove("radio_disabled");
2230  });
2231
2232  // если это маленькая бочка то можно разделить только на 2 секции, трк до 4-х:
2233  if (size == "S" || type == "Cont") {
2234    // console.log(`size == "S"`);
2235    desc.style.display = "grid";
2236    sectionsBtns.forEach((item) => {
2237      if (item.dataset.value > 2) {
2238        item.closest(".radio").classList.add("radio_disabled");
2239      }
2240      if (item.checked == true && item.dataset.value > 2) {
2241        item.checked = false;
2242        sectionsBtns.forEach((el) => {
2243          if (el.dataset.value == 2) {
2244            el.checked = true;
2245          }
2246        });
2247      }
2248    });
2249
2250    if (numberOfChecked == 1) {
2251      if (!sections) {
2252        sectionInputOne[1].checked = true;
2253        setUrlQueryParam("sections", 1);
2254      }
2255      setUrlQueryParam("trk", 1);
2256      delUrlQueryParam("side");
2257      trkInputOne[1].checked = true;
2258      sideBtns.forEach((el) => {
2259        el.closest(".radio").classList.add("radio_disabled");
2260        el.checked = false;
2261      });
2262    }
2263
2264    if (numberOfChecked == 2) {
2265      if (!sections || sections < 2) {
2266        sectionInputTwo[1].checked = true;
2267        setUrlQueryParam("sections", 2);
2268      }
2269      radioSectionOne.classList.add("radio_disabled");
2270      trkInputTwo[1].checked = true;
2271      radioTrkOne.classList.add("radio_disabled");
2272      setUrlQueryParam("trk", 2);
2273      setUrlQueryParam("side", 1);
2274
2275      fuelBtns.forEach((item) => {
2276        if (item.checked == false) {
2277          item.closest(".checkbox").classList.add("checkbox_disabled");
2278        }
2279      });
2280    }
2281
2282    if (numberOfChecked > 2) {
2283      fuelBtns.forEach((item) => {
2284        if (item.checked == false) {
2285          item.closest(".checkbox").classList.remove("checkbox_disabled");
2286        }
2287        delUrlQueryParam(item.getAttribute("data-name"));
2288      });
2289    }
2290  }
2291
2292  // если это не контейнер и не мальнекая бочка:
2293  if (size != "S" && type != "Cont") {
2294    // console.log(`size != "S" && type != "Cont"`);
2295
2296    if (numberOfChecked == 1) {
2297      if (!sections) {
2298        sectionInputOne[1].checked = true;
2299        setUrlQueryParam("sections", 1);
2300      }
2301      trkInputOne[1].checked = true;
2302      setUrlQueryParam("trk", 1);
2303      delUrlQueryParam("side");
2304
2305      sideBtns.forEach((el) => {
2306        el.closest(".radio").classList.remove("radio_disabled");
2307        if (el.dataset.value == 1) {
2308          el.checked = true;
2309        }
2310      });
2311    }
2312
2313    if (numberOfChecked == 2) {
2314      if (!sections || sections < 2) {
2315        sectionInputTwo[1].checked = true;
2316        setUrlQueryParam("sections", 2);
2317      }
2318      radioSectionOne.classList.add("radio_disabled");
2319      trkInputTwo[1].checked = true;
2320      setUrlQueryParam("trk", 2);
2321      setUrlQueryParam("side", 1);
2322
2323      sideBtns.forEach((el) => {
2324        el.closest(".radio").classList.remove("radio_disabled");
2325        if (el.dataset.value == 1) {
2326          el.checked = true;
2327        }
2328      });
2329    }
2330
2331    if (numberOfChecked == 3) {
2332      if (!sections || sections < 3) {
2333        sectionInputThree[1].checked = true;
2334        setUrlQueryParam("sections", 3);
2335      }
2336      radioSectionOne.classList.add("radio_disabled");
2337      radioSectionTwo.classList.add("radio_disabled");
2338      trkInputThree[1].checked = true;
2339      setUrlQueryParam("trk", 3);
2340      delUrlQueryParam("side");
2341
2342      sideBtns.forEach((el) => {
2343        el.closest(".radio").classList.add("radio_disabled");
2344        if (el.dataset.value == 2) {
2345          el.checked = true;
2346        }
2347      });
2348    }
2349
2350    if (numberOfChecked == 4) {
2351      if (!sections || sections < 4) {
2352        sectionInputFour[1].checked = true;
2353        setUrlQueryParam("sections", 4);
2354      }
2355      radioSectionOne.classList.add("radio_disabled");
2356      radioSectionTwo.classList.add("radio_disabled");
2357      radioSectionThree.classList.add("radio_disabled");
2358      trkInputFour[1].checked = true;
2359      setUrlQueryParam("trk", 4);
2360      delUrlQueryParam("side");
2361
2362      sideBtns.forEach((el) => {
2363        el.closest(".radio").classList.add("radio_disabled");
2364        if (el.dataset.value == 2) {
2365          el.checked = true;
2366        }
2367      });
2368    }
2369  }
2370
2371  // если это средний контейнер:
2372  if (size != "S" && type == "Cont") {
2373    // console.log(`size != "S" && type == "Cont"`);
2374
2375    sideBtns.forEach((el) => {
2376      el.closest(".radio").classList.add("radio_disabled");
2377      if (el.dataset.value == 1) {
2378        el.checked = true;
2379      }
2380    });

2381
2382    if (numberOfChecked == 1) {
2383      if (!sections) {
2384        sectionInputOne[1].checked = true;
2385        setUrlQueryParam("sections", 1);
2386      }
2387      setUrlQueryParam("trk", 1);
2388      delUrlQueryParam("side");
2389      trkInputOne[1].checked = true;
2390      sideBtns.forEach((el) => {
2391        el.closest(".radio").classList.add("radio_disabled");
2392        el.checked = false;
2393      });
2394    }
2395
2396    if (numberOfChecked == 2) {
2397      if (!sections || sections < 2) {
2398        sectionInputTwo[1].checked = true;
2399        setUrlQueryParam("sections", 2);
2400      }
2401      radioSectionOne.classList.add("radio_disabled");
2402      trkInputTwo[1].checked = true;
2403      radioTrkOne.classList.add("radio_disabled");
2404      setUrlQueryParam("trk", 2);
2405      setUrlQueryParam("side", 1);
2406
2407      fuelBtns.forEach((item) => {
2408        if (item.checked == false) {
2409          item.closest(".checkbox").classList.add("checkbox_disabled");
2410        }
2411      });
2412    }
2413
2414    if (numberOfChecked > 2) {
2415      fuelBtns.forEach((item) => {
2416        if (item.checked == false) {
2417          item.closest(".checkbox").classList.remove("checkbox_disabled");
2418        }
2419        delUrlQueryParam(item.getAttribute("data-name"));
2420      });
2421    }
2422  }
2423
2424  // если это малый контейнер:
2425  if (size == "S" && type == "Cont") {
2426    // console.log(`size == "S" && type == "Cont"`);
2427
2428    sideBtns.forEach((el) => {
2429      el.closest(".radio").classList.add("radio_disabled");
2430      if (el.dataset.value == 1) {
2431        el.checked = true;
2432      }
2433    });
2434
2435    if (numberOfChecked == 1) {
2436      if (!sections) {
2437        sectionInputOne[1].checked = true;
2438        setUrlQueryParam("sections", 1);
2439      }
2440      setUrlQueryParam("trk", 1);
2441      delUrlQueryParam("side");
2442      trkInputOne[1].checked = true;
2443      sideBtns.forEach((el) => {
2444        el.closest(".radio").classList.add("radio_disabled");
2445        el.checked = false;
2446      });
2447    }
2448
2449    if (numberOfChecked == 2) {
2450      if (!sections || sections < 2) {
2451        sectionInputTwo[1].checked = true;
2452        setUrlQueryParam("sections", 2);
2453      }
2454      radioSectionOne.classList.add("radio_disabled");
2455      trkInputTwo[1].checked = true;
2456      radioTrkOne.classList.add("radio_disabled");
2457      setUrlQueryParam("trk", 2);
2458      setUrlQueryParam("side", 1);
2459
2460      fuelBtns.forEach((item) => {
2461        if (item.checked == false) {
2462          item.closest(".checkbox").classList.add("checkbox_disabled");
2463        }
2464      });
2465    }
2466
2467    if (numberOfChecked > 2) {
2468      fuelBtns.forEach((item) => {
2469        if (item.checked == false) {
2470          item.closest(".checkbox").classList.remove("checkbox_disabled");
2471        }
2472        delUrlQueryParam(item.getAttribute("data-name"));
2473      });
2474    }
2475  }
2476
2477  // блокировка количества видов топлива в зависимости от объема:
2478  numberOfChecked = getCheckedFuels();
2479
2480  if (size == "S" && numberOfChecked == 2) {
2481    fuelBtns.forEach((item) => {
2482      if (item.checked == false) {
2483        item.closest(".checkbox").classList.add("checkbox_disabled");
2484      }
2485    });
2486  }
2487  if (type == "Cont" && numberOfChecked == 2) {
2488    fuelBtns.forEach((item) => {
2489      if (item.checked == false) {
2490        item.closest(".checkbox").classList.add("checkbox_disabled");
2491      }
2492    });
2493  }
2494}
2495
2496// -------------------------------------------- end вспомогательные функции: ---------------------------------------------
2497//#endregion
2498
2499// --------------------------------------------- start обработка событий кнопок калькулятора: ---------------------------------------------
2500//#region calc btns
2501// обработка событий для кнопок выбора типа:
2502const typeBtns = document.querySelectorAll(".popup__type-item");
2503if (typeBtns.length) {
2504  typeBtns.forEach((btn) => {
2505    btn.addEventListener("click", function () {
2506      // console.log("click");
2507      const size = getSize();
2508      const trk = getTrk();
2509      const sections = getSections();
2510      const side = getSide();
2511      const type = getType();
2512      const sectionsBtns = document.querySelectorAll(".radio__input[data-name='sections']");
2513      const sideBtns = document.querySelectorAll(".radio__input[data-name='side']");
2514      const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
2515      const trkBtns = document.querySelectorAll(".radio__input[data-name='trk']");
2516      const btnSectionOne = document.querySelector(".radio__input[data-name='sections'][data-value='1']");
2517      const btnSectionTwo = document.querySelector(".radio__input[data-name='sections'][data-value='2']");
2518      const btnSideOne = document.querySelector(".radio__input[data-name='side'][data-value='1']");
2519      const descVol = document.querySelector(".popup__info-text_volume");
2520      const descTrcCont = document.querySelector(".popup__info-text_trk-cont");
2521      const descTrc = document.querySelector(".popup__info-text_trk");
2522      const descFuel = document.querySelector(".popup__info-text_fuel");
2523
2524      const popup = typeBtns[0].closest(".popup");
2525      const nextBtn = popup.querySelector(".popup__next-btn");
2526      const slider = document.querySelector(".popup__range-slider");
2527      const numberListUl = document.querySelector(".popup__range-list");
2528      const numberList = numberListUl.querySelectorAll(".popup__range-number");
2529
2530      let activeFuelsQuontity = 0;
2531      fuelBtns.forEach((item) => {
2532        if (item.checked) {
2533          activeFuelsQuontity++;
2534        }
2535      });
2536      // console.log("activeFuelsQuontity", activeFuelsQuontity);
2537
2538      typeBtns.forEach((item) => {
2539        item.classList.remove("popup__type-item_active");
2540      });
2541
2542      btn.classList.add("popup__type-item_active");
2543      nextBtn.classList.remove("btn_disabled");
2544
2545      if (btn.dataset.value == "Cont") {
2546        if (side == "2") {
2547          sideBtns.forEach((el) => {
2548            el.closest(".radio").classList.remove("radio_disabled");
2549            if (el.dataset.value == "2") {
2550              el.checked = false;
2551            }
2552            if (el.dataset.value == "1") {
2553              el.checked = true;
2554            }
2555          });
2556          setUrlQueryParam("side", "1");
2557        }
2558
2559        trkBtns.forEach((el) => {
2560          if (el.dataset.value > 2) {
2561            el.closest(".radio").classList.add("radio_disabled");
2562          }
2563        });
2564        sideBtns.forEach((el) => {
2565          el.closest(".radio").classList.add("radio_disabled");
2566        });
2567
2568        descVol.style.display = "block";
2569        descTrcCont.style.display = "block";
2570        descFuel.style.display = "block";
2571        descTrc.style.display = "block";
2572        numberList.forEach((item) => {
2573          if (item.innerHTML.trim() > 40) {
2574            item.classList.add("popup__range-number_hidden");
2575          }
2576
2577          if (size == "L") {

2578            rangeSliderUpdate(slider, 40);
2579            setUrlQueryParam("volume", "40");
2580          }
2581
2582          if (trk > "2") {
2583            setUrlQueryParam("trk", "2");
2584            setUrlQueryParam("side", "1");
2585          }
2586
2587          if (activeFuelsQuontity > 2) {
2588            fuelBtns.forEach((item) => {
2589              item.checked = false;
2590              item.closest(".checkbox").classList.remove("checkbox_disabled");
2591              delUrlQueryParam(item.dataset.name);
2592              nextStepBtnFive.classList.add("btn_disabled");
2593            });
2594          } else if (activeFuelsQuontity == 2) {
2595            fuelBtns.forEach((item) => {
2596              if (!item.checked) {
2597                item.closest(".checkbox").classList.remove("checkbox_disabled");
2598              }
2599            });
2600          }
2601        });
2602      } else {
2603        fuelBtns.forEach((item) => {
2604          item.closest(".checkbox").classList.remove("checkbox_disabled");
2605        });
2606
2607        descVol.style.display = "none";
2608        descTrcCont.style.display = "none";
2609        descFuel.style.display = "none";
2610        descTrc.style.display = "none";
2611        numberList.forEach((item) => {
2612          if (item.innerHTML.trim() > 40) {
2613            item.classList.remove("popup__range-number_hidden");
2614          }
2615        });
2616
2617        // console.log(type);
2618        if (size == "S" || type == "Cont") {
2619          desc.style.display = "grid";
2620          sectionsBtns.forEach((el) => {
2621            if (el.dataset.value > 2) {
2622              el.closest(".radio").classList.add("radio_disabled");
2623              el.checked = false;
2624            }
2625            if (item.checked == true && item.dataset.value > 2) {
2626              item.checked = false;
2627              sectionsBtns.forEach((el) => {
2628                if (el.dataset.value == 2) {
2629                  el.checked = true;
2630                }
2631              });
2632            }
2633          });
2634        }
2635
2636        if (activeFuelsQuontity > 2) {
2637          fuelBtns.forEach((item) => {
2638            item.checked = false;
2639            item.closest(".checkbox").classList.remove("checkbox_disabled");
2640            delUrlQueryParam(item.dataset.name);
2641            nextStepBtnFive.classList.add("btn_disabled");
2642          });
2643        } else if (activeFuelsQuontity == 2) {
2644          fuelBtns.forEach((item) => {
2645            if (!item.checked) {
2646              item.closest(".checkbox").classList.add("checkbox_disabled");
2647            }
2648          });
2649        }
2650
2651        // TODO добавить проверку на количество выбранного топлива?
2652      }
2653    });
2654  });
2655}
2656
2657const trkBtns = document.querySelectorAll("[data-calc-btn][data-name='trk']");
2658if (trkBtns.length) {
2659  trkBtns.forEach((item) => {
2660    item.addEventListener("click", function () {
2661      // console.log("click");
2662      setSideFromTrk();
2663    });
2664  });
2665
2666  // функция работы с радиокнопками для сторон:
2667}
2668
2669const fuelBtns = document.querySelectorAll(".checkbox__input[name='fuel']");
2670if (fuelBtns.length) {
2671  // подсчет количества выбранных видов топлива:
2672
2673  fuelBtns.forEach((item) => {
2674    item.addEventListener("change", function (e) {
2675      // console.log("change");
2676      const sections = getSections();
2677      if (!sections) {
2678        setUrlQueryParam("sections", 1);
2679      }
2680      setSections();
2681    });
2682  });
2683}
2684
2685const volumeInput = document.querySelector(".popup__range");
2686if (volumeInput) {
2687  volumeInput.addEventListener("input", function () {
2688    // console.log("input");
2689    const size = getSize();
2690    if (size == "S") {
2691      const volume = volumeInput.value;
2692    }
2693  });
2694}
2695
2696// Привязываем обработчик клика к родительскому контейнеру с визуальным треком слайдера
2697const sliderContainer = document.querySelector('.popup__range-slider');
2698if (sliderContainer) {
2699  sliderContainer.addEventListener('click', function(e) {
2700    // Получаем размеры контейнера, относительно которого будем считать координаты
2701    const rect = sliderContainer.getBoundingClientRect();
2702    const clickX = e.clientX - rect.left; // координата клика относительно контейнера
2703    const containerWidth = rect.width;
2704    
2705    // Находим input-элемент ползунка
2706    const slider = document.getElementById('volume');
2707    if (!slider) return;
2708    
2709    // Читаем минимальное, максимальное значения и шаÐ