<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<link href="<?=base_url('assets/css/lightbox.min.css');?>" rel="stylesheet" />
<script src="<?=base_url('assets/js/lightbox-plus-jquery.min.js');?>"></script> 
<style>
	html, body {
		overflow-x: hidden; 
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.navbar>ul>li>a {
    font-weight: 1000 !important;
    font-size: 14px !important;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.5px;
}
</style>
<main id="main">
	<!-- ======= Temple Services Section ======= -->
	<section id="temple-services" class="temple-services" style="background-image: url(<?=base_url('assets/img/bg-main-page.jpg')?>);padding: 30px 0px;">


		<div class="container">

			<h2 class="text-center mb-0" style="font-weight:bold!important;font-size: 25px!important;"> SPONSOR NOW<br><img src="<?= base_url('assets/img/border.png');?>" class="img-fluid" style="width: 15%;max-width: 15%;"></h2>



			<div class="list-group list-group-flush px-0 mx-0">

				<?php foreach($sponsorships as $item){ 
					
					if(strtolower($item['displayName']) == 'monthly pujas') continue;
					?> 

					<div style="border-style: dotted; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;border-radius: 18px 0px 0px 18px;" class="list-group-item justify-content-between mb-1 text-left mx-0 p-0 change-bgcolor">
						<div class="d-flex mx-0 px-0" style="border-radius: 18px 0px 0px 18px;background-color: var(--main-color-new-theme)!important">

							<div class="col-md-12 m-0 p-0">
								<div class="row mx-0">

									<div class="col-md-12 mx-0 px-0">

										<div class="row mx-0 px-0">
											<div class="col-md-2 mx-0 px-0">
											<a href="<?= ApiBaseUrl()['url'].$item['image']; ?>" data-lightbox="set">
												<div class="crop-center img-responsive bg-light" style="background-position: center center;background-image: url(<?= ApiBaseUrl()['url'].$item['image']; ?>);border-radius: 9px 0px 0px 9px;box-shadow: 2px 2px 10px #00000030;height: 87px;width: 100%;background-size: cover;background-repeat: no-repeat;">
												</div></a>
											</div>
											<div class="col-md-10 m-auto px-0">

												<div class="row m-0 p-0">
													<div class="col-md-12 m-0 p-0">
														<div class="row m-0 p-0">
															<div class="col-md-9 m-0 p-0" style="padding: 13px!important;">
																<h4 style="padding-bottom: 14px!important;margin: 0!important;color: white;" class="fw-bold">
																	<?= camelCase($item['displayName']); ?>	
																</h4>
																<span class="m-0 p-0" style="font-size: 11px;color: #0000009e; font-weight: normal!important;color: white;">

																	<?= camelCase($item['description']);?>	

																</span>
															</div>

															
															<div class="col-md-3 p-4" style="display: grid;align-content: center;">
																
																<?php 
																// echo $item['_id'];
																if (isset($item['isRecurring']) && $item['isRecurring'] == 'ACTIVE') {
																	$href = base_url('recurring-sponsor-now/'.urlencode($item['refDataName']));
																} else{
																	$href = base_url('sponsor-now/'.urlencode($item['refDataName']));
																}
																?>

																<a href="<?=$href?>" class="btn loader contactus-btn" style="float: right!important;border: 1px solid white;color: white;font-size: 18px;font-weight: 800;">Sponsor&nbsp;Now</a>

															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				<?php } ?>


			</div>

		</div>


	</section>
	<!-- End Temple Services Section -->
</main><!-- End #main -->

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

<style>
	

@media only screen and (max-width: 768px) {
	.crop-center {
	height:275px!important;
	/* width: 94.4vw !important; */
}



}

</style>
<?php $this->load->view('includes/footer') ?>
<?php $this->load->view('includes/script') ?>
