<?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/deities.css')?>">
<main id="main">

	<style type="text/css">
		.image {
			/* the magic */
			display: block;
			width: 180px;
			height: 180px;
			overflow: hidden;
			-webkit-border-radius: 180px;
			-moz-border-radius: 180px;
			-ms-border-radius: 180px;
			-o-border-radius: 180px;
			border-radius: 180px;
			position: relative; 
			margin: 0px auto;
			text-align: center;
			margin-bottom: 10px;
			border: 3px solid #FFF;
			-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),inset 0px 3px 8px rgba(0, 0, 0, 0.3);
			-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3),inset 0px 3px 8px rgba(0,0,0,0.3);
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),inset 0px 3px 8px rgba(0, 0, 0, 0.3);
		}

		#img-prayer-books {
			max-width: 100%;
			height: 100%;
			vertical-align: middle;
			border: 0;
			-ms-interpolation-mode: bicubic;
		}

		.image span {
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: #888;
			background: rgba(0,0,0,.5);
			color: #fff;
			padding: 3em 1em 0;
		}

		.image:hover span {
			display: block;
		}




		h2 {
			position: relative;
			padding: 0;
			margin: 0;
			font-family: "Raleway", sans-serif;
			font-weight: 300;
			font-size: 25px!important;
			color: #080808;
			-webkit-transition: all 0.4s ease 0s;
			-o-transition: all 0.4s ease 0s;
			transition: all 0.4s ease 0s;
		}



		.three h2 {
			font-size: 28px;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1.5em;
			padding-bottom: 15px;
			position: relative;
		}
		.three h2:before {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			height: 5px;
			width: 55px;
			background-color: #DC3545;
		}
		.three h2:after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 2px;
			height: 1px;
			width: 95%;
			max-width: 255px;
			background-color: #DC3545;
		}

	</style>
	<?php
	$prayerBook = getWebSyncsData('Prayer Book', 'prayerBookSettings', ''); 
	?>
	<!-- ======= Temple Services Section ======= -->
	<section id="temple-services" class="temple-services" style="background-image: url(<?=base_url('assets/img/elegant-background-with-mandala.png');?>);background-size: auto;">


		<div class="container">
				<h2 id="temple-services mb-4" class="text-center bottomborder" style="font-weight:bold!important;font-size: 35px!important;">BHAJAN LYRICS</h2>

			<div class="row mb-5">

				<?php foreach ($prayerBook as $key => $value) { 

					if ($value['Parent']['bookTypes'] == 'BY LANGUAGE') {

						echo '<div class="three"><h2 class=" fw-bold py-3">'.camelCase($value['Parent']['refDataName']).'</h2></div>';

						foreach ($value['Child Grid'] as $key => $item) {

							echo '<div class="col-md-2"><a href="'.ApiBaseUrl()['url'].$item['pdf'].'" target="_blank" class="btn btn-outline-danger" style="border-radius:0px!important"><i class="fa fa-book"></i> '.$item['refDataName1'].'</a></div>';
						}

					}else if($value['Parent']['bookTypes'] == 'BY DEITY'){

						echo '<div class="three"><h2 class=" fw-bold py-3 mt-5">'.camelCase($value['Parent']['refDataName']).'</h2></div>';

						foreach ($value['Child Grid'] as $key => $item) {

							echo '<div class="col-md-2 text-center">

							<a href="'.ApiBaseUrl()['url'].$item['pdf'].'" class="image" target="_blank">
							<img id="img-prayer-books" alt="'.$item['refDataName2'].'" src="'.ApiBaseUrl()['url'].$item['image'].'" target="_blank">
							<span>'.$item['refDataName2'].'</span>
							</a>
							<h6 class="fw-bold">'. $item['refDataName2'].'</h6> 

							</div>';
						}

					}





				} ?>


			</div>
		</section><!-- End Temple Services Section -->


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

	<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') ?>
