<?php   
if(get_theme_mod('project_area_disable') != 'on' ){ ?>

<div class="project-area " id="project" >
		<?php
			// width 
			$c_width = get_theme_mod('proj_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('proj_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('proj_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
			}
    ?>
    
		<div class="<?php echo esc_attr($c_width); ?> ">
				<div class="row">
		 				<div class="project-single-area " >
								<div class=" swiper" >
										<div class="swiper-wrapper"> 
								<!-- <div class="row mr-0">  -->
											<?php 
												$showStatic = true;
												$cols = get_theme_mod('project_npp_count', 5);
												$cols++;
												switch($cols){
													case 1:
													$colCls = 'col-lg-12 col-md-12 col-sm-12';
													break;
													case 2:	
													$colCls = 'col-lg-6 col-md-6 col-sm-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';
													break;
													default: 
													$colCls = 'col-lg-4 col-md-6 col-sm-6';
													break;
												}
													
											for( $i = 1; $i <= $cols; $i++ ){
												$projects_page_id = get_theme_mod('projects_page'.$i); 
												$projects_page_icon = get_theme_mod('projects_page_icon'.$i);
												$projects_page_icon1 = get_theme_mod('projects_page_icon1'.$i);
												if($projects_page_id){
													$showStatic = false;
													echo projectShortCode($projects_page_id, $isCustomizer=true, $i);
												}
											}
										if($showStatic === true){
											for( $i = 1; $i <= $cols; $i++ ){ ?>
											<div class=" swiper-slide">
													<div class="single-project-bx">
															<div class="single-project ">
																	<div class="project-icon">
																			<a href="#">
																				<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/project.jpg');?>"  /> 	
																				<div class="pj_conbx">
																						<div class="pj_con">
																								<h3 class="title">Landscape Lighting</h3>
																								<div class="txt">There are many variations </div>
																								<div class="bttn">
																									<div class="icn">
																											Installation <i class="fa fa-long-arrow-right"></i>
																									</div>
																							</div>
																						</div>
																								
																				</div>
																			</a>		
																	</div>
															</div>
													</div>
											</div>
											<?php 
											}
										} ?>
										</div> 
										<!-- <div class="swiper-button-next"></div>
  									<div class="swiper-button-prev"></div>	 -->						
								</div>	
						</div>	
					
						<?php							
							$proj_title = get_theme_mod('proj_title', 'Projects');
							$proj_subtitle = get_theme_mod('proj_subtitle', 'Projects');
							$proj_txt = get_theme_mod('proj_txt', 'There are many variations of passages of even slightly believable.');
							$proj_list = get_theme_mod('proj_list', '<li>Installed, maintained and repaired lighting for clients. </li>
										<li>Increasingly popular way to generate electricity. </li>
										<li>Protect electrical devices from damage. </li>');
						?>
						<div class="sec-title-bx">
				    		<div class="section-title">					
										<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($proj_title); ?></h3>
										<?php if( $proj_subtitle ){ ?>
										<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($proj_subtitle); ?></h5>
										<?php }?>						
								</div>
								<p style="text-align: <?php echo esc_attr($text_alignment); ?>;"> <?php echo ($proj_txt); ?> </p>
								<div class="list" style="text-align: <?php echo esc_attr($text_alignment); ?>;">
										<?php echo ($proj_list); ?>
								</div>
			 	 		</div>
				</div>			
		</div>
</div>
<script type="text/javascript">
	const swiper = new Swiper(".swiper", {
  direction: "horizontal",
  loop: true,
  speed: 1500,
  spaceBetween: 0,
  mousewheel: false,
  parallax: true,
  centeredSlides: true,
  autoplay: true,
  effect: "coverflow",
  coverflowEffect: {
    rotate: 0,
    slideShadows: true
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
      spaceBetween: 0
    },
    600: {
      slidesPerView: 2,
      spaceBetween: 0
    },
    991: {
      slidesPerView: 3,
      spaceBetween: 0
    },
    1400: {
      slidesPerView: 3,
      spaceBetween: 0
    },
    2300: {
      slidesPerView: 3,
      spaceBetween: 0
    },
    2900: {
      slidesPerView: 3,
      spaceBetween: 0
    }
  }
});

</script>
<?php }