<?php

if(get_theme_mod('support_area_disable') != 'on' ){
	?>
	<!-- support Area Start -->
	<?php 
	if( get_theme_mod('support_areaTpadding',true) ) {
		$support_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('support_areaTpadding')).';';
	}
	if( get_theme_mod('support_areaBpadding',true) ) {
		$support_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('support_areaBpadding')).';';
	}

	?>		
	<div class="support wow zoomIn" id="support" style="<?php echo esc_attr($support_areaTpadding); ?>" "<?php echo esc_attr($support_areaBpadding); ?>">

		<?php
			$support_title = get_theme_mod('support_title', 'We are an Exceptional Movie Studio in Miami, NY!');
			$support_subtitle = get_theme_mod('support_subtitle', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has industrys. Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
			?>
			 <div class="container"> 
				<div class="row justify-content-center">
					<?php if($support_title || $support_subtitle) { ?>
					<div class="col-md-8 col-md-offset4">
						<div class="section-title">
							<h2><?php echo ($support_title);  ?></h2>
							<p><?php echo ($support_subtitle);  ?></p>
						</div>
					</div>
					<?php }?>
				</div>
			 </div> 

	<div class="container">
		<?php
			$showStatic = true;
			for( $i = 1; $i < 11; $i++ ){
				$url = get_theme_mod('supp_page_url_'.$i, '#');
				$supp_b_page_id = get_theme_mod('supp_b_page_icon'.$i); 
				if(!empty($supp_b_page_id)){
					$showStatic = false;
					break;
				}
			}
			?>
				<?php
				$cols = get_theme_mod('support_npp_count', 3);
				$cols++;
				// echo '$cold: '.$cols;
				switch($cols){
					case 1:
					$colCls = 'col-md-12 col-sm-12';
					break;
					case 2:	
					$colCls = 'col-md-6 col-sm-6';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					$colCls = 'col-md-4 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-3 col-sm-6';
					break;
				}
				$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
				?>
				<div class="row">
					<?php
					for( $i = 1; $i <= $cols; $i++ ){
					if($showStatic === false){
						$url = get_theme_mod('supp_page_url_'.$i, '#');
						$supp_b_page_title = get_theme_mod('supp_b_page_title'.$i, 'Video <br>Making');
						$supp_b_page_description = get_theme_mod('supp_b_page_description'.$i,'Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
						$supp_b_page_id = get_theme_mod('supp_b_page'.$i); 
						$supp_b_page_icon = get_theme_mod('supp_b_page_icon'.$i);
						if($supp_b_page_icon){
							
						?>
						<div class="<?php echo $colCls;?> support-area">
							<div class="support-single">
								<div class="supp-circle one"></div>
								<div class="supp-inn">
									<div class="hi-icon">
										<span class="<?php echo $supp_b_page_icon; ?>"></span>	
									</div>
									<div class="supp_b-area-data">
										<h4 class="inner-area-title"><?php echo $supp_b_page_title; ?></h4>
										<div class="section-area-text">
											<?php echo $supp_b_page_description; ?>
										</div>	
									</div>
									<div class="readmore">
										<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
											<i class="fa fa-long-arrow-right"></i>
										</a>
										<div class="clearfix"></div>
									</div>
									<div class="clearfix"></div>
								</div>	
								<div class="supp-circle two"></div>					
							</div>
							<div class="clearfix"></div>
						</div>
						<?php
								
						}
					}else{?>
						<div class="<?php echo $colCls;?> support-area">
							<div class="support-single">
								<div class="supp-circle one"></div>
								<div class="supp-inn">
									<div class="hi-icon">
										<span class="fa fa-cube"></span>	
									</div>	
									<div class="supp_b-area-data">
										<h4 class="inner-area-title">Video <br>Making</h4>
										<div class="section-area-text">
											Lorem Ipsum is simply dummy text of the printing and typesetting industry.
										</div>	
										<div class="readmore">
											<a href="#"><i class="fa fa-long-arrow-right"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div class="clearfix"></div>
								</div>	
								<div class="supp-circle two"></div>				
							</div>
						</div>
					<?php }

					}?>
					<div class="clearfix"></div>
				</div>

				<div class="squote">
						<?php
					$squote_link = get_theme_mod('squote_link', '');
					$squote_button = get_theme_mod('squote_button1', 'Get a Quote');
					?>
					<?php if( get_theme_mod('squote_button_display','show' ) == 'show') :
						?>
						<div class="squotebtn">
							<a class="main-btn btn-3" href="<?php echo $squote_link ?>"> <?php echo $squote_button ?> <i class="fa fa-pencil-square-o"></i></a>
						</div>
					<?php endif ?>
				</div>
		<div class="clearfix"></div>
	</div>
	</div> 
	<!-- support Area Start -->
		<script>
		jQuery.noConflict();
		$(function(){
			function suppbareadataHeight(){
				var ht = 0;
				$('#support .supp_b-area-data').each(function(i){
					var tHt = $(this).height();
					if(ht<tHt){
						ht=tHt;
					}
				});
				$('#support .supp_b-area-data').height(ht+'px');
			}
			suppbareadataHeight();
		});
		$( window ).resize(function(){
			suppbareadataHeight();
		});
	</script>
	
<?php } 