<?php

if(get_theme_mod('counter_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('counter_areaTpadding',true) ) {
			$counter_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('counter_areaTpadding')).';';
		}
		if( get_theme_mod('counter_areaBpadding',true) ) {
			$counter_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('counter_areaBpadding')).';';
		}
			if( get_theme_mod('counter_areaOpacity',true) ) {
			$counter_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('counter_areaOpacity')).';';
		}
	?>
	<div class="counter-area" id="counter" style="<?php echo esc_attr($counter_areaTpadding); ?>" "<?php echo esc_attr($counter_areaBpadding); ?>">
	<div class="counter-are-overly-colour">	
	</div>	
		<!-- <div class="counter_gradiant"></div> -->
		 <?php
	          $showStatic = true;
	          for( $i = 1; $i < 9; $i++ ){
	            $counter_page_id = get_theme_mod('counter_page_num'.$i); 
	            if(!empty($counter_page_id)){
	              $showStatic = false;
	              break;
	            }
	          }
			  $counter_page_id = get_theme_mod('counter_page');	
			  $counter_maintitle = get_theme_mod('counter_maintitle', '25 Years Of Experience In Automobile Field.');
			  $counter_subheading = get_theme_mod('counter_subheading', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.');

			  ?>
		<div class="container">
			<?php if($counter_maintitle || $counter_subheading){ ?>
				<div class="row justify-content-center">
					<div class="counter-section-title-area">
							<div class="counter-section-title">
							<h2><?php echo ($counter_maintitle);  ?></h2>
							</div>
						<?php if($counter_subheading){ ?> 
							<div class="counter-section-subheding">
							<p><?php echo ($counter_subheading);  ?></p>
							</div>
						<?php }?>
					</div>
				</div>
			<?php }?>
	    </div>

		<div class="container">  
			<div class="counter-single-area">  
				<?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-12 col-xs-12';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					case 13:
					case 15:
					$colCls = 'col-md-4 col-sm-12 col-xs-12';
					break;
					default: 
					$colCls = 'col-md-3 col-sm-12 col-xs-12';
					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_id = get_theme_mod('counter_page'.$i);
                          	$counter_page_title = get_theme_mod('counter_page_title'.$i, 'Years Of Experience');
                          	$counter_page_num = get_theme_mod('counter_page_num'.$i, '10');
                      		// $counter_page_icon = get_theme_mod('counter_page_icon'.$i);
                      if($counter_page_num){
                          ?>

                            <div class="<?php echo $colCls;?> single-top wow zoomIn bordercounter">
                              <div class="cd-single">
                              	<div class="new-hover-effect-9-content"></div>
                              	<div class="count-box">
								<div class="col-md-12 col-sm-12 col-xs-12">
                              		<div class="cd-num count"><?php echo $counter_page_num; ?> </div>
                              		<div class="cd-title inner-area-title"><?php echo $counter_page_title; ?></div>
								</div>
                              	</div>
                              <div class="clearfix"></div>
                            </div>
                              <div class="clearfix"></div>
                          </div>
                            <?php
                      }
                          
                      }else{?>
                        <div class="<?php echo $colCls;?> single-top wow zoomIn bordercounter">
                              <div class="cd-single">
                              	<div class="new-hover-effect-9-content"></div>
                              	<div class="count-box">
									<div class="col-md-12 col-sm-12 col-xs-12">
                              			<div class="cd-num count">10</div>
                              			<div class="cd-title inner-area-title">Years Of Experience</div>
									</div>
                              		<!-- <div class="cd-text">Professional Service</div> -->
                              	</div>
                              	<div class="clearfix"></div>
                            </div>
                              <div class="clearfix"></div>
                        </div>
                      <?php }
                    }?>
                    <div class="clearfix"></div>
                  </div>



			</div>
		</div>
	</div>
	<!-- counter Area Start -->
	<script>
		jQuery.noConflict();
		$(function(){
			function cdsingleHeight(){
				var ht = 0;
				$('#counter .cd-single').each(function(i){
					var tHt = $(this).height();
					if(ht<tHt){
						ht=tHt;
					}
				});
				$('#counter .cd-single').height(ht+'px');
			}
			cdsingleHeight();
		});
		$( window ).resize(function(){
			cdsingleHeight();
		});
	</script>
<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 } 