<?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')).';';
		}

	?>		

	<div class="counter-area" id="counter" style="<?php echo esc_attr($counter_areaTpadding); ?>" "<?php echo esc_attr($counter_areaBpadding); ?>">
		<!-- <div class="counter_gradiant"></div> -->
		<?php
				// width 
				$c_width = get_theme_mod('counter_c_width', 'container');

			    if ($c_width === 'container') {
					    $c_alignment = 'container';
					} elseif ($c_width === 'container-fluid') {
					    $c_alignment = 'container-fluid';
					} else {
					    $text_alignment = 'container'; // Default to 'container' if the setting is invalid
					}
					 
	    ?>
		 <?php
	          $showStatic = true;
	          for( $i = 1; $i < 9; $i++ ){
	            $counter_page_id = get_theme_mod('counter_page_title'.$i); 
	            if(!empty($counter_page_id)){
	              $showStatic = false;
	              break;
	            }
	          }
         ?>

			<div class="<?php echo esc_attr($c_width); ?>"> 
					<div class="counter-single-area">  

						<?php
						$cols = get_theme_mod('counter_npp_count', 3);
						$cols++;
									// echo '$cold: '.$cols;
						switch($cols){
							case 1:
										$colCls = 'col-lg-12 col-md-12 col-sm-12 col-12';
										break;
										case 2:	
										$colCls = 'col-lg-6 col-md-6 col-sm-6 col-6';
										break;
										case 3:
										case 5:
										case 6:
										case 9:
										case 11:
										case 13:
										case 15:
										$colCls = 'col-lg-4 col-md-6 col-sm-6 col-6';
										break;
										default: 
										$colCls = 'col-lg-3 col-md-6 col-sm-6 col-6';
										break;
						}
						$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
						?>
		 						<div class=" counter-post-boxes">
		 								<div class="row mr-0">
		            <?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, 'Successful Services');
		                	$counter_page_num = get_theme_mod('counter_page_num'.$i, '220+');
		                	//$counter_page_text = get_theme_mod('counter_page_text'.$i, 'Professional Service');
		            		$counter_page_title = get_theme_mod('counter_page_title'.$i);
		            if($counter_page_title){
		                ?>

			                <div class="<?php echo $colCls;?> single-top pl-0">
			                    <div class="cd-single">
			                      	<div class="count-box">
			                      			<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 class="clearfix"></div>
			                  	</div>
			                  	<div class="clearfix"></div>
			              	</div>
		                <?php
		                      }
		                          
		                }else{?>
											<div class="<?php echo $colCls;?> single-top pl-0">
													<div class="cd-single">
															<div class="count-box">
																	<div class="cd-num count">220+</div>
																	<div class="cd-title inner-area-title">Successful Services</div>
															</div>
													</div>
													<div class="clearfix"></div>
											</div>
		                <?php }
		              }?>
		              <div class="clearfix"></div>
		         			</div>
							</div>
					</div>
			</div>
	</div> 

	<script type="text/javascript">
		var title = 0;
		jQuery("#counter .single-top").each(function(){
		  if ($(this).height() > title) { title = $(this).height(); }
		});
		jQuery("#counter .single-top").height(title);

		// on Resize change height

		jQuery(window).resize(function(){
		  jQuery("#counter .single-top").height("");
		  var title = 0;
		  jQuery("#counter .single-top").each(function(){
		    if ($(this).height() > title) { title = $(this).height(); }
		  });
		  jQuery("#counter .single-top").height(title);
		});
	</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 } 