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 targetDiv = document.getElementById("MCLoader");

const slug = targetDiv.getAttribute("data-slug-id");
const withmap = targetDiv.getAttribute("data-with-map");
const mapApiKey = targetDiv.getAttribute("data-map-api-key");

const linkUrl = `https://go.medspacircle.com/clinics/${slug}/`;

let branchData = [];

let theMarkerLists = [];

//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;
  max-width:none !important; 
}

/* 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;
  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;"></div><div id="MCLoaderHere"><div class="loading-container"><div class="loading-spinner"></div></div></div>';
} else {
  targetDiv.innerHTML =
    '<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 process(){
  try{
    const data=await fetchData(apiUrl + `clinics/${slug}/branches?is_active=true`);
    console.log(data.data);

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

    let htmlContent = '<div class="mcloader-card-list row">';
    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;


        //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`);        
        
        let fschedules="";
        //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-branch-slug="${branch_slug}" data-branch-name="${branch_name}">${fdate}</button></div>`;
        }


        //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}${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){
  
  }

  changeClickedButtonColor();
  showSlots();
}


function showSlots(){
  // 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);
  });

  //MCTimeSlots
}

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 dataBranchSlug = event.target.getAttribute('data-branch-slug');
  var dataBranchName = event.target.getAttribute('data-branch-name');
  let 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}${dataBranchSlug}/treatments${refcode}" class="mcloader rectangular-button timeslot">${fdate}</a> `;
    }
    dataSlotsHtml=slots;
  }
  else{
    dataSlotsHtml=`<p>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

}

process();



/*with map*/
function theMapInitiator() {
  if (withmap === "true") {
    console.log("load map true");

    // Function to load Google Maps API
    function loadGoogleMapsAPI() {
      console.log("loadGoogleMapsAPI");

      const script = document.createElement("script");
      script.src = `https://maps.googleapis.com/maps/api/js?key=${mapApiKey}&libraries=places`;
      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
        initMap();
      };

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

      // Append the script to the <head> element to start loading
      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() {
      console.log("initMap");
      //create element inside
      // const newElement = document.createElement('div');
      // newElement.textContent = '';
      // newElement.setAttribute('id', 'map'); // Set the id attribute

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

      console.log(branchData);
      // 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;

      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;
      }

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

      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 more than 1 marker, instead it will be zoomed too close
        if(theMarkerLists.length > 1){
          map.fitBounds(bounds);
        }

      
      //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"));
        console.log(cardindex);
        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.");
      }
    }

    //hover card actions ------
  }
}

/*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 {
    const response = await fetch(url,fetchOptions);
    const data = await response.json();
    // Process the data
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Rethrow the error to handle it elsewhere
  }
}