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

		    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-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-3 col-md-6 col-sm-6 col-xs-6 col-6';
									break;
									default: 
									$colCls = 'col-lg-3 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, 'Global Customers');
	                	$counter_page_num = get_theme_mod('counter_page_num'.$i, '2k+');
	                	//$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 ">
		                    <div class="cd-single">
		                      	<div class="count-box">
		                      			<div class="cd-num count"><?php echo $counter_page_num; ?></div>
		                      			<div class="cd-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 ">
												<div class="cd-single">
														<div class="count-box">
																<div class="cd-num count">15k+</div>
																<div class="cd-title ">Global Customers</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 counterValues = [];

    // Extract initial values and split numbers from text/symbols
    for (let i = 0; i < countersQuantity; i++) {
      let value = counters[i].innerHTML.trim();
      let numberMatch = value.match(/\d+/); // Extract the numeric part
      let prefix = value.replace(/\d+.*/, ""); // Extract prefix (non-numeric before number)
      let suffix = value.replace(/.*\d+/, ""); // Extract suffix (non-numeric after number)

      counterValues[i] = {
        original: value,
        number: numberMatch ? parseInt(numberMatch[0]) : null,
        prefix: prefix,
        suffix: suffix,
      };
    }

    // Function to animate numeric counter
    var count = function (start, end, prefix, suffix, id) {
      let current = start;
      let interval = setInterval(function () {
        if (current < end) {
          current++;
          counters[id].innerHTML = prefix + current + suffix;
        } else {
          clearInterval(interval);
        }
      }, 40);
    };

    // Start counting
    for (let j = 0; j < countersQuantity; j++) {
      let counter = counterValues[j];
      if (counter.number !== null) {
        // Animate numbers
        count(0, counter.number, counter.prefix, counter.suffix, j);
      } else {
        // Display non-numeric values directly
        counters[j].innerHTML = counter.original;
      }
    }
  });
</script>
<?php } 