function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function menu_toggle (event, ele) {
  event.stopPropagation();
  jQuery(ele).toggleClass('in');
  jQuery(ele).siblings(".menu-level-2-body").toggleClass('in');
}

function trim (s, c) {
  if (c === "]") c = "\\]";
  if (c === "^") c = "\\^";
  if (c === "\\") c = "\\\\";
  return s.replace(new RegExp(
    "^[" + c + "]+|[" + c + "]+$", "g"
    ), "");
}

function getCookies() {
  var cookies = document.cookie.split(';');
  var ret = {};
  let k = ``;
  let v = ``;
  let exploded;
  for(var i = 1; i <= cookies.length; i++) {
    exploded = cookies[i - 1].split('=');
    k = trim(exploded[0], ` `);
    exploded[0] = null;
    v = exploded.join(`=`);
    v = trim(v, `=`);
    ret[k] = v;
  }
  return ret;
}

jQuery(document).ready(function() {
  let existing_cookies = getCookies();
  console.log(existing_cookies);
});

// More General helper functions
const helperFunctions = {
  // Check if object is empty
  emptyObj: (obj) => {
    for (const i in obj) return false;
    return true;
  },
  // Return formatted Melbourne date/time
  currentTime : () => moment().tz('Australia/Melbourne').format(),
  // Base64 encode/decode
  base64Encode: (dataStringified) => btoa(unescape(encodeURIComponent(dataStringified))),
  base64Decode: (dataBase64Encoded) => atob(dataBase64Encoded),
  // Redirect to page
  goToPage    : (pathUrl) => {
    window.location = `${location.protocol}//${location.host}${pathUrl}`;
  },
};

var bywilla_links = {};
bywilla_links.facebook = 'https://www.facebook.com/byWILLA/';
bywilla_links.instagram = 'https://www.instagram.com/by_willa/?hl=en';
bywilla_links.wp = 'https://postie.com.au/bywilla/';


if (document.querySelector(`.wpcf7 .stylist_name input`)) {

  new autoComplete({
    selector    : '.stylist_name input',
    searchEngine: 'strict',
    placeHolder : 'Search for Your Stylist!',
    data        : {
      src: async () => {
        try {
        // Set loading placeholder text
          const stylistSearchInput = document.querySelector('.stylist_name input');
          stylistSearchInput.setAttribute('placeholder', 'Loading...');

          // Fetch External Data Source
          const response = await axios.get('/Bonntech_Custom_Built/stylist_ajax_functions/open_stylist_ajax.php');
          const stylistData = response.data;

          // Remove Loading placeholder text
          stylistSearchInput.setAttribute('placeholder', `Search for Your Stylist`);
          // Returns Fetched data
          return Object.values(stylistData);
        } catch (error) {
          console.log('=== Get open stylist error ===', error);
          return true;
        }
      },
      keys  : ['stylist_name', 'email', 'phone'],
      cache : true,
      filter: (list) => {
        // Filter duplicates
        const filteredResults = list.filter(
          (obj, pos, arr) => arr.map((mapObj) => mapObj.value).indexOf(obj.value) === pos,
        );
        return filteredResults;
      },
    },
    query      : (input) => DOMPurify.sanitize(input),
    resultsList: {
      element: (list, data) => {
        const info = document.createElement('p');
        if (data.results.length > 0) {
          info.innerHTML = `Displaying <strong>${data.results.length}</strong> out of <strong>${data.matches.length}</strong> results`;
        } else {
          info.innerHTML = `Found <strong>${data.matches.length}</strong> matching results for <strong>"${data.query}"</strong>`;
        }
        list.prepend(info);
      },
      noResults : true,
      maxResults: 15,
      tabSelect : true,
    },
    resultItem: {
      element: (item, data) => {
      // Modify Results Item Style
        const imgContent = (data.value.stylist_image !== '')
          ? `<img class="rounded-circle" src="${data.value.stylist_image}">`
          : ` <div class="image-missing-holder bg-black d-flex align-items-center justify-content-center rounded-circle">
                <span class="text-white" style="font-size: 40px;">${data.value.stylist_name.charAt(0)}</span>
              </div>`;

        item.innerHTML = `
        <div class="stylist-block-wrap stylist-select-wrap">
          <div class="d-flex flex-md-row flex-row-reverse text-right text-md-left">
            <div class="image pt-2 pb-2 pl-2 pr-0 pr-md-2 pl-md-0">
              ${imgContent}
            </div>
            <div class="details d-flex flex-column align-self-center">
              <p class="name mb-0"><strong>${data.value.stylist_name}</strong></p>
              <p class="type mb-0">Stylist</p>
            </div>
          </div>
        </div>
        `;
      },
      highlight: true,
    },
  });

  document.querySelector(".stylist_name input").addEventListener("selection", function (event) {
      document.querySelector(".stylist_name input").value = event.detail.selection.value.stylist_name;
  });
}

// stylistFunctions.setStylistData(JSON.stringify(event.detail.selection.value));

// Page display related functions
const pageFunctions = {
  // responsive iframes for shop-by-style sub-categories
  setIFrame: () => {
    if (document.querySelector('.category-description div iframe') !== null) {
      document.querySelector('.category-description div iframe').parentElement.setAttribute('style', 'position: relative;width: 100%;padding-bottom: 60%;margin-top: -1rem;');
      document.querySelector('.category-description div iframe').setAttribute('style', 'position: absolute;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;');
    }
    return true;
  },

  // Go Back function on product page
  productLastPage: (categoryFriendlyURL) => (document.referrer.includes('postie.com.au') ? history.go(-1) : location.replace(`https:${categoryFriendlyURL}`)),

  // Check if it is bywilla related page, and carry out the required modification to the page
  isByWillaPageCheckNSet: async () => {
    if (window.location.href.indexOf('by-willa') < 0 && window.location.href.indexOf('bywilla') < 0) {
      if (typeof isByWillaPage === 'undefined' || isByWillaPage === false) {
        return true;
      }
    }
    // Set byWILLA Display
    jQuery('#header_wrap .logo.img-responsive').attr('src','/global_assets/img/bywilla_logo.png');
    jQuery('#header_wrap .logo.img-responsive').addClass('logo-by-willa');
    jQuery('#_desktop_logo a').attr('href', bywilla_links.wp);
    jQuery(".logo-by-willa").parent().attr('href', bywilla_links.wp);



    jQuery('#footer_wrap .logo.img-fluid').attr('src', '/global_assets/img/bywilla_logo.png');
    jQuery('#footer_wrap .logo.img-fluid').attr('data-lazy-src', '/global_assets/img/bywilla_logo.png');
    jQuery('#footer_wrap #block_newsletter').removeClass('bg-pink');
    jQuery('#footer_wrap #block_newsletter').addClass('bg-bywilla');
    jQuery('#footer_wrap .block-social-footer').removeClass('bg-pink');
    jQuery('#footer_wrap .block-social-footer').addClass('bg-bywilla');
    jQuery('#footer_wrap').addClass('bg-black');


    console.log('bywilla!');

    jQuery('.social_links_container .facebook a').attr(`href`, bywilla_links.facebook);
    jQuery('.social_links_container .facebook')[0].onclick = function () {
      window.open(bywilla_links.facebook);
    }

    jQuery('.social_links_container .instagram a').attr('href', bywilla_links.instagram);
    jQuery('.social_links_container .instagram')[0].onclick = function () {
      window.open(bywilla_links.instagram);
    }
// https://postie.com.au/Bonntech_Custom_Built/stylist_ajax_functions/open_stylist_ajax.php

    return true;
  },

  // set Mega Menus
  renderMenu: async () => {
    // Get and render the menu items
    const shopMenusEndPoint = 'https://postie.com.au/wp-json/wp/v2/website_menu_item';
    document.querySelector('#header_wrap #_desktop_top_menu ul').innerHTML = '';
    document.querySelector('#header_wrap #mobile_top_menu_wrapper ul').innerHTML = '';
    try {
      const { data } = await axios.get(shopMenusEndPoint);
      // Sorting by position set in UI
      data.sort((a, b) => parseFloat(a.position) - parseFloat(b.position)).forEach((element) => {
        if (element.has_mega_menu === '0') {
          const _desktop_top_menu = document.querySelector('#header_wrap #_desktop_top_menu ul');
          const _mobile_top_menu = document.querySelector('#header_wrap #mobile_top_menu_wrapper ul');
          let str = `
          <li class="link nav-item d-list-item px-2 px-lg-4 py-3 position-relative">
            <a class="" href="${element.url}" data-depth="0">${element.title.rendered}</a>
        `;

          let str_mobile = `
          <li class="link nav-item d-list-item px-lg-4 py-3 position-relative">
            <a class="" href="${element.url}"  data-depth="0">${element.title.rendered}</a>
        `;

          if (element.content.rendered != '') {
            str += `<div class="dropdown-menu">${element.content.rendered}</div>`;

            // str_mobile +=`<span style='display: inline-block;' class='nav-link dropdown-toggle'></span>`;
            str_mobile = `
              <li class="link nav-item d-list-item position-relative dropdown has-megamenu">
                <a href='#' class="nav-link dropdown-toggle" data-depth="0" data-toggle="dropdown">${element.title.rendered}</a>
            `;
            str_mobile += `<div class="dropdown-menu">${element.content.rendered}</div>`;
          }

          str += '</li>';
          str_mobile += '</li>';
          _desktop_top_menu.innerHTML += str;
          // document.querySelector('#header_wrap #mobile_top_menu_wrapper ul').innerHTML += `
          //   <li class="link">
          //     <a class="dropdown-item px-2 px-lg-4 py-3" href="${element.url}" data-depth="0">${element.title.rendered}</a>
          //   </li>
          // `;

          // console.log(str_mobile);
          _mobile_top_menu.innerHTML += str_mobile;

          // console.log(_mobile_top_menu);


          
        } else if (element.has_mega_menu === '1') {
          document.querySelector('#header_wrap #_desktop_top_menu ul').innerHTML += `
            <li class="link nav-item d-list-item px-2 px-lg-4 py-3 dropdown has-megamenu">
                <a class="" href="${element.url}" data-depth="0">${element.title.rendered}</a>
                <div id="mm_slug-${element.slug}" class="dropdown-menu megamenu" role="menu">${element.content.rendered}</div>
            </li>
          `;
          document.querySelector('#header_wrap #mobile_top_menu_wrapper ul').innerHTML += `
            <li class="nav-item dropdown open">
              <a id="mobile_mm_toggle" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">${element.title.rendered}</a>
              <div id="mm_slug-mobile" class="dropdown-menu" role="menu" aria-labelledby="mobile_mm_toggle"></div>
            </li>
          `;
        }
      });

      // let mm_html = element.content.rendered;

      jQuery.ajax({
        url     : 'https://postie.com.au/store/Bonntech_Custom_Built/page_structure/mega_menu_shop.php',
        type    : 'GET',
        dataType: 'html',
        data    : { param1: 'value1' },
      })
      .done((data) => {
        mm_html = data;
        document.querySelector('#header_wrap #_desktop_top_menu #mm_slug-shop').innerHTML = mm_html;        
        // document.querySelector('#header_wrap #mobile_top_menu_wrapper ul').innerHTML += `
        //   <li class="link">
        //     <a class="dropdown-item px-2 px-lg-4 py-3" href="${element.url}" data-depth="0">${element.title.rendered}</a>
        //   </li>
        // `;
      })
      .fail(() => {
        // console.log('error');
      })
      .always(() => {
        // console.log('complete');
      });

      jQuery.ajax({
        url     : 'https://postie.com.au/store/Bonntech_Custom_Built/page_structure/mega_menu_mobile.php',
        type    : 'GET',
        dataType: 'html',
        data    : { param1: 'value1' },
      })
      .done((data) => {
        mm_html = data;
        document.querySelector('#header_wrap #mm_slug-mobile').innerHTML = mm_html;
        // document.querySelector('#header_wrap #mobile_top_menu_wrapper ul').innerHTML += `
        //   <li class="link">
        //     <a class="dropdown-item px-2 px-lg-4 py-3" href="${element.url}" data-depth="0">${element.title.rendered}</a>
        //   </li>
        // `;
      })
      .fail(() => {
        // console.log('error');
      })
      .always(() => {
        // console.log('complete');
      });

      return true;
    } catch (error) {
      console.log('=== Mega menu loading error ===', error);
      return true;
    }
  },
};

// Stylist related functions
const stylistFunctions = {
  // Check if stylist has been set
  hasStylist: () => {
    const assignedStylistStored = localStorage.getItem('assigned-stylist');
    if (assignedStylistStored === null) {
      // console.log('No stylist assigned.');
      return false;
    }
    if (helperFunctions.emptyObj(JSON.parse(helperFunctions.base64Decode(assignedStylistStored)))) {
      // console.log('checked checkbox no stylist (emptyObj === true)');
      return false;
    }
    return assignedStylistStored;
  },

  // Set stylist data to local storage
  // 'stylist page' and 'stylist select' call with stylist data stringified
  // 'No stylist' checkbox call with nothing (dataStringified undefined)
  setStylistData: async (dataStringified) => {
    // If no stylist set, just return empty stringify obj to avoid error, then return
    if (typeof dataStringified === 'undefined') {
      localStorage.setItem('assigned-stylist', helperFunctions.base64Encode(JSON.stringify({})));
      // force refresh the stylist display
      stylistFunctions.setStylistDisplay();
      setCookie('assigned-stylist', null, 0);
      return true;
    }
    // If stylist data is passed in
    const data = JSON.parse(dataStringified);

    if (data.pid !== '') {
      // If has stylist page
      try {
        const response = await axios.get(`https://postie.com.au/wp-json/wp/v2/stylist/${data.pid}?_embed`);
        data.stylist_image = response.data._embedded['wp:featuredmedia'][0].source_url;
      } catch (error) {
        console.error('=== Stylist Image Get Error ===', error);
      }
    }
    data.last_modified = helperFunctions.currentTime();

    const dataStringifiedReturn = JSON.stringify(data);
    localStorage.setItem('assigned-stylist', helperFunctions.base64Encode(dataStringifiedReturn));
    
    setCookie('assigned-stylist', helperFunctions.base64Encode(dataStringifiedReturn), 30);

    stylistFunctions.setStylistDisplay();
    return true;
  },

  // Get stylist data from local storage, then set the display accordingly
  setStylistDisplay: async () => {
    // If stylist data has been set
    const assignedStylistStored = stylistFunctions.hasStylist();

    if (assignedStylistStored) {
      const stylistData = JSON.parse(helperFunctions.base64Decode(assignedStylistStored));
      console.log(stylistData);
      setCookie('assigned-stylist', helperFunctions.base64Decode(assignedStylistStored), 30);
      console.log('set cookie data');

      const differentInHours = moment.duration(moment(helperFunctions.currentTime()).diff(moment(stylistData.last_modified))).as('hours');
      // REFRESH stylist data if more than 2 hours old
      if (differentInHours > 2) {
        stylistFunctions.setStylistData(JSON.stringify(stylistData));
        console.log('refreshing stylist details now...');
      }

      const imgContent = (stylistData.stylist_image !== '')
        ? `<img class="rounded-circle" src="${stylistData.stylist_image}">`
        : ` <div class="image-missing-holder bg-black d-flex align-items-center justify-content-center rounded-circle">
              <span class="text-white" style="font-size: 40px;">${stylistData.stylist_name.charAt(0)}</span>
            </div>`;
      const contactContent = (stylistData.stylist_url !== '')
        ? ` <p class="type mb-0">Stylist</p>
            <p class="mobile mb-0"><a href="tel:${stylistData.phone.replace(/\D/g, '')}">${stylistData.phone}</a></p>
            <p class="links d-flex align-items-center mb-0">
              <a href="${stylistData.stylist_url}" class="d-none d-sm-block">My Story</a><span class="d-none d-sm-block">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <a href="mailto:${stylistData.email}">Contact</a>&nbsp;&nbsp;|&nbsp;&nbsp;
              <a class="fb social" target="_blank" href="${stylistData.facebook_url}">
                  <img src="/global_assets/img/facebook_icon_coloured.png">
              </a>&nbsp;&nbsp;&nbsp;
              <a class="inst social" target="_blank" href="${stylistData.instagram_url}">
                  <img src="/global_assets/img/instagram_icon_coloured.png">
              </a>
            </p>`
        : '';
      const stylistHeaderHTML = `
        <div class="d-flex flex-md-row flex-row-reverse text-right text-md-left">
            <div class="image pt-2 pb-2 pl-2 pr-0 pr-md-2 pl-md-0">
              ${imgContent}
            </div>
            <div class="details d-flex flex-column align-self-center">
                <p class="name mb-0">${stylistData.stylist_name}</p>
                ${contactContent}
                <a href="/store/module/bonntech_stylist_portal/login" class="pt-1 text-black">Stylist Login</a>
            </div>
        </div>
      `;
      document.querySelector('#stylist_header_wrap').innerHTML = stylistHeaderHTML;
    } else {
      setCookie('assigned-stylist', null, 0);
      console.log('unset cookie data');
      
      stylistHeaderHTML = `
      <div class="d-flex flex-md-row flex-row-reverse text-right text-md-left">
        <div class="image pt-2 pb-2 pl-2 pr-0 pr-md-2 pl-md-0">
          <a href="/find-a-stylist/"><img class="rounded-circle" alt='Find a stylist' src="/global_assets/img/find_a_stylist.png"></a>
        </div>    
      </div>
      `;
      document.querySelector('#stylist_header_wrap').innerHTML = stylistHeaderHTML;
    }
  },

  // Initialise find stylist autocomplete
  initFindAStylist: () => {
    const autoCompleteJS = stylistFunctions.initFindAStylistAutoSelect();
    autoCompleteJS.input.addEventListener('selection', (event) => {
      // Set Stylist data and header by default, each usage can set extra action individually
      stylistFunctions.setStylistData(JSON.stringify(event.detail.selection.value));
      autoCompleteJS.input.value = event.detail.selection.value.stylist_name;
    });
    return autoCompleteJS;
  },

  // Creates the find stylist autocomplete obj
  initFindAStylistAutoSelect: () => (
    new autoComplete({
      selector    : '#stylistSearch',
      searchEngine: 'strict',
      placeHolder : 'Search for Your Stylist!',
      data        : {
        src: async () => {
          try {
          // Set loading placeholder text
            const stylistSearchInput = document.getElementById('stylistSearch');
            stylistSearchInput.setAttribute('placeholder', 'Loading...');

            // Fetch External Data Source
            const response = await axios.get('/Bonntech_Custom_Built/stylist_ajax_functions/open_stylist_ajax.php');
            const stylistData = response.data;

            // Remove Loading placeholder text
            stylistSearchInput.setAttribute('placeholder', autoCompleteJS.placeHolder);
            // Returns Fetched data
            return Object.values(stylistData);
          } catch (error) {
            console.log('=== Get open stylist error ===', error);
            return true;
          }
        },
        keys  : ['stylist_name', 'email', 'phone'],
        cache : true,
        filter: (list) => {
          // Filter duplicates
          const filteredResults = list.filter(
            (obj, pos, arr) => arr.map((mapObj) => mapObj.value).indexOf(obj.value) === pos,
          );
          return filteredResults;
        },
      },
      query      : (input) => DOMPurify.sanitize(input),
      resultsList: {
        element: (list, data) => {
          const info = document.createElement('p');
          if (data.results.length > 0) {
            info.innerHTML = `Displaying <strong>${data.results.length}</strong> out of <strong>${data.matches.length}</strong> results`;
          } else {
            info.innerHTML = `Found <strong>${data.matches.length}</strong> matching results for <strong>"${data.query}"</strong>`;
          }
          list.prepend(info);
        },
        noResults : true,
        maxResults: 15,
        tabSelect : true,
      },
      resultItem: {
        element: (item, data) => {
        // Modify Results Item Style
          const imgContent = (data.value.stylist_image !== '')
            ? `<img class="rounded-circle" src="${data.value.stylist_image}">`
            : ` <div class="image-missing-holder bg-black d-flex align-items-center justify-content-center rounded-circle">
                  <span class="text-white" style="font-size: 40px;">${data.value.stylist_name.charAt(0)}</span>
                </div>`;

          item.innerHTML = `
          <div class="stylist-block-wrap stylist-select-wrap">
            <div class="d-flex flex-md-row flex-row-reverse text-right text-md-left">
              <div class="image pt-2 pb-2 pl-2 pr-0 pr-md-2 pl-md-0">
                ${imgContent}
              </div>
              <div class="details d-flex flex-column align-self-center">
                <p class="name mb-0"><strong>${data.value.stylist_name}</strong></p>
                <p class="type mb-0">Stylist</p>
              </div>
            </div>
          </div>
          `;
        },
        highlight: true,
      },
      events: {
        input: {
          focus: () => {
            if (autoCompleteJS.input.value.length) autoCompleteJS.start();
          },
        },
      },
    })
  ),

  // Sets #gift_message on checkout page(s)
  setStylistOrderMsg: (invoiceNo) => {
    // If on checkout page
    if (document.querySelector('#delivery_message') === null) {
      return true;
    }
    const assignedStylistStored = stylistFunctions.hasStylist();
    const orderStylistDetails = {
      stylistcode: (assignedStylistStored) ? JSON.parse(helperFunctions.base64Decode(assignedStylistStored)).stylist_id : '',
      partycode  : (typeof invoiceNo !== 'undefined') ? invoiceNo : '',
    };
    document.querySelector('#delivery_message').value = JSON.stringify(orderStylistDetails);
    document.querySelector('#delivery').classList.add('hidden');
    return true;
  },
};

jQuery(document).ready(() => {
  const $ = jQuery;

  // Only runs check on non-stylist pages
  if (!window.location.pathname.includes('/stylist/')) {
    stylistFunctions.setStylistDisplay();
  }

  // Render Menu
  pageFunctions.renderMenu();
  // Set responsive iFrame for shop-by-style sub-categories
  pageFunctions.setIFrame();
});

window.addEventListener('load', () => {
  document.querySelector('body').classList.add('page-loaded');
  // Check if it is byWILLA page.  The
  pageFunctions.isByWillaPageCheckNSet();
  // Check if checkout page and has gift_message
  stylistFunctions.setStylistOrderMsg();
  // Remove page loader overlay

  if (window.location.hash.indexOf(`#product-comments-list-header`) > -1 ) {
    document.querySelector(`#product-comments-list-header`).scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    });

    setTimeout(()=>{
      $(".post-product-comment").click();
    }, 1000);
  }
});

(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"97012324"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");