(function () {
  if (window.__medspaClinicLoaderLoaded) return;
  window.__medspaClinicLoaderLoaded = true;

  const apiKey = "your_api_key_here";
  const apiUrl = "https://api.medspacircle.com/api/v1/"; //update
  const remoteCss = "https://api.medspacircle.com/embed/1/style.css"; //update
  const linkUrl = `https://go.medspacircle.com/clinics/`; //update

  const targetDiv = document.getElementById("MCLoader");

  if (!targetDiv) {
    console.error('MCLoader element not found');
    return;
  }


  const slug = targetDiv.getAttribute("data-slug-id");
  const withmap = targetDiv.getAttribute("data-with-map");
  const mapApiKey = targetDiv.getAttribute("data-map-api-key");
  const mapZoomLevel = targetDiv.getAttribute("data-map-zoom-level");
  const stackingView = targetDiv.getAttribute("data-stacking-view");
  const locationTitle = targetDiv.getAttribute("data-location-title");
  const showSchedule = targetDiv.getAttribute("data-schedule") ?? "true";

  let theslug = [];
  let theUrlsToCall = [];
  let branchData = [];
  let asscociateCityAndClinic = [];
  let theMarkerLists = [];
  let counter = 0;

  var arr_dropdown = []; //to save city list if multiple slugs are used

  // Browser compatibility check
  function checkBrowserCompatibility() {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    const iOSVersion = isIOS
      ? parseFloat(
          navigator.userAgent.match(/OS (\d+)_(\d+)/)?.[1] +
            "." +
            navigator.userAgent.match(/OS (\d+)_(\d+)/)?.[2]
        )
      : null;

    console.log("iOS detected:", isIOS, "Version:", iOSVersion);

    if (isIOS && iOSVersion && iOSVersion < 14.9) {
      console.warn(
        "This device may have limited compatibility. Consider updating iOS for the best experience."
      );

      // Load dialog polyfill for older iOS versions
      if (typeof HTMLDialogElement === "undefined") {
        console.log("Loading HTMLDialogElement polyfill...");

        const polyfillCSS = document.createElement("link");
        polyfillCSS.rel = "stylesheet";
        polyfillCSS.href =
          "https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.css";
        document.head.appendChild(polyfillCSS);

        const polyfillJS = document.createElement("script");
        polyfillJS.src =
          "https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.js";
        polyfillJS.onload = function () {
          console.log("Dialog polyfill loaded");
          // Register dialogs after polyfill loads
          const dialogs = document.querySelectorAll("dialog");
          dialogs.forEach((dialog) => {
            if (typeof dialogPolyfill !== "undefined") {
              dialogPolyfill.registerDialog(dialog);
            }
          });
        };
        document.head.appendChild(polyfillJS);
      }
    }
  }

  // Call this before other initializations
  checkBrowserCompatibility();

  //load remote stylesheet
  function loadRemoteStylesheet(url) {
    const linkElement = document.createElement("link");
    linkElement.rel = "stylesheet";
    linkElement.href = url;
    document.head.appendChild(linkElement);
  }

  function loadGoogleFont(fontFamily) {
    const linkElement = document.createElement("link");
    linkElement.rel = "stylesheet";
    linkElement.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
      fontFamily
    )}`;
    document.head.appendChild(linkElement);
  }

  function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";

    if (script.readyState) {
      // IE
      script.onreadystatechange = function () {
        if (
          script.readyState === "loaded" ||
          script.readyState === "complete"
        ) {
          script.onreadystatechange = null;
          if (callback) {
            callback();
          }
        }
      };
    } else {
      // Others
      script.onload = function () {
        if (callback) {
          callback();
        }
      };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }

  // load momentjs
  loadScript(
    "https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js",
    function () {
      // Do something after the script has loaded
    }
  );

  //loadRemoteStylesheet(remoteCss);
  //we load style directly
  // Create a <style> element
  const styleElement = document.createElement("style");

  // Define the CSS rules as a string
  const cssRules = `
/* Reset default list styles */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Center the cards horizontally using flexbox */
.mcloader-card-list {
  display: flex;
  justify-content: center;
}

/* Style each card */
.mcloader-card {
  width: 300px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 10px 10px 20px 10px; /* Add some space between cards */
  text-align: center;
  font-family: "Montserrat", sans-serif;
}
.mcloader-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

/* Style the image inside the card */
.mcloader-card img {
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
}

/* Style the card content */
.mcloader-card-content {
  padding: 20px;
  color: black;
	text-align: left;
}

/* Style the heading and paragraph */
h3.mcloader {
  margin: 0;
  font-size: 20px;
	margin-bottom: 10px;
  font-weight: bold;
  color: black;
}

p.mcloader {
  margin-top: 10px;
  font-size: 14px;
  color: black;
}
a.mcloader {
  text-decoration: none;
}

/*loader*/
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #3498db;
  animation: spin 1s linear infinite; /* Apply the loading animation */
}

/* Keyframe animation for spinning */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*book now button*/
button.mcloader {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/* Style the rectangular button */
.paddingtop10{
  padding-top:10px;
}
.rectangular-button {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px; /* Vertically center the text */
  text-align: center;
  font-size: 16px;
  font-weight: bold;
	color: #FFFFFF;
  background-color: #ca2c5b;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;

  font-family: "Montserrat", sans-serif;
}

/* Add hover effect */
.rectangular-button:hover { }
.square-image-container {
    /*
    height: 150px;
    display: flex;
    overflow: hidden;
    */
    justify-content: center;
    align-items: center;
}
.mcloader_logo {
	/*width:85% !important;*/
  width: auto !important;
  height: 250px !important;  
	margin-top:10px;
}
.mcloader-medspa, .mcloader-address {
	text-align:left !important;
}
.mcloader-medspa {
	font-weight:bold;
}
.mcloader-address {
	margin-bottom:10px;
}
.mcloadervia{
	margin-top:5px;
  padding-top: 5px;
  font-size: 0.75em;
	text-align:center;
}

/* NewLeadsMCLoader form */

#NewLeadsMCLoader {
	margin:0 auto;
	width:400px;
}

.formnewleads {
	text-align:left;
}

.invalid-feedback-show {
	color: #FFFFFF;
	background: #ca2c5b;
	margin-bottom:5px;
	padding:0px 13px;
}

.rownewleads p {
	font-size: 115%;
}

.timeslotbox{
  padding-top: 15px;
}

.timeslot {
  max-width: 100px;
  margin: 2px !important;
}
`;

  // Set the CSS rules as text content for the <style> element
  styleElement.textContent = cssRules;

  // Append the <style> element to the <head> of the document
  document.head.appendChild(styleElement);

  const fontFamily = "Montserrat"; // Replace this with the desired Google Font name
  loadGoogleFont(fontFamily);

  if (withmap === "true") {
    targetDiv.innerHTML =
      '<div id="map" style="height: 250px;margin-bottom:20px;" class="googlemaploader"></div> <div id="MCLoaderHereSelector"></div> <div id="MCLoaderHere"><div class="loading-container"><div class="loading-spinner"></div></div> </div>';
  } else {
    targetDiv.innerHTML =
      '<div id="MCLoaderHereSelector"></div> <div id="MCLoaderHere">   <div class="loading-container"><div class="loading-spinner"></div></div></div>';
  }

  //add bootstrap 5 if has not already loaded
  // Function to check if Bootstrap is already loaded
  // function isBootstrapLoaded() {
  //   return !!document.querySelector('.container');
  // }

  // // Function to add Bootstrap CSS if not already loaded
  // function loadBootstrapCSS() {
  //   if (!isBootstrapLoaded()) {
  //     const bootstraplink='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css';
  //     loadRemoteStylesheet(bootstraplink);
  //   }
  // }
  // loadBootstrapCSS();

  function getLocalReferalCode() {
    //try to get ref code
    let refcode = "";
    let lsref = localStorage.getItem("ref");
    let mcpr = localStorage.getItem("mcpr");
    if (lsref) {
      refcode = "?ref=" + lsref;
      if (mcpr) {
        //refcode+='&mcpr='+mcpr;
      }
    } else {
      if (mcpr) {
        //refcode='?mcpr='+mcpr;
      }
    }

    return refcode;
  }

  function hasURLParameters() {
    // Get the query string part of the URL
    var queryString = window.location.search;
    // Check if the query string is not empty
    return queryString !== "";
  }

  function appendUtmParamsAndReferral() {
    //try to get ref code
    let url_with_utm = "";
    let utm_count = 0;

    let lsref = localStorage.getItem("ref");

    if (lsref) {
      url_with_utm = "?ref=" + lsref;
      utm_count++;
    }

    const ls_utm_source = localStorage.getItem("utm_source");
    const ls_utm_medium = localStorage.getItem("utm_medium");
    const ls_utm_campaign = localStorage.getItem("utm_campaign");
    const ls_utm_id = localStorage.getItem("utm_id");
    const ls_utm_term = localStorage.getItem("utm_term");
    const ls_utm_content = localStorage.getItem("utm_content");

    if (ls_utm_source) {
      if (utm_count > 0) {
        url_with_utm += "&";
      } else {
        url_with_utm += "?";
      }
      if (ls_utm_source) {
        url_with_utm += "utm_source=" + ls_utm_source;
        utm_count++;
      }
    }
    if (ls_utm_medium) {
      if (utm_count > 0) {
        url_with_utm += "&";
      } else {
        url_with_utm += "?";
      }
      if (ls_utm_medium) {
        url_with_utm += "utm_medium=" + ls_utm_medium;
        utm_count++;
      }
    }
    if (ls_utm_campaign) {
      if (utm_count > 0) {
        url_with_utm += "&";
      } else {
        url_with_utm += "?";
      }
      if (ls_utm_campaign) {
        url_with_utm += "utm_campaign=" + ls_utm_campaign;
        utm_count++;
      }
    }
    if (ls_utm_id) {
      if (utm_count > 0) {
        url_with_utm += "&";
      } else {
        url_with_utm += "?";
      }
      if (ls_utm_id) {
        url_with_utm += "utm_id=" + ls_utm_id;
        utm_count++;
      }
    }
    if (ls_utm_term) {
      if (utm_count > 0) {
        url_with_utm += "&";
      } else {
        url_with_utm += "?";
      }
      if (ls_utm_term) {
        url_with_utm += "utm_term=" + ls_utm_term;
        utm_count++;
      }
    }
    if (ls_utm_content) {
      if (utm_count > 0) {
        url_with_utm += "&";
      } else {
        url_with_utm += "?";
      }
      if (ls_utm_content) {
        url_with_utm += "utm_content=" + ls_utm_content;
        utm_count++;
      }
    }

    return url_with_utm;
  }

  async function getCityList(clinicApiUrls) {
    // Create an array of promises
    const promises = clinicApiUrls.map((url) => fetchData(url)); //check url

    // Use Promise.all to wait for all promises to resolve
    Promise.all(promises)
      .then((results) => {
        // `results` is an array of the resolved values
        // console.log(results);

        //iterate data, find city name
        arr_dropdown = [];

        if (results.length) {
          for (let i = 0; i < results.length; i++) {
            const item = results[i];
            if (
              item &&
              Array.isArray(item.data) &&
              item.data.length &&
              item.data[0].clinic
            ) {
              const rs_slug = item.data[0].clinic.slug;
              const rs_name = item.data[0].clinic.name;
              arr_dropdown.push({ rs_slug, rs_name });
            } else {
              console.warn(
                "Missing or malformed data in result at index",
                i,
                item
              );
            }
          }
        }

        //MCLoaderHereSelector
        if (arr_dropdown.length > 1) {
          const targetDiv3 = document.getElementById("MCLoaderHereSelector");
          var htmlDropDown =
            '<div style="width:100%; display:block; text-align: center;"> <h2>Please select location:</h2> ';
          htmlDropDown += '<select id="chooseClinicDD" >';
          for (let i = 0; i < arr_dropdown.length; i++) {
            htmlDropDown += `<option value="${arr_dropdown[i].rs_slug}">${arr_dropdown[i].rs_name}</option>`;
          }
          htmlDropDown += '</select><div class="clearfix">&nbsp;</div>';
          htmlDropDown += "</div>";

          targetDiv3.innerHTML = htmlDropDown;

          //when drop down changed
          const dropdown = document.getElementById("chooseClinicDD");
          dropdown.addEventListener("change", function () {
            const selectedValue = this.value;
            process(selectedValue);
            // console.log("Selected clinic:", selectedValue);
            // You can add more code here to handle the selection change
          });
        }
      })
      .catch((error) => {
        // Handle any error that occurs during the fetch
        console.error("Error fetching data:", error);
      });
  }

  async function getClinicDetails(clinicSlug) {
    try {
      const data = await fetchData(
        apiUrl + `clinics/${clinicSlug}/branches?is_active=true`
      );
    } catch (error) {
      console.log("getClinicDetails error");
      console.error(error);
    }
  }

  async function process(chosenSlug) {
    //chosenSlug is clinic slug
    // console.log('process---'+chosenSlug);
    //reset array
    branchData = [];

    //give loading bar if element exists after select clinic drop down
    if (document.getElementById("branchList")) {
      document.getElementById("branchList").innerHTML =
        '<div class="loading">Please wait ...</div>';
    }

    try {
      const data = await fetchData(
        apiUrl + `clinics/${chosenSlug}/branches?is_active=true`
      );

      const targetDiv2 = document.getElementById("MCLoaderHere");

      let htmlContent = '<div class="mcloader-card-list row" id="branchList">';
      let index = 0;
      for (let i = 0; i < data.data.length; i++) {
        if (data.data[i].is_active) {
          const branch_slug = data.data[i].slug;
          const branch_logo = data.data[i].logo_url;
          const branch_name = data.data[i].name;
          const branch_id = data.data[i].id;
          const branch_address = data.data[i].address;

          let fschedules = "";
          console.log("show schedule : " + showSchedule);
          if (showSchedule === "true") {
            //get future schedule
            let futureSchedule = [];
            let starttime = createDate();
            let endtime = createDate(180);

            const fs = await fetchData(
              apiUrl +
                `branches/${branch_slug}/schedules?start_time=${starttime}&end_time=${endtime}&is_pause=false`
            );

            //format future schedule
            // console.log('futureSchedule--');
            // console.log(fs.data.date);
            for (let j = 0; j < fs.data.date.length; j++) {
              console.log(fs.data.date[j]);
              let fdate = formatDateMoment(fs.data.date[j]);
              fschedules += `<div class="paddingtop10"><button class="mcloader rectangular-button date-button" data-date="${fs.data.date[j]}" data-clinic-slug="${chosenSlug}" data-branch-slug="${branch_slug}" data-branch-name="${branch_name}">${fdate}</button></div>`;
            }
          } else {
            fschedules += ``;
          }

          //try to get ref code
          let refcode = appendUtmParamsAndReferral();

          htmlContent += `<div class="mcloader-card col-lg-3" data-index="${index}" id="mcli_${index}">`;
          //htmlContent += `<a href="${linkUrl}${branch_slug}/treatments${refcode}" class="mcloader">`;
          htmlContent += `<div class="mcloader">`;
          htmlContent += `<div class="square-image-container"><img src="${branch_logo}" class="mcloader_logo rectangular-image"/></div>`;
          htmlContent += `<div class="mcloader-card-content" style="text-align:center;">`;
          htmlContent += `<div class="mcloader-medspa">${branch_name}</div>`;
          htmlContent += `<div class="mcloader-address">${branch_address}</div>`;
          htmlContent += fschedules;
          htmlContent += `<div class="paddingtop10"><a href="${linkUrl}${chosenSlug}/${branch_slug}/treatments${refcode}" class="mcloader"><button class="mcloader rectangular-button">BOOK NOW</button><a></div>`;
          //htmlContent += `<div class="mcloadervia">via medspacircle.com</div>`;
          htmlContent += `</div>`;
          htmlContent += `</div>`;
          htmlContent += `</div>`;

          //add to branch data
          branchData.push({
            branch_name: branch_name,
            map_lat: data.data[i].map_lat,
            map_long: data.data[i].map_long,
            branch_address: branch_address,
          });

          index++;
        }
      }

      //element to show time slots
      htmlContent += '<div id="MCTimeSlots"></div>';
      htmlContent += "</div>";

      // Inject the generated HTML into the target div
      targetDiv2.innerHTML = htmlContent;

      theMapInitiator();
    } catch (error) {
      console.error("Error loading clinic data:", error);
      // Show error message instead of loading spinner
      const targetDiv2 = document.getElementById("MCLoaderHere");
      targetDiv2.innerHTML =
        '<div style="text-align: center; padding: 20px;"><p>Unable to load clinic information. Please refresh your browser.</p></div>';
    }

    changeClickedButtonColor();
    showSlots();
  }

  //stacking view process
  async function processStack(theslug) {
    //splitting locaiton titles
    let locationTitleArray = [];

    if (locationTitle != null) {
      locationTitleArray = locationTitle.split(",");
    }

    console.log("show schedule : " + showSchedule);

    try {
      //reset array

      let htmlContentArray = [];

      let index = 0;

      const targetDiv2 = document.getElementById("MCLoaderHere");

      //map element
      let mapDivElement = document.getElementById("map");

      for (let x = 0; x < theslug.length; x++) {
        console.log(theslug[x]);

        const data = await fetchData(
          apiUrl + `clinics/${theslug[x]}/branches?is_active=true`
        );

        branchData[x] = [];

        //add city name
        htmlContentArray[x] =
          '<h2 id="cityname' + x + '" style="text-align:center;"></h2>';
        //add map element
        htmlContentArray[x] +=
          '<div id="map' +
          x +
          '" style="height: 250px;margin-bottom:20px;" class="googlemaploader"></div>';
        htmlContentArray[x] +=
          '<div class="mcloader-card-list row" id="branchList">';

        for (let i = 0; i < data.data.length; i++) {
          if (data.data[i].is_active) {
            const branch_slug = data.data[i].slug;
            const branch_logo = data.data[i].logo_url;
            const branch_name = data.data[i].name;
            const branch_id = data.data[i].id;
            const branch_address = data.data[i].address;
            const branch_city_name = data.data[i].city_name;

            let fschedules = "";

            if (showSchedule === "true") {
              //get future schedule
              let futureSchedule = [];
              let starttime = createDate();
              let endtime = createDate(180);

              const fs = await fetchData(
                apiUrl +
                  `branches/${branch_slug}/schedules?start_time=${starttime}&end_time=${endtime}&is_pause=false`
              );

              for (let j = 0; j < fs.data.date.length; j++) {
                let fdate = formatDateMoment(fs.data.date[j]);
                fschedules += `<div class="paddingtop10"><button class="mcloader rectangular-button date-button" data-date="${fs.data.date[j]}" data-clinic-slug="${theslug[x]}" data-branch-slug="${branch_slug}" data-branch-name="${branch_name}">${fdate}</button></div>`;
              }
            } else {
              fschedules += ``;
            }

            //console.log(fschedules);

            //try to get ref code
            let refcode = appendUtmParamsAndReferral();

            htmlContentArray[
              x
            ] += `<div class="mcloader-card col-lg-3" data-index="${index}" id="mcli_${index}">`;
            //htmlContent += `<a href="${linkUrl}${branch_slug}/treatments${refcode}" class="mcloader">`;
            htmlContentArray[x] += `<div class="mcloader">`;
            htmlContentArray[
              x
            ] += `<div class="square-image-container"><img src="${branch_logo}" class="mcloader_logo rectangular-image"/></div>`;
            htmlContentArray[
              x
            ] += `<div class="mcloader-card-content" style="text-align:center;">`;
            htmlContentArray[
              x
            ] += `<div class="mcloader-medspa">${branch_name}</div>`;
            htmlContentArray[
              x
            ] += `<div class="mcloader-address">${branch_address}</div>`;
            htmlContentArray[x] += fschedules;
            htmlContentArray[
              x
            ] += `<div class="paddingtop10"><a href="${linkUrl}${theslug[x]}/${branch_slug}/treatments${refcode}" class="mcloader"><button class="mcloader rectangular-button">BOOK NOW</button><a></div>`;
            //htmlContentArray[x] += `<div class="mcloadervia">via medspacircle.com</div>`;
            htmlContentArray[x] += `</div>`;
            htmlContentArray[x] += `</div>`;
            htmlContentArray[x] += `</div>`;

            //add to branch data
            branchData[x].push({
              branch_name: branch_name,
              map_lat: data.data[i].map_lat,
              map_long: data.data[i].map_long,
              branch_address: branch_address,
            });

            index++;
          }
        }
      }

      htmlContentArray.push(
        '<div id="MCTimeSlots" class="MCTimeSlotsStacked"></div></div><div class="clearfix">&nbsp;</div>'
      );

      // Inject the generated HTML into the target div
      targetDiv2.innerHTML = htmlContentArray.join("");

      theMapInitiatorStack(theslug);

      //change city name location h2 only for the first branch data
      for (let x = 0; x < theslug.length; x++) {
        let locationTextElement = document.getElementById("cityname" + x);
        if (locationTitleArray[x] != undefined) {
          locationTextElement.innerHTML = locationTitleArray[x];
        }
      }
    } catch (error) {
      console.error(error);
    }

    changeClickedButtonColor();
    showSlots();
  }

  function showSlots(stacked = "") {
    // Select all elements with the class "target-class"
    var elements = document.querySelectorAll(".date-button");

    // Attach click event listener to each element
    elements.forEach(function (element) {
      element.addEventListener("click", handleClickDate);
    });
  }

  function changeClickedButtonColor() {
    //change the clicked-button color

    var buttons = document.querySelectorAll(".date-button");

    // Add event listener to each button
    buttons.forEach(function (button, index) {
      button.addEventListener("click", function () {
        // Reset all buttons to default color
        buttons.forEach(function (btn) {
          btn.style.backgroundColor = "";
        });
        // Set the color of the clicked button
        this.style.backgroundColor = "blue"; // Change this to the desired color
      });
    });
  }

  async function handleClickDate(event) {
    // Get the value of the "data-date" attribute from the clicked element
    var dataDate = event.target.getAttribute("data-date");
    var dataClinicSlug = event.target.getAttribute("data-clinic-slug");
    var dataBranchSlug = event.target.getAttribute("data-branch-slug");
    var dataBranchName = event.target.getAttribute("data-branch-name");
    //if stacked
    var dataTargetLoad = event.target.getAttribute("data-target-load");

    let idelement;
    if (dataTargetLoad != null) {
      //reset all html elements
      const elements = document.querySelectorAll(".MCTimeSlotsStacked");
      elements.forEach((element) => {
        // Perform an action on each element
        element.innerHTML = ""; // Example: Clear content
      });
      //load new
      idelement = document.getElementById(dataTargetLoad);
    } else {
      idelement = document.getElementById("MCTimeSlots");
    }

    idelement.innerHTML =
      '<div class="loading-container"><div class="loading-spinner"></div></div>';

    // Add your desired functionality here
    var dateToCheck = dataDate + " 00:00:00";

    // Options for the fetch request
    const requestData = {
      datetimes: dateToCheck,
    };

    const fetchOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json", // Specify that the request body contains JSON data
      },
      body: JSON.stringify(requestData), // Convert the data object to JSON format
    };

    const data = await fetchData(
      apiUrl + `branches/${dataBranchSlug}/time_slots`,
      fetchOptions
    );

    var dataSlotsHtml = ``;

    if (data.data.length) {
      //try to get ref code
      let refcode = appendUtmParamsAndReferral();

      var slots = "";
      for (let j = 0; j < data.data.length; j++) {
        let fdate = formatDateMoment(data.data[j].start_time, "hh:mm A");
        slots += `<a href="${linkUrl}${dataClinicSlug}/${dataBranchSlug}/treatments${refcode}" class="mcloader rectangular-button timeslot">${fdate}</a> `;
      }
      dataSlotsHtml += slots;
    } else {
      dataSlotsHtml = `<p style="color: red;">Please select another date</p>`;
    }

    let fdatedisplay = formatDateMoment(dataDate, "ddd, MMM Do, YYYY");

    idelement.innerHTML = `<div class="clearfix">&nbsp;</div><div class=""><h2>${dataBranchName}</h2></div><div class="timeslotbox_date">${fdatedisplay}</div> <div class="timeslotbox">${dataSlotsHtml}</div>`;

    // Scroll to the element
    idelement.scrollIntoView({ behavior: "smooth", block: "start" }); // This will scroll smoothly to the element

    //google analytics related
    setTimeout(function () {
      fetchGlParameter((glParam) => {
        console.log("_gl parameter:", glParam); // Use this value to append to outbound links
        appendGlToLinks(glParam);
      });
    }, 175);
  }

  //process();

  /** check if we have multiple slugs */
  async function checkMultiSlugs() {
    if (slug.includes(",")) {
      //multi
      let slugelement = slug.split(",");
      theslug = [...theslug, ...slugelement];

      for (let i = 0; i < slugelement.length; i++) {
        theUrlsToCall.push(
          apiUrl + `clinics/${slugelement[i]}/branches?is_active=true`
        );
      }
    } else {
      //single
      theslug.push(slug);
      theUrlsToCall.push(apiUrl + `clinics/${slug}/branches?is_active=true`);
    }

    //stackingView or not
    if (stackingView == "true") {
      console.log("stackingView true");

      processStack(theslug);
    } else {
      console.log("stackingView: " + stackingView);

      //initial slug 0 selection
      process(theslug[0]);

      getCityList(theUrlsToCall);
    }
  }

  checkMultiSlugs();

  /*with map*/
  function theMapInitiator() {
    if (withmap === "true") {
      function isGoogleMapsLoaded() {
        return typeof google === "object" && typeof google.maps === "object";
      }

      function waitForGoogleMaps(callback, maxAttempts = 20) {
        let attempts = 0;

        function checkGoogleMaps() {
          attempts++;

          if (
            typeof google === "object" &&
            typeof google.maps === "object" &&
            typeof google.maps.Map === "function" &&
            typeof google.maps.Marker === "function"
          ) {
            callback();
          } else if (attempt < maxAttempts) {
            setTimeout(
              () => waitForGoogleMaps(callback, maxAttempts, attempt + 1),
              100
            );
          } else {
            console.error(
              "Google Maps API failed to load completely after maximum attempts"
            );
            hideMapDiv();
          }
        }

        checkGoogleMaps();
      }

      // Function to hide the map div
      function hideMapDiv() {
        console.log("Hiding map divs due to Google Maps API failure");

        // Hide main map div
        const mapDiv = document.getElementById("map");
        if (mapDiv) {
          mapDiv.style.display = "none";
        }

        // Hide all stacked map divs (map0, map1, map2, etc.)
        let mapIndex = 0;
        while (true) {
          const stackedMapDiv = document.getElementById("map" + mapIndex);
          if (stackedMapDiv) {
            stackedMapDiv.style.display = "none";
            mapIndex++;
          } else {
            break;
          }
        }

        // Hide all elements with googlemaploader class
        const mapElements = document.getElementsByClassName("googlemaploader");
        for (let i = 0; i < mapElements.length; i++) {
          mapElements[i].style.display = "none";
        }
      }

      // Enhanced waitForGoogleMaps function
      function waitForGoogleMaps(callback, maxAttempts = 50, attempt = 1) {
        if (
          typeof google === "object" &&
          typeof google.maps === "object" &&
          typeof google.maps.Map === "function" &&
          typeof google.maps.Marker === "function"
        ) {
          callback();
        } else if (attempt < maxAttempts) {
          setTimeout(
            () => waitForGoogleMaps(callback, maxAttempts, attempt + 1),
            100
          );
        } else {
          console.error(
            "Google Maps API failed to load completely after maximum attempts"
          );
          hideMapDiv();
        }
      }

      // Function to load Google Maps API
      function loadGoogleMapsAPI() {
        if (isGoogleMapsLoaded()) {
          waitForGoogleMaps(() => initMap()); //create map when drop down changed
        } else {
          // Check if Google Maps is already loaded
          if (
            typeof google !== "undefined" &&
            typeof google.maps !== "undefined"
          ) {
            console.log("Google Maps already loaded");
            initMap();
            return;
          }

          console.log("Loading Google Maps API...");
          const script = document.createElement("script");
          script.src = `https://maps.googleapis.com/maps/api/js?key=${mapApiKey}&libraries=places&loading=async`;
          script.async = true;
          script.defer = true;

          script.onload = function () {
            console.log("Google Maps script loaded");
            waitForGoogleMaps(() => initMap());
          };

          script.onerror = function () {
            console.error("Failed to load Google Maps API");
            // Hide the map div when script fails to load
            hideMapDiv();
          };

          document.head.appendChild(script);
        }
      }

      // Call the function to load Google Maps API
      loadGoogleMapsAPI();

      function addMarker(map, map_lat, map_long, title, address) {
        var map_lat_float = parseFloat(map_lat);
        var map_long_float = parseFloat(map_long);

        const markerOptions = {
          position: { lat: map_lat_float, lng: map_long_float }, // Example: New York City coordinates
          map: map,
          title: title, // Optional: Add a title for the marker
          animation: google.maps.Animation.DROP, // Optional: Add animation when the marker is added
        };

        // Create a new marker instance
        const marker = new google.maps.Marker(markerOptions);

        const infoWindow = new google.maps.InfoWindow({
          content:
            '<span style="color: #000;"><strong>' +
            title +
            "</strong><br>" +
            address +
            "</span>",
        });

        marker.addListener("click", function () {
          infoWindow.open(map, marker);
        });

        theMarkerLists.push(marker);
      }

      // Add event listeners for mouseover and mouseout events
      // hoverElement.addEventListener('mouseover', handleMouseOver);
      // hoverElement.addEventListener('mouseout', handleMouseOut);

      function initMap() {
        // Add additional safety check
        console.log("Initializing map...");

        // Enhanced safety check
        if (typeof google === "undefined") {
          console.error("Google object not available");
          hideMapDiv();
          return;
        }

        if (typeof google.maps === "undefined") {
          console.error("Google Maps API not available");
          hideMapDiv();
          return;
        }

        if (typeof google.maps.Map === "undefined") {
          console.error("Google Maps Map constructor not available");
          // Try one more time with a longer delay, then hide if still fails
          setTimeout(function () {
            console.log("Final retry for map initialization...");
            if (typeof google.maps.Map === "undefined") {
              console.error(
                "Google Maps Map constructor still not available after retry"
              );
              hideMapDiv();
              return;
            }
            initMap();
          }, 1000);
          return;
        }

        // Additional checks for other required components
        if (typeof google.maps.Marker === "undefined") {
          console.error("Google Maps Marker constructor not available");
          setTimeout(function () {
            if (typeof google.maps.Marker === "undefined") {
              console.error(
                "Google Maps Marker constructor still not available after retry"
              );
              hideMapDiv();
              return;
            }
            initMap();
          }, 1000);
          return;
        }

        // Add more code to customize the map and add markers, overlays, etc.
        // Create a marker and set its position
        let countmarkers = 0;
        let total_lat = 0;
        let total_long = 0;

        //calculate map center

        //default
        let mapcenter_lat = 0;
        let mapcenter_long = 0;

        for (let i = 0; i < branchData.length; i++) {
          var map_lat_float = parseFloat(branchData[i].map_lat);
          var map_long_float = parseFloat(branchData[i].map_long);
          if (branchData[i].map_lat) {
            total_lat += map_lat_float;
            total_long += map_long_float;
            countmarkers++;
          }
        }

        if (countmarkers) {
          mapcenter_lat = total_lat / countmarkers;
          mapcenter_long = total_long / countmarkers;
        }

        try {
          console.log("Creating Google Maps instance...");
          const map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: mapcenter_lat, lng: mapcenter_long },
            zoom: 10,
          });

          console.log("Map created successfully");

          for (let i = 0; i < branchData.length; i++) {
            if (branchData[i].map_lat) {
              addMarker(
                map,
                branchData[i].map_lat,
                branchData[i].map_long,
                branchData[i].branch_name,
                branchData[i].branch_address
              );
              countmarkers++;
            }
          }

          //make all markers visible
          // Create a LatLngBounds object
          var bounds = new google.maps.LatLngBounds();

          // Extend the bounds to include each marker's position
          for (var i = 0; i < theMarkerLists.length; i++) {
            bounds.extend(theMarkerLists[i].getPosition());
          }

          // Fit the map to the bounds
          if (
            mapZoomLevel === undefined ||
            mapZoomLevel === null ||
            mapZoomLevel == "auto" ||
            mapZoomLevel == ""
          ) {
            map.fitBounds(bounds);
          } else {
            map.setZoom(parseInt(mapZoomLevel));
          }

          //hover card actions ------
          const elementsWithClass =
            document.getElementsByClassName("mcloader-card");

          // Loop through the collection of elements
          for (let i = 0; i < elementsWithClass.length; i++) {
            // Do something with each element
            let cardindex = parseInt(
              elementsWithClass[i].getAttribute("data-index")
            );

            let idelement = document.getElementById("mcli_" + cardindex);

            idelement.addEventListener("mouseover", handleMouseOver(cardindex));
            idelement.addEventListener("mouseout", handleMouseOut());
          }

          // Event handler for mouseover (hover)
          function handleMouseOver(i) {
            // console.log("Mouse pointer entered the element." + i);
            //google.maps.event.trigger(theMarkerLists[i], "click");
          }

          // Event handler for mouseout (hover off)
          function handleMouseOut() {
            // console.log("Mouse pointer left the element.");
          }
        } catch (error) {
          console.error("Error initializing Google Maps:", error);
        }
      }

      //hover card actions ------
    } else {
      //reset styling
      const mapElementsWithClass =
        document.getElementsByClassName("googlemaploader");
      for (let i = 0; i < mapElementsWithClass.length; i++) {
        mapElementsWithClass[i].removeAttribute("style");
      }
    }
  }

  /*stack maps*/

  function theMapInitiatorStack(theslug) {
    if (withmap === "true") {
      console.log("map stack");

      //remove div id map
      const elementToRemove = document.getElementById("map");
      if (elementToRemove) {
        elementToRemove.remove();
      }

      function isGoogleMapsLoadedStack() {
        return (
          typeof google === "object" &&
          typeof google.maps === "object" &&
          typeof google.maps.Map === "function" &&
          typeof google.maps.Marker === "function"
        );
      }

      // Function to hide the map div
      function hideMapDiv() {
        console.log("Hiding map divs due to Google Maps API failure");

        // Hide main map div
        const mapDiv = document.getElementById("map");
        if (mapDiv) {
          mapDiv.style.display = "none";
        }

        // Hide all stacked map divs (map0, map1, map2, etc.)
        let mapIndex = 0;
        while (true) {
          const stackedMapDiv = document.getElementById("map" + mapIndex);
          if (stackedMapDiv) {
            stackedMapDiv.style.display = "none";
            mapIndex++;
          } else {
            break;
          }
        }

        // Hide all elements with googlemaploader class
        const mapElements = document.getElementsByClassName("googlemaploader");
        for (let i = 0; i < mapElements.length; i++) {
          mapElements[i].style.display = "none";
        }
      }

      function waitForGoogleMapsStack(callback, maxAttempts = 50, attempt = 1) {
        if (isGoogleMapsLoadedStack()) {
          callback();
        } else if (attempt < maxAttempts) {
          setTimeout(
            () => waitForGoogleMapsStack(callback, maxAttempts, attempt + 1),
            100
          );
        } else {
          console.error("Google Maps API failed to load for stacking view");
          hideMapDiv();
        }
      }

      // Function to load Google Maps API
      function loadGoogleMapsAPIStack() {
        if (isGoogleMapsLoadedStack()) {
          initMapStack(theslug); //create map when drop down changed
        } else {
          const script = document.createElement("script");
          script.src = `https://maps.googleapis.com/maps/api/js?key=${mapApiKey}&libraries=places&loading=async`;
          script.defer = true;
          script.async = true;

          // Handle the case when the script is loaded successfully
          script.onload = function () {
            // Call your function to initialize the map
            waitForGoogleMapsStack(() => initMapStack(theslug));
          };

          // Handle the case when there is an error loading the script
          script.onerror = function () {
            console.error("Error loading Google Maps API for stacking view.");
            hideMapDiv();
          };

          // Append the script to the <head> element to start loading
          document.head.appendChild(script);
        }
      }

      // Call the function to load Google Maps API
      loadGoogleMapsAPIStack();

      function addMarkerStack(map, map_lat, map_long, title, address) {
        var map_lat_float = parseFloat(map_lat);
        var map_long_float = parseFloat(map_long);

        const markerOptions = {
          position: { lat: map_lat_float, lng: map_long_float }, // Example: New York City coordinates
          map: map,
          title: title, // Optional: Add a title for the marker
          animation: google.maps.Animation.DROP, // Optional: Add animation when the marker is added
        };

        // Create a new marker instance
        const marker = new google.maps.Marker(markerOptions);

        const infoWindow = new google.maps.InfoWindow({
          content:
            '<span style="color: #000;"><strong>' +
            title +
            "</strong><br>" +
            address +
            "</span>",
        });

        marker.addListener("click", function () {
          infoWindow.open(map, marker);
        });

        theMarkerLists.push(marker);
      }

      // Add event listeners for mouseover and mouseout events
      // hoverElement.addEventListener('mouseover', handleMouseOver);
      // hoverElement.addEventListener('mouseout', handleMouseOut);

      function initMapStack(theslug) {
        console.log("initMapStack");
        console.log(theslug);

        // Enhanced safety checks
        if (
          typeof google === "undefined" ||
          typeof google.maps === "undefined" ||
          typeof google.maps.Map !== "function" ||
          typeof google.maps.Marker !== "function"
        ) {
          console.error("Google Maps components not available for stacking");
          hideMapDiv();
          return;
        }

        //create element inside
        // const newElement = document.createElement('div');
        // newElement.textContent = '';
        // newElement.setAttribute('id', 'map'); // Set the id attribute

        // targetDiv.insertBefore(newElement, targetDiv.firstChild);

        //loop map
        try {
          for (let x = 0; x < theslug.length; x++) {
            // Add more code to customize the map and add markers, overlays, etc.
            // Create a marker and set its position
            let countmarkers = 0;
            let total_lat = 0;
            let total_long = 0;

            //calculate map center

            //default
            let mapcenter_lat = 40.7128;
            let mapcenter_long = -74.006;

            let branchDataX = branchData[x];

            for (let i = 0; i < branchDataX.length; i++) {
              var map_lat_float = parseFloat(branchDataX[i].map_lat);
              var map_long_float = parseFloat(branchDataX[i].map_long);
              if (branchDataX[i].map_lat) {
                total_lat += map_lat_float;
                total_long += map_long_float;
                countmarkers++;
              }
            }

            console.log("countmarkers: " + countmarkers);
            console.log("total_lat: " + total_lat);
            console.log("total_long: " + total_long);

            if (countmarkers) {
              mapcenter_lat = total_lat / countmarkers;
              mapcenter_long = total_long / countmarkers;
            }

            const map = new google.maps.Map(
              document.getElementById("map" + x),
              {
                center: { lat: mapcenter_lat, lng: mapcenter_long }, // Example: New York City coordinates
                zoom: 10,
              }
            );

            for (let i = 0; i < branchDataX.length; i++) {
              if (branchDataX[i].map_lat) {
                addMarkerStack(
                  map,
                  branchDataX[i].map_lat,
                  branchDataX[i].map_long,
                  branchDataX[i].branch_name,
                  branchDataX[i].branch_address
                );
                countmarkers++;
              }
            }

            //make all markers visible
            // Create a LatLngBounds object
            var bounds = new google.maps.LatLngBounds();

            // Extend the bounds to include each marker's position
            for (var i = 0; i < theMarkerLists.length; i++) {
              bounds.extend(theMarkerLists[i].getPosition());
            }

            // Fit the map to the bounds
            if (
              mapZoomLevel === undefined ||
              mapZoomLevel === null ||
              mapZoomLevel == "auto" ||
              mapZoomLevel == ""
            ) {
              map.fitBounds(bounds);
            } else {
              map.setZoom(parseInt(mapZoomLevel));
            }
          }
          //loop map

          //hover card actions ------
          const elementsWithClass =
            document.getElementsByClassName("mcloader-card");

          // Loop through the collection of elements
          for (let i = 0; i < elementsWithClass.length; i++) {
            // Do something with each element
            let cardindex = parseInt(
              elementsWithClass[i].getAttribute("data-index")
            );

            let idelement = document.getElementById("mcli_" + cardindex);

            idelement.addEventListener("mouseover", handleMouseOver(cardindex));
            idelement.addEventListener("mouseout", handleMouseOut());
          }

          // Event handler for mouseover (hover)
          function handleMouseOver(i) {
            // console.log("Mouse pointer entered the element." + i);
            //google.maps.event.trigger(theMarkerLists[i], "click");
          }

          // Event handler for mouseout (hover off)
          function handleMouseOut() {
            // console.log("Mouse pointer left the element.");
          }
        } catch (error) {
          console.error("Error initializing stacked Google Maps:", error);
          hideMapDiv();
        }
      }

      //hover card actions ------
    } else {
      //reset styling
      const mapElementsWithClass =
        document.getElementsByClassName("googlemaploader");
      for (let i = 0; i < mapElementsWithClass.length; i++) {
        mapElementsWithClass[i].removeAttribute("style");
      }
    }
  }

  /*function get today's date*/
  function createDate(daysToAdd = 0) {
    const today = new Date();

    if (daysToAdd != 0) {
      today.setDate(today.getDate() + daysToAdd);
    }

    const year = today.getFullYear();
    let month = today.getMonth() + 1;
    let day = today.getDate();
    let hours = today.getHours();
    let minutes = today.getMinutes();
    let seconds = today.getSeconds();

    // Add leading zeros to single digit months, days, hours, minutes, and seconds
    if (month < 10) {
      month = `0${month}`;
    }
    if (day < 10) {
      day = `0${day}`;
    }
    if (hours < 10) {
      hours = `0${hours}`;
    }
    if (minutes < 10) {
      minutes = `0${minutes}`;
    }
    if (seconds < 10) {
      seconds = `0${seconds}`;
    }

    const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return formattedDate;
  }

  function formatDate(inputDate) {
    const date = new Date(inputDate);

    const options = { month: "short", day: "numeric" };
    const monthDay = date.toLocaleString("en-US", options);

    const weekday = new Intl.DateTimeFormat("en-US", {
      weekday: "short",
    }).format(date);

    const day = date.getDate();
    let suffix = "th";
    if (day === 1 || day === 21 || day === 31) {
      suffix = "st";
    } else if (day === 2 || day === 22) {
      suffix = "nd";
    } else if (day === 3 || day === 23) {
      suffix = "rd";
    }

    const formattedDate = `${monthDay}${suffix}, ${weekday}`;

    return formattedDate;
  }

  function formatDateMoment(inputDate, newformat = "MMM Do, ddd") {
    var formattedDate = moment(inputDate).format(newformat);
    return formattedDate;
  }

  async function fetchData(url, fetchOptions = null) {
    try {
      // var glue = '';
      // if (url.includes('?')) {
      //     glue = '&';
      // }
      // else {
      //     glue = '?';
      // }

      //const response = await fetch(url+glue+'nocache=' + new Date().getTime(),fetchOptions);
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout

      const response = await fetch(url, {
        ...fetchOptions,
        signal: controller.signal,
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      return data;
    } catch (error) {
      console.error("Error fetching data:", error);
      throw error; // Rethrow the error to handle it elsewhere
    }
  }

  //google analytics cross domain

  // Generate the _gl parameter using Google Analytics gtag
  function getMeasurementIdFromScriptTag() {
    const scripts = document.querySelectorAll("script[src]");
    for (const script of scripts) {
      const src = script.getAttribute("src");
      if (src && src.includes("gtag/js?id=")) {
        const idMatch = src.match(/id=(G-[a-zA-Z0-9]+)/);
        if (idMatch) {
          return idMatch[1]; // Extract the Measurement ID
        }
      }
    }
    console.error("Measurement ID not found in script tags.");
    return null;
  }

  // Example usage:
  var measurementId;
  setTimeout(function () {
    measurementId = getMeasurementIdFromScriptTag();
    if (measurementId) {
      //console.log('Google Analytics Measurement ID:', measurementId);
    }
  }, 100);

  function fetchGlParameter(callback) {
    if (window.gtag) {
      // 'G-XXXXXXXXXX' should be replaced with your GA4 Measurement ID
      gtag("get", measurementId, "linker", (glParam) => {
        if (glParam) {
          callback(glParam); // Return the _gl parameter
        } else {
          console.warn("Google Analytics tag (_gl) could not be retrieved.");
        }
      });
    } else {
      console.error("Google Analytics is not initialized.");
    }
  }

  function getGtmGoogleAnalyticsTag() {
    if (window.dataLayer) {
      for (const event of window.dataLayer) {
        if (event.linker) {
          return event.linker; // Return the _gl parameter
        }
      }
    }
    console.warn("No _gl parameter found in the Data Layer.");
    return null;
  }

  // Example usage
  setTimeout(function () {
    fetchGlParameter((glParam) => {
      console.log("_gl parameter:", glParam); // Use this value to append to outbound links
      appendGlToLinks(glParam);
    });
  }, 175);

  function appendGlToLinks(glParam) {
    if (glParam) {
      const links = document.querySelectorAll('a[href^="' + linkUrl + '"]');
      links.forEach((link) => {
        const url = new URL(link.href);
        url.searchParams.set("_gl", glParam); // Add _gl parameter
        link.href = url.toString(); // Update link href
      });
    }
  }
})();