<?php   
if(get_theme_mod('project_area_disable') != 'on' ){ ?>
<div class="project-area " id="project" data-wow-duration="1s">	
<?php
	// Heading width 
	$c_width = get_theme_mod('pj_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
		}
		
	//sub Heading Style
	$subheading_case = get_theme_mod('pj_subtitle_case', 'uppercase');

	if ($subheading_case === 'uppercase') {
			$text_case = 'uppercase';
		} elseif ($subheading_case === 'lowercase') {
		    $text_case = 'lowercase';
		} elseif ($subheading_case === 'capitalize') {
		    $text_case = 'capitalize';
		} else {
		    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
		}
		 

	//Main Heading Style
	$heading_case = get_theme_mod('pj_maintitle_case', 'capitalize');

	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('pj_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
		}
?>

<?php
	$pj_subtitle = get_theme_mod('pj_subtitle', 'case studies');							
	$pj_title = get_theme_mod('pj_title', 'Our Work in Action');
?>	
	<div class="<?php echo esc_attr($c_width); ?> cf-ps">
			<div class="section-title " style="text-align: <?php echo esc_attr($text_alignment); ?>;">        
	        <div class="titlebx ">
	          <h2 style="text-transform: <?php echo esc_attr($subheading_case); ?>;"><?php echo ($pj_subtitle); ?></h2>
	          <h3 style=" text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($pj_title); ?></h3>
	        </div>     
		  </div>
			<div class="pjbx">
					<div class=" row mr-0" >
							<?php 
								$showStatic = true;
								$cols = get_theme_mod('project_npp_count', 2);
								$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-12';
									break;
									case 3:
									case 5:
									case 6:
									case 9:
									case 11:
									case 13:
									case 15:
									$colCls = 'col-lg-4 col-md-6 col-sm-12';
									break;
									default: 
									$colCls = 'col-lg-4 col-md-6 col-sm-12';
									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="<?php echo $colCls;?>  single-project-bx"> 
									<div class="single-project ">
											<div class="project-icon">
												
													<div class="project-img">
															<a href="#">
																<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/project.jpg');?>" alt="projects" /> 
															<div class="overlay"></div>
															</a>
															<div class="pj_conbx">		
																	<a href="#">										
																		<h4 class="post-title">BoldBridge</h4>	
																	</a>							
																	<p class="section-area-text">
																		Discover how we collaborated with BoldBridge.
																	</p>	
																	<div class="bttn">
																		<a href="#">View Case Study </a>
																	</div>	
															</div>	
															<div class="bxreview">
																	<div class="row mr-0">
																			<div class="imabx">
										                      <div class="pjimg">
										                          <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" /> 
										                      </div>
										                  </div>
											                <div class="ratingbx">
															            <?php $rating = get_theme_mod('default_star_rating', '5'); ?>
															            <div class="rating-container">
															                <div class="rating-display">
															                    <!-- </?php for ($i = 1; $i <= 5; $i++) : ?>  -->
															                        <i class="fa fa-star<?php echo ($i <= $rating) ? '' : '-o'; ?>"></i>
															                    <!-- </?php endfor; ?>  -->
															                </div>
															                <div class="cltxt"> Game-changing collaboration—truly exceptional work. </div>
															            </div>
															            <div class="clearfix"></div>
															        </div>
															    </div>
										         </div>                
						            </div>
												

											</div>

									</div>
								<div class="clearfix"></div>	
							</div>
						<?php 
							}
						} ?>
					</div>
			</div>
		
		</div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Example rating value: change this to 3, 4, 4.5 etc.
    const customRating = 4;  // You can make this dynamic

    // Use `querySelector` to find input with matching value
    const starInput = document.querySelector(
      `input[name="rating"][value="${customRating}"]`
    );
    if (starInput) {
      starInput.checked = true;
    }
  });
</script>
<script>
  const customRating = <?php echo get_theme_mod('custom_rating', 3); ?>;
</script>
<script type="text/javascript">
$(document).ready(function(){
    var highestBox = 0;
        $('#project .single-project').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('#project .single-project').height(highestBox);
});
</script>

<?php }