<?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/gallery.css');?>">

<main id="main"  style="background-image: url(<?=base_url('assets/img/elegant-background-with-mandala.png');?>);background-size: auto;">


	<?php if ($gallery_data != array()) {  ?>
		<div style="padding:0px 50px">
			<div class="row">
				<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12  my-3">
					<center><h2 class="bottomborder"  style="font-weight:bold!important;font-size: 35px!important;">Gallery of <?= PROJECT_NAME != '' ?  camelCase(PROJECT_NAME) : ''; ?></h2></center>
				</div>

				<div align="center">
					<button class="btn btn-default filter-button active my-2" data-filter="all">All</button>
					<button class="btn btn-default filter-button my-2" data-filter="<?=date('Y')?>"><?=date('Y')?></button>
					<?php for ($i=1; $i <= 2 ; $i++) { ?>

						<button class="btn btn-default filter-button my-2" data-filter="<?=date('Y', strtotime('-'.$i.' years'))?>"><?=date('Y', strtotime('-'.$i.' years'))?></button>

					<?php } ?>
				</div>
			</div>
			<br/>
			<div class="row mt-2">
				<?php foreach($gallery_data as $item){ ?>
					<?php $i=0; foreach($item['Child Grid'] as $val){ if ($i < 1) { ?>

						<div class="text-center gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter <?=$item['Parent']['refDataName']?> <?=$item['Parent']['eventYear']?>">
							<a href="<?= base_url('gallery/'.$item['Parent']['refDataName'].'/'.$item['_id']) ?>" style="text-decoration:none;">
								<div style="  background-image: url('<?= ApiBaseUrl()['url'].$val['eventImage']; ?>');background-size: cover;background-position: center;height: 400px;width: 400px;border: 4px solid #780914;overflow: hidden;margin: auto;" class="img-fluid" aria-label="<?= $val['altImage'] ?>">

									<h6 class="caption"><?=$item['Parent']['refDataName']?></h6>
								</div>
							</a>
						</div>
						<?php $i++; } } ?>
					<?php } ?>
				</div>
			</div>

		<?php }else{ ?>
			<section id="temple-services" class="temple-services" style="background-color: #FFF6A6">
				<div id="intro" class="p-5 text-center bg-image shadow-1-strong" >
					<div>
						<div class="d-flex justify-content-center align-items-center h-100">
							<div class="text-white px-4">
								<h2 class="mb-3 fw-bold">Coming Soon...!</h2>
							</div>
						</div>
					</div>
				</div>
			</section>
		<?php } ?>
	</main>

	<script type="text/javascript">
		$(document).ready(function(){

			$(".filter-button").click(function(){
				var value = $(this).attr('data-filter');
				if ($(".filter-button").removeClass("active")) {
					$(this).removeClass("active");
				}
				$(this).addClass("active");
				if(value == "all")
				{
					$('.filter').show('1000');
				}
				else
				{
					$(".filter").not('.'+value).hide('3000');
					$('.filter').filter('.'+value).show('3000');
				}
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			window.scrollTo({ top: 140, behavior: 'smooth'});
		});
	</script>
	<?php $this->load->view('includes/footer') ?>
	<?php $this->load->view('includes/script') ?>
