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.href.split('=')[1].split('&')[0].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 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) {
        
        let  item_color_1 = `#5e7975`;
        let item_color_2 = `#624839`;
        let item_color_3 = `#253746`;
        if(name == "Eucalyptus Green"){

            return `<p item_color=${item_color_1} data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="optiontaganwi_color specsmallcard optiontaganwi fs-7 cursor-pointer text-white rounded mb-0 me-1 py-2 px-3" ${item_color_1 ? `style="background-color:${item_color_1}"`:''}><span class="${isTrue ? 'border-bottom color' : 'color'}">${name}</span></p>`;

        }else if(name == "Desert Brown"){

            return `<p item_color=${item_color_2} data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="optiontaganwi_color specsmallcard optiontaganwi mb-0 fs-7 cursor-pointer me-1 rounded text-white py-2 px-3" ${item_color_2 ? `style="background-color:${item_color_2}"`:''}><span class="${isTrue ? 'border-bottom color' : 'color'}">${name}</span></p>`;

        }else if(name == "Deep Sea Blue"){

            return `<p item_color=${item_color_3} data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="optiontaganwi_color specsmallcard optiontaganwi mb-0 fs-7 text-white cursor-pointer rounded py-2 px-3 " ${item_color_3 ? `style="background-color:${item_color_3}"`:''}><span class="${isTrue ? 'border-bottom color' : 'color'}">${name}</span></p>`;
        }
        else{
            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);
                debugger;
                let ele_col = $(e.target).hasClass("color");
                let ele_col1 = $(e.target).hasClass("optiontaganwi_color");
                if(ele_col === true){
                    $(e.target).parent().find("span.color").removeClass('border-bottom');
                    $(e.target).parent().addClass("border_selector");
                    $(e.target).addClass("border-bottom");
                    $(e.target).parent().find("span.border-bottom").removeClass("border-bottom text-dark");
                    $(e.target).addClass("border_selector");
                    $(e.target).find("span.color").addClass("border-bottom text-dark");
                    $(e.target).parent().find('.borderselector').removeClass('borderselector');
                    // $(e.target).addClass('borderselector');
                    searchComb();
                    currentClick = e.target;
                }else if(ele_col1 === true){
                    $(e.target).parent().find("span.text-dark").removeClass("text-dark border-bottom");
                    $(e.target).addClass("border_selector");
                    $(e.target).find("span.color").addClass("text-dark");
                    $(e.target).parent().find('.borderselector').removeClass('borderselector');
                    $(e.target).addClass('borderselector');
                    searchComb();
                    currentClick = e.target;
                }else{
                    $(e.target).parent().find('.borderselector').removeClass('borderselector');
                    $(e.target).addClass('borderselector');
                    searchComb();
                    currentClick = e.target;
                 }
              
                searchComb();
                currentClick = e.target;
                // getAllCombination();
            })
        });
        // $('.optiontaganwi_color span.color').each(function (i, el) {
        //     $(el).click(function (e) {
        //         $('#quantity').val(1);
        //         $(e.target).parent().find("span.border-bottom").removeClass("border-bottom");
        //         $(e.target).addClass("border-bottom");
        //         searchComb();
        //         currentClick = e.target;
        //         // getAllCombination();
        //     })
        // });
    }

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

    function updateDetailsByObj(obj) {
        $('.productname').html(obj.itemname)
        $('.price').html(obj.pricelist?obj.pricelist:'coming soon');
        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);
        

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

    function searchComb() {
        let valuesSelected = [];


        $('#addtocart').removeClass('disabled');
        $('.msgErrorDetailsItem').addClass('d-none');
        $('.borderselector,border_selector').each(function (i, el) {
            console.log($(el).html())
            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, 'productattributelist');

        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/getitemwithoutbranch/productid/${id}`, true);
        itemtagscombinationRes = JSON.parse(itemtagscombinationRes.response.result);
        console.log(itemtagscombinationRes, "conductt");

        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 && itemtagscombinationRes.length != 0) {

            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');
                $(`[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]);
            //console.log(childIds);
            // 

        }

        //getAllCombination(valuesSelected)



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

        // }

        $('#spec-container-details').children().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();