<?php   
if(get_theme_mod('project_area_disable') != 'on' ){ ?>
	<?php 
		if( get_theme_mod('project_areaTpadding',true) ) {
			$project_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('project_areaTpadding')).';';
		}
		if( get_theme_mod('project_areaBpadding',true) ) {
			$project_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('project_areaBpadding')).';';
		}
	?>	

	<div class="project-area" id="project" style="<?php echo esc_attr($project_areaTpadding); ?>" "<?php echo esc_attr($project_areaBpadding); ?>">
	   
		<div class="project-single-area col-md-12 pd-0"> 
			<?php
			$project_page_id = get_theme_mod('project_page');	
			$project_maintitle = get_theme_mod('project_maintitle', 'Our Project');
			$project_subtitle = get_theme_mod('project_subtitle', 'Projects We Have Done');
			?>
			<div class="container">
				<div class="col-md-8 col-sm-7 pd-0">
					<div class="row">
						<?php if($project_maintitle || $project_subtitle) { ?>
						<div class="Heading-conn">
							<div class="section-title4">
								<p><?php echo ($project_subtitle);  ?></p>
								<h2><?php echo ($project_maintitle);  ?></h2>
							</div>
						</div>
						<?php }?>
					</div>
				</div>
				<div class="col-md-4 col-sm-5">
						<?php
					$proj_link = get_theme_mod('proj_link', '');
					$proj_button = get_theme_mod('proj_button1', 'View All Projects');
					?>
					<?php if( get_theme_mod('proj_button_display','show' ) == 'show') :
						?>
						<div class="topbtn">
							<div class="topbtn-hv"></div>
							<a class="main-btn btn-3" href="<?php echo $proj_link ?>"> <?php echo $proj_button ?> <i class="fa fa-long-arrow-right"></i></a>
						</div>
					<?php endif ?>
				</div>
				
				<div class="clearfix"></div>
			</div> 
			<div class="clearfix"></div>
			<!-- <div class="container"> -->
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('project_npp_count', 3);
				$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-6';
						break;
						case 3:
						case 5:
						case 6:
						case 9:
						case 11:
						case 13:
						case 15:
						$colCls = 'col-md-4 col-sm-6 col-xs-6';
						break;
						default: 
						$colCls = 'col-md-3 col-sm-6 col-xs-6';
						break;
				}
				for( $i = 1; $i <= $cols; $i++ ){
					$project_page_id = get_theme_mod('project_page'.$i); 
					$project_page_icon = get_theme_mod('project_page_icon'.$i);
					$project_page_icon1 = get_theme_mod('project_page_icon1'.$i);
					if($project_page_id){
						$showStatic = false;
						echo projectshortCode($project_page_id, $isCustomizer=true, $i);
					}
				}
				if($showStatic === true){
					for( $i = 1; $i <= $cols; $i++ ){ ?>
						<div class="<?php echo $colCls;?> single-project-bx">
							<div  class="single-project">
								<div project-match-height="groupName" class="project-icon">
									<a href="<?php echo esc_url(get_permalink()); ?>">
									 <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/project1.jpg');?>" alt="project" />
										<div class="ovrly"></div>
										</a>
								</div>
								<div class="project-title-box">
									<a href="<?php echo esc_url(get_permalink()); ?>">
									  <h4>Archicture Project Title 01</h4>
									</a>
									<p class="pk-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has industrys standerd dummy text ever since the 1500s.</p> 

									<?php
										$projectbutton = get_theme_mod('project_txt', 'View Project'); 
									?>
									<?php if( get_theme_mod('project_button_display','show' ) == 'show') :
										?>	
										<div class="readmore">
											<div class="b-hv"></div>
										<a href="<?php echo esc_url(get_permalink()); ?>" class="more-button btn"><?php echo ($projectbutton );  ?><i class="fa fa-long-arrow-right"></i> </a>
									</div>
									<?php endif ?>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<?php 
					}
				} ?>
		<div class="clearfix"></div>
		</div>
	
</div>
<script>
	var matchHeight = function () {
	
	function init() {
		eventListeners();
		matchHeight();
	}
	
	function eventListeners(){
		$(window).on('resize', function() {
			matchHeight();
		});
	}
	
	function matchHeight(){
		var groupName = $('[project-match-height]');
		var groupHeights = [];
		
		groupName.css('min-height', 'auto');
		
		groupName.each(function() {
			groupHeights.push($(this).outerHeight());
		});
		
		var maxHeight = Math.max.apply(null, groupHeights);
		groupName.css('min-height', maxHeight);
	};
	
	return {
		init: init
	};
	
} ();

$(document).ready(function() {
	matchHeight.init();
});
</script>
<?php }
