<template>
  <div>
    <div v-if="pageContent.length">
      <div v-html="getPageContent()"></div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "ShippingAndDeliveryComponent",
  components: {},
  computed: {
    pageContent: function() {
      return this.$store.state.layout.pageContent;
    },
  },
  data: () => ({
    pageUrlKey: "shipping-and-delivery",
  }),
  methods: {
    getPageContent() {
      if (this.pageContent.length) {
        let data = this.pageContent.filter(element => {
          return element.identifier === "shipping-and-delivery";
        });
        if (data.length > 0) {
          let path = data[0].content;
          var div = document.createElement("div");
          div.innerHTML = path;
          let imgSrcUrls = div.getElementsByTagName("img");
          for (let i = 0; i < imgSrcUrls.length; i++) {
            let urlValue = imgSrcUrls[i].getAttribute("src");
            if (urlValue) {
              imgSrcUrls[i].setAttribute(
                "src",
                this.imageBasePathUrl() +
                  "/media/" +
                  imgSrcUrls[i].src
                    .replace(window.location.href, "")
                    .replace(window.location.origin, "")
                    .replace(/%22%7D%7D/g, "")
                    .replace(/%7B%7B/g, "")
                    .replace(/%20url=%22/g, "")
                    .replace("media", "")
              );
            }
          }
          return div.innerHTML;
        }
      }
    },
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
    }
  },
  mounted() {
    window.onload = function() {
      document.getElementById("firstColumn").onmouseover = function() {
        firstcolumnFunction();
      };
      document.getElementById("firstColumnOut").onmouseout = function() {
        firstcolumnFunctionout();
      };

      document.getElementById("secondColumn").onmouseover = function() {
        secondcolumnFunction();
      };
      document.getElementById("secondColumnOut").onmouseout = function() {
        secondcolumnFunctionout();
      };

      document.getElementById("thirdColumn").onmouseover = function() {
        thirdcolumnFunction();
      };
      document.getElementById("thirdColumnOut").onmouseout = function() {
        thirdcolumnFunctionout();
      };

      function firstcolumnFunction() {
        var x = document.getElementById("actualTable");
        var y = document.getElementById("firstColumnTable");

        y.style.display = "table";
        x.style.display = "none";
      }
      function firstcolumnFunctionout() {
        var x = document.getElementById("firstColumnTable");
        var y = document.getElementById("actualTable");

        y.style.display = "table";
        x.style.display = "none";
      }
      function secondcolumnFunction() {
        var x = document.getElementById("actualTable");
        var y = document.getElementById("secondColumnTable");

        y.style.display = "table";
        x.style.display = "none";
      }
      function secondcolumnFunctionout() {
        var x = document.getElementById("secondColumnTable");
        var y = document.getElementById("actualTable");

        y.style.display = "table";
        x.style.display = "none";
      }

      function thirdcolumnFunction() {
        var x = document.getElementById("actualTable");
        var y = document.getElementById("thirdColumnTable");

        y.style.display = "table";
        x.style.display = "none";
      }
      function thirdcolumnFunctionout() {
        var x = document.getElementById("thirdColumnTable");
        var y = document.getElementById("actualTable");

        y.style.display = "table";
        x.style.display = "none";
      }

      document.getElementById("firstCall").onclick = function() {
        firstTableFunction();
      };
      document.getElementById("secondCall").onclick = function() {
        secondTableFunction();
      };
      document.getElementById("thirdCall").onclick = function() {
        thirdTableFunction();
      };

      document.getElementById("fourCall").onclick = function() {
        fourTableFunction();
      };

      document.getElementById("fiveCall").onclick = function() {
        fiveTableFunction();
      };

      document.getElementById("sixCall").onclick = function() {
        sixTableFunction();
      };
      function firstTableFunction() {
        var x = document.getElementById("firstTable");
        var y = document.getElementById("secondTable");
        var z = document.getElementById("thirdTable");
        if (x.style.display === "none") {
          x.style.display = "block";
          y.style.display = "none";
          z.style.display = "none";
        } else {
          y.style.display = "block";
          x.style.display = "none";
          z.style.display = "none";
        }
      }
      function secondTableFunction() {
        var x = document.getElementById("firstTable");
        var y = document.getElementById("secondTable");
        var z = document.getElementById("thirdTable");

        if (y.style.display === "none") {
          y.style.display = "block";
          x.style.display = "none";
          z.style.display = "none";
        } else {
          y.style.display = "none";
          z.style.display = "none";

          x.style.display = "block";
        }
      }
      function thirdTableFunction() {
        var x = document.getElementById("firstTable");
        var y = document.getElementById("thirdTable");
        var z = document.getElementById("secondTable");

        if (y.style.display === "none") {
          y.style.display = "block";
          x.style.display = "none";
          z.style.display = "none";
        } else {
          y.style.display = "none";
          z.style.display = "none";
          x.style.display = "block";
        }
      }
      function fourTableFunction() {
        var x = document.getElementById("firstTable");
        var y = document.getElementById("thirdTable");
        var z = document.getElementById("secondTable");

        if (y.style.display === "none") {
          y.style.display = "block";
          x.style.display = "none";
          z.style.display = "none";
        } else {
          y.style.display = "none";
          z.style.display = "none";
          x.style.display = "block";
        }
      }
      function fiveTableFunction() {
        var x = document.getElementById("firstTable");
        var y = document.getElementById("thirdTable");
        var z = document.getElementById("secondTable");

        if (y.style.display === "none") {
          y.style.display = "block";
          x.style.display = "none";
          z.style.display = "none";
        } else {
          y.style.display = "none";
          z.style.display = "none";
          x.style.display = "block";
        }
      }

      function sixTableFunction() {
        var x = document.getElementById("firstTable");
        var y = document.getElementById("thirdTable");
        var z = document.getElementById("secondTable");

        if (z.style.display === "none") {
          y.style.display = "none";
          x.style.display = "none";
          z.style.display = "block";
        } else {
          y.style.display = "block";
          z.style.display = "none";
          x.style.display = "none";
        }
      }

       document.getElementById("openDayOne").onclick = function() {
        showDayOneOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
      };
       document.getElementById("openDaySecond").onclick = function() {
        showDaySecondOptions(),closeDayOneOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
      };
       document.getElementById("openDayThird").onclick = function() {
        showDayThirdOptions(),closeDaySecondOptions(),closeDayOneOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
      };
       document.getElementById("openDayFour").onclick = function() {
        showDayFourOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayOneOptions(),closeDayFiveOptions(),closeDaySixOptions();
      };
       document.getElementById("openDayFive").onclick = function() {
        showDayFiveOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayOneOptions(),closeDaySixOptions();
      };
       document.getElementById("openDaySix").onclick = function() {
        showDaySixOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDayOneOptions();
      };
      function showDayOneOptions() {
        var x = document.getElementById("dayOneOptions");
          x.style.display = "block";
      }
       document.getElementById("dayOneOptions").onclick = function() {
        closeDayOneOptions();
      };
       function closeDayOneOptions() {
        var x = document.getElementById("dayOneOptions");
          x.style.display = "none";
      }
      function showDaySecondOptions() {
        var x = document.getElementById("daySecondOptions");
          x.style.display = "block";
      }
       document.getElementById("daySecondOptions").onclick = function() {
        closeDaySecondOptions();
      };
       function closeDaySecondOptions() {
        var x = document.getElementById("daySecondOptions");
          x.style.display = "none";
      }
      function showDayThirdOptions() {
        var x = document.getElementById("dayThirdOptions");
          x.style.display = "block";
      }
       document.getElementById("dayThirdOptions").onclick = function() {
        closeDayThirdOptions();
      };
       function closeDayThirdOptions() {
        var x = document.getElementById("dayThirdOptions");
          x.style.display = "none";
      }
      function showDayFourOptions() {
        var x = document.getElementById("dayFourOptions");
          x.style.display = "block";
      }
       document.getElementById("dayFourOptions").onclick = function() {
        closeDayFourOptions();
      };
         function closeDayFourOptions() {
        var x = document.getElementById("dayFourOptions");
          x.style.display = "none";
      }
      function showDayFiveOptions() {
        var x = document.getElementById("dayFiveOptions");
          x.style.display = "block";
      }
       document.getElementById("dayFiveOptions").onclick = function() {
        closeDayFiveOptions();
      };
      function closeDayFiveOptions() {
        var x = document.getElementById("dayFiveOptions");
          x.style.display = "none";
      }
       function showDaySixOptions() {
        var x = document.getElementById("daySixOptions");
          x.style.display = "block";
      }
       document.getElementById("daySixOptions").onclick = function() {
        closeDaySixOptions();
      };
      function closeDaySixOptions() {
        var x = document.getElementById("daySixOptions");
          x.style.display = "none";
      }


      document.getElementById("openDayOneMobileView").onclick = function() {
        showDayOneOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
      };
       document.getElementById("openDaySecondMobileView").onclick = function() {
        showDaySecondOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
      };
       document.getElementById("openDayThirdMobileView").onclick = function() {
        showDayThirdOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
      };
       document.getElementById("openDayFourMobileView").onclick = function() {
        showDayFourOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
      };
       document.getElementById("openDayFiveMobileView").onclick = function() {
        showDayFiveOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayOneOptionsMobileView(),closeDaySixOptionsMobileView();
      };
       document.getElementById("openDaySixMobileView").onclick = function() {
        showDaySixOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDayOneOptionsMobileView();
      };
      function showDayOneOptionsMobileView() {
        var x = document.getElementById("dayOneOptionsMobileView");
          x.style.display = "block";
      }
       document.getElementById("dayOneOptionsMobileView").onclick = function() {
        closeDayOneOptionsMobileView();
      };
       function closeDayOneOptionsMobileView() {
        var x = document.getElementById("dayOneOptionsMobileView");
          x.style.display = "none";
      }
      function showDaySecondOptionsMobileView() {
        var x = document.getElementById("daySecondOptionsMobileView");
          x.style.display = "block";
      }
       document.getElementById("daySecondOptionsMobileView").onclick = function() {
        closeDaySecondOptionsMobileView();
      };
       function closeDaySecondOptionsMobileView() {
        var x = document.getElementById("daySecondOptionsMobileView");
          x.style.display = "none";
      }
      function showDayThirdOptionsMobileView() {
        var x = document.getElementById("dayThirdOptionsMobileView");
          x.style.display = "block";
      }
       document.getElementById("dayThirdOptionsMobileView").onclick = function() {
        closeDayThirdOptionsMobileView();
      };
       function closeDayThirdOptionsMobileView() {
        var x = document.getElementById("dayThirdOptionsMobileView");
          x.style.display = "none";
      }
      function showDayFourOptionsMobileView() {
        var x = document.getElementById("dayFourOptionsMobileView");
          x.style.display = "block";
      }
       document.getElementById("dayFourOptionsMobileView").onclick = function() {
        closeDayFourOptionsMobileView();
      };
         function closeDayFourOptionsMobileView() {
        var x = document.getElementById("dayFourOptionsMobileView");
          x.style.display = "none";
      }
      function showDayFiveOptionsMobileView() {
        var x = document.getElementById("dayFiveOptionsMobileView");
          x.style.display = "block";
      }
       document.getElementById("dayFiveOptionsMobileView").onclick = function() {
        closeDayFiveOptionsMobileView();
      };
      function closeDayFiveOptionsMobileView() {
        var x = document.getElementById("dayFiveOptionsMobileView");
          x.style.display = "none";
      }
       function showDaySixOptionsMobileView() {
        var x = document.getElementById("daySixOptionsMobileView");
          x.style.display = "block";
      }
       document.getElementById("daySixOptionsMobileView").onclick = function() {
        closeDaySixOptionsMobileView();
      };
      function closeDaySixOptionsMobileView() {
        var x = document.getElementById("daySixOptionsMobileView");
          x.style.display = "none";
      }
    };
  },
  created() {
    // this.$store.dispatch("block/fetchOne",10)
    //this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
    //this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
  }
};
</script>
<style lang="scss">
table,
th,
td {
  border: 1px solid #2850da;
  border-collapse: collapse;
}
table {
  width: 100%;
}
th,
td {
  padding: 10px;
}
#secondTable {
  display: none;
}
#thirdTable {
  display: none;
}
#firstColumnTable {
  display: none;
}
#secondColumnTable {
  display: none;
}
#thirdColumnTable {
  display: none;
}
th {
  background-color: #2850da;
  width: 30%;
}
.shipping-delivery-map-image{
   width:100%;
  min-height: 415px;
}
.shipping-delivery-col-10{
  max-width:83%;
}
.shipping-delivery-image{
  width:100%;
}
.shipping-delivery-col-4 {
  width: 33.33%;
}
.shipping-delivery-row {
  display: flex;
}
.shipping-delivery-height-315 {
  height: 315px;
}
.shipping-delivery-cols-6 {
  width: 50%;
}
.shipping-delivery-ups-first {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.shipping-delivery-ups-second {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.shipping-delivery-ups-third {
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
}
.shipping-delivery-page-primary-link {
  color: #2850da !important;
  & .shipping-delivery-page-icon {
    background-image: url("../../../assets/right-arrow.png");
    max-width: 22px;
    height: 22px;
    background-position: right center;
    background-size: contain;
  }
}
.shipping-delivery-page-primary-link:hover {
  color: #fff !important;
  & .shipping-delivery-page-icon {
    background-image: url("../../../assets/right-arrow-white.png");
    max-width: 22px;
    height: 22px;
    background-position: right center;
    background-size: contain;
  }
}
.shipping-delivery-page-link {
  color: #ccb7ff !important;
  & .shipping-delivery-page-icon {
    background-image: url("../../../assets/right-hover-arrow.png");
    max-width: 22px;
    height: 22px;
    background-position: right center;
    background-size: contain;
  }
}
.shipping-delivery-page-link:hover {
  color: #fff !important;
  & .shipping-delivery-page-icon {
    background-image: url("../../../assets/right-arrow-white.png");
    max-width: 22px;
    height: 22px;
    background-position: right center;
    background-size: contain;
  }
}
.showonhover {
  width: 30%;
}
.shipping-delivery-hero-min-height-800 {
  min-height: 800px;
}
.shipping-delivery-horizontal-line {
  border: 0.0625rem solid #2850da !important;
  width: 100%;
  content: "";
  display: block;
}
.shipping-delivery-vertical-line {
  border-left: 1px solid #2850da;
  height: 35px;
}
.shipping-delivery-days-button {
  display: flex;
  align-items: center;
  width: 130px;
  border: thin solid #2850da;
}
.shipping-delivery-days-button-mobileview {
  display: flex;
  align-items: center;
  width:100% ;
   border:none!important;
}

.shipping-delivery-dayone-inside {
  display: flex;
  align-items: center;
  width: 130px;
}
.shipping-delivery-days-options {
  display: none;
}
.shipping-delivery-days-button:hover .shipping-delivery-days-options {
  display: block;
  position: absolute;
  background-color: #fff;
  width: 130px;
  margin-left: -1px;
  z-index: 9999;
  border: thin solid #2850da;
}
#dayOneOptions{
  display:none;
}
#daySecondOptions{
  display:none;
}
#dayThirdOptions{
  display:none;
}
#dayFourOptions{
  display:none;
}
#dayFiveOptions{
  display:none;
}
#daySixOptions{
  display:none;
}
#dayOneOptionsMobileView{
  display:none;
}
#daySecondOptionsMobileView{
  display:none;
}
#dayThirdOptionsMobileView{
  display:none;
}
#dayFourOptionsMobileView{
  display:none;
}
#dayFiveOptionsMobileView{
  display:none;
}
#daySixOptionsMobileView{
  display:none;
}
.shipping-delivery-days-options-mobileview {
  display: block;
  position: absolute;
  background-color: #fff;
  width: 130px;
  margin-left: -1px;
  z-index: 9999;
  border: thin solid #2850da;
}
.shipping-delivery-dayone-square {
  width: 35px;
  height: 35px;
}
.shipping-delivery-daysix-inside-square {
  width: 35px;
  height: 35px;
  border-bottom: thin solid #2850da;
}
.shipping-delivery-daysecond-square {
  opacity: 0.8 !important;
  width: 35px;
  height: 35px;
}
.shipping-delivery-daythird-square {
  opacity: 0.6 !important;
  width: 35px;
  height: 35px;
}
.shipping-delivery-dayfour-square {
  opacity: 0.4 !important;
  width: 35px;
  height: 35px;
}
.shipping-delivery-dayfive-square {
  opacity: 0.2 !important;
  width: 35px;
  height: 35px;
}
.shipping-delivery-daysix-square {
  opacity: 0 !important;
  width: 35px;
  height: 35px;
}

.plus {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-position: center;
  background-size: 40% 2px, 2px 40%; /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
}
.minus {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-position: center;
  background-size: 40% 2px; /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
}
@media (min-width:600px) and (max-width:768px) {
  .shipping-delivery-days-button {
  display: flex;
  align-items: center;
  width: 100px;
  border: thin solid #2850da;
}
    
}
@media screen and (max-width: 600px) {
  .shipping-delivery-cols-6 {
    width: 100%;
  }
  th {
    background-color: #c6c9d3;
    width: 50%;
  }
  .shipping-delivery-row {
    display: block;
  }
  .shipping-delivery-col-4 {
    width: 100%;
  }
}
</style>
<style src="./ShippingAndDeliveryComponent.scss" lang="scss" scoped /> 