https://business-sud-champagne.com/wp-content/themes/bsc-theme/js/all.js?ver=2.1

1const burgerBtnOpen = document.querySelector(".top-bar__btn-burger");
2const burgerBtnClose = document.querySelector(".menu__btn");
3const menuElt = document.querySelector(".menu__container");
4const searchBtnOpen = document.querySelector("#search-icon");
5const searchElt = document.querySelector(".search__container");
6const searchBtnClose = document.querySelector(".search__btn-close");
7const contactPopup = document.querySelector("#bsc-contact-container");
8
9burgerBtnOpen.addEventListener("click", () => {
10  menuElt.classList.add("active");
11  document.querySelector("body").style.overflow = "hidden";
12});
13
14burgerBtnClose.addEventListener("click", () => {
15  menuElt.classList.remove("active");
16  document.querySelector("body").style.overflow = "initial";
17});
18
19searchBtnOpen.addEventListener("click", (e) => {
20  e.preventDefault();
21  searchElt.classList.add("active");
22});
23
24searchBtnClose.addEventListener("click", () => {
25  searchElt.classList.remove("active");
26});
27
28/************************************/
29/**      HOMEPAGE SCROLL EFFECT    **/
30/************************************/
31if (window.innerWidth > 576) {
32  const swiper = new Swiper("#homepage", {
33    direction: "vertical",
34    mousewheel: {
35      releaseOnEdges: true,
36    },
37    effect: "fade",
38    pagination: {
39      el: ".swiper-pagination",
40      clickable: true,
41      renderBullet: function (index, className) {
42        const section = document.querySelector(`#section-home-${index + 1}`);
43        const anchor = section.dataset.anchor;
44        const color = section.dataset.color;
45        // const picto = section.dataset.icon;
46        if (window.innerWidth > 1600) {
47          return (
48            '<span class="' +
49            className +
50            '" data-color="' +
51            color +
52            '">' +
53            anchor +
54            "</span>"
55          );
56        } else {
57          return `<span class="${className}" data-color="${color}"></span>`;
58        }
59      },
60    },
61    on: {
62      reachEnd: function () {
63        document.querySelector("body.home").style.overflow = "visible";
64        const footer = document.querySelector("footer");
65        const threshold = 0.0000001;
66        const options = {
67          rootMargin: "0px",
68          threshold,
69        };
70        const footerObserver = new IntersectionObserver((entries, observer) => {
71          entries.forEach((entry) => {
72            if (entry.intersectionRatio > threshold) {
73              swiper.mousewheel.disable();
74            } else {
75              swiper.mousewheel.enable();
76            }
77          });
78        }, options);
79        footerObserver.observe(footer);
80      },
81    },
82  });
83  const homeScrollBtn = document.getElementById("scroll-info");
84  if (homeScrollBtn) {
85    document
86      .getElementById("scroll-info")
87      .addEventListener("click", () => swiper.slideNext());
88  }
89}
90
91const sliderBlocks = document.querySelectorAll(
92  ".homepage__slide-block__container"
93);
94
95if (sliderBlocks) {
96  sliderBlocks.forEach((slider) => {
97    let section = slider.closest(".homepage__slide-block");
98    let currentPrevNav = section.querySelector(".swiper-button-prev-custom");
99    let currentNextNav = section.querySelector(".swiper-button-next-custom");
100    const swiperBlock = new Swiper(slider, {
101      loop: true,
102      slidesPerView: 1.2,
103      spaceBetween: 10,
104      speed: 1000,
105      navigation: {
106        nextEl: currentNextNav,
107        prevEl: currentPrevNav,
108      },
109      breakpoints: {
110        576: {
111          centeredSlides: true,
112          slidesPerView: "auto",
113          spaceBetween: -100,
114        },
115      },
116    });
117  });
118}
119
120const allBullets = document.querySelectorAll(
121  "#homepage .swiper-pagination-bullet"
122);
123
124allBullets.forEach((bullet) => {
125  let color = bullet.dataset.color;
126  bullet.classList.add(color);
127});
128
129const suggestElt = document.querySelector(".search__suggest__wrapper");
130const swiperSuggest = new Swiper(suggestElt, {
131  loop: true,
132  slidesPerView: 3,
133  spaceBetween: 20,
134  navigation: {
135    nextEl: ".swiper-button-next-suggest",
136    prevEl: ".swiper-button-prev-suggest",
137  },
138});
139
140//* ******************************* *//
141//****        LIGHTBOX           ****//
142//* ******************************* *//
143
144const lightboxGallery = new SimpleLightbox(".single-offer__slider__img", {
145  overlayOpacity: 0.9,
146  navText: [
147    `<div><svg xmlns="http://www.w3.org/2000/svg" width="24.978" height="21.413" viewBox="0 0 24.978 21.413"><path d="M24.74,11.31l-9.25,9.814a1.024,1.024,0,0,1-.686.29.942.942,0,0,1-.622-.232.87.87,0,0,1-.062-1.26L21.963,11.6H.925A.9.9,0,0,1,0,10.758a.987.987,0,0,1,.925-.942H21.963L14.118,1.491A.87.87,0,0,1,14.18.231a.951.951,0,0,1,1.308.061l9.25,9.814A.877.877,0,0,1,24.74,11.31Z" transform="translate(24.978 21.413) rotate(180)" fill="var(--white)" /></svg></div>`,
148    `<div><svg xmlns="http://www.w3.org/2000/svg" width="24.978" height="21.413" viewBox="0 0 24.978 21.413"><path d="M24.74,11.31l-9.25,9.814a1.024,1.024,0,0,1-.686.29.942.942,0,0,1-.622-.232.87.87,0,0,1-.062-1.26L21.963,11.6H.925A.9.9,0,0,1,0,10.758a.987.987,0,0,1,.925-.942H21.963L14.118,1.491A.87.87,0,0,1,14.18.231a.951.951,0,0,1,1.308.061l9.25,9.814A.877.877,0,0,1,24.74,11.31Z" transform="translate(24.978 21.413) rotate(180)" fill="var(--white)" /></svg></div>`,
149  ],
150});
151
152/************************************/
153/**       SLIDERS INNER PAGE       **/
154/************************************/
155
156const testimonials = document.querySelectorAll(".testimonials-slider");
157const agendaSlider = document.querySelectorAll(".agenda-slider");
158const servicesSlider = document.querySelectorAll(".services-slider");
159const partnersSlider = document.querySelectorAll(".partners-slider");
160const subpagesSlider = document.querySelectorAll(".subpages-slider");
161const ecosSlider = document.querySelectorAll(".slider-eco");
162const otherNews = document.querySelectorAll(".slider-other-news");
163const highlightAgenda = document.querySelector(".slider-highlight-agenda");
164const singleHeadSlider = document.querySelectorAll(".single-offer__slider");
165const otherOffers = document.querySelectorAll(".slider-other-offers");
166const homeOffers = document.querySelectorAll(".slider-home-offers");
167
168const createSlider = (element, options, index) => {
169  let currentSlider = document.querySelector(`#${index}`);
170  let currentSection = currentSlider.closest(".slider-block-wrapper");
171  let nextBtn = currentSection.querySelector(".swiper-button-next-custom");
172  let prevBtn = currentSection.querySelector(".swiper-button-prev-custom");
173  const slider = new Swiper(element, {
174    ...options,
175    navigation: {
176      nextEl: nextBtn,
177      prevEl: prevBtn,
178    },
179  });
180};
181
182if (testimonials) {
183  let leftoffset = document.querySelector(".container").offsetLeft;

184  testimonials.forEach((slider) => {
185    let index = slider.id;
186    let options = {
187      slidesPerView: 1.5,
188      slidesOffsetBefore: leftoffset,
189      spaceBetween: 10,
190      speed: 600,
191      breakpoints: {
192        576: {
193          slidesPerView: 2,
194          spaceBetween: 25,
195        },
196        768: {
197          slidesPerView: 3,
198          spaceBetween: 25,
199        },
200        991: {
201          slidesPerView: 5,
202          spaceBetween: 25,
203        },
204      },
205    };
206    createSlider(slider, options, index);
207  });
208}
209
210if (agendaSlider) {
211  let leftoffset = document.querySelector(".container").offsetLeft;
212  agendaSlider.forEach((slider) => {
213    let index = slider.id;
214    let options = {
215      slidesPerView: 1.5,
216      slidesOffsetBefore: leftoffset,
217      spaceBetween: 10,
218      speed: 600,
219      breakpoints: {
220        576: {
221          slidesPerView: 2,
222          spaceBetween: 25,
223        },
224        768: {
225          slidesPerView: 3,
226          spaceBetween: 25,
227        },
228        991: {
229          slidesPerView: 5,
230          spaceBetween: 25,
231        },
232      },
233    };
234    createSlider(slider, options, index);
235  });
236}
237
238if (servicesSlider) {
239  servicesSlider.forEach((slider) => {
240    let index = slider.id;
241    let options = {
242      slidesPerView: 3,
243      spaceBetween: 10,
244      speed: 600,
245    };
246    createSlider(slider, options, index);
247  });
248}
249
250if (partnersSlider) {
251  partnersSlider.forEach((slider) => {
252    let index = slider.id;
253    let options = {
254      slidesPerView: 2,
255      spaceBetween: 25,
256      speed: 600,
257      breakpoints: {
258        576: {
259          slidesPerView: 2,
260        },
261        768: {
262          slidesPerView: 3,
263        },
264        991: {
265          slidesPerView: 5,
266        },
267      },
268    };
269    createSlider(slider, options, index);
270  });
271}
272
273if (subpagesSlider) {
274  let leftoffset = document.querySelector(".container").offsetLeft;
275  subpagesSlider.forEach((slider) => {
276    let index = slider.id;
277    let options = {
278      slidesPerView: 1.5,
279      spaceBetween: 25,
280      slidesOffsetBefore: leftoffset,
281      speed: 600,
282      breakpoints: {
283        576: {
284          slidesPerView: 2,
285        },
286        768: {
287          slidesPerView: 3,
288        },
289        991: {
290          slidesPerView: 6.5,
291        },
292      },
293    };
294    createSlider(slider, options, index);
295  });
296}
297
298if (ecosSlider) {
299  let leftoffset = document.querySelector(".container").offsetLeft;
300  ecosSlider.forEach((slider) => {
301    let index = slider.id;
302    let options = {
303      slidesPerView: 1.5,
304      spaceBetween: 25,
305      slidesOffsetBefore: leftoffset,
306      speed: 600,
307      breakpoints: {
308        576: {
309          slidesPerView: 2,
310        },
311        768: {
312          slidesPerView: 3,
313        },
314        991: {
315          slidesPerView: 4,
316        },
317      },
318    };
319    createSlider(slider, options, index);
320  });
321}
322
323if (otherNews) {
324  let leftoffset = document.querySelector(".container").offsetLeft;
325  otherNews.forEach((slider) => {
326    let index = slider.id;
327    let options = {
328      slidesPerView: 1.5,
329      spaceBetween: 10,
330      slidesOffsetBefore: leftoffset,
331      speed: 600,
332      breakpoints: {
333        576: {
334          slidesPerView: 2,
335        },
336        768: {
337          slidesPerView: 3,
338        },
339        991: {
340          slidesPerView: 4,
341        },
342      },
343    };
344    createSlider(slider, options, index);
345  });
346}
347
348if (otherOffers) {
349  let leftoffset = document.querySelector(".container").offsetLeft;
350  otherOffers.forEach((slider) => {
351    let index = slider.id;
352    let options = {
353      slidesPerView: 1.5,
354      spaceBetween: 25,
355      slidesOffsetBefore: leftoffset,
356      speed: 600,
357      breakpoints: {
358        576: {
359          slidesPerView: 3,
360        },
361        768: {
362          slidesPerView: 4,
363        },
364        991: {
365          slidesPerView: 5,
366        },
367      },
368    };
369    createSlider(slider, options, index);
370  });
371}
372
373if (homeOffers) {
374  homeOffers.forEach((slider) => {
375    let index = slider.id;
376    let options = {
377      slidesPerView: 1.5,
378      spaceBetween: 25,
379      speed: 600,
380      allowTouchMove: true,
381      breakpoints: {
382        576: {
383          slidesPerView: 2.5,
384        },
385        768: {
386          slidesPerView: 2.5,
387        },
388        // 991: {
389        //   slidesPerView: 3.5,
390        // },
391      },
392    };
393    createSlider(slider, options, index);
394  });
395}
396
397if (highlightAgenda) {
398  let index = highlightAgenda.id;
399  let options = {
400    autoplay: {
401      delay: 3500,
402    },
403    speed: 600,

404  };
405  createSlider(highlightAgenda, options, index);
406}
407
408if (singleHeadSlider) {
409  singleHeadSlider.forEach((slider) => {
410    let index = slider.id;
411    let options = {
412      slidesPerView: 2,
413      spaceBetween: 10,
414      speed: 600,
415      loop: true,
416    };
417    createSlider(slider, options, index);
418  });
419}
420
421/************************************/
422/**         SERVICES BLOCK         **/
423/************************************/
424
425const allServicesLinks = document.querySelectorAll(".service-list-item");
426const allServicesContent = document.querySelectorAll(".service-content-item");
427
428if (allServicesLinks) {
429  allServicesLinks.forEach((item) => {
430    item.addEventListener("click", (e) => {
431      e.preventDefault();
432      allServicesLinks.forEach((item) => item.classList.remove("active"));
433      allServicesContent.forEach((item) => item.classList.remove("active"));
434      item.classList.add("active");
435      let anchor = item.dataset.anchor;
436      document
437        .querySelector(`[data-content="${anchor}"]`)
438        .classList.add("active");
439    });
440  });
441}
442
443/************************************/
444/**         STICKY HEADER          **/
445/************************************/
446
447const topbar = document.querySelector(".top-bar");
448const logoBW = document.querySelector(".logo-bw");
449const logoRVB = document.querySelector(".logo-rvb");
450
451window.addEventListener("scroll", function (e) {
452  let currentScroll = document.scrollingElement.scrollTop;
453
454  if (currentScroll > 0) {
455    topbar.classList.add("sticky");
456    logoBW ? (logoBW.style.display = "none") : null;
457    logoRVB ? (logoRVB.style.display = "flex") : null;
458  } else {
459    topbar.classList.remove("sticky");
460    logoRVB ? (logoRVB.style.display = "none") : null;
461    logoBW ? (logoBW.style.display = "flex") : null;
462  }
463});
464
465/************************************/
466/**       ANIMATED NUMBERS         **/
467/************************************/
468
469// const counterSection = document.querySelector(".key-numbers-bloc");
470
471// let options = {
472//   rootMargin: "0px 0px -50% 0px",
473//   threshold: 0.2,
474// };
475// const observer = new IntersectionObserver((entries, observer) => {
476//   entries.forEach((entry) => {
477//     if (entry.isIntersecting) {
478//       const speed = 500;
479//       const counters = document.querySelectorAll(
480//         ".key-numbers-bloc__item__value"
481//       );
482//       counters.forEach((counter) => {
483//         const animate = () => {
484//           const countTarget = +counter.dataset.count.toLocaleString("fr");
485//           const currentValue = +counter.innerText.toLocaleString("fr");
486
487//           const time = countTarget / speed;
488//           if (currentValue < countTarget) {
489//             counter.innerText = Math.ceil(currentValue + time);
490//             setTimeout(animate, 1);
491//           } else {
492//             counter.innerText = countTarget.toLocaleString("fr");
493//           }
494//         };
495//         animate();
496//       });
497//     }
498//   });
499// }, options);
500
501// if (counterSection) {
502//   observer.observe(counterSection);
503// }
504
505//* ******************************* *//
506//****     SEARCH FORM IMMO      ****//
507//* ******************************* *//
508
509const inputCityOffer = document.querySelector(".custom-autocomplete");
510
511if (inputCityOffer) {
512  const currentSearchForm = new autoComplete({
513    placeHolder: "Toutes les localisations",
514    wrapper: false,
515    selector: ".custom-autocomplete",
516    threshold: 3,
517    debounce: 150,
518    data: {
519      src: async (query) => {
520        try {
521          const formData = new FormData();
522          formData.append("action", "get_communes");
523          formData.append("term", query);
524          const source = await fetch(DATA.ajaxUrl, {
525            method: "POST",
526            body: formData,
527          });
528          const data = await source.json();
529          // console.log(data);
530          return data;
531        } catch (error) {
532          return error;
533        }
534      },
535      keys: ["ville"],
536    },
537    resultsList: {
538      element: (list, data) => {
539        const info = document.createElement("p");
540        if (data.results.length < 1) {
541          info.innerHTML = `Il y a <strong>${data.matches.length}</strong> résultats pour <strong>"${data.query}"</strong>`;
542        }
543        list.prepend(info);
544      },
545      noResults: true,
546      maxResults: 9999,
547      tabSelect: true,
548    },
549    resultItem: {
550      element: (item, data) => {
551        item.style = "display: flex; justify-content: space-between;";
552        item.innerHTML = `

553        <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
554          ${data.match}
555        </span>`;
556      },
557      highlight: true,
558    },
559    events: {},
560  });
561
562  // Add selection to input
563  currentSearchForm.input.addEventListener("selection", function (event) {
564    const dataCity = event.detail;
565    // console.log(dataCity);
566    const cityName = dataCity.selection.value.ville;
567    const cityValue = dataCity.selection.value.id;
568    currentSearchForm.input.value = cityName;
569    document.getElementById("localisation-id").value = cityValue;
570    currentSearchForm.input.style.color = "var(--purple)";
571    currentSearchForm.input.style.fontWeight = 700;
572  });
573
574  // Reset selection
575  currentSearchForm.input.addEventListener("input", function (event) {
576    currentSearchForm.input.style.color = "";
577    currentSearchForm.input.style.fontWeight = "";
578    document.getElementById("localisation-id").value = "";
579  });
580}
581
582const searchFormOffers = document.getElementById("search-offers-form");
583const alertBtn = document.getElementById("create-alert");
584
585if (searchFormOffers) {
586  // Init form with query strings values
587  const params = new URL(document.location).searchParams;
588
589  for (let keySearch of params.keys()) {
590    let urlValue = params.get(keySearch);
591
592    if (keySearch === "localisation-name") {
593      document.querySelector(`#localisation-name`).value = urlValue;
594      document.querySelector(`#localisation-name`).style.color =
595        "var(--purple)";
596      document.querySelector(`#localisation-name`).style.fontWeight = "700";
597    } else if (keySearch === "localisation-id") {
598      document.querySelector(`#localisation-id`).value = urlValue;
599    } else {
600      let niceValue = document.querySelector(`label[for='${urlValue}']`).dataset
601        .name;
602      document.querySelector(`#${keySearch}-value`).innerText = niceValue;
603      document.querySelector(`#${keySearch}-value`).style.color =
604        "var(--purple)";
605      document.querySelector(`#${keySearch}-value`).style.fontWeight = "700";
606    }
607    window.location.href.includes("?")
608      ? (alertBtn.style.display = "flex")
609      : (alertBtn.style.display = "none");
610  }
611
612  alertBtn.addEventListener("click", (e) => {
613    e.preventDefault();
614
615    const niceType = document.getElementById("type-de-bien-value").innerText;
616    const niceTransaction = document.getElementById(
617      "type-de-transaction-value"
618    ).innerText;
619    const niceLocalisation = document.getElementById("localisation-name").value
620      ? document.getElementById("localisation-name").value
621      : "Toutes les localisations";
622    const niceSurface = document.getElementById("surface-value").innerText;
623
624    let recap = `Type d'offre: <strong>${niceType}</strong><br />Type de transaction: <strong>${niceTransaction}</strong><br />Localisation: <strong>${niceLocalisation}</strong><br /> Surface: <strong>${niceSurface}</strong><br />`;
625
626    document.getElementById("alert-recap").innerHTML = recap;
627
628    document.getElementById("alert-popup").classList.add("active");
629    document
630      .getElementById("alert-popup")
631      .querySelector(".search__btn-close")
632      .addEventListener("click", (e) =>
633        document.getElementById("alert-popup").classList.remove("active")
634      );
635  });
636
637  const displayChoices = (elt) => {
638    let resultsList = elt.nextElementSibling;
639    let allLabels = document.querySelectorAll(
640      `#${elt.id} + .search-input__list label`
641    );
642    elt.classList.add("active");
643    searchFormOffers.classList.add("focus");
644    resultsList.classList.add("active");

645    allLabels.forEach((label) => {
646      label.addEventListener("click", (e) => {
647        searchFormOffers.classList.remove("focus");
648        elt.classList.remove("active");
649        resultsList.classList.remove("active");
650        document.querySelector(`#${elt.id}-value`).innerText =
651          label.dataset.name;
652        document.querySelector(`#${elt.id}-value`).style.color =
653          "var(--purple)";
654        document.querySelector(`#${elt.id}-value`).style.fontWeight = "700";
655      });
656    });
657  };
658
659  searchFormOffers.querySelectorAll(".search-input").forEach((input) =>
660    input.addEventListener("click", (e) => {
661      document
662        .querySelectorAll(".search-input__list, .search-input")
663        .forEach((item) => item.classList.remove("active"));
664      searchFormOffers.classList.remove("focus");
665      displayChoices(input);
666    })
667  );
668}
669
670//* ******************************* *//
671//****          FAVORIS          ****//
672//* ******************************* *//
673
674const addFavBtn = document.getElementById("add-fav-btn");
675const allOffersItems = document.querySelectorAll(".listing-offers__item");
676const listingAddFavBtn = document.querySelectorAll(".fav-icon");
677
678const getCookie = (cname) => {
679  let name = cname + "=";
680  let decodedCookie = decodeURIComponent(document.cookie);
681  let ca = decodedCookie.split(";");
682  for (let i = 0; i < ca.length; i++) {

683    let c = ca[i];
684    while (c.charAt(0) == " ") {
685      c = c.substring(1);
686    }
687    if (c.indexOf(name) == 0) {
688      return c.substring(name.length, c.length);
689    }
690  }
691  return "";
692};
693
694const checkCookie = (cname, id) => {
695  if (getCookie(cname) == id) {
696    return true;
697  }
698};
699
700const changeFavIcon = (state, elt) => {
701  let messageElt = elt.querySelector("span");
702  if (state == "on") {
703    elt.querySelector("svg g path").style.fill = "red";
704    messageElt ? (messageElt.innerText = "Retirer des favoris") : "";
705  } else {
706    elt.querySelector("svg g path").style.fill = "#888";
707    messageElt ? (messageElt.innerText = "Ajouter aux favoris") : "";
708  }
709};
710
711// Ajout de l'offre en fav
712
713if (addFavBtn) {
714  let offerId = addFavBtn.dataset.id;
715  let isFav = checkCookie(`offer-${offerId}`, offerId);
716  if (isFav) {
717    changeFavIcon("on", addFavBtn);
718  }
719  addFavBtn.addEventListener("click", (e) => {
720    e.preventDefault();
721
722    let data = new FormData();
723    data.append("id_offre", offerId);
724
725    data.append("action", "set_or_delete_fav_from_cookies");
726
727    fetch(DATA.ajaxUrl, {
728      method: "POST",
729      body: data,
730    })
731      .then((response) => {
732        if (response.ok) {
733          let isFav = checkCookie(`offer-${offerId}`, offerId);
734          if (isFav) {
735            changeFavIcon("on", addFavBtn);
736          } else {
737            changeFavIcon("off", addFavBtn);
738          }
739        }
740      })
741      .catch((error) => console.log("ERROR: " + error));
742  });
743}
744
745if (allOffersItems) {
746  allOffersItems.forEach((item) => {
747    let offerListingId = item.dataset.id;
748    let isFav = checkCookie(`offer-${offerListingId}`, offerListingId);
749    if (isFav) {
750      item.querySelector(".fav-icon svg g path").style.fill = "red";
751    }
752  });
753}
754
755if (listingAddFavBtn) {
756  listingAddFavBtn.forEach((btn) => {
757    let offerId = btn.closest("[data-id]").dataset.id;
758    let isFav = checkCookie(`offer-${offerId}`, offerId);
759    if (isFav) {
760      changeFavIcon("on", btn);
761    }
762    btn.addEventListener("click", (e) => {
763      e.preventDefault();
764      let data = new FormData();
765      data.append("id_offre", offerId);
766
767      data.append("action", "set_or_delete_fav_from_cookies");
768
769      fetch(DATA.ajaxUrl, {
770        method: "POST",
771        body: data,
772      })
773        .then((response) => {
774          if (response.ok) {
775            let isFav = checkCookie(`offer-${offerId}`, offerId);
776            if (isFav) {
777              changeFavIcon("on", btn);
778            } else {
779              changeFavIcon("off", btn);
780            }
781          }
782        })
783        .catch((error) => console.log("ERROR: " + error));
784    });
785  });
786}
787
788//* ******************************* *//
789//****      COMPARE OFFERS       ****//
790//* ******************************* *//
791
792const addCompareBtn1 = document.getElementById("compare-offers-selection-1");
793const addCompareBtn2 = document.getElementById("compare-offers-selection-2");
794const compareOtherOffer1 = document.getElementById("compare-other-1");
795const compareOtherOffer2 = document.getElementById("compare-other-2");
796const compareContent = document.querySelector(".compare-offers__content");
797compareContent ? (compareContent.style.display = "none") : null;
798
799const comparePopupElt = document.querySelectorAll(".compare-popup");
800const compareBtnClose = document.querySelectorAll(".compare__btn-close");
801
802compareBtnClose.forEach((btn) => {
803  btn.addEventListener("click", () => {
804    comparePopupElt.forEach((popup) => {
805      popup.classList.remove("active");
806    });
807  });
808});
809
810const getInfosOffer = async (id, item) => {
811  const formDataOffer = new FormData();
812  formDataOffer.append("action", "get_offer");
813  formDataOffer.append("compareId", id);
814
815  try {
816    const response = await fetch(DATA.ajaxUrl, {
817      method: "POST",
818      body: formDataOffer,
819    });
820
821    const dataOffer = await response.json();
822
823    document.querySelector(`#compare-offers-data-${item} img`).src =
824      dataOffer.img;
825    document.querySelector(`#compare-offers-data-${item} h3`).innerHTML =
826      dataOffer.title;
827    document.querySelector(
828      `#compare-offers-data-${item} .listing-offers__item__meta span:first-child`
829    ).innerText = `${dataOffer.surface}m²`;
830    document.querySelector(
831      `#compare-offers-data-${item} .listing-offers__item__meta span:last-child`
832    ).innerText = `${dataOffer.city} (${dataOffer.codeZipcode})`;
833    document.querySelector(
834      `#compare-details-title .compare-offers__line__item${item}`
835    ).innerHTML = dataOffer.title;
836    document.querySelector(
837      `#compare-details-localisation .compare-offers__line__item${item}`
838    ).innerText = `${dataOffer.city} ${dataOffer.zipcode}`;
839    document.querySelector(
840      `#compare-details-carac .compare-offers__line__item${item}`
841    ).innerHTML = dataOffer.carac;
842    document.querySelector(
843      `#compare-details-equipements .compare-offers__line__item${item}`
844    ).innerHTML = dataOffer.equipments;
845
846    dataOffer.access.route
847      ? (document.querySelector(
848          `#compare-details-access .compare-offers__line__item${item}`
849        ).innerHTML = `<div class="single-offer__access-item"><img src="${DATA.templateUrl}/assets/images/voiture.png" alt="Route">${dataOffer.access.route}</div>`)
850      : "";
851    dataOffer.access.train
852      ? (document.querySelector(
853          `#compare-details-access .compare-offers__line__item${item}`
854        ).innerHTML += `<div class="single-offer__access-item"><img src="${DATA.templateUrl}/assets/images/Train.png" alt="Train">${dataOffer.access.train}</div>`)
855      : "";
856    dataOffer.access.avion
857      ? (document.querySelector(
858          `#compare-details-access .compare-offers__line__item${item}`
859        ).innerHTML += `<div class="single-offer__access-item"><img src="${DATA.templateUrl}/assets/images/avion.png" alt="Avion">${dataOffer.access.avion}</div>`)
860      : "";
861    dataOffer.access.bus
862      ? (document.querySelector(
863          `#compare-details-access .compare-offers__line__item${item}`
864        ).innerHTML += `<div class="single-offer__access-item"><img src="${DATA.templateUrl}

864/assets/images/bus.png" alt="Bus">${dataOffer.access.bus}</div>`)
865      : "";
866    dataOffer.access.fluvial
867      ? (document.querySelector(
868          `#compare-details-access .compare-offers__line__item${item}`
869        ).innerHTML += `<div class="single-offer__access-item"><img src="${DATA.templateUrl}/assets/images/bateau.png" alt="Bateau">${dataOffer.access.fluvial}</div>`)
870      : "";
871
872    dataOffer.surfaceMaxM2
873      ? (document.querySelector(
874          `#compare-details-surfaces .compare-offers__line__item${item}`
875        ).innerHTML = `<div class="singe-offer__surface-block"><p>${DATA.stotale}</p><p>${dataOffer.surfaceMaxM2} m²</p></div>`)
876      : "";
877    dataOffer.surfaceMaxHa
878      ? (document.querySelector(
879          `#compare-details-surfaces .compare-offers__line__item${item}`
880        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.stotale}</p><p>${dataOffer.surfaceMaxHa} ha</p></div>`)
881      : "";
882    dataOffer.surfaceLotMin
883      ? (document.querySelector(
884          `#compare-details-surfaces .compare-offers__line__item${item}`
885        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.lotmin}</p><p>${dataOffer.surfaceLotMin} ha</p></div>`)
886      : "";
887    dataOffer.surfaceLotMax
888      ? (document.querySelector(
889          `#compare-details-surfaces .compare-offers__line__item${item}`
890        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.lotmax}</p><p>${dataOffer.surfaceLotMax} ha</p></div>`)
891      : "";
892    dataOffer.surfaceOffices
893      ? (document.querySelector(
894          `#compare-details-surfaces .compare-offers__line__item${item}`
895        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.bureau}</p><p>${dataOffer.surfaceOffices} m²</p></div>`)
896      : "";
897    dataOffer.surfaceIndustry
898      ? (document.querySelector(
899          `#compare-details-surfaces .compare-offers__line__item${item}`
900        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.industrie}</p><p>${dataOffer.surfaceIndustry} m²</p></div>`)
901      : "";
902    dataOffer.surfaceLogistic
903      ? (document.querySelector(
904          `#compare-details-surfaces .compare-offers__line__item${item}`
905        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.logistique}</p><p>${dataOffer.surfaceLogistic} m²</p></div>`)
906      : "";
907    dataOffer.surfaceLand
908      ? (document.querySelector(
909          `#compare-details-surfaces .compare-offers__line__item${item}`
910        ).innerHTML += `<div class="singe-offer__surface-block"><p>${DATA.terrain}</p><p>${dataOffer.surfaceLand} m²</p></div>`)
911      : "";
912  } catch (error) {
913    console.log(error);
914  }
915};
916
917const showPopup = (numb) => {
918  document
919    .querySelectorAll(`[data-popup-id='${numb}'] .listing-offers__item`)
920    .forEach((item) =>
921      item.addEventListener("click", (e) => {
922        let compareId = item.dataset.id;
923        getInfosOffer(compareId, numb);
924        document

925          .querySelector(`[data-popup-id='${numb}']`)
926          .classList.remove("active");
927        document
928          .getElementById(`compare-offers-data-${numb}`)
929          .classList.add("active");
930        document
931          .getElementById(`compare-offers-selection-${numb}`)
932          .classList.add("hide");
933        let displayContent = compareContent.style.display;
934        if (displayContent == "none") {
935          document.querySelector(".compare-offers__content").style.display =
936            "block";
937        }
938      })
939    );
940};
941
942if (addCompareBtn1) {
943  addCompareBtn1.addEventListener("click", (e) => {
944    let popup = document.querySelector(`[data-popup-id='1']`);
945    popup.classList.toggle("active");
946    showPopup(1);
947  });
948}
949
950if (addCompareBtn2) {
951  addCompareBtn2.addEventListener("click", (e) => {
952    let popup = document.querySelector(`[data-popup-id='2']`);
953    popup.classList.toggle("active");
954    showPopup(2);
955  });
956}
957
958if (compareOtherOffer1) {
959  compareOtherOffer1.addEventListener("click", (e) => {

960    let popup = document.querySelector(`[data-popup-id='1']`);
961    popup.classList.toggle("active");
962    showPopup(1);
963  });
964}
965
966if (compareOtherOffer2) {
967  compareOtherOffer2.addEventListener("click", (e) => {
968    let popup = document.querySelector(`[data-popup-id='2']`);
969    popup.classList.toggle("active");
970    showPopup(2);
971  });
972}
973
974//* ******************************* *//
975//****  FADE IN SECTIONS EFFECT  ****//
976//* ******************************* *//
977
978// if (window.innerWidth > 576) {
979//   let optionsSections = {
980//     rootMargin: "0px 0px -50% 0px",
981//   };
982
983//   const observerSection = new IntersectionObserver((entries, observer) => {
984//     entries.forEach((entry) => {
985//       if (entry.isIntersecting) {
986//         entry.target.classList.add("section-appear");
987//       }
988//     });
989//   }, optionsSections);
990
991//   const sections = document.querySelectorAll("section");
992
993//   if (sections) {
994//     sections.forEach((section) => observerSection.observe(section));
995//   }
996// }
997
998//* ******************************* *//
999//****        FILTERS MOBILE     ****//
1000//* ******************************* *//
1001
1002const mobileFilters = document.querySelector(".filters-mobile-wrapper");
1003const filtersBtnClose = document.querySelector(".filters-mobile__btn-close");
1004const btnOpenFilters = document.getElementById("open-filters");
1005
1006if (btnOpenFilters) {
1007  btnOpenFilters.addEventListener("click", (e) => {
1008    e.preventDefault();
1009    mobileFilters.classList.add("active");
1010  });
1011}
1012
1013if (filtersBtnClose) {
1014  filtersBtnClose.addEventListener("click", (e) => {
1015    e.preventDefault();
1016    mobileFilters.classList.remove("active");
1017  });
1018}