function indexInit(){
    function init(){
        initData();
    }
    async function initData(){
        const ids = await getProductIdService();
        if(!ids) return;
        let dataAcc = [];
        for(let i=0;i<ids.length;i++){
            let currId = ids[i];
            let {productid} = currId;

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

            if(resData.isError){
                alert(resData.errorMsg.message);
                return;
            }
    
            let res = resData.response;
                
            res = JSON.parse(res.result);
    
            dataAcc = [...dataAcc,...res.slice(0, 4)];

        }

   

        shuffleArray(dataAcc);
        let html = '';
       for(let i=0;i<dataAcc.length;i++){
        html += getCardHTML({...dataAcc[i],img:dataAcc[i].itemimageurl})
       }

       $('.slider-hero').html(html);
        initSlider();

        $('.topproductbtn').click(function (e){
            let productid = $(e.target).data('productid');
            let itemid = $(e.target).data('itemid');
            let name =  $(e.target).data('name');
            debugger;
            window.location.href = `/productdetails.html?productId=${productid}#itemid=${itemid}`;
        });
    }

    function initSlider(){
        $('.slider-hero').slick({
            dots: false,
            lazyLoad: 'ondemand',
            // autoplay: true,
            // autoplaySpeed: 1000,
            slidesToShow: 4,
            slidesToScroll: 1,
            responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                },
                {
                    breakpoint: 1199,
                    settings: {
                        slidesToShow: 5,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 575,
                    settings: {
                        autoplay: true,
                        slidesToShow: 3,
                    }
                }
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        });

        $(".slick-prev").addClass("btn text-white");
        $(".slick-next").addClass("btn text-white");
        $(".slick-prev").html("←");
        $(".slick-next").html("→")
    }
    function getCardHTML({itemname,img,sku,itemid,productid}){
        let defaultImg = img ? imgServerNameBuild(img): `./dist/assets/imgs/nophoto.png`;
        return ` <div class="card h-100 mx-1 text-center bg-gray-4 border-0">
        <div class="card-body h-100 pt-5 px-5">
            <div class="d-flex flex-column h-100 justify-content-between">
                <img src="${defaultImg}" class="w-100"/>
                <p class="mb-0 fs-7 py-2">${itemname}</p>
                <p class="fw-600 text-primary mb-0 fs-9 topproductbtn" data-name="${itemname}" data-sku="${sku}" data-productid="${productid}" data-itemid="${itemid}">Buy Now</p>
            </div>
        </div>
    </div>`;
        return ` <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
        <div class="card-body">
            <img src="${defaultImg}" class="w-100"/>
            <p class="mb-0 fs-7 py-2">${itemname}</p>
             <p class="fw-600 text-primary mb-0" data-sku="${sku}" data-productid="${productid}" data-itemid="${itemid}">Buy Now</p>
             
        </div>
    </div>`;
    }

    function getProductIdService(){
        return new Promise(async (reslove,reject)=>{
            let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getallproducts`,true); 
           if(resData.isError){
                alert(resData.errorMsg.message);
                return;
            }

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

          
            let resultItem = [];

            for(let i=0;i<res.length;i++){
                if(resultItem.length == 2) break;
                if(res[i].productname.includes('RAM ORA')||res[i].productname.includes('SSD ORA')){
                    resultItem.push(res[i]);
                  
                }
            }
          
            return reslove(resultItem)

        });
    }

    

    init();

    
}

indexInit();