<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<?php $this->load->view('includes/slider') ?>
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/home.css'); ?>">
<?php


$special_events = getWebSyncsData('Flash News', 'flashNews', 'ACTIVE');
$daily_schedules = getWebSyncsData('Daily Schedule', 'dailySchedule', '');


$currentDate = strtotime(date('m/d/Y')); // Get current date in Unix timestamp

$validEvents = [];

foreach ($special_events as $item) {
	$endDate = strtotime(@$item['endDate']); // Convert end date to Unix timestamp

	if ($endDate >= $currentDate) {
		$validEvents[] = $item; // Add valid events to the new array
	}
}

$special_events = $validEvents;



// Sort the array based on "sequenceId"
usort($special_events, function ($a, $b) {
	return @$a['sequenceId'] - @$b['sequenceId'];
});

$session_data = $this->session->userdata('daily_events_cart');

$cart_count = isset($session_data['ids']) && $session_data['ids'] ? count($session_data['ids']) : 0;
$cart_count = $cart_count != '' ? $cart_count : 0;


if (empty($session_data['ids'])) {
	$session_data = array('totalPrice' => 0.00, 'ids' => array());
}
?>


<main id="main">
	<!-- ======= Temple Services Section ======= -->
	<section id="temple-services" class="temple-services" style="background-color: var(--page-wrapper-bg-color)!important;">
		<div class="responsive-container">
			<div class="row">
				<div class="col-lg-4 col-sm-8">
					<div class="card shadow-lg mb-5" style="background-color: #fff;max-height: 600px;min-height: 450px;">

						<div class="card-body text-center p-0 m-0" style="background-image: url('<?= base_url('assets/img/bg-card.png') ?>'); background-size: cover;">
							<h3 class="card-header card-home-header" style="font-weight:bolder!important;font-size: 20px!important;">TEMPLE&nbsp;SCHEDULE<br><img src="<?= base_url('assets/img/borderimg.png') ?>" class="img-fluid img-responsive"></h3>

							<style type="text/css">
								.nav-link2.active {
									color: #fff !important;
									background: #005d4b !important;
									border: 2px solid #f7c01b !Important;
									border-color: #f7c01b !Important;
									font-weight: 500;
								}

								.nav-link2 {
									padding: 8px 10px !important;
									font-size: 16px !important;
									color: #000 !important;
									border-radius: 5px !important;
									font-weight: 500;
									margin-bottom: 18px !important;
									background: #c5c5c5 !important;
									margin-right: 9px !important;

									font-family: system-ui !important;
								}

								.nav-tabs {
									--bs-nav-tabs-border-width: 0;
									--bs-nav-tabs-border-radius: 0;
								}

								@media only screen and (max-width: 600px) {
									.title2 {
										text-align: center;
									}

									.pooja-text {
										text-align: justify !important;
									}
								}
							</style>

							<div style="display: flex; flex-direction: row; justify-content: space-around;padding-left: 12px;padding-bottom: 12px;">
								<div class="panel-heading">
									<div class="panel-title">
										<ul class="nav nav-tabs">
											<li class="active">
												<a class="nav-link2 active" onclick="changeTabContent('DAILY')" href="#DAILY" data-toggle="tab" id="dailyevents">DAILY</a>
											</li>
											<li class="daily-event-list"><a class="nav-link2" onclick="changeTabContent('WEEKLY')" href="#WEEKLY" data-toggle="tab">WEEKLY</a>
											</li>
											<li><a class="nav-link2" onclick="changeTabContent('MONTHLY')" href="#MONTHLY" data-toggle="tab">MONTHLY</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="list-group list-group-flush px-0 mx-0" style="overflow: auto; height: 400px;padding-top: 1px;">

								<div class="panel-body">
									<div class="tab-content">
										<?php $currentDate = date('m/d/Y');


										foreach ($daily_schedules as $key => $val) {

											if (isset($val['status']) && $val['status'] == 'ACTIVE') {
												if (isset($val['date']) && $val['scheduleType'] == 'DAILY' && $val['date'] == $currentDate) {
													?>



													<div class="tab-pane active <?= $val['scheduleType'] ?>">

														<?php if (isset($val['linkUrl']) && !empty($val['linkUrl'])) { ?>
															<a href="<?= $val['linkUrl']; ?>">
															<?php } ?>


															<div style="border-bottom: 1px dotted #3e000085;; background-color: #fef39500!important;" class="list-group-item justify-content-between text-left mx-0 px-0 pl-0 change-bgcolor" style="border-bottom: 1px dotted #3e000085;">


																<div class="d-flex mx-0 px-0">
																	<div class="col-md-12 m-0 p-0">
																		<div class="row mx-0 py-2 px-3">
																			<div class="col-md-12 mx-0 px-0">
																				<div class="row mx-0 px-0">
																					<div class="col-md-12 m-0 p-0 text-start">
																						<span style="color:#642318;font-size: 14px; font-weight: bold!important;">

																							<?= $val['refDataName']; ?>

																						</span><br>

																						<?php if (isset($val['comment']) && !empty($val['comment'])) { ?>
																							<span style="color:#642318;font-size: 14px;font-weight: normal;">
																								<?= @$val['comment']; ?>
																							</span><br>

																						<?php } ?>
																						<span style="color:#642318;font-size: 14px;font-weight: normal;">
																							<?= @$val['timing']; ?>
																						</span>
																					</div>

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

															<?php if (isset($val['linkUrl']) && !empty($val['linkUrl'])) { ?>
															</a>
														<?php } ?>

													</div>



												<?php	} else { ?>


													<div class="tab-pane active <?= $val['scheduleType'] ?>">

														<?php if (isset($val['linkUrl']) && !empty($val['linkUrl'])) { ?>
															<a href="<?= $val['linkUrl']; ?>">
															<?php } ?>

															<div style="border-bottom: 1px dotted #3e000085;; background-color: #fef39500!important;" class="list-group-item justify-content-between text-left mx-0 px-0 pl-0 change-bgcolor" style="border-bottom: 1px dotted #3e000085;">

																<div class="d-flex mx-0 px-0">
																	<div class="col-md-12 m-0 p-0">
																		<div class="row mx-0 py-2 px-3">
																			<div class="col-md-12 mx-0 px-0">
																				<div class="row mx-0 px-0">



																					<div class="col-md-12 m-0 p-0 text-start">
																						<span style="color:#642318;font-size: 14px; font-weight: bold!important;">

																							<?= $val['refDataName']; ?>
																						</span><br>
																						<?php if (isset($val['comment']) && !empty($val['comment'])) { ?>
																							<span style="color:#642318;font-size: 14px;font-weight: normal;">
																								<?= @$val['comment']; ?>
																							</span><br>

																						<?php } ?>
																						<span style="color:#642318;font-size: 14px;font-weight: normal;">
																							<?= @$val['timing']; ?>
																						</span>
																					</div>

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

															</div>
														</div>
														<?php if (isset($val['linkUrl']) && !empty($val['linkUrl'])) { ?>
														</a>
													<?php } ?>
												<?php }
											}
										} ?>


									</div>
								</div>




								<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
								<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
								<script type="text/javascript">
									function changeTabContent(tab) {

										if (tab == 'DAILY') {
											$("." + tab).addClass('active');
											$(".WEEKLY").removeClass('active');
											$(".MONTHLY").removeClass('active');
										} else if (tab == 'WEEKLY') {
											$("." + tab).addClass('active');
											$(".DAILY").removeClass('active');
											$(".MONTHLY").removeClass('active');
										} else if (tab == 'MONTHLY') {
											$(".MONTHLY").addClass('active');
											$(".DAILY").removeClass('active');
											$(".WEEKLY").removeClass('active');
										}

									}

									$("#dailyevents").click();
								</script>


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


				<!-- Modal -->

				<div class="col-lg-8 col-sm-4">
					<div class="card shadow-lg rounded pt-0 widget-body" style="background-color: #fff;max-height: 600px;min-height: 450px;">

						<h3 class="card-header text-center card-home-header" style="font-weight:bolder!important;font-size: 21px!important;">UPCOMING EVENTS<br><img src="<?= base_url('assets/img/borderimg.png') ?>" class="img-fluid img-responsive"></h3>
						<div class="card-body p-0 m-0" style="background-image: url('<?= base_url('assets/img/bg-card.png') ?>'); background-size: cover;">
							<div class="list-group list-group-flush px-0 mx-0" style="overflow: auto; height: 440px;">

								<?php $i = 1;
								foreach ($upcoming_events as $val) {

									$isValid = filterValidData($val);

									if ($isValid == 1) {

										if ($i < 11) { ?>

											<div style="border-bottom: 1px dotted #3e000085;; background-color: #fef39500!important;" class="list-group-item justify-content-between text-left mx-0 px-0 pl-0 change-bgcolor" style="border-bottom: 1px dotted #3e000085;">
												<div class="d-flex mx-0 px-0">

													<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-3 mx-0">
																		<a href="<?= base_url('event/' . urlencode($val['refDataName']) . '/' . $val['_id']) ?>">
																			<img src="<?= $val['Image'] ? ApiBaseUrl()['url'] . $val['Image'] : base_url('assets/img/srihanuman-watermark.png'); ?>" class="rounded shadow" style="width:100%; height:auto; object-fit: cover;">
																		</a>
																	</div>
																	<div class="col-md-9 m-auto px-0">

																		<div class="row m-0 p-0">
																			<div class="col-md-12 m-0 p-0">
																				<span style="color:#642318;font-size: 14px;">
																					<a href="<?= base_url('event/' . urlencode($val['refDataName']) . '/' . $val['_id']) ?>">
																						<?= $val['refDataName']; ?>
																					</a>
																				</span>
																			</div>
																		</div>

																		<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-12 m-0 p-0">
																						<span class="m-0 p-0" style="font-size: 13px;color: #0000009e;font-weight:normal;">
																							<a href="<?= base_url('event/' . urlencode($val['refDataName']) . '/' . $val['_id']) ?>">

																								<?php


																								echo 	format_event_date($val['startDate'], $val['endDate'], $val['startTime'], $val['endTime']);

																								?>
																							</a>

																						</span>


																						<!-- Flyer Link 1 -->
																						<?php if(isset($val['flyerLink']) && $val['flyerLink'] != ''){ ?>
																							<p style="font-weight:bold;font-size: 14px!important;margin-bottom:0!important">Flyer Links 👇</p> <a href="<?=ApiBaseUrl()['url'].@$val['flyerLink'];?>" target="_blank" style="text-decoration: underline;color: blue;font-size: 14px!important;font-weight: bold!important;" download><?= @$val['flyerName'] ? $val['flyerName'] : 'Link 1'; ?></a>
																						<?php } ?>
																						<!-- Flyer Link 2 -->

																						<?php if(isset($val['flyerLink2']) && $val['flyerLink2'] != ''){ ?>
																							<a href="<?=ApiBaseUrl()['url'].@$val['flyerLink2'];?>" target="_blank" style="text-decoration: underline;color: blue;font-size: 14px!important;font-weight: bold!important;" download><?= @$val['flyerName2'] ? ' | '.$val['flyerName2'] : ' | Link 2'; ?></a>
																						<?php } ?>

																						<!-- Flyer Link 3 -->

																						<?php if(isset($val['flyerLink3']) && $val['flyerLink3'] != ''){ ?>
																							<a href="<?=ApiBaseUrl()['url'].@$val['flyerLink3'];?>" target="_blank" style="text-decoration: underline;color: blue;font-size: 14px!important;font-weight: bold!important;" download><?= @$val['flyerName3'] ? ' | '.$val['flyerName3'] : 'Link 3'; ?></a>
																						<?php } ?>

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

												<?php if ($i == 10) { ?>

													<div class="row viewmoreevent">
														<a href="<?= base_url('all-upcoming-events') ?>" class="col-6 loader btn ViewAllEventBtn btn-sm mx-auto d-block" style="border-radius: 0px!important;word-break: keep-all!important;background: #760014;color: white">VIEW MORE <i class="fa fa-paper-plane"></i>
														</a>
													</div>
												<?php } ?>
											</div>
											<?php $i++;
										}}
									} ?>



								</div>

							</div>
						</div>
					</div>
					<!--======================= UPCOMING EVENT END ===================-->
				</div>
			</div>
		</section>





		<!-- ======================= Temple Services Section ======================= -->
		<section class="temple-services" style="background-image : url(<?= base_url('assets/img/loginbanner.png') ?>);background-color: #FDF5EE;background-size: cover;">
			<div class="container-fluid">
				<center>
					<h2 style="font-weight:bolder!important;font-size: 35px!important;"><?= @PROJECT_NAME ? @PROJECT_NAME : 'Sanatan Mandir Tampa' ?> Services<br><img src="<?= base_url('assets/img/borderimg.png') ?>" class="img-fluid img-responsive"></h2>
				</center>

				<div class="row text-center">
					<div class="col-md-6" data-aos="fade-right">
						<div class="row">
							<div class="col-md-12">
								<img src="<?= base_url('assets/img/in-temple-services.jpg'); ?>" class="img-fluid shadow-lg mb-5 rounded" style="width:80%;"><br>
							</div>
						</div>
						<div class="row m-0 p-0" style="margin-top: -42px;">
							<div class="col-md-12">
								<h2 class="title2">In Temple Services</h2>
								<p class="pooja-text" style="text-align: center;font-size:15px!important; color: black!important; font-weight: 100; line-height: 2;">Our Temple’s motto has always been that the Devotee should only have the “WILL” to do the Dharmic activity and concern for the “BILL” should be the least. Due to this practice, many devotees have been developing guilt of short-paying for services. Based on increased demand, the Temple Management has decided to publish list of Suggested Donations for various Pooja Services offered.</p>
							</div>
						</div>
					</div>
					<div class="col-md-6" data-aos="fade-in">
						<div class="row">
							<div class="col-md-12">
								<img src="<?= base_url('assets/img/away-temple-services.jpg'); ?>" class="img-fluid shadow-lg mb-5 rounded" style="width:80%;"><br>
							</div>
						</div>
						<div class="row m-0 p-0" style="margin-top: -42px;">
							<div class="col-md-12">
								<h2 class="title2">Away Temple Services</h2>
								<p class="pooja-text" style="text-align: center;font-size:15px!important; color: black!important; font-weight: 100; line-height: 2;">With Puja Services, finding a Priest is no more a tedious process. Using Puja Services, devotees can avail the services of booking a priest online at their convenience for any kind of Puja, ritual, ceremony and occasion. Puja services simplifies the process of booking a priest very much at ease along with the items required for a Puja as well as the vendors where they could procure the puja materials.</p>
							</div>
						</div>
					</div>
				<!-- <div class="col-md-4" data-aos="fade-left">
							<div class="row">
								<div class="col-md-12">
									<img src="<?= base_url('assets/img/Shraadham.jpg'); ?>" class="img-fluid shadow-lg mb-5 rounded" style="width:80%;"><br>
								</div>
							</div>
							<div class="row m-0 p-0" style="margin-top: -42px;">
								<div class="col-md-12">
									<h2 class="title2">Shraadham</h2>
									<p>According to Hinduism, when a person dies, he either travels to heavenly worlds or to the ancestral worlds depending upon his previous deeds. the departed souls can be elevated to higher planes of existence and pushed further on the scale of evolution if their direct descendents on earth. With such rites, not just one but the entire family of ancestors would be benefited and spiritually uplifted.</p>
								</div>
							</div>
						</div> -->
					</div>
					<div class="text-center">
						<!-- <a href="<?= base_url('services') ?>" class="btn contactus-btn" style="box-shadow:1px 1px 5px #FFDC11!important;">View All Services</a> -->

						<a href="<?= base_url('services') ?>" class="animated-button1">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							View All Services
						</a>





					</div>




				</div>


			</section>
			<!-- ======================= Today's Panchangam ======================= -->
			<section class="temple-services" style="background-image : url(<?= base_url('assets/img/loginbanner.png') ?>);background-color: #FDF5EE;background-size: cover;">
				<div class="container-fluid">

					<div class="col-md-12 mb-4">
						<div class="mb-3  p-0 text-center">

							<h2 style="font-weight:bolder!important;font-size: 35px!important;"> Today's Panchangam<br><img src="<?= base_url('assets/img/borderimg.png') ?>" class="img-fluid img-responsive"></h2>

						</div>


						<div id="panchangam"></div>
					</div>
				</div>

			</section>

			<!--======================== End Today's Panchangam ========================-->

			<!--======================= ABOUT TEMPLE ===================-->
			<section style="background: var(--page-wrapper-bg-color);">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-6" data-aos="fade-left">
							<div class="container-fluid">
								<img src="<?= base_url('assets/img/deepawali-2-1170x658.png'); ?>" class="img-fluid shadow-lg mb-5 rounded" style="float: left;width:100%;">
							</div>
						</div>
						<div class="col-md-6" data-aos="fade-right">

							<center>
								<h2 style="font-weight:bold!important;font-size: 35px!important;">About <?= @PROJECT_NAME ? @PROJECT_NAME : 'Sanatan Mandir Tampa' ?><br><img src="<?= base_url('assets/img/borderimg.png') ?>" class="img-fluid img-responsive"></h2>
							</center>


							<p class="pooja-text" style="text-align: left;font-size:15px!important; color: black!important; font-weight: 100; line-height: 2;">We are a Hindu Temple located in Tampa, conceived as place of worship and cultural growth for our community; A place to educate our children about our religious and cultural values, providing a safe haven for different activities in an effort to acquaint the community at large with our Sanatana Dharma culture. Creating a better understanding between a multi-ethnic community..
							</p>
							<center>

						<!-- <a href="<?= base_url('virtual-tour') ?>" class="animated-button1">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
									Virtual Tour
								</a> -->

								<a href="<?= base_url('gallery') ?>" class="animated-button1">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
									Gallery
								</a>

								<a href="<?= base_url('about-temple') ?>" class="animated-button1">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
									Know More
								</a>

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

			</section>
			<!--======================= ABOUT TEMPLE END ===================-->


			<!--======================= SOCIAL CONNECTIONS TEMPLE ===================-->



			<style type="text/css">
				.wrapper {
					display: table;
					height: 100%;
					width: 100%;
				}

				.container-fostrap {
					display: table-cell;
					padding: 1em;
					text-align: center;
					vertical-align: middle;
				}

				.fostrap-logo {
					width: 100px;
					margin-bottom: 15px
				}

				h1.heading {
					color: #fff;
					font-size: 1.15em;
					font-weight: 900;
					margin: 0 0 0.5em;
					color: #505050;
				}

				@media (min-width: 450px) {
					h1.heading {
						font-size: 3.55em;
					}
				}

				@media (min-width: 760px) {
					h1.heading {
						font-size: 3.05em;
					}
				}

				@media (min-width: 900px) {
					h1.heading {
						font-size: 3.25em;
						margin: 0 0 0.3em;
					}
				}

				.card {
					display: block;
					margin-bottom: 20px;
					line-height: 1.42857143;
					background-color: #fff;
					border-radius: 2px;
					box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
					transition: box-shadow .25s;
				}

				.card:hover {
					box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				}

				.img-card {
					width: 100%;
					height: 200px;
					border-top-left-radius: 2px;
					border-top-right-radius: 2px;
					display: block;
					overflow: hidden;
				}

				.img-card img {
					width: 100%;
					height: 200px;
					object-fit: cover;
					transition: all .25s ease;
				}

				.card-content {
					padding: 15px;
					text-align: left;
				}

				.card-title {
					margin-top: 0px;
					text-align: center !important;
					font-weight: 700;
					font-size: 1.65em;
				}

				.card-title a {
					color: #000;
					text-decoration: none !important;
				}

				.card-read-more {
					border-top: 1px solid #D4D4D4;
				}

				.card-read-more a {
					text-decoration: none !important;
					padding: 10px;
					font-weight: 600;
					text-transform: uppercase
				}
			</style>

			<section class="wrapper temple-services" style="padding:15px 0px;background-color: var(--page-wrapper-bg-color)!important;">
				<div class="container-fostrap">

					<div class="mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
						<h2 style="font-weight:bold!important;font-size: 35px!important;">Be a part of <?= @PROJECT_NAME ? @PROJECT_NAME : 'Sanatan Mandir Tampa' ?><br><img src="<?= base_url('assets/img/borderimg.png') ?>" class="img-fluid img-responsive"></h2>
					</div>

					<div class="container">
						<div class="content my-5">
							<div class="row">

								<div class="col-xs-12 col-sm-4">
									<div class="card rounded" style="background-image:url('<?= base_url('assets/img/pattern-bg.jpg') ?>'); background-size: contain;">
										<a class="img-card" href="<?= base_url('volunteer'); ?>">
											<img src="<?= base_url('assets/img/image-1689932902639-608159495.jpeg'); ?>" />
										</a>
										<div class="card-content">


											<div class="card-title mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
												<h4 class="mb-0 title">
													<a href="<?= base_url('volunteer'); ?>">VOLUNTEER
													</a>
												</h4>
												<div style="display: flex; justify-content: center;">
													<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 70%; max-width: 70%;">
												</div>
											</div>


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

								<div class="col-xs-12 col-sm-4">
									<div class="card rounded" style="background-image:url('<?= base_url('assets/img/pattern-bg.jpg') ?>'); background-size: contain;">
										<a class="img-card" href="<?= base_url('donations'); ?>">
											<img src="<?= base_url('assets/img/image-1685725721114-904634487.jpeg'); ?>" />
										</a>
										<div class="card-content">

											<div class="card-title mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
												<h4 class="mb-0 title">
													<a href="<?= base_url('donations'); ?>"> DONATE
													</a>
												</h4>
												<div style="display: flex; justify-content: center;">
													<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 70%; max-width: 70%;">
												</div>
											</div>
										</div>
									</div>
								</div>



								<div class="col-xs-12 col-sm-4">
									<div class="card rounded" style="background-image:url('<?= base_url('assets/img/pattern-bg.jpg') ?>'); background-size: contain;">
										<a class="img-card" href="javascript:void(0)" onclick="subscribeNewsletterCheckLogin()">
											<img src="<?= base_url('assets/img/image-1692776633782-10156332.jpeg') ?>" />
										</a>
										<div class="card-content">

											<div class="card-title mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
												<h4 class="mb-0 title">
													<a href="javascript:void(0)" onclick="subscribeNewsletterCheckLogin()"> SUBSCRIBE
													</a>
												</h4>
												<div style="display: flex; justify-content: center;">
													<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 70%; max-width: 70%;">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>




			<!--================================= GALLERY SECTION END =================================-->

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

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<!-- <script type="text/javascript" src="<?= base_url('assets/js/gallery.js') ?>"></script> -->
		<script type="text/javascript">
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(SendDataToPanchangamApi);
			} else {
				console.log("Geolocation is not supported by this browser.");
			}

			function SendDataToPanchangamApi(position) {
				var Latitude = position.coords.latitude;
				var Longitude = position.coords.longitude;
				$.ajax({
					url: "https://api.wheretheiss.at/v1/coordinates/" + Latitude + "," + Longitude,
					success: function(data) {
						console.log(data.offset);
						var tzone = data.offset;
						getPanchangam(Latitude, Longitude, tzone);
					}
				});
			}

			function getPanchangam(Latitude, Longitude, tzone) {
				;

				$.ajax({
					url: "<?= base_url('get-panchangam') ?>",
					type: "POST",
					dataType: "json",
					data: {
						'lat': Latitude,
						'long': Longitude,
						'tzone': tzone
					},
					success: function(data) {
						$('#panchangam').html(data);
					}
				});
			}
		</script>


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