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];
            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" data-bs-toggle="collapse" data-bs-target="#${id}_child" aria-expanded="true" aria-controls="${id}_child">
          <span class="font-weight-600 fs-5 text-dark acc-specs-name"> ${name}</span>
          </button>
        </h2>
        <div>
       
       
        <div id="${id}_child" class="accordion-collapse collapse  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" data-bs-toggle="collapse" data-bs-target="#${id}_child" aria-expanded="true" aria-controls="${id}_child">
            <span class="font-weight-600 fs-5 text-dark acc-specs-name"> ${name}</span>
            <div id="${id}_child" class="accordion-collapse collapse 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();