<?php
if (get_theme_mod('counter_section_disable') != 'on') {
  ?> 
    <?php 
        if( get_theme_mod('counterTpadding',true) ) {
         $counterTpadding = 'padding-top:'.esc_attr(get_theme_mod('counterTpadding')).';';
       }
       if( get_theme_mod('counterBpadding',true) ) {
         $counterBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('counterBpadding')).';';
       }
    ?> 
  <section id="counter-section" class="ht-section" style="<?php echo esc_attr($counterTpadding); ?>" "<?php echo esc_attr($counterBpadding); ?>">  
      <div class="counterbox ">
            <div class="container">
                  <div class="counter-box">
                    <?php
                        $showStatic = true;
                        for( $i = 1; $i < 11; $i++ ){
                          $counter_page_id = get_theme_mod('counter_page_icon'.$i); 
                          if(!empty($counter_page_id)){
                            $showStatic = false;
                            break;
                          }
                        }
                      ?>
                    <div class="counter-post-wrap">
                    
                        <?php
                        $cols = get_theme_mod('counter_npp_count', 3);
                        $cols++;
                    // echo '$cold: '.$cols;
                        switch($cols){          
                          case 1:
                          $colCls = 'col-md-12 col-sm-12 col-xs-12';
                          break;
                          case 2: 
                          $colCls = 'col-md-6 col-sm-6 col-xs-6';
                          break;
                          case 3:
                          case 5:
                          case 6:
                          case 9:
                          case 11:
                          case 13:
                          case 15:
                          $colCls = 'col-md-4 col-sm-6 col-xs-6';
                          break;
                          default: 
                          $colCls = 'col-md-3 col-sm-6 col-xs-6';
                          break;
                        }
                        $icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
                        ?>
                        <div class="row counter-post-boxes">
                          <?php
                          for( $i = 1; $i <= $cols; $i++ ){
                            if($showStatic === false){
                              $counter_page_title = get_theme_mod('counter_page_title_'.$i, 'Years Of Experience ');
                              $counter_page_number = get_theme_mod('counter_page_number_'.$i, '999');
                              $counter_page_id = get_theme_mod('counter_page'.$i);
                              $counter_page_icon = get_theme_mod('counter_page_icon'.$i);
                              if($counter_page_icon){

                                ?>

                                <div class="<?php echo $colCls;?> facspace">
                                  <div class="counter-post">
                                      <div class="counter-icon col-md-3 col-sm-3 col-xs-3 pd-0">
                                        <span class="<?php echo $counter_page_icon; ?>"></span>
                                      </div>
                                      <div class="counter-num col-md-9 col-sm-9 col-xs-3">
                                        <h4 class="count"><?php echo $counter_page_number; ?></h4>
                                     
                                        <p><?php echo $counter_page_title; ?></p>
                                      </div>
                                    <div class="clearfix"></div>
                                    </div>
                                  </div>
                                
                                <?php
                              } 
                            }else{?>
                              <div class="<?php echo $colCls;?> facspace">
                                <div class="counter-post">
                                  <div class="counter-icon col-md-3 col-sm-3 col-xs-3 pd-0">
                                    <span class="fa fa-trophy"></span>
                                  </div>
                                  <div class="counter-num col-md-9 col-sm-9 col-xs-9">
                                    <h4 class="count">999</h4>
                                    <p>Years Of Experience</p>
                                  </div>
                                  <div class="clearfix"></div>
                                </div>
                              </div>
                            <?php }

                          }?>
                          <div class="clearfix"></div>
                        </div>
                      </div>
                  </div>
              <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
      </div>	
  </section>
  <script>
    
  $(document).ready(function() {

  var counters = $(".count");
  var countersQuantity = counters.length;
  var counter = [];

  for (i = 0; i < countersQuantity; i++) {
    counter[i] = parseInt(counters[i].innerHTML);
  }

  var count = function(start, value, id) {
    var localStart = start;
    setInterval(function() {
      if (localStart < value) {
        localStart++;
        counters[id].innerHTML = localStart;
      }
    }, 40);
  }

  for (j = 0; j < countersQuantity; j++) {
    count(0, counter[j], j);
  }
});

  </script>
<?php
}