					<?php
					$header_data = getWebSyncsData('Header Settings', 'headerSettings', '');
					?>

					<?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 type="text/css">
						
						.pujalist td, .pujalist th, .description td, .description th, .phead, .pthead {
							border: 1px solid #A71333;
							padding: 6px;
							text-align: center;
							font-weight: 600;
/*							text-shadow: 0px 1px 13px #fff700;*/
							color: #9d0000;

						}

						/*Modal Css*/


						.modal-header {
							border-top: none !important;
						}

						.modal-confirm {
							color: #877676;
							width: 550px;
						}



						.modal-confirm .modal-content {
							padding: 20px;
							border-radius: 5px;
							border: none;
						}

						.modal-confirm .modal-header {
							border-bottom: none;
							position: relative;
						}

						.modal-confirm h4 {
							text-align: center;
							font-size: 20px;
							margin: 22px 0 -15px;
							color: #980c3c;
							font-weight: 800;
						}

						.modal-confirm .form-control,
						.modal-confirm .btn {
							min-height: 40px;
							border-radius: 3px;
						}

						.modal-confirm .close {
							position: absolute;
							top: -5px;
							right: -5px;
						}

						.modal-confirm .modal-footer {
							border: none;
							text-align: center;
							border-radius: 5px;
							font-size: 13px;
						}

						.modal-confirm .icon-box {
							color: #fff !important;
							position: absolute;
							margin: 0 auto;
							left: 0;
							right: 0;
							top: -70px;
							width: 95px;
							height: 95px;
							border-radius: 50%;
							z-index: 9;
							background: #fff;
							padding: 2px;
							text-align: center;
							box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
						}

						.modal-confirm .icon-box i {
							font-size: 56px;
							position: relative;
							top: 4px;
						}

						.modal-confirm .btn {
							color: #fff;
							border-radius: 4px !important;
							background: #980c3c;
							text-decoration: none;
							transition: all 0.4s;
							line-height: normal;
							border: none;
							padding: 0px 36px;
						}

						.modal-confirm .btn:hover,
						.modal-confirm .btn:focus {
							background: #da2c12;
							outline: none;
						}

						.trigger-btn {
							display: inline-block;
							margin: 100px auto;
						}

						
						.modal-dialog-centered {
							display: flex;
							align-items: center;
							min-height: calc(100% - 1rem);
						}

						.icon-box {
							max-width: 100px;
							max-height: 100px;
						}

						@media (max-width: 767.98px) {
							.modal-lg {
								max-width: 100%;
								margin: 1.75rem auto;
							}
						}

					</style>

					<script src="https://cdn.bootcss.com/html2pdf.js/0.9.1/html2pdf.bundle.js"></script>
					<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"></script>


					<main id="main">
						<?php
						$festivals = getWebSyncsData('Festival Settings', 'festivalSettings', '');
						?>
						<!-- ======= Temple Services Section ======= -->
						<section style="background-size: auto;">


							<div class="container-fluid">

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



								<div class="row">

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



										<div class="col-md-4  mb-4">

											<div class="row bg-white shadow-lg">

												<div class="col-md-4 px-0 services-thumb"  style="height:118px; border-radius:0.5rem; overflow:hidden; position:relative; cursor:pointer; transition: all 0.4s; background-size:cover; background-image:url('<?=ApiBaseUrl()['url'].$value['Image'];?>'); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);">

													<a href="<?=ApiBaseUrl()['url'].$value['Image'];?>" data-lightbox="set">
														<div  class="services-thumb" style="height:118px; border-radius:0.5rem; overflow:hidden; position:relative; cursor:pointer; transition: all 0.4s; background-size:cover; background-image:url('<?=ApiBaseUrl()['url'].$value['Image'];?>'); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);"></div>
													</a>
												</div>
												<div class="col-md-8 list-of-services-div" style="display: flex; flex-direction: row; align-content: center; align-items: start; justify-content: start; flex-wrap: wrap;">


													<div class="row p-0 m-0">
														<div class="col-md-12 p-0 m-0">
															<h6 style="font-size: 18px; font-weight: 800; color: #00008d;"><?=$value['refDataName']?></h6>
															
														</div>
														<div class="col-md-12 p-0 m-0">
															<div>
																<span> <a href="javaScript:void(0)" data-bs-toggle="modal" data-bs-target="#description<?=$value['_id']?>"><i class="fa fa-eye" style="font-size: 1.4em;"> Details </i> </a>	</span>


																<!-- <span style="padding-left: 10px;"> <a href="javaScript:void(0)" data-bs-toggle="modal" data-bs-target="#pujalist<?=$value['_id']?>"><i class="fa fa-download" style="font-size: 1.4em;"> Puja Samagri </i> </a>	</span> -->
																<span style="padding-left: 10px;"> <a href="javaScript:void(0)" onclick="createPDF('<?=$value['_id'];?>')"><i class="fa fa-download" style="font-size: 1.4em;"> Puja Samagri </i> </a>	</span>
															</div>
															
														</div>
													</div>


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




										<!-- Modal Event HTML -->
										<div id="pujalist<?=$value['_id']?>" class="modal modal-lg fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
											<div class="modal-dialog modal-lg modal-dialog-centered modal-confirm px-5">


												<div class="modal-content" style="background-image:url('<?= base_url("assets/img/white-background-vector.jpg") ?>');position: relative;background-size: contain;">
													
													<div class="p-0 text-center" id="PdfPrintSection<?=$value['_id']?>">


														<img src="<?=base_url('assets/img/android-chrome-192x192.png') ?>" class="icon-box">
														<h4 class="modal-title w-100 fw-bold" style="color:#9d0000!important;font-size:25px!important">❋ <?=$value['refDataName'];?> Puja Samagri ❋</h4>

														<?php $pujalist = @getPujaList($value['refDataName'], $value['_id'])['poojaList'];?>

														<?php 

														if (!empty($pujalist)) { ?>

															<table class="table table-responsive table-bordered mt-4 text-center" style="background: #ffffff3b;background-image:url('<?= base_url("assets/img/white-background-vector.jpg") ?>');position: relative;background-size: contain;">

																<thead class="pthead">
																	<tr>
																		<th class="phead" style="font-size: 23px;">✿ Puja Items ✿</th>
																		<th class="phead" style="font-size: 23px;">✿ Quantity ✿</th>

																	</tr>
																</thead>
																<tbody id="pujalist<?=$value['_id']?>" class="pujalist">

																	<?php	foreach($pujalist as $item){

																		echo '<tr><td>'.$item['name'].'</td><td> <span id="event_name">' .$item['qty']. '</span></td></tr>';

																	} ?>
																</tbody>
															</table>
														<?php }else{
															echo '<h5 class="py-4" style="color: #980c3ce0; font-weight: 600;">Puja List not found!</h5>';
														}

														?>
													</div>
													<!-- <div class="modal-footer p-0">
														<button type="button" class="mx-auto d-block btn btn-secondary" data-bs-dismiss="modal">Close</button>


														<button type="button" onclick="createPDF('<?=$value['_id'];?>')" class="mx-auto d-block btn btn-secondary html2PdfConverter" data-bs-dismiss="modal"><i class="fa fa-download"></i></button>
													</div> -->
												</div>

											</div>
										</div>


										<div id="description<?=$value['_id']?>" class="modal modal-lg fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
											<div class="modal-dialog modal-lg modal-dialog-centered modal-confirm px-5">


												<div class="modal-content">
													<div class="modal-header">
														<img src="<?= $header_data[0]['leftImage'] ? ApiBaseUrl()['url'] . $header_data[0]['leftImage'] :  base_url('assets/img/logo-1.png') ?>" class="icon-box">
														<h4 class="modal-title w-100 bottomborder">Description</h4>

													</div>
													<div class="modal-body p-0 mt-4 text-center">
														<table class="table table-responsive table-bordered mt-4" style="background: #ffffff3b;;">
															<tbody id="description<?=$value['_id']?>" class="description">
																<?=$value['description']?>
															</tbody>
														</table>
													</div>
													<div class="modal-footer p-0">
														<button type="button" class="mx-auto d-block btn btn-secondary" data-bs-dismiss="modal">Close</button>
													</div>
												</div>

											</div>
										</div>
										<!-- End Modal HTML -->

									<?php	} ?>


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

							<script>


								function createPDF(id) {
									var element = document.getElementById('PdfPrintSection' + id);


									var opt = {
										margin:       0.5,
										filename:     'puja_samagri.pdf',
										image:        { type: 'jpeg', quality: 0.98 },
										html2canvas:  { scale: 2 },
										jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
									};


									html2pdf().from(element).set(opt).outputPdf('blob').then(function(pdf) {

										var pdfUrl = URL.createObjectURL(pdf);

										window.open(pdfUrl, '_blank');
									});
								}



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

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