<?php

if(get_theme_mod('counter_area_disable') != 'on' ){ ?>
	<div class="counter-area" id="counter" >
		<?php
				// width 
				$c_width = get_theme_mod('counter_c_width', 'container-fluid');

		    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
				} 

				// Heading Style
      	$heading_case = get_theme_mod('counter_maintitle_case', 'uppercase');

			  if ($heading_case === 'uppercase') {
					$text_case = 'uppercase';
				} elseif ($heading_case === 'lowercase') {
				    $text_case = 'lowercase';
				} elseif ($heading_case === 'capitalize') {
				    $text_case = 'capitalize';
				} else {
				    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
				}
					 
				// Alignment
      	$heading_alignment = get_theme_mod('counter_maintitle_align', 'left');

		    if ($heading_alignment === 'left') {
				  $text_alignment = 'left';
				} elseif ($heading_alignment === 'center') {
				    $text_alignment = 'center';
				} elseif ($heading_alignment === 'right') {
				    $text_alignment = 'right';
				} else {
				    $text_alignment = 'right'; // Default to 'left' 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="row"> 
						<?php							
							$counter_heading = get_theme_mod('counter_heading', 'Emergency');
							$counter_subheading = get_theme_mod('counter_subheading', 'Emergency');
							$counter_title = get_theme_mod('counter_title', 'Service No.');
							$ph_no = get_theme_mod('ph_no', '123-456-798');
						?>
							<div class="section-title">	
									<div class="titlebx">
											<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($counter_heading); ?></h3>
											<?php if( $counter_subheading ){ ?>
											<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($counter_subheading); ?></h5>
											<?php }?>
											<h4 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($counter_title); ?></h4>
											<?php if( $ph_no ){ ?>
										 <div class="phonebx" style="text-align: <?php echo esc_attr($text_alignment); ?>;">
												<a class="" href="tel:<?php echo $ph_no;?>">
													<div class="row mr-0">
														<div class="icnbx"><i class="fa fa-phone"></i></div>
														<div class="phtext"> <?php echo ($ph_no); ?> </div>
													</div>
												</a>
										 </div>
										 <?php if( get_theme_mod('counter_img_display','show' ) == 'show') :?>
										 <div class="counter-imgbx">
												<?php 
													$counter_head = get_theme_mod('counter_head');
													if(!empty($counter_head)){
														echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($counter_head).'" class="img-responsive secondry-bg-img" />';
													}else{
														echo '<img src="'.get_template_directory_uri().'/images/em_lamp.png" class="img-responsive" />';
													}
												?>	
											</div>
											<?php endif ?>
										 <?php }?>
											<div class="clearfix"></div>
									</div>	
							</div> 
							<div class="counter-single-area">  

							<?php
							$cols = get_theme_mod('counter_npp_count', 2);
							$cols++;
										// echo '$cold: '.$cols;
							switch($cols){
								case 1:
											$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12 col-12';
											break;
											case 2:	
											$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-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-xs-6 col-6';
											break;
											default: 
											$colCls = 'col-lg-4 col-md-6 col-sm-6 col-xs-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, 'New Building & User');
			                	$counter_page_num = get_theme_mod('counter_page_num'.$i, '199');
			                	//$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">199</div>
																		<div class="cd-title inner-area-title">New Building & User</div>
																</div>
														</div>
														<div class="clearfix"></div>
												</div>
			                <?php }
			              }?>
			              <div class="clearfix"></div>
			         			</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 (let i = 0; i < countersQuantity; i++) {
      counter[i] = parseInt(counters[i].innerHTML);
    }

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

    for (let j = 0; j < countersQuantity; j++) {
      count(0, counter[j], j);
    }
  });
</script>
	
<?php } 