Shopify: Select location and show my stocks based on warehouse/store

//CUSTOM JS
$(document).ready(function() {
    $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
      if ($('#agree').is(':checked')) {
        $(this).submit();
      }
      else {
        alert("You must agree with the terms and conditions of sales to check out.");
        return false;
      }
    });
});
  // Get the modal
  var locationModal      = document.getElementById("location-myModal");
  // Set cookies
  var locationToday      = new Date();
  var locationExpiry     = new Date(locationToday.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days

  // hide modal
  locationModal.style.display  = "none";

  function locationSetCookie(name, value){
    document.cookie=name + "=" + escape(value) + "; path=/; expires=" + locationExpiry.toGMTString();
  }

  function userLocationPickup(form){
    // locationSetCookie("userLocationPickup", form.value)
    locationSetCookie("userLocationPickup", form.elements[0].value)
    // locationSetCookie("userLocationPickup", document.getElementById('user-location-modal-store').value)

    closeModal(document.getElementById('confirmation-myModal'));

    for( var i=0; i<form.elements.length; i++ ) {
      console.log("balyu: "+form.elements[i].value);
    }

    // console.log("balyu: "+form);

    // return false;
  }
  function userDeliverPickup(value, pickup=""){
    locationSetCookie("userDeliverPickup", value)
    locationSetCookie("pickupLocation", pickup)
  }

  // Get cookies
  function getCookie(cname) {
    var name = cname + "=";
    //Error occured on non UTF-8 URL, patched needed
    var decodedCookie = decodeURIComponent(unescape(unescape(document.cookie)));
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var 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 deleteCookie( name, value='') {
    if( getCookie( name ) ) {
     var locationExpiry     = new Date(locationToday.getTime() - 30 * 24 * 3600 * 1000); // minus 30 days
     document.cookie=name + "=" + escape(value) + "; path=/; expires=" + locationExpiry.toGMTString();
    }
  }

  // put cookies
  function locationPutCookie(userLocation, whichis){
    var clear_success = false;
    var optionValue='';
    var selBrgyModal = document.getElementById('user-location-modal-barangay');
    var selBrgy = document.getElementById('user-location-barangay');

    if(userLocation.id == 'user-location-modal-store' || userLocation.id == 'user-location-modal-store2') {
      var slugs = userLocation.value;
      console.log("slugs====> "+slugs);
        locationSetCookie("userLocationPickup", slugs)
        locationSetCookie('userLocation', slugs);
        optionValue = slugs;
        if(slugs == "pasig-bagong-ilog") {
          locationSetCookie('userLocationCity', 'pasig');
        }
    }

    if(userLocation.id == 'user-location')
      optionValue = userLocation.value + "-" + selBrgy.value;
    else
      optionValue = userLocation.value + "-" + selBrgyModal.value;

    var locationCookie = getCookie("userLocation");
    console.log(locationCookie);
    if (locationCookie != '' && locationCookie != optionValue){
      $.ajax({
        url: '/cart/clear.js',
        method: 'POST',
        async: false,
        dataType: 'json',
        success: function(){
          clear_success = true;
          //alert("Your cart has been cleared due to change in location");
          console.log("Your cart has been cleared due to change in location.");
        },
        error: function(x, status, error) {
          clear_success = false;
          //alert(error);
          console.log(error);
        }
      });
    }

    if(whichis == 0)
    {
      clear_success = true;
    }

    if(clear_success == true){
      locationSetCookie("userLocation", optionValue);
      locationSetCookie("userLocationCity", userLocation.value);

      if(userLocation.id == 'user-location-modal-store' || userLocation.id == 'user-location-modal-store2') {
        var slugs = userLocation.value;
        locationSetCookie('userLocation', slugs);
          if(slugs == "pasig-bagong-ilog") {
            locationSetCookie('userLocationCity', 'pasig');
          }
          if(slugs == "cebu-city-carreta") {
            locationSetCookie('userLocationCity', 'cebu-city');
          }
          if(slugs == "mandurriao-bakhaw") {
            locationSetCookie('userLocationCity', 'mandurriao');
          }
          if(slugs == "baguio-city-ambiong") {
            locationSetCookie('userLocationCity', 'baguio-city');
          }
          if(slugs == "marikina-barangka") {
            locationSetCookie('userLocationCity', 'marikina');
          }

          if(slugs == "makati-comembo") {
            locationSetCookie('userLocationCity', 'makati');
          }
          if(slugs == "parañaque-baclaran") {
            locationSetCookie('userLocationCity', 'parañaque');
          }
          if(slugs == "antipolo-dalig") {
            locationSetCookie('userLocationCity', 'antipolo');
          }
          if(slugs == "quezon-city-alicia") {
            locationSetCookie('userLocationCity', 'quezon-city');
          }
          if(slugs == "pasig-dela-paz") {
            locationSetCookie('userLocationCity', 'pasig');
          }
      }

      // if(userLocation.id == 'user-location') {
        locationSetCookie("userLocationBrgy", selBrgy.value);
      // }
       // <the brgy>
        if(userLocation.id == 'user-location-modal-store' || userLocation.id == 'user-location-modal-store2') {
        var slug = userLocation.value.trim().split('-');
        if(slug.length == 3) {
          var theBrgy = userLocation.value.trim().split('-')
          var theBrgyVal = theBrgy[2]
          locationSetCookie('userLocationBrgy',  theBrgyVal)
        }else if(slug.length == 2) {
          var theBrgy = userLocation.value.trim().split('-')
          var theBrgyVal = theBrgy[1]
          locationSetCookie('userLocationBrgy',  theBrgyVal)
        }

      }
      else {
        locationSetCookie("userLocationBrgy", selBrgyModal.value);
      }

      // When the user selects a location, close the modal
      locationModal.style.display = "none";

      var checkpathname = location.pathname.split('/');

      if(!checkpathname.includes('products')){
        if(!checkpathname.includes('search'))
        {
          localStorage.setItem("store", mapUserLocationToStoreTag());
          location.replace(location.pathname + "?_=pf&tag=" + encodeURIParamValue(mapUserLocationToStoreTag()));
        }
        else
        {
          var searchUrl   = location.href.substring(0, location.href.lastIndexOf('=') + 1);
          localStorage.setItem("store", mapUserLocationToStoreTag());
          location.replace(searchUrl + encodeURIParamValue(mapUserLocationToStoreTag()));
        }
      }
      else
      {
        var productUrl   = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
        var directorylink   = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
        if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'bgc')
          var baseproductURL =  productUrl.slice(0, -19);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'makati')
          var baseproductURL =  productUrl.slice(0, -20);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'rizal')
          var baseproductURL =  productUrl.slice(0, -20);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'shangrila')
          var baseproductURL =  productUrl.slice(0, -20);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'rockwell')
          var baseproductURL =  productUrl.slice(0, -20);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'katipunan')
          var baseproductURL =  productUrl.slice(0, -20);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'morato')
          var baseproductURL =  productUrl.slice(0, -20);
        else if(productUrl.substring(productUrl.lastIndexOf('-') + 1) == 'libis')
          var baseproductURL =  productUrl.slice(0, -20);
 
          var baseproductURL =  productUrl.slice(0, -20);
        else
          var baseproductURL =  productUrl;
        if(bgc.includes(optionValue))
        {
        location.replace(directorylink + baseproductURL + '-tmp-central-square-bgc');
        }
        else if(century.includes(optionValue))
            location.replace(directorylink + baseproductURL + '-tmp-century-mall-makati');
        else if(rizal.includes(optionValue))

        }
    }
    else
    {
        //When the user selects a location, close the modal
      locationModal.style.display = "none";
        //reload page after changing location
    //  location.reload();
    }
  }

  // check cookies
  function checkLocationCookies() {
    var userLocation = getCookie("userLocation");
    var userLocationCity = getCookie("userLocationCity");
    var userLocationBrgy = getCookie("userLocationBrgy");

    //userLocationBrgy="";
    //userLocationCity="";

    // START REGION MODAL
    var userRegion = mapUserDistrict(userLocationCity).replace(/s+/g, '-').toLowerCase()
    var regionSel  = document.getElementById('user-location-region')
    var regionOpts = regionSel.options;

    for (var opt, j = 0; opt = regionOpts[j]; j++) {
      if (opt.value == userRegion) {
        regionSel.selectedIndex = j;
        break;
      }
    }

    if ((userLocation != "") && (userLocationCity != "") && (userLocationBrgy != ""))
    {
      var uRegionCity = mapUserRegion(userLocationCity);
      var uDistrictCity = mapUserDistrict(userLocationCity);
      var dropdownCity = $('#user-location');

      dropdownCity.empty();

      dropdownCity.prop('selectedIndex', 0);

      // Populate dropdown with list of cities
      $.getJSON('//cdn.shopify.com/s/files/1/0500/8421/6991/t/28/assets/barangaylist.json?v=184164207319321888941677587334', function (data) {
        var objList = (data[uRegionCity].province_list[uDistrictCity].municipality_list);
        $.each(objList, function (key) {
            dropdownCity.append($('<option></option>').attr('value', key.replace(/s+/g, '-').toLowerCase()).text(key));
        })

        var opts = document.getElementById('user-location').options

        for (var opt, j = 0; opt = opts[j]; j++) {
          if (opt.value == userLocationCity) {
            dropdownCity.prop('selectedIndex', j);
            break;
          }
        }
      });

    // END REGION MODAL



      // hide modal
      locationModal.style.display  = "none";

      var uRegion = mapUserRegion(userLocationCity);
      var uDistrict = mapUserDistrict(userLocationCity);
      var uCity = mapUserCity(userLocationCity);

      let dropdown = $('#user-location-barangay');;

      dropdown.empty();

      dropdown.prop('selectedIndex', 0);

      // Populate dropdown with list of barangays
      $.getJSON('//cdn.shopify.com/s/files/1/0500/8421/6991/t/28/assets/barangaylist.json?v=184164207319321888941677587334', function (data) {

        var objList = (data[uRegion].province_list[uDistrict].municipality_list[uCity].barangay_list);

        $.each(objList, function (key, entry) {
          dropdown.append($('<option></option>').attr('value', entry.replace(/s+/g, '-').toLowerCase()).text(entry));
        })

        var selbrgy = document.getElementById('user-location-barangay');
        var optsbrgy = selbrgy.options;

        for (var opt, j = 0; opt = optsbrgy[j]; j++) {
          if (opt.value == userLocationBrgy) {
            selbrgy.selectedIndex = j;
            break;
          }
        }
        const selectbrgy = document.getElementById("user-location-barangay");

        const selectedbrgyIndex = selectbrgy.selectedIndex;
        const selectedbrgyText = selectbrgy.options[selectedbrgyIndex].text;

        const selectcity = document.getElementById("user-location");

        const selectedcityIndex = selectcity.selectedIndex;
        const selectedcityText = selectcity.options[selectedcityIndex].text;

        var location_text = " Delivery location: " + selectedbrgyText + ", " + selectedcityText;

        // <for pickup label>
        var isDelivery = getCookie('userDeliverPickup');

        if(isDelivery == 'pickup') {
          var pickupLocation = getCookie('userLocationPickup');
          var theLocationPickup = '';

          if(pickupLocation == "pasig-bagong-ilog") {
            theLocationPickup = 'TMP AYALA THE 30TH PASIG';
          }


          $("#pku").val("pickup for "+theLocationPickup);

<!-- Select another location -->
<div id="location-selector-container" class="user-location-container location-selector-container">
  <i class="material-icons">location_on</i><span id="loc-text"> Delivery location: Resolving location...</span>
  <form style="display: inline;">
    <input hidden type="button" class="button-primary" value="Change Location" onclick="openModal(document.getElementById('confirmation-myModal'));">
  </form>
</div>

<!-- The Modal -->
<div id="location-myModal" class="location-modal">
  <!-- Modal content -->
  <div class="location-modal-content -delivery">

    <h4 class="modal-select-title">Select</h4>
    <div class="modal-select-buttons">
      <button class="modal-select-btn-del button-primary">Delivery</button>
      <button class="modal-select-btn-pick button-secondary">Pickup</button>
    </div>

    <h5>Please select delivery area</h5>
    <form>
<!--       START REGION MODAL -->
      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> Region or Province:</p>
      <select style = "font-family:lato;" class="" id="user-location-modal-region" name='user-location-region' onchange="getCityListModal(this)">
        <option disabled selected value style="color: #D3D3D3;">Select Region or Province...</option>
        <option value="benguet">BENGUET</option>
        <option value="cavite">CAVITE</option>
        <option value="cebu">CEBU</option>
        <option value="iloilo">ILOILO</option>
        <option value="laguna">LAGUNA</option>
        <option value="misamis-oriental">MISAMIS ORIENTAL</option>
        <option value="metro-manila">METRO MANILA</option>
        <option value="rizal">RIZAL</option>
      </select>

      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> City or Municipality:</p>
      <select style = "font-family:lato;" class="" id="user-location-modal" name='user-location' onchange="getBrgyListModal(this)">
        <option disabled selected value style="color: #D3D3D3;">Select City or Municipality...</option>
      </select>

      <!--       END REGION MODAL -->

      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> Barangay or District:</p>
      <select style = "font-family:lato;" class="" id="user-location-modal-barangay" name='user-location-barangay'>
        <option disabled selected value style="color: #D3D3D3;">Select Barangay or District...</option>
      </select>

      <small></small>

      <input disabled id="submit-modal" type="button" class="button-primary" value="Submit" onclick="locationPutCookie(document.getElementById('user-location-modal'), 0); userDeliverPickup('delivery');">
    </form>
  </div>

  <div class="location-modal-content -pickup -inactive">
    <h4 class="modal-select-title">Select</h4>
    <div class="modal-select-buttons">
      <button class="modal-select-btn-del button-secondary">Delivery</button>
      <button class="modal-select-btn-pick button-primary">Pickup</button>
    </div>
    <form>
      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> Select Store:</p>
      <select style = "font-family:lato;" class="" id="user-location-modal-store" name='user-location'>
        <option disabled selected value style="color: #D3D3D3;">Select Store...</option>
        <option value="cebu-city-carreta">CEBU - TMP GALLERIA CEBU</option>
        <option value="baguio-city-ambiong">BAGUIO CITY - TMP LEONARD WOOD BAGUIO</option>
        <option value="mandurriao-bakhaw">ILOILO - TMP FESTIVE WALK ILOILO</option>
        <option value="antipolo-dalig">RIZAL - TMP MILLE LUCE VC RIZAL</option>
        <option value="pasig-bagong-ilog">METRO MANILA - TMP AYALA 30TH</option>
        <option value="pasig-dela-paz">METRO MANILA - TMP EASTWOOD LIBIS</option>
        <option value="marikina-barangka">METRO MANILA - TMP KATIPUNAN</option>
        <option value="parañaque-baclaran">METRO MANILA - TMP MET LIVE PASAY</option>
        <option value="quezon-city-alicia">METRO MANILA - TMP TOMAS MORATO</option>
        <option value="makati-comembo">METRO MANILA - TMP VENICE GRAND MCKINLEY</option>
      </select>
      <small>Important Notice: Changing your pickup store will clear your cart. Product availability is different at each store so some items may not be in stock at the store you are selecting</small>

      <input type="button" class="button-secondary" value="Cancel" onclick="closeModal(document.getElementById('confirmation-myModal'));">
      <input id="submit-modal" type="button" class="button-primary" value="Confirm" onclick="userDeliverPickup('pickup', document.getElementById('user-location-modal-store')); locationPutCookie(document.getElementById('user-location-modal-store'), 0);">
    </form>
  </div>

</div>

<div style="display: none" id="confirmation-myModal" class="location-modal">
  <!-- Modal content -->
  <div class="location-modal-content -delivery">

    <h4 class="modal-select-title">Select</h4>
    <div class="modal-select-buttons">
      <button class="modal-select-btn-del button-primary">Delivery</button>
      <button class="modal-select-btn-pick button-secondary">Pickup</button>
    </div>


    <h5>Changing your delivery area will remove all current items in your cart. Do you want to proceed?</h5>
    <form>
      <!--       START REGION MODAL -->
      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> Region or Province:</p>
      <select style = "font-family:lato;" class="" id="user-location-region" name='user-location-region' onchange="getCityList(this)">
        <option disabled selected value style="color: #D3D3D3;">Select Region or Province...</option>
        <option value="benguet">BENGUET</option>
        <option value="cavite">CAVITE</option>
        <option value="cebu">CEBU</option>
        <option value="iloilo">ILOILO</option>
        <option value="laguna">LAGUNA</option>
        <option value="misamis-oriental">MISAMIS ORIENTAL</option>
        <option value="metro-manila">METRO MANILA</option>
        <option value="rizal">RIZAL</option>
      </select>

      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> City or Municipality:</p>
      <select style = "font-family:lato;" class="" id="user-location" name='user-location' onchange="getBrgyList(this)">
        <option disabled selected value style="color: #D3D3D3;">Select City or Municipality...</option>
      </select>

      <!--       END REGION MODAL -->

      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> Barangay or District:</p>
      <select style = "font-family:lato;" class="" id="user-location-barangay" name='user-location-barangay'>
        <option disabled selected value style="color: #D3D3D3;">Select Barangay or District...</option>
      </select>
      <small></small>
      <input type="button" class="button-secondary" value="Cancel" onclick="closeModal(document.getElementById('confirmation-myModal'));">
      <!-- <input id="submit-change" type="button" class="button-primary" value="Yes" onclick="locationPutCookie(document.getElementById('user-location'), 1); userDeliverPickup('delivery');"> -->
      <input id="submit-change" type="button" class="button-primary" value="Yes" onclick="locationPutCookie(document.getElementById('user-location'), 1); userDeliverPickup('delivery'); locationSetCookie('userLocationBrgy', document.getElementById('user-location-barangay').value);">
    </form>
  </div>

  <div class="location-modal-content -pickup -inactive">
    <h4 class="modal-select-title">Select</h4>
    <div class="modal-select-buttons">
      <button class="modal-select-btn-del button-secondary">Delivery</button>
      <button class="modal-select-btn-pick button-primary">Pickup</button>
    </div>
    <form>
      <p style="text-align:left;margin-bottom: 0px;font-family:latio;"> Select Store:</p>
      <select style = "font-family:lato;" class="" id="user-location-modal-store2" name='user-location'>
        <option disabled selected value style="color: #D3D3D3;">Select Store...</option>
        <option value="cebu-city-carreta">CEBU - TMP GALLERIA CEBU</option>
        <option value="baguio-city-ambiong">BAGUIO CITY - TMP LEONARD WOOD BAGUIO</option>
        <option value="mandurriao-bakhaw">ILOILO - TMP FESTIVE WALK ILOILO</option>
        <option value="antipolo-dalig">RIZAL - TMP MILLE LUCE VC RIZAL</option>
        <option value="pasig-bagong-ilog">METRO MANILA - TMP AYALA 30TH</option>
        <option value="pasig-dela-paz">METRO MANILA - TMP EASTWOOD LIBIS</option>
        <option value="marikina-barangka">METRO MANILA - TMP KATIPUNAN</option>
        <option value="parañaque-baclaran">METRO MANILA - TMP MET LIVE PASAY</option>
        <option value="quezon-city-alicia">METRO MANILA - TMP TOMAS MORATO</option>
        <option value="makati-comembo">METRO MANILA - TMP VENICE GRAND MCKINLEY</option>
      </select>
      <small>Important Notice: Changing your pickup store will clear your cart. Product availability is different at each store so some items may not be in stock at the store you are selecting</small>

      <input type="button" class="button-secondary" value="Cancel" onclick="closeModal(document.getElementById('confirmation-myModal'));">
      <input id="submit-modal" type="button" class="button-primary" value="Confirm" onclick="userDeliverPickup('pickup', document.getElementById('user-location-modal-store2')); locationPutCookie(document.getElementById('user-location-modal-store2'), 1);">
    </form>
  </div>

</div>

<div style="display: none" id="slot-myModal" class="location-modal">
  <!-- Modal content -->
  <div class="location-modal-content">
    <h5>There are no more available delivery dates, please try again tomorrow.</h5>
    <form>
      <input type="button" class="button-secondary" value="Ok" onclick="closeModal(document.getElementById('slot-myModal'));">
    </form>
  </div>
</div>

<input type="hidden" id="pku" name="properties[pku]">