anwisystems/dist/js/productdetails/laptopd.js

function startDetails() {
  // http://127.0.0.1:5502/productdetails.html?productId=106633230000024

  if (window.location.search.split("=")[0] == "") {
    window.location.href = "/notfound.html";
    return;
  }
  let productId = window.location.hash.split("#")[1].split("=")[1];

  let itemtagscombinationRes = null;
  let labels = {};
  let isThereInLabel = {};
  let currentComb = null;

  let colorId = null;

  let group = {};

  let loadingActions = {
    addLoader() {
      $(".loadingCall").removeClass("d-none");
      $(".mainContanierProduct").addClass("d-none");
    },
    removeLoader() {
      $(".loadingCall").addClass("d-none");
      $(".mainContanierProduct").removeClass("d-none");
    },
  };

  let currentClick = null;

  if (productId) {
    swapSectionsVideo();
    loadingActions.addLoader();
    updateProductId(productId);
    getProductDetails(productId);
    appendSpecs(productId);
  } else {
    window.location.href = "/notfound.html";
  }

  function updateProductId(val) {
    $("#productidtag").val(val);
  }

  function updateItemId(val) {
    $("#itemidtag").val(val);
  }

  let specification_wrap_action = {
    remove() {
      $(".specification-wrap").addClass("d-none");
    },

    add() {
      $(".specification-wrap").removeClass("d-none");
    },
  };

  let description_action = {
    addVal(value) {
      $(".description-wrap > p").html(value);
    },

    removeVal(value) {
      $(".description-wrap > p").html("");
    },
  };

  function getSpecsItemHTML({ name, des, itemid, id }) {
    return `<div id="${id}" data-specitemid="${itemid}" class="">
        <div class="row  border-bottom">
            <div class="col-sm-6 bg-gray-3 py-2">
            ${name}
            </div>
            <div class="col-sm-6  py-2">
            ${des}	
            </div>
        </div>
    </div>`;
  }
  // function getSpecsItemHTML({name,des,itemid,id}){
  //     return ` <tr id="${id}" data-specitemid="${itemid}">
  //     <td style="width:200px">${name}</td>
  //     <td class="">${des}</td>
  // </tr>`;
  // }

  async function appendSpecs(id) {
    let resData = await API_SERVICES_ACTIONS.getAPIService(
      `apis/v4/bizgaze/integrations/products/itemspecifications/itemid/${id}`,
      true
    );
    if (resData.isError) {
      $(".productdetailstabs").addClass("d-none");
      // $('.specContainerleft').html('')
      $(".specContainerRight").html("");
      $(".specContainerleft").find("#faqAccordion").html("");
      return;
    }
    $(".productdetailstabs ").removeClass("d-none");
    const res = resData.response;
    const data = JSON.parse(res.result);
    let html = "";
    let leftHtml = "";
    let rightHtml = "";

    if (data.length == 0) {
      $(".productdetailstabs ").addClass("d-none");
      $(".specContainerleft").find("#faqAccordion").html("");
      $(".specContainerRight").html("");
      return;
    }

    // for (let i = 0; i < data.length; i++) {
    //     const { specificationname, specificationitemid, itemid, description } = data[i];
    //     if ((i + 1) % 2 == 0) {
    //         rightHtml += getSpecsItemHTML({
    //             name: specificationname, id: specificationitemid, itemid, des: description
    //         })
    //     } else {
    //         leftHtml += getSpecsItemHTML({
    //             name: specificationname, id: specificationitemid, itemid, des: description
    //         });
    //     }

    // }

    // $('.specContainerleft').html(leftHtml)
    // $('.specContainerRight').html(rightHtml)

    let fullHtml = "";
    for (let i = 0; i < data.length; i++) {
      // const { specificationname, specificationitemid, itemid, description } = data[i];
      const {
        "Specification Name": specificationname,
        itemid: itemid,
        specificationitemid: specificationitemid,
        Description: description,
      } = data[i];
      fullHtml += getSpecAccordionHTML(
        `acc_specs_${specificationitemid}`,
        specificationname,
        description,
        specificationitemid,
        itemid
      );
    }
    $(".specContainerleft").find("#faqAccordion").html(fullHtml);
  }

  function getSpecAccordionHTML(id, name, body, itemid, mainid) {
    let lis = '<ul class="mb-0 lh-2r">';
    if (body.includes("•")) {
      let lisArr = body.split("•");
      for (let i = 1; i < lisArr.length; i++) {
        lis += `<li>${lisArr[i]}</li>`;
      }
      lis += "</ul>";
    } else {
      lis = body;
    }
    if ($(window).width() <= 768) {
      return ` <div class="accordion-item  border-0 py-2">
        <h2 class="accordion-header" id="${mainid}">
          <button class=" accordion-button  bg-white text-dark " type="button" >
          <span class="font-weight-600 fs-5 text-dark acc-specs-name"> ${name}</span>
          </button>
        </h2>
        <div>
       
       
        <div id="${id}_child" class=" w-100 show" aria-labelledby="${mainid}">
            <div class="accordion-body ${
              body.includes("•") ? "px-1" : ""
            }   d-flex justify-content-right">
            <div class="text-secondary">${lis}</div>
            </div>
          
      </div>
      
      </div>
      </div>`;
    } else {
      return ` <div class="accordion-item  border-x-none">
        <h2 class="accordion-header" id="${mainid}">
          <button class="py-md-5 accordion-button  bg-white text-dark " type="button" >
            <span class="font-weight-600 fs-5 text-dark acc-specs-name"> ${name}</span>
            <div id="${id}_child" class="show w-100 " aria-labelledby="${mainid}">
                <div class="accordion-body d-flex justify-content-right">
                <div>${lis}</div>
                </div>
              </div>
          </button>
        </h2>
        
      </div>`;
    }
    return `<div id="${mainid}"  data-specitemid="${id}" class="accordion-item custom-accordion-item border-x-none">
        <h2 class="accordion-header  custom-accordion-header" id="${id}">
            <button class="py-5 accordion-button bg-white text-dark custom-accordion-button" type="button"
                data-bs-toggle="collapse" data-bs-target="#${id}_child" aria-expanded="true"
                aria-controls="${id}_child">
               <span class="font-weight-600 font-1-5 text-dark"> ${name}</span>
                <div id="${id}_child" class="accordion-collapse  collapse show custom-accordion-content"
            aria-labelledby="${mainid}" data-bs-parent="#faqAccordion">
            <div class="accordion-body custom-accordion-body font-weight-600">
               
${body}
            </div>
        </div>
            </button>
        </h2>
        
    </div>`;
  }

  function getParentHTML(name, productid, id, isMain) {
    return `<div data-parentidgroup="${name?.replace(
      " ",
      ""
    )}-parent" class="pb-2 groupingitems_search ${name?.replace(
      " ",
      ""
    )}-parent">
        <h5 class="py-2 smallHeadingProductDetails">${name}</h5>
        <div class="d-flex gap-2 flex-lg-row flex-wrap ${id}container" data-tagid="${id}">
           
        </div>
    </div>`;
  }

  function onClickHandler(e) {
    $(e).parent().find(".borderselector").removeClass("borderselector");

    $(e).addClass("borderselector");
  }

  function getChildHTML(tagid, name, isTrue, parentid) {
    let blue = "#253746";
    let greenLight = "#5e7975";
    let brown = "#624839";
    let bgColor = "";
    if (name === "Deep Sea Blue") {
      bgColor = blue;
    } else if (name == "Desert Brown") {
      bgColor = brown;
    } else if (name == "Eucalyptus Green") {
      bgColor = greenLight;
    }

    if (colorId == parentid) {
      return `
            <div data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="specsmallcard optiontaganwi ${
        isTrue ? "borderselector" : ""
      } colorselector card text-center small-font cursor-pointer ">
        <span  style="
        height: 25px;
        border-radius: 5px;
        width:25px;
        background: ${bgColor} !important;
        pointer-events:none;
      
    "></span>
            </div> `;
    }
    return `
            <div data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="specsmallcard optiontaganwi ${
      isTrue ? "borderselector" : ""
    } card text-center small-font cursor-pointer p-3">
                ${name}
            </div> `;
  }

  function addeventlisteners() {
    $(".optiontaganwi").each(function (i, el) {
      $(el).click(function (e) {
        $("#quantity").val(1);

        $(e.target)
          .parent()
          .find(".borderselector")
          .removeClass("borderselector");
        $(e.target).addClass("borderselector");

        currentClick = e.target;
        //searchComb();
        // getAllCombination();
        getandsetCombination();
      });
    });
  }

  function getandsetCombination() {
    let keyOption = $(currentClick).data("tagiditem");
    $(".disabled-option-item").removeClass("disabled-option-item");
    let tagsNames = [];

    let currOptionAvaIds = {};

    $(".borderselector").each(function (i, e) {
      let id = $(e).data("tagiditem");
      tagsNames.push(id);
    });

    for (let i = 0; i < itemtagscombinationRes.length; i++) {
      let tagItems = itemtagscombinationRes[i].tagids;
      if (tagItems.includes(keyOption)) {
        let splitArr = tagItems.split("|");
        for (let j = 0; j < splitArr.length; j++) {
          if (keyOption) {
            currOptionAvaIds[splitArr[j]] = splitArr[j];
          }
        }
      }
    }

    let parentsArr = [];
    $(".optiontaganwi").each(function (i, e) {
      let currParent = $(e).parents(".groupingitems_search");

      if (currParent.find(`[data-tagiditem="${keyOption}"]`).length == 0) {
        let currId = $(e).data("tagiditem");
        if (!currOptionAvaIds[currId]) {
          if ($(e).hasClass("borderselector")) {
            parentsArr.push(currParent);
            $(e).removeClass("borderselector");
          }
          $(e).addClass("disabled-option-item");
        }
      }
    });

    for (let i = 0; i < parentsArr.length; i++) {
      let currParent = parentsArr[i];
      currParent.find(".optiontaganwi").each(function (j, e) {
        let isTrue = $(e).hasClass("disabled-option-item");
        if (!isTrue) {
          $(e).addClass("borderselector");
          return false;
        }
      });
    }

    // $('.optiontaganwi').addClass('disabled-option-item');
    let parentId = $(currentClick).parents(".groupingitems_search");
    let parentData = $(parentId).data("parentidgroup");
    let parentArr = [];
    $(".groupingitems_search").each(function (i, e) {
      const curParentId = $(e).data("parentidgroup");
      if (parentData != curParentId) {
        let obj = {
          name: $(e).find(".smallHeadingProductDetails").html(),
          arr: [],
        };
        $(e)
          .find(".optiontaganwi")
          .each(function (j, evt) {
            let id = $(evt).data("tagiditem");
            obj.arr.push(id);
          });
        parentArr.push(obj);
      }
    });

    let arrone = parentArr[0].arr;
    let arrtwo = [];
    if (parentArr.length > 1) {
      arrtwo = parentArr[1]?.arr;
    }

    let currId = keyOption;
    let ids = [];
    for (let i = 0; i < arrone.length; i++) {
      //let currEl = [currId,arrone[i]];
      let currEl = ``;
      for (let j = 0; j < arrtwo.length; j++) {
        currEl = `${currId}|${arrone[i]}|${arrtwo[j]}`;

        ids.push(currEl);
        currEl = "";
      }
    }

    let findObj = [];

    for (let i = 0; i < ids.length; i++) {
      let curId = ids[i];
      for (let j = 0; j < itemtagscombinationRes.length; j++) {
        const currItem = itemtagscombinationRes[j].tagids.split("|");
        let isTrue = true;
        for (let k = 0; k < currItem.length; k++) {
          if (!curId.includes(currItem[k])) {
            isTrue = false;
            break;
          }
        }

        if (isTrue) {
          findObj.push(itemtagscombinationRes[j]);
        }
      }
    }

    $(".optiontaganwi").addClass("disabled-option-item");

    for (let i = 0; i < findObj.length; i++) {
      let item = findObj[i].tagids.split("|");
      for (let j = 0; j < item.length; j++) {
        $(`[data-tagiditem=${item[j]}]`).removeClass("disabled-option-item");
      }
    }

    $(parentId)
      .find(".optiontaganwi")
      .each(function (i, e) {
        $(e).removeClass("disabled-option-item");
      });

    for (let i = 0; i < itemtagscombinationRes.length; i++) {
      let currIds = itemtagscombinationRes[i].tagids;
      let isTrue = true;
      let isPro = false;

      for (let j = 0; j < tagsNames.length; j++) {
        if (
          tagsNames.join().includes("106631360000128") &&
          (tagsNames.join().includes("106631360000132") ||
            tagsNames.join().includes("106631360000133"))
        ) {
          isPro = true;
        }
        if (!currIds.includes(tagsNames[j])) {
          isTrue = false;
        }
      }

      if (isTrue) {
        const { quantity } = itemtagscombinationRes[i];
        if (true) {
          currentComb = itemtagscombinationRes[i];

          updateDetailsByObj(itemtagscombinationRes[i]);

          if (isPro) {
            $(`[data-tagiditem="106631360000089"]`).addClass(
              " disabled-option-item"
            );
            $(`[data-tagiditem="106631360000088"]`).addClass(
              " disabled-option-item"
            );
          }
        } else {
          let name = itemtagscombinationRes[i].itemname.split("-")[0];
          $("#addtocart").addClass("disabled");
          let itemsName = name;
          $(".borderselector").each(function (i, e) {
            itemsName += ` ${$(e).html().trim()}`;
          });

          updateItemId(null);

          let defaultImg = itemtagscombinationRes[i].itemimageurl
            ? imgServerNameBuild(itemtagscombinationRes[i].itemimageurl)
            : `./dist/assets/imgs/nophoto.png`;
          debugger;
          $(".productDetailsMain  > img").attr("src", defaultImg);
          alert("updated1");
          specification_wrap_action.remove();
          $("#skudetailitem").val(-1);
          $(".productname").html(itemsName);

          $(".msgErrorDetailsItem").removeClass("d-none");
          $(".des_productdes").html("");
          $(".price").html("");
        }

        initAddToCart();
        return;
      }
    }

    // return;

    return;
    let commonTags = [];
    //  $('.optiontaganwi').addClass('disabled-option-item')

    for (let i = 0; i < tagsNames.length; i++) {
      let currtagName = tagsNames[i];
      let arr = currtagItemCom(currtagName);
      commonTags.push(arr);
    }

    // for(let i=0;i<commonTags.length;i++){
    //     let currObj = commonTags[i];
    //     for(let item in currObj){
    //
    //         $(`[data-tagiditem="${item}"]`).removeClass('disabled-option-item')
    //     }
    // }

    let finalAns = {};
    let arra = [];
    for (let i = 0; i < commonTags.length; i++) {
      let currObj = commonTags[i];
      for (let item in currObj) {
        let isTrue = true;
        for (let j = 0; j < commonTags.length; j++) {
          if (j != i) {
            let currComb = commonTags[j];
            if (!currComb[item]) {
              isTrue = false;
            }
          }
        }
        if (isTrue) {
          arra.push(currObj[item]);
          finalAns[currObj[item]] = currObj[item];
          $(`[data-tagiditem="${item}"]`).removeClass("disabled-option-item");
        }
      }
    }

    // for(let i=0;i<itemtagscombinationRes.length;i++){
    //     let tagItems = itemtagscombinationRes[i].tagids;;
    //     if(tagItems.includes(keyOption)){
    //         let splitArr = tagItems.split('|');
    //         for(let j=0;j<splitArr.length;j++){
    //             commonTags[splitArr[j]] = splitArr[j];
    //         }
    //     }
    // }

    // for(let i=0;i<currOptionAvaIds.length;i++){
    //     let currId = currOptionAvaIds[i];
    //     if(parentId.find(currId).length === 0){
    //
    //     }
    // }
  }

  function currtagItemCom(keyOption) {
    let arr = [];
    let commonTags = {};
    for (let i = 0; i < itemtagscombinationRes.length; i++) {
      let tagItems = itemtagscombinationRes[i].tagids;
      if (tagItems.includes(keyOption)) {
        let splitArr = tagItems.split("|");
        for (let j = 0; j < splitArr.length; j++) {
          if (!commonTags[splitArr[j]]) {
            commonTags[splitArr[j]] = {
              keyOption,
              data: itemtagscombinationRes[i],
            };
            arr.push(splitArr[j]);
          }
        }
      }
    }

    return commonTags;
  }

  function updateDetailsByObj(obj) {
    $(".productname").html(obj.itemname);
    $(".titleproductnav").html(obj.itemname);
    let [currencySymbol, amount] = getCurrencySymbol(obj?.pricelist || 0);

    let commingSoonText =
      window.location.href.toLowerCase().includes("zeno") ||
      window.location.href.includes("fyro");
    $(".price").html(
      obj.pricelist
        ? `<span class="font-w600">${currencySymbol}${amount}</span>${
            commingSoonText
              ? '<span class="mx-1 badge  d-md-none  bg-gradient-violet text-a-color">Pre Order Now!</span>'
              : ""
          }`
        : "pre order now"
    );
    appendSpecs(obj.itemid);
    $("#skudetailitem").val(obj.sku);
    $(".des_productdes").html(obj.itemdescription);
    $("#addtocart").attr("data-qty", obj.quantity);

    let defaultImg = obj.itemimageurl
      ? imgServerNameBuild(obj.itemimageurl)
      : `./dist/assets/imgs/nophoto.png`;

    let productId = window.location.hash.split("#")[1]?.split("=")[1];
    let itemId = window.location.hash.split("#")[2]?.split("=")[1];
    history.replaceState(
      undefined,
      undefined,
      `#productId=${productId}#itemid=${obj.itemid}`
    );
    $(".productDetailsMain  > img")
      .attr("src", defaultImg)
      .attr("loading", "lazy");
    magnify("main_show_img", 1.2, defaultImg);
    updateItemId(obj.itemid);

    if (!obj.pricelist || !obj.quantity) {
      $(".buynow").attr("disabled", true);
      $("#addtocart").attr("disabled", true);
    } else {
      $(".buynow").attr("disabled", false);
      $("#addtocart").attr("disabled", false);
    }
  }

  function searchComb() {
    let valuesSelected = [];
    $(".optiontaganwi").removeClass("disabled-option-item");

    $("#addtocart").removeClass("disabled");
    $(".msgErrorDetailsItem").addClass("d-none");
    $(".borderselector,border_selector").each(function (i, el) {
      let val = $(el).data("tagiditem");
      valuesSelected.push(val);
    });

    let labelRecord = {};

    for (let label in labels) {
      labelRecord[label] = false;
    }

    specification_wrap_action.add();

    let unFiler = null;
    for (let i = 0; i < itemtagscombinationRes.length; i++) {
      const currItem = itemtagscombinationRes[i];
      const { tagids } = currItem;

      let isTrue = true;
      let labelFilter = labelRecord;

      for (let i = 0; i < valuesSelected.length; i++) {
        if (!tagids.includes(valuesSelected[i])) {
          isTrue = false;

          unFiler = labelFilter;
          break;
        }
        labelFilter[group[valuesSelected[i]]] = true;
      }

      if (isTrue) {
        const { quantity } = itemtagscombinationRes[i];
        if (quantity >= $("#quantity").val() && quantity >= 1) {
          currentComb = itemtagscombinationRes[i];
          // $('.productname').html(itemtagscombinationRes[i].itemname)
          // $('.price').html(itemtagscombinationRes[i].pricelist);
          // location.hash = itemtagscombinationRes[i].itemname.trim();
          // appendSpecs(itemtagscombinationRes[i].itemid)
          // history.replaceState(null, null, `#itemid=${itemtagscombinationRes[i].itemid}#${itemtagscombinationRes[i].itemname.trim()}`);

          // $('#skudetailitem').val(itemtagscombinationRes[i].sku)
          // $('.des_productdes').html(itemtagscombinationRes[i].itemdescription);
          updateDetailsByObj(itemtagscombinationRes[i]);
        } else {
          let name = itemtagscombinationRes[i].itemname.split("-")[0];
          $("#addtocart").addClass("disabled");
          let itemsName = name;
          $(".borderselector").each(function (i, e) {
            itemsName += ` ${$(e).html().trim()}`;
          });

          updateItemId(null);

          let defaultImg = itemtagscombinationRes[i].itemimageurl
            ? imgServerNameBuild(itemtagscombinationRes[i].itemimageurl)
            : `./dist/assets/imgs/nophoto.png`;
          $(".productDetailsMain  > img").attr("src", defaultImg);
          specification_wrap_action.remove();
          $("#skudetailitem").val(-1);
          $(".productname").html(itemsName);
          // history.replaceState(null, null, `#`);
          $(".msgErrorDetailsItem").removeClass("d-none");
          $(".des_productdes").html("");
          $(".price").html("");
        }

        initAddToCart();
        return;
      }
    }
    let name = itemtagscombinationRes[0].itemname.split("-")[0];
    let itemsName = name;
    $(".borderselector").each(function (i, e) {
      itemsName += `- ${$(e).html().trim()}`;
    });
    specification_wrap_action.remove();
    $(".productname").html(itemsName);
    $("#skudetailitem").val(-1);
    $(".price").html("");
    $("#addtocart").addClass("disabled");
    $(".msgErrorDetailsItem").removeClass("d-none");

    initAddToCart();
  }

  function getAllCombination() {
    const currClickAttr = $(currentClick).html().trim();
    const optionId = $(currentClick).data("tagiditem");

    let curr = $(currentClick)
      .parents(".groupingitems_search")
      .data("parentidgroup");
    $(".groupingitems_search").each(function (i, e) {
      const id = $(e).data("parentidgroup");
      if (id != curr) {
        $(e).find(".optiontaganwi").addClass("disabled-option-item");
        $(e).find(".borderselector").removeClass("borderselector");
      }
    });

    let ansArr = [];
    let index = 0;
    let comb = null;
    for (let i = 0; i < itemtagscombinationRes.length; i++) {
      let currIds = itemtagscombinationRes[i].tagids;

      if (currIds.includes(optionId)) {
        currIds = currIds.split("|");

        for (let j = 0; j < currIds.length; j++) {
          if (index == 0 && optionId != currIds[j]) {
            $(`[data-tagiditem="${currIds[j]}"]`).addClass("borderselector");
            comb = itemtagscombinationRes[i];
            index++;
          }
          $(`[data-tagiditem="${currIds[j]}"]`).removeClass(
            "disabled-option-item"
          );

          // $().parents('[data-tagid]').find()
        }
      }
    }

    updateDetailsByObj(comb);

    let currentItem = comb.tagids.split("|");

    for (let i = 0; i < currentItem.length; i++) {
      $(`[data-tagiditem="${currentItem[i]}"]`)
        .removeClass("disabled-option-item")
        .addClass("borderselector");
    }

    // history.replaceState(null, null, `#${comb.itemname}`);
    // window.location.href =  `#${comb.itemname}`
    return;
  }

  async function getProductDetails(id) {
    let resData = await API_SERVICES_ACTIONS.getAPIService(
      `apis/v4/bizgaze/integrations/products/productattributelist/productid/${id}`,
      true
    );

    if (resData.isError) {
      loadingActions.removeLoader();
      alert(resData.errorMsg.message);
      return;
    }

    if (resData.response.result == "[]" || !resData.response.result) {
      $(".barbgnav").removeClass("d-none");
      loadingActions.removeLoader();
      toasterHelper("Something Went Wrong");
      return;
    }

    let res = resData.response;

    res = JSON.parse(res.result);

    if (!res) {
      loadingActions.removeLoader();
      return;
    }

    let html = "";

    for (let i = 0; i < res.length; i++) {
      const currItem = res[i];
      // parenttagid means under what label
      // tag id means it know unquie id
      const {
        parentattribute,
        parenttagid,
        tagid,
        attribute,
        productid,
      } = currItem;

      if (labels[parentattribute]) {
        labels[parentattribute].items.push({
          attribute,
          tagid: tagid,
        });
      } else {
        labels[parentattribute] = {
          id: parenttagid,
          items: [
            {
              attribute,
              tagid: tagid,
            },
          ],
        };

        if (parentattribute.toLowerCase() === "colour") {
          colorId = parenttagid;
        }
        html += getParentHTML(parentattribute, productid, parenttagid, i == 0);
      }
    }
    $("#spec-container-details").html(html);

    let childIds = [];

    for (let item in labels) {
      let { id, items } = labels[item];
      // $(`[data-tagid=${id}]`)
      let html = "";

      for (let i = 0; i < items.length; i++) {
        const { attribute, tagid } = items[i];
        childIds.push(tagid);
        group[attribute] = item;
        html += getChildHTML(tagid, attribute, i == 0, id);
      }
      $(`[data-tagid="${id}"]`).html(html);
    }
    itemtagscombinationRes = await API_SERVICES_ACTIONS.getAPIService(
      `apis/v4/bizgaze/integrations/products/getitemwithoutbranch/productid/${id}`,
      true
    );
    itemtagscombinationRes = JSON.parse(itemtagscombinationRes.response.result);

    let itemidSearch = window.location.hash.split("#")[2]?.split("=")[1];

    if (!itemidSearch) {
      itemidSearch = itemtagscombinationRes[0].itemid;
    }

    let valuesSelected = [];

    $(".borderselector").each(function (i, el) {
      let val = $(el).html();
      valuesSelected.push(val.trim());
    });
    // let searchParams = window.location.search.split("&");
    // let skuId = window.location.hash.split('#')[2].split('=')[1];
    // skuId = skuId.split('=')[1]
    let isGo = true;
    for (let i = 0; i < itemtagscombinationRes.length; i++) {
      const currItem = itemtagscombinationRes[i];

      const { tagnames, sku, itemid } = currItem;

      isThereInLabel[tagnames] = itemtagscombinationRes[i];
      let isTrue = true;
      if (isGo) {
        // for(let i=0;i<valuesSelected.length;i++){
        //     if(!tagnames.includes(valuesSelected[i])){
        //         isTrue = false
        //     }
        // }
        if (itemidSearch != itemid) {
          isTrue = false;
        }
        // if (i != 0) {
        //     isTrue = false
        // }
        if (isTrue) {
          currentComb = itemtagscombinationRes[i];

          updateDetailsByObj(itemtagscombinationRes[i]);

          isGo = false;
          let { tagnames, tagids, pricelist } = itemtagscombinationRes[i];
          tagids = tagids.split("|");
          tagnames = tagnames.split("|");
          $(".optiontaganwi").removeClass("borderselector");

          for (let i = 0; i < tagids.length; i++) {
            $(`[data-tagiditem="${tagids[i]}"]`).addClass("borderselector");
          }

          break;
          // tagiditem
        }
      }
    }

    if (isGo && itemtagscombinationRes.length != 0) {
      let { tagnames, tagids, pricelist } = itemtagscombinationRes[0];
      tagids = tagids.split("|");
      tagnames = tagnames.split("|");
      $(".optiontaganwi").removeClass("borderselector");
      currentComb = itemtagscombinationRes[0];
      // updateItemId(itemtagscombinationRes[0].itemid);

      for (let i = 0; i < tagids.length; i++) {
        $(`[data-type="${tagids[i]}-${tagnames[i]}"]`).addClass(
          "borderselector"
        );
        // $(`[data-type="${tagids[i]}-Eucalyptus Green"]`).removeClass('borderselector');
        // $(`[data-type="${tagids[i]}-Desert Brown"]`).removeClass('borderselector');
        // $(`[data-type="${tagids[i]}-Deep Sea Blue"]`).removeClass('borderselector');
      }

      // $('.price').html(pricelist);
      // $('.des_productdes').html(itemtagscombinationRes[0].itemdescription);
      // appendSpecs(itemtagscombinationRes[0].itemid);

      updateDetailsByObj(itemtagscombinationRes[0]);
    }

    //getAllCombination()

    // for(let i=0;i<itemtagscombinationRes.length;i++){
    //     const {tagnames} = itemtagscombinationRes[i];

    // }

    $("#spec-container-details")
      .children()
      .find(".specsmallcard")
      .removeClass("specsmallcard");

    //getting the first borderselector in first $('.groupingitems_search')[0]

    let firstParentGroup = $(".groupingitems_search")[0];
    let optionId = $(firstParentGroup)
      .find(".borderselector")
      .data("tagiditem");

    currentClick = $(firstParentGroup).find(".borderselector");
    getandsetCombination();
    addeventlisteners();
    loadingActions.removeLoader();
    return;
  }

  function magnify(imgID, zoom, defaultImg) {
    let width = $(window).width();
    if (width >= 576) {
      var img, glass, w, h, bw;
      img = document.getElementById(imgID);

      /* Create magnifier glass: */
      glass = document.createElement("DIV");
      glass.setAttribute("class", "img-magnifier-glass d-none");

      /* Insert magnifier glass: */
      img.parentElement.insertBefore(glass, img);
      /* Set background properties for the magnifier glass: */
      glass.style.backgroundImage = "url('" + defaultImg + "')";
      glass.style.backgroundRepeat = "no-repeat";

      if (img.width <= 400 && img.width <= 400) {
        glass.style.backgroundSize = 650 * zoom + "px " + 650 * zoom + "px";
      } else {
        glass.style.backgroundSize =
          img.width * zoom + "px " + img.height * zoom + "px";
      }

      bw = 3;
      w = glass.offsetWidth / 2;
      h = glass.offsetHeight / 2;

      /* Execute a function when someone moves the magnifier glass over the image: */
      glass.addEventListener("mousemove", moveMagnifier);
      img.addEventListener("mousemove", moveMagnifier);

      /*and also for touch screens:*/
      glass.addEventListener("touchmove", moveMagnifier);
      img.addEventListener("touchmove", moveMagnifier);

      function moveMagnifier(e) {
        var pos, x, y;
        /* Prevent any other actions that may occur when moving over the image */
        e.preventDefault();
        /* Get the cursor's x and y positions: */
        pos = getCursorPos(e);
        x = pos.x;
        y = pos.y;
        /* Prevent the magnifier glass from being positioned outside the image: */
        if (x > img.width - w / zoom) {
          x = img.width - w / zoom;
        }
        if (x < w / zoom) {
          x = w / zoom;
        }
        if (y > img.height - h / zoom) {
          y = img.height - h / zoom;
        }
        if (y < h / zoom) {
          y = h / zoom;
        }
        /* Set the position of the magnifier glass: */
        glass.style.left = x - w + "px";
        glass.style.top = y - h + "px";
        /* Display what the magnifier glass "sees": */
        glass.style.backgroundPosition =
          "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px";
      }

      function getCursorPos(e) {
        var a,
          x = 0,
          y = 0;
        e = e || window.event;
        /* Get the x and y positions of the image: */
        a = img.getBoundingClientRect();
        /* Calculate the cursor's x and y coordinates, relative to the image: */
        x = e.pageX - a.left;
        y = e.pageY - a.top;
        /* Consider any page scrolling: */
        x = x - window.pageXOffset;
        y = y - window.pageYOffset;
        return { x: x, y: y };
      }
    }
  }
}
startDetails();