<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>

<style type="text/css">
	.gallery-title
  {
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
  }
  .gallery-title:after {
    content: "";
    position: absolute;
    width: 15%;
    left: 46.5%;
    height: 45px;
    border-bottom: 2px solid #D9950B;
  }
  .filter-button
  {
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

  }
  .filter-button:hover
  {
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

  }
  .btn-default:active .filter-button:active
  {
    background-color: #FFEFE2!important;
    color: white!important;
  }
  .gallery_product
  {
    margin-bottom: 30px;
  }
  .btn-default {
    color: #333!important;
    padding: 11px 39px!important;
    background-color: #fff!important;
    font-size: 14px!important;
    font-weight: 550!important;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    border-radius: 45px;
    text-transform: uppercase;
    border: none!important;
  }
  .btn-default:hover{
    color: #fff!important;
    background-color: #780914!important;
    border-color: #000000!important;
  }
  .btn.active {
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background-color: #780914!important;
    color: white!important;
  }
  
  .caption{
    background: #ac0106;
    padding: 6px;
    font-weight: 700;
    color: #ffff91;
    font-size: 20px;
    position: relative;
    top: 91%;
  }

</style>

<main id="main"  style="background-color:#FFF8E1;">


	<?php if ($gallery_data != array()) {  ?>
		<div class="responsive-container">
			<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;">GALLERY OF <?= PROJECT_NAME != '' ?  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 align="center">
	         <button class="btn btn-default filter-button active my-2" data-filter="all">All</button>

	        <?php 

	       	$previousYear = date('Y', strtotime('-1 year'));
	         ?>


	         <button class="btn btn-default filter-button my-2" data-filter="<?= $previousYear ?>"><?= $previousYear ?></button>
          </div>
			</div>
			<br/>
			<div class="row mt-5">
				<?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/'.str_replace(" ","-",$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') ?>
