{% require_js %}
<script>
  var isIntersected = false;

  function runCounter(){
    const counters = document.querySelectorAll(".counter-gp .countern");
    counters.forEach((counter) => {
      counter.innerText = "0";



      const updateCounter = () => {
        const target = +counter.getAttribute("data-count");
        const c = +counter.innerText;
        var counterSpeed = +counter.getAttribute("data-speed");
        const increment = target / counterSpeed;
        if (c < target) {
          counter.innerText = `${Math.ceil(c + increment)}`;
          setTimeout(updateCounter, 1);
        } else {
          counter.innerText = target;
        }
      };
      updateCounter();
    });
  }

  var counterWrap = document.querySelector(".counter-gp");
  if(counterWrap){
    function checkOnScroll(cb){
      var counterWrap = document.querySelector(".counter-gp");
      if(counterWrap){
        runCounter();
        cb();
      }
    }
    var checkCounterSection = document.querySelector('.counter-gp');
    window.addEventListener("scroll",function() {
      var checkCounterSectionOffset = checkCounterSection.getBoundingClientRect().top;
      var clientHeight = document.documentElement.clientHeight;
      if ((checkCounterSectionOffset - clientHeight) <= 160) {
        if (!isIntersected) {
          checkCounterSection.classList.add('visible');
          if(checkCounterSection.classList.contains('visible')){
            checkOnScroll(function(){
              isIntersected = true;  
              console.log(isIntersected);
            });
          }
          else{
            isIntersected = false;
            console.log(isIntersected);
          }
        }
      }
    }, {
      passive: true,
    });
  }


</script>
{% end_require_js %}