<?php
if(get_theme_mod('steps_area_disable') != 'on' ){
	?>
	<?php 
	if( get_theme_mod('steps_areaTpadding',true) ) {
		$steps_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('steps_areaTpadding')).';';
	}
	if( get_theme_mod('steps_areaBpadding',true) ) {
		$steps_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('steps_areaBpadding')).';';
	}
	if( get_theme_mod('steps_OverlayOpacity',true) ) {
		$steps_OverlayOpacity = 'opacity:'.esc_attr(get_theme_mod('steps_OverlayOpacity')).';';
	}
	?>		
	<div class="steps-area text-center" id="steps-area" style="<?php echo esc_attr($steps_areaTpadding); ?>" "<?php echo esc_attr($steps_areaBpadding); ?>">

		<?php
		$steps_area_subtitle = get_theme_mod('steps_area_subtitle', 'HEADING HERE');
		$steps_area_title = get_theme_mod('steps_area_title', 'Our <span>Steps</span>');
		$steps_area_content = get_theme_mod('steps_area_content', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu pharetra ex. Etiam eget diam ligula..');
		?>
		<?php if($steps_area_subtitle || $steps_area_title){ ?>
			<div class="col-md-6 col-md-offset-3 col-sm-12 section-title-subtitle">
				<div class="section-subheading text-center"> 
					<?php
					if(!empty($steps_area_subtitle))  {
						echo ($steps_area_subtitle);
					} ?>										
				</div>
				<h2 class="section-heading text-center">
					<?php
					if(!empty($steps_area_title))  {
						echo ($steps_area_title);
					} ?>
				</h2>
			</div>
		<?php }?>
		<div class="col-md-6 col-md-offset-3 col-sm-12 section-text">
			<?php
			if(!empty($steps_area_content))  {
				echo ($steps_area_content);
			} ?>
		</div>
		<?php
		$showStatic = true;
		for( $i = 1; $i < 9; $i++ ){
			$steps_page_id = get_theme_mod('steps_page_icon'.$i); 
			if(!empty($steps_page_id)){
				$showStatic = false;
				break;
			}
		}
		?>

		<div class="container">  
			<div class="steps-single-area wow bounceIn">  
				<?php
				$cols = get_theme_mod('steps_npp_count', 4);
				$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-12';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					case 13:
					case 15:
					$colCls = 'col-md-4 col-sm-6 col-xs-12';
					break;
					default: 
					$colCls = 'col-md-3 col-sm-6 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 steps-post-boxes">
					<?php
					for( $i = 1; $i <= $cols; $i++ ){
						if($showStatic === false){

							if( get_theme_mod('Steps_IconColor'.$i,true) ) {
								$Steps_IconColor = 'color:'.esc_attr(get_theme_mod('Steps_IconColor'.$i)).';';
							}

							if( get_theme_mod('Steps_pageTitleColor'.$i,true) ) {
								$Steps_pageTitleColor = 'color:'.esc_attr(get_theme_mod('Steps_pageTitleColor'.$i)).';';
							}

							if( get_theme_mod('Steps_NumberColor'.$i,true) ) {
								$Steps_NumberColor = 'color:'.esc_attr(get_theme_mod('Steps_NumberColor'.$i)).';';
							}

							if( get_theme_mod('Steps_NumberBackColor'.$i,true) ) {
								$Steps_NumberBackColor = 'background-color:'.esc_attr(get_theme_mod('Steps_NumberBackColor'.$i)).';';
							}

							if( get_theme_mod('Steps_BoxBorderColor'.$i,true) ) {
								$Steps_BoxBorderColor = 'border-color:'.esc_attr(get_theme_mod('Steps_BoxBorderColor'.$i)).';';
							}

							if( get_theme_mod('Steps_BoxBackgroundColor'.$i,true) ) {
								$Steps_BoxBackgroundColor = 'background-color:'.esc_attr(get_theme_mod('Steps_BoxBackgroundColor'.$i)).';';
							}


							$steps_page_id = get_theme_mod('steps_page'.$i);
							$steps_page_title = get_theme_mod('steps_page_title'.$i, 'Pick Up Clothes');
							$steps_page_num = get_theme_mod('steps_page_num'.$i, '01');


							$steps_page_icon = get_theme_mod('steps_page_icon'.$i);
							if($steps_page_icon){
								?>

								<div class="<?php echo $colCls;?> single-steps">
									<div class="box-icon-2">
										<div class="steps-icon-outer" style="<?php echo esc_attr($Steps_BoxBorderColor); ?>">

											
											<div class="icon" style="<?php echo esc_attr($Steps_IconColor); ?> <?php echo esc_attr($Steps_BoxBackgroundColor); ?> ">

												<i class="<?php echo $steps_page_icon; ?>"></i>

												<?php if($steps_page_num || $steps_page_num){ ?>
													<div class="number" style="<?php echo esc_attr($Steps_NumberColor); ?> <?php echo esc_attr($Steps_NumberBackColor); ?>">
														<?php echo $steps_page_num; ?>
														
													</div>
												<?php }?>

												<h4 class="heading" style="<?php echo esc_attr($Steps_pageTitleColor); ?>">

													<?php echo $steps_page_title; ?>
												</h4>
											</div>
										</div>
									</div>
								</div>
								<?php
							}
						}else{?>
							<div class="<?php echo $colCls;?> single-steps">
								<div class="box-icon-2">
									<div class="steps-icon-outer">
										<div class="icon">
											<i class="fa fa-truck"></i>
											<div class="number">01</div>
											<h4 class="heading">
												Pick Up Clothes
											</h4>
										</div>
									</div>
								</div>
							</div>
						<?php }
					}?>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div> 
<?php } 