<?php   
if(get_theme_mod('event_area_disable') != 'on' ){ ?>
	<?php 
	if( get_theme_mod('event_areaTpadding',true) ) {
		$event_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('event_areaTpadding')).';';
	}
	if( get_theme_mod('event_areaBpadding',true) ) {
		$event_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('event_areaBpadding')).';';
	}
	if( get_theme_mod('event_areaOpacity',true) ) {
		$event_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('event_areaOpacity')).';';
	}
	?>	

	<div class="event-area wow zoomIn" id="event" style="<?php echo esc_attr($event_areaTpadding); ?>" "<?php echo esc_attr($event_areaBpadding); ?>">
		<div class="event-single-area" > 
			<?php
				$events_page_id = get_theme_mod('events_page');	
				//$events_subtitle = get_theme_mod('events_subtitle', 'Events');
				$events_maintitle = get_theme_mod('events_maintitle', 'Latest Event');
				//$events_title2 = get_theme_mod('events_title2', 'R EVENTS');
			?>		
			
	      	<div class="container">
				<div class="justify-content-center">
				<?php if($events_maintitle ){ ?>
				  	<div class="section-title">
				   		<h2><?php echo ($events_maintitle);  ?></h2> 
			        
			      	</div>
			    <?php }?>
				</div>
			</div>
			<div class="container">
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('event_npp_count', 5);
				$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:
					case 13:
					case 15:
					$colCls = 'col-md-4 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-3 col-sm-6';
					break;
				}
				for( $i = 1; $i <= $cols; $i++ ){
					$events_page_id = get_theme_mod('events_page'.$i); 
					$events_page_icon = get_theme_mod('events_page_icon'.$i);
					$events_page_icon1 = get_theme_mod('events_page_icon1'.$i);
					if($events_page_id){
						$showStatic = false;
						echo eventShortCode($events_page_id, $isCustomizer=true, $i);
					}
				}
				if($showStatic === true){
					for( $i = 1; $i <= $cols; $i++ ){ ?>
				<div class="<?php echo $colCls;?> ">
					<div class="single-event-bx">
						<div class="single-event ">
							<div class="event-img">
								<a href="#">
									<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/event1.jpg');?>" alt="events" />

									<div class="eve-wave">
										<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 500" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
											<path d="M 0,500 C 0,500 0,250 0,250 C 96.66410256410259,285.0769230769231 193.32820512820518,320.15384615384613 274,309 C 354.6717948717948,297.84615384615387 419.35128205128194,240.46153846153848 493,234 C 566.6487179487181,227.53846153846152 649.2666666666669,271.99999999999994 733,285 C 816.7333333333331,298.00000000000006 901.5820512820512,279.53846153846155 985,252 C 1068.4179487179488,224.46153846153842 1150.4051282051282,187.84615384615387 1226,186 C 1301.5948717948718,184.15384615384613 1370.797435897436,217.07692307692307 1440,250 C 1440,250 1440,500 1440,500 Z" stroke="none" stroke-width="0" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
										</svg>
									</div>
								</a>
							</div>
							<div class="event-title-box">
								<div class="boxinn">
									<div class="datepalce">Event Date : <span>25 Jan 2022</span> </div>
									<a href="#"><h4 class="inner-area-title">Wedding Event</h4></a>
									<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.</p>

						<?php if( get_theme_mod('event_button_display','show' ) == 'show') : ?>

                    	<?php
                       		 $event_button = get_theme_mod('event_button', 'Read Full ');
                    	?>
                    
		                            <div class="btn5">  
		                                <a href="<?php echo esc_url(get_permalink()); ?>">
		                                    <?php echo $event_button ?>
		                                </a>
		                            </div>
                		<?php endif ?>
							
								</div>
							</div>
						</div>
					<div class="clearfix"></div>
					</div>
				</div>

						<?php 
					}
				} ?>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<script>
		jQuery.noConflict();
		$(function(){
			function singleeventbxHeight(){
				var ht = 0;
				$('#event .single-event-bx').each(function(i){
					var tHt = $(this).height();
					if(ht<tHt){
						ht=tHt;
					}
				});
				$('#event .single-event-bx').height(ht+'px');
			}
			singleeventbxHeight();
		});
		$( window ).resize(function(){
			singleeventbxHeight();
		});
	</script>

<?php }