(function ($) {
        "use strict";
            var WidgetScrollSequenceHandler = function($scope, $) { 
                let is_editable = elementorFrontend?.isEditMode();
                function loadandclick(el){
    let datatitle = el.getAttribute('data-title'),
        videoLink = el.getAttribute('data-videol'),
        patient_loc=el.getAttribute('data-location'),
        patient_cond=el.getAttribute('data-condition'),
        condTitle=el.getAttribute('data-tcondition'),
        symp=el.getAttribute('data-symptoms'),
        sympTitle=el.getAttribute('data-tsymptoms'),
        patient_review=el.getAttribute('data-what-patisn'),
        reviewTitle=el.getAttribute('data-twpatient'),
        rating=el.getAttribute('data-rating'),
        closeMain = el.closest('.wkit-test-review'),
        rowClss = closeMain.querySelector('.patient-row'),
        geticon="",
        locicon=el.querySelector('.wkit-video-icon'),
        getcicon="",
        conicon=el.querySelector('.condition-icon'),
        getsicon="",
        synicon=el.querySelector('.symptoms-icon'),
        getricon="",
        revicon=el.querySelector('.review-icon');
        
        if(locicon){
             geticon=locicon.innerHTML;
        }
        if(conicon){
            getcicon=conicon.innerHTML;
        }
        if(synicon){
             getsicon=synicon.innerHTML;
        }
        if(revicon){
             getricon=revicon.innerHTML;
        }
    if(rowClss){
        rowClss.innerHTML = topReviewCnt(geticon,getsicon,getricon, getcicon,videoLink,patient_loc,datatitle,patient_cond,symp,patient_review, condTitle, sympTitle, reviewTitle);
        setTimeout(()=>{
            let rating_get = rowClss.querySelectorAll(".wkit-star-rating")
            if(rating_get){
               rating_get.forEach((val,index)=>{
                 
                   if(index<rating){
                      val.classList.add('active');
                   }
               })
            }
            
        },200)
    }
}
function topReviewCnt(geticon,cicon,ricon, getcicon,vdo,loc,title,abc,symptom,rev, cTitle, sTitle, rTitle){
    let cntData = `<div class="patients-column-left">
        <iframe width="auto" height="345" class="wkit-video-source" src="${vdo}">
        </iframe>
    </div>  
    <div class="patients-column-right">
            <div class="author-location-main">
                <div class="author-left">
                      <div class="author-icon-wrapper">
                        ${geticon}
                        </div>
                        <div class="author-location-title"> ${loc}</div>
                    </div>
                    <div class="rating-right-column">
                        <div class="wkit-video-rate">
                            <span class="wkit-star-rating fa fa-star"></span>
                            <span class="wkit-star-rating fa fa-star"></span>
                            <span class="wkit-star-rating fa fa-star"></span>
                            <span class="wkit-star-rating fa fa-star"></span>
                            <span class="wkit-star-rating fa fa-star"></span>
                        </div>
                    </div>
                </div>


            <div class="author-wrap">
                <div class="author-name">
                    ${title}
                </div>
            </div>
       
            <div class="detail-info-main">
                <div class="details-info-box">
                        <div class="details-inner-top-part">
                            <div class="details-icon">${cicon}</div>
                            <div class="details-top-heading">${sTitle}</div>
                        </div>
                        <div class="desc">${symptom}</div>
                </div>
                <div class="details-info-box">
                        <div class="details-inner-top-part">
                            <div class="details-icon">${getcicon}</div>
                            <div class="details-top-heading">${cTitle}</div>
                        </div>
                        <div class="desc">${abc}</div>
                </div>
                </div>
                <div class="details-info-box-hr"></div>
            <div class="details-info-box">
                        <div class="details-inner-top-part">
                            <div class="details-icon">${ricon}</div>
                            <div class="details-top-heading">${rTitle}</div>
                        </div>
                        <div class="desc">${rev}</div>
                </div>
       
        </div>
 
    </div> `;
    return cntData;
}


let gtAllRev = $scope.find('.wkit-test-review');
if(gtAllRev){
    let allSlide = gtAllRev[0].querySelectorAll('.video-info-slide');
    let sliderClass = gtAllRev[0].querySelector('.slick-slider');
    let deskC = (sliderClass.getAttribute('data-desk')) ? Number(sliderClass.getAttribute('data-desk')) : 3,
        tabC = (sliderClass.getAttribute('data-tab')) ? Number(sliderClass.getAttribute('data-tab')) : 2,
        mobC = (sliderClass.getAttribute('data-mob')) ? Number(sliderClass.getAttribute('data-mob')) : 1;
        
    loadandclick(allSlide[0]); 
    allSlide[0].classList.add('box-active');
    
    jQuery(sliderClass).slick({
      infinite: true,
      slidesToShow: deskC,
      slidesToScroll: 1,
      responsive: [
       {
          breakpoint: 1024, // Change options when screen width is 768px or smaller
          settings: {
            slidesToShow: tabC,
            slidesToScroll: 1
          }
       },
        {
          breakpoint: 768, // Change options when screen width is 768px or smaller
          settings: {
            slidesToShow: mobC,
            slidesToScroll: 1
          }
       }
          ]
    });
    
    allSlide = gtAllRev[0].querySelectorAll('.video-info-slide');
    sliderClass = gtAllRev[0].querySelector('.slick-slider');
    deskC = (sliderClass.getAttribute('data-desk')) ? Number(sliderClass.getAttribute('data-desk')) : 3;
    tabC = (sliderClass.getAttribute('data-tab')) ? Number(sliderClass.getAttribute('data-tab')) : 2;
    mobC = (sliderClass.getAttribute('data-mob')) ? Number(sliderClass.getAttribute('data-mob')) : 1;
    
    if(allSlide){
        allSlide.forEach((as,index)=>{
            as.addEventListener('click', (e)=>{
                let crt = e.currentTarget;
                let actBox = gtAllRev[0].querySelectorAll('.box-active');
                if(actBox){
                    actBox.forEach((ab)=>{
                        ab.classList.remove('box-active');
                    })
                    crt.classList.add('box-active');
                }
                loadandclick(crt) 
                
            })
        })   
    }
}  
            };	
        $(window).on('elementor/frontend/init', function () {
          elementorFrontend.hooks.addAction('frontend/element_ready/wb-vogv8v23.default', WidgetScrollSequenceHandler);
        });
    })(jQuery);