anwi_website/dist/Js/productdetails/productdetails.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.search.split('=')[1].split('&')[0];
    console.log(productId);
    let itemtagscombinationRes = null;
    let labels = {};    
    let isThereInLabel = {};
    let currentComb = 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){
        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>`;
        return ` <tr id="${id}" data-specitemid="${itemid}">
        <td style="width:200px">${name}</td>
        <td class="">${des}</td>
    </tr>`;
    }
    // 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('')
            return;
        }
        $('.productdetailstabs ').removeClass('d-none');
        const res = resData.response;
        console.log(JSON.parse(res.result));
        const data = JSON.parse(res.result);
        console.log(data);
        let html = '';
        let leftHtml = '';
        let rightHtml = '';

        if(data.length == 0){
            $('.productdetailstabs ').addClass('d-none');
            $('.specContainerleft').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)

    }
   

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

    function onClickHandler(e) {
  
        $(e).parent().find('.borderselector').removeClass('borderselector');
    
        $(e).addClass('borderselector')
    
    }

    function getChildHTML(tagid,name,isTrue){
        return `
        <div  data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="specsmallcard optiontaganwi ${isTrue?'borderselector':''} card small-font  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')
           searchComb();
            currentClick = e.target;
           // getAllCombination();
          })
        });
    }

    function updateDetailsByObj(obj){
        $('.productname').html(obj.itemname)
        $('.price').html(obj.pricelist);
        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`;
console.log(obj.itemimageurl,'obj.itemimageurlobj.itemimageurlobj.itemimageurl');

        $('.productDetailsMain  > img').attr('src',defaultImg);

        updateItemId(obj.itemid);
    }

    function searchComb(){
        let valuesSelected = [];
 
        
        $('#addtocart').removeClass('disabled');
        $('.msgErrorDetailsItem').addClass('d-none');
        $('.borderselector').each(function (i,el){
            let val = $(el).html();
            valuesSelected.push(val.trim());
        });

        let labelRecord = {};

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

        console.log(labelRecord);
        specification_wrap_action.add();
        console.log(group);
        let unFiler = null;
        for(let i=0;i<itemtagscombinationRes.length;i++){
            const currItem = itemtagscombinationRes[i];
            const {tagnames} = currItem;
           

                let isTrue = true;
                let labelFilter = labelRecord;
                
                for(let i=0;i<valuesSelected.length;i++){
                  
                    if(!tagnames.includes(valuesSelected[i])){
                        isTrue = false
                        
                        unFiler = labelFilter;
                        break;
                    }
                    labelFilter[group[valuesSelected[i]]] = true;
                }
    
                if(isTrue){
                    console.log(itemtagscombinationRes[i],'itemtagscombinationRes[i]');
                    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);

                       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();

     let isThere = [];
     for(let item in isThereInLabel){
        let {tagnames} = isThereInLabel[item];
        if(tagnames.includes(currClickAttr)){
            isThere.push( isThereInLabel[item])
        }
     }
        let selected = [];
        $('.borderselector').each(function (i,e){
            selected.push($(e).html().trim())
        });
        
        // console.log(selected);
        // console.log(isThere);

        let ishashObj = {};

        for(let i=0;i<isThere.length;i++){
            let  {tagnames,tagids} = isThere[i];
            tagnames = tagnames.split('|');
            tagids = tagids.split('|');

            for(let j=0;j<tagnames.length;j++){
                if(!ishashObj[tagnames[j]]){
                    ishashObj[tagnames[j]] = tagids[j];
                }
            }
        }

        // console.log(ishashObj);

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


    async function getProductDetails(id){
        
 

        // let res = await getStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/productid/${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;
        }

        let res = resData.response;
            
        res = JSON.parse(res.result);
        // console.log(res);

      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
                    }]
                };
                html += getParentHTML(parentattribute,productid,parenttagid,i==0);
            }

        }
        $('#spec-container-details').html(html);
       

        // console.log(labels,'labels');

        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);
            }
            $(`[data-tagid="${id}"]`).html(html);
        }

        itemtagscombinationRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`,true); 

        itemtagscombinationRes = JSON.parse(itemtagscombinationRes.response.result);
         console.log(itemtagscombinationRes);

        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('#')[1].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(skuId != itemid){
                    isTrue = false
                }
    
                if(isTrue){
                    
                    console.log(itemtagscombinationRes[i],'itemtagscombinationRes[i]');


                    currentComb = itemtagscombinationRes[i];
                   // location.hash = itemtagscombinationRes[i].itemname.trim();

                    // $('.productname').html(itemtagscombinationRes[i].itemname);
                    // $('#skudetailitem').val(itemtagscombinationRes[i].sku)
                    // $('.price').html(itemtagscombinationRes[i].pricelist)
               
                    // appendSpecs(itemtagscombinationRes[i].itemid);
                    // $('.des_productdes').html(itemtagscombinationRes[i].itemdescription);

                    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');
                        } 
                   // tagiditem
                }
            }
        }


        if(isGo){
            console.log(itemtagscombinationRes[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');
            }

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

            updateDetailsByObj(itemtagscombinationRes[0]);
            //console.log(childIds);
            // 
          
        }
      
        //getAllCombination(valuesSelected)

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

        $('#spec-container-details').children().slice(1).find('.specsmallcard').removeClass('specsmallcard');

        addeventlisteners();
        loadingActions.removeLoader();
        return;
        // let resTwo = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`);
            
      
        //let html = '';
        let attributesObj = {};
        for(let i=0;i<res.length;i++){
            const {parentattribute,tagid,productid} = res[i];
            // let attributes = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/parenttagid/${tagid}`);
            // attributesObj[tagid] = JSON.parse(attributes.data.result);
            // console.log(attributes.data.result,tagid);
            html += getParentHTML(parentattribute,productid,tagid,i==0);
        }

        $('#spec-container-details').html(html);

       
        // let attributes = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/parenttagid/${tagid}`);
        return;
        for(let attr in attributesObj){
            const arr = attributesObj[attr];
           
            let html = '';
            for(let i=0;i<arr.length;i++){
                const {attribute,tagid} = arr[i];
                html += getChildHTML(tagid,attribute,i==0);
            }

            
            $(`[data-tagid="${attr}"]`).html(html);


        }

        let defaultValues = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/sellableitemlist/productid/${id}`);
        defaultValues = JSON.parse(defaultValues.data.result);
        let {itemname,price} = defaultValues[0];
        $('.productname').html(itemname);
        $('.price').html(price)

        $('#spec-container-details').children().slice(1).find('.specsmallcard').removeClass('specsmallcard');


        

       // getQuantityById(id)
       
    

    }

    
}



startDetails();