<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/services-cart.css')?>">
<style type="text/css">
	.bookeventbtn:hover{
		box-shadow: 1px 1px 10px red;
		transition: .4s;
	}

	.viewmorebtn:hover{
		box-shadow: 1px 1px 10px green;
		transition: .4s;
	}
</style>
<main id="main">

	<section style="background-size: auto;">

		<center> <h2 class="bottomborder" style="font-weight:bold!important;font-size: 35px!important;">All Upcoming Events</h2> </center><br>
		<div class="pb-5 responsive-container">
			<div class="row m-0 p-0 pb-4" id="searchField">
				<div class="col-md-12 m-0 p-0">
					<div class="px-2">
						<!-- <span class="mb-4" style="font-weight:normal; font-size:15px!important; color:#B02135" class="mt-4"><strong>Note*:&nbsp;</strong>If you cannot find the puja you are looking for, then please fill up the <strong style="text-decoration:underline;">"Request for Puja Services"</strong> form in services or email at <a href="mailto:hsewpujaservices@gmail.com" target="_blank"><strong style="color:#B02135;text-decoration: underline;">hsewpujaservices@gmail.com</strong></a>.</span> -->


					</div>
					<div class="px-2 mt-3">
						<input type="search" name="q" id="search" class="search-text searchKey" placeholder="Search..." autocomplete="off" style="margin-left: -10px;     width: 100%;height: 70px;">
					</div>
				</div>
			</div> 

			<div id="serviceSearch">
				<?php 
				
			//Multidiamensional array sort by date key
				// usort($upcoming_events, function ($a, $b) {	
				// 	$dateA = DateTime::createFromFormat('m/d/Y', $a['startDate']);
				// 	$dateB = DateTime::createFromFormat('m/d/Y', $b['startDate']);
   				// 					 // ascending ordering, use `<=` for descending
				// 	return $dateA >= $dateB;
				// });
				usort($upcoming_events, function ($a, $b) {
                 $dateA = DateTime::createFromFormat('m/d/Y', $a['startDate']);
                 $dateB = DateTime::createFromFormat('m/d/Y', $b['startDate']);
             
                 // Return an integer:
                 if ($dateA < $dateB) {
                     return -1;
                 } elseif ($dateA > $dateB) {
                     return 1;
                 } else {
                     return 0;
                 }
             });

				foreach($upcoming_events as $item){ 


					$itemStartDate = DateTime::createFromFormat('m/d/Y', $item['startDate']);
					$itemEndDate = DateTime::createFromFormat('m/d/Y', $item['endDate']);
					$currentDate = new DateTime();

					if ($itemStartDate >= $currentDate || $itemEndDate >= $currentDate) {



						$ServicePrice = str_replace("$","",$item['serviceAmount']);?>



						<div class="row justify-content-center mb-3">
							<div class="col-md-12 col-xl-12">
								<div class="card shadow-0 border rounded-3">
									<div class="card-body">
										<div class="row" id="searchHere">
											<div class="col-md-12 col-lg-3 col-xl-2 mb-4 mb-lg-0">
												<div class="bg-image hover-zoom ripple rounded ripple-surface"style="text-align: center;">
													<?php if (!empty($item['Image'])) { ?>
														<img src="<?=ApiBaseUrl()['url'].$item['Image']?>"
														class="img-fluid" style="max-height: 150px; width:150px" />
													<?php }else{ ?>
														<img src="<?=base_url('assets/img/bskst-watermark.png')?>"
														class="img-fluid" style="max-height: 150px; width:150px" />
													<?php } ?>

													<a href="#!">
														<div class="hover-overlay">
															<div class="mask" style="background-color: rgba(253, 253, 253, 0.15);"></div>
														</div>
													</a>
												</div>
											</div>
											<div class="col-md-6 col-lg-6 col-xl-7">
												<h5 class="fw-bold"><?=$item['refDataName']?></h5>
												<div class="mt-1 mb-0 text-danger small" style="text-shadow: yellow!important;">

													<?php if (!empty($item['startDate'])) { ?>
														<div class="mt-2">
															<?= $item['endDate'] ? "<span><i class='fa fa-calendar'></i> ".$item['startDate']."</span><span class'text-primary'> - ".$item['endDate']."</span><br>" :  "<span><i class='fa fa-calendar'></i> ".$item['startDate']."</span><br>"?>
														</div>
													<?php } ?>
													<?php if (!empty($item['startTime'])) { ?>
														<div class="mt-2">
															<?= $item['endTime'] ? "<span><i class='fa fa-clock-o'></i> ".$item['startTime']."</span><span class'text-primary'> - ".$item['endTime']."</span><br>" :  "<span><i class='fa fa-clock-o'></i> ".$item['startTime']."</span><br>"?>
														</div>
													<?php } ?>
												</div>
												<!-- <p class="text-truncate mb-4 mb-md-0">
													<?=CheckEmptyNullVar(@$item['description']); ?>
												</p> -->
											</div>


											<?php   $ServicePrice = str_replace("$","",$item['serviceAmount']);?>
											<div class="col-md-6 col-lg-3 col-xl-3 border-sm-start-none border-start">

												<?php if($ServicePrice != 0.00 ){ ?> 
													<div class="d-flex flex-row align-items-center mb-1">
														<h4 class="mb-1 me-1"><?= $ServicePrice ?   '$'.sprintf("%.2f", $ServicePrice) : '$0.00';?></h4>
														<!-- <span class="text-danger"><s>$20.99</s></span> -->
													</div>
													<div class="d-flex flex-column mt-4">



														<!-- <a href="javaScript:void(0)" class="btn btn-primary bookeventbtn btn-sm" style="background: #910301;border: 1px solid white;" onclick="checkLoginStatus('<?= $ServicePrice ?>', '<?=str_replace("'", "`", $item['refDataName'])?>', '<?=$item['_id'] ?>', '<?=$item['serviceCategoryTypes']?>','<?=$item['serviceTypes']?>','<?=$item['dayTypes']?>', '<?=$item['startDate']?>','<?=$item['startTime']?>')" type="button">BOOK NOW</a> -->



														<a href="<?=base_url('event/'.urlencode($item['refDataName']).'/'.$item['_id'])?>" class="mt-3 btn btn-primary viewmorebtn btn-sm" style="background-color: var(--main-color-new-theme);padding: 5px 15px;border: 1px solid white;color: white!important;" type="button">EVENT DETAILS</a>

													</div>
												<?php }else{?>
													<div class="d-flex flex-column mt-4">
														<a href="<?=base_url('event/'.urlencode($item['refDataName']).'/'.$item['_id'])?>" class="mt-3 btn btn-primary viewmorebtn btn-sm" style="background-color: var(--main-color-new-theme);padding: 5px 15px;border: 1px solid white;color: white!important;" type="button">EVENT DETAILS</a>



													</div>
												<?php } ?>

											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="emptyServices" class="text-center" style="font-size: 21px; font-weight: 700;"></div>
					<?php 			} } ?>
				</div>

			</div>
		</section>


	</main><!-- End #main -->

	<script type="text/javascript">
		$(document).ready(function() {
			window.scrollTo({ top: 215, behavior: 'smooth'});
		});


		$(document).ready(function() {
			$("#search").on("keyup", function() {
				var value = $(this).val().toLowerCase();
				var $serviceDiv = $("#serviceSearch .row");
				var noResults = true;

				$serviceDiv.filter(function() {
					var rowText = $(this).text().toLowerCase();
					var isMatch = rowText.indexOf(value) > -1;
					$(this).toggle(isMatch);
					if (isMatch) {
						noResults = false;
					}
				});

				if (noResults && value !== "") {
					$("#emptyServices").text("No events found!").show();
				} else {
					$("#emptyServices").hide();
				}

			}).on("search", function() {
				if ($(this).val() === "") {
					$("#serviceSearch .row").show();
					$("#emptyServices").hide();
				}
			});
		});
	</script>
	<?php $this->load->view('includes/footer') ?>
	<?php $this->load->view('includes/script') ?>
