<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<?php $this->load->view('includes/slider') ?>
<style>
	html,
	body {
		overflow-x: hidden;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.custom-modal {
		display: none;
		position: fixed;
		z-index: 1050;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.custom-modal-content {
		background-color: #fff;
		margin: 10% auto;
		padding: 20px;
		border-radius: 10px;
		width: 60%;
		max-width: 600px;
		position: relative;
		border-top: 10px solid #76020f;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	}

	.custom-close {
		color: #aaa;
		position: absolute;
		top: 10px;
		right: 20px;
		font-size: 28px !important;
		font-weight: bold;
		cursor: pointer;
	}

	.custom-close:hover {
		color: #000;
	}


	/* * {
		box-sizing: border-box;
	} */
	.animated-button1::before {
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #000c84;
		opacity: 0;
		-webkit-transition: .2s opacity ease-in-out;
		transition: .2s opacity ease-in-out;
	}

	.text-p {
		/* font-size: 16px !important;
        line-height: 1.5; */
		color: white !important;
		/* margin-bottom: 0rem!important; */
	}


	/* Add this CSS to your existing <style> section */
	.ticker-wrap {
		background-color: var(--main-color-new-theme);
		padding: 10px 0;
		margin-bottom: 20px;
		overflow: hidden;
		position: relative;
	}

	.ticker {
		display: inline-flex;
		white-space: nowrap;
		animation: ticker 30s linear infinite;
	}

	.ticker-item {
		color: white;
		padding: 0 2rem;
		font-size: 18px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.participate-btn {
		background-color: #76020f !important;
		color: #ffffff !important;
		border: none;
		padding: 9px 37px;
		border-radius: 5px;
		cursor: pointer;
		font-size: 18px;
		font-weight: bold;
		transition: all 0.3s ease;
	}

	.participate-btn:hover {
		background-color: #f0f0f0;
		transform: scale(1.05);
	}

	@keyframes ticker {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.ticker:hover {
		animation-play-state: paused;
	}



	.event-card {
		/* border: 1px solid #ccc; */
		/* border-left: 5px solid #000; */
		border-radius: 8px;
		padding: 20px;
		/* max-width: 500px; */
		margin: 40px auto;
		width: 100%;
		background-color: #fff;
	}

	.event-card h5 {
		font-weight: bold;
		/* margin-bottom: 20px; */
	}

	.event-data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.event-item {
		text-align: center;
		flex: 1;
		padding: 0px 6px;
	}

	.event-item:not(:last-child) {
		border-right: 1px solid #ccc;
	}

	.event-item span {
		display: block;
		font-weight: bold;
		font-size: 1.5rem;
		margin-top: 5px;
	}

	.btn-participate {
		background-color: #76020f !important;
		color: #ffffff !important;
		font-weight: bold;
		border: none;
	}

	.event-card {
		position: relative;
		margin: 40px auto;
		background-size: cover;
		background-position: center;
		border-radius: 12px;
		overflow: hidden;
		z-index: 1;
	}

	.event-card::before {
		content: "";
		position: absolute;
		inset: 0;
		padding: 6px;
		box-sizing: border-box;
		z-index: 2;
		pointer-events: none;
		border-radius: 12px;

		background:
			radial-gradient(circle, #ff6600 2px, transparent 2px),
			radial-gradient(circle, #ff6600 2px, transparent 2px),
			radial-gradient(circle, #ff6600 2px, transparent 2px),
			radial-gradient(circle, #ff6600 2px, transparent 2px);

		background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
		background-size: 8px 4px, 8px 4px, 4px 8px, 4px 8px;


		background-position:
			0% 0%,
			100% 100%,
			0% 100%,
			100% 0%;

		animation: animateDots 30s linear infinite;
	}

	@keyframes animateDots {
		0% {
			background-position:
				0% 0%,
				100% 100%,
				0% 100%,
				100% 0%;
		}

		100% {
			background-position:
				100% 0%,
				0% 100%,
				0% 0%,
				100% 100%;
		}
	}

	/* .event-card {
		position: relative;
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		z-index: 1;
	}

	.event-card .sp {
		position: absolute;
		background: red;
	}

	.event-card .sp:nth-child(1) {
		top: 0;
		left: 0;
		height: 3px;
		width: 100%;
		background: linear-gradient(to left, rgba(255, 0, 0, 0), red);
		animation: animateTop 2s linear infinite;
	}

	.event-card .sp:nth-child(2) {
		top: 0;
		right: 0;
		height: 100%;
		width: 3px;
		background: linear-gradient(to top, rgba(255, 0, 0, 0), red);
		animation: animateRight 2s linear -1s infinite;
	}

	.event-card .sp:nth-child(3) {
		bottom: 0;
		left: 0;
		height: 3px;
		width: 100%;
		background: linear-gradient(to right, rgba(255, 0, 0, 0), red);
		animation: animateBottom 2s linear infinite;
	}

	.event-card .sp:nth-child(4) {
		top: 0;
		left: 0;
		height: 100%;
		width: 3px;
		background: linear-gradient(to bottom, rgba(255, 0, 0, 0), red);
		animation: animateLeft 2s linear -1s infinite;
	}

	@keyframes animateTop {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	@keyframes animateRight {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes animateBottom {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	@keyframes animateLeft {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(100%);
		}
	} */

	@media (max-width: 768px) {
		.event-data {
			flex-direction: column;
			gap: 15px;
			align-items: stretch;
		}

		.event-item {
			border-right: none !important;
			border-bottom: 1px solid #eee;
			padding-bottom: 10px;
		}

		.event-item:last-child {
			border-bottom: none;
		}

		.btn-participate {
			width: 100%;
			padding: 10px;
		}
	}

	/* .event-data {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 20px;
} */
</style>

<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
		}


		@media only screen and (max-width: 768px) {
			.col-md-6 {
				text-align: justify;
			}

			.text-start {
				text-align: justify !important;
			}
		}

		@media (max-width: 768px){
			.f-wrap{
				flex-wrap: wrap;
			}

			.d-inline{
				display: inline !important;
			}

			.last-col{
				display: inline !important;
				text-align: start;
			}
		}
	</style>

<?php
$special_events = getShowInSplEvnt();
if (empty($special_events)) {
	$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) {
	$sequenceA = isset($a['sequenceId']) && is_numeric($a['sequenceId']) ? $a['sequenceId'] : 0;
	$sequenceB = isset($b['sequenceId']) && is_numeric($b['sequenceId']) ? $b['sequenceId'] : 0;
	return $sequenceA - $sequenceB;
});

$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());
}
?>

<link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/home.css'); ?>">

<main id="main">

	<?php

	// var_dump(phpinfo());
	?>
	<!-- ======= Temple Services Section ======= -->
	<section id="temple-services" class="temple-services" style="background-color: var(--page-wrapper-bg-color)!important; padding: 2px 20px;">
		<div class="responsive-container">
			<div class="row">
				<?php
				// var_dump($partishipent_events);
				if (!empty($partishipent_events)) {

				?>
					<div class="col-md-12" style="">
						<!-- <div class="ticker-wrap">
						<div class="ticker" id="newsTickerContent">
						</div>
					</div> -->

						<div class="event-card " style="background-image: url('<?= base_url('assets/img/bg-card.png') ?>'); padding-left: 0px; padding-right: 0px;">
							<span class="sp"></span>
							<span class="sp"></span>
							<span class="sp"></span>
							<span class="sp"></span>
							<?php
							foreach ($partishipent_events as $i => $evt) {
								if (!isset($evt['image']) || empty($evt['image'])) {
									$evt['image'] = base_url('assets/img/partishipent.jpeg');
								}
							?>
								<h5 class="mb-2 text-center " style="font-size: 32px;font-family: 'Charm', cursive;font-weight: 900;color: #9b0000;"><?= $evt['refDataName'] ?></h5>
								<h4 class="mb-4 text-center " style="font-size: 22px;font-family: 'Charm', cursive;font-weight: 900;border-bottom:1px dotted red;color: #9b0000; line-height: 42px;"><?= date('M d, Y', strtotime($evt['startDate'])) ?> - <?= date('M d, Y', strtotime($evt['endDate'])) ?></h4>
								<div style="text-align: center; font-size: 18px; color: #44233b;">
									Participating Devotees:
									<span style="font-size: 18px!important; display: inline;"><?= number_format(@$evt['resultd'][0]['count'] ?? 0) ?></span>
								</div>
								<div class="event-data" <?= $i + 1 == count($partishipent_events) ? '' : 'style="border-bottom: 2px dotted red;padding-bottom: 20px;"' ?>>
									<?php if (!empty($evt['image'])) { ?>
										<div class="event-item" style="flex: 1;">
											<div style="text-align:center; margin-bottom: 20px;">
												<img src="<?= $evt['image'] ?>" alt="<?= $evt['refDataName'] ?>" style="max-width: 100%; height: 100px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3);">
											</div>
										</div>
									<?php } ?>
									<div class="event-item" style="color: #9b0000;font-style: oblique;font-size: 20px;flex: 2;">

										<!-- <span style="color: #000000;font-style: normal;font-size: 18px!important;">Target Count: <?= number_format($evt['maxCount']) ?></span>
										<span style="color: #000000;font-style: normal;font-size: 18px!important;">Koti Nama Stotra Parayanam : <?= number_format(@$evt['resultd'][0]['kotiCount'] ?? 0) ?></span> -->
										<span  style="color: #44233b;font-style: normal;font-size: 18px!important; text-align: start; display: flex !important; flex-direction: column;">
											<div class="d-inline">

											
												<div class="d-inline" style="white-space: nowrap;">Target Count Parayanam:&nbsp; </div>
												<div class="d-inline">
													<?= number_format('100000') ?><br>
												</div>
											</div>
											<div class="d-inline">

												<div class="d-inline"> Koti Nama Stothra Parayanam: </div>
												<div class="d-inline">
													<?= number_format('100000000') ?>
												</div>
											</div>

										</span>
									</div>
									<!-- <div class="event-item" style="font-size: 18px!important; text-align: start;">
										Participating <br class="d-none d-md-block">Devotees:
										<span style="font-size: 18px!important; display: inline;"><?= number_format(@$evt['resultd'][0]['count'] ?? 0) ?></span>
									</div> -->
									<div class="event-item" style="font-size: 18px!important; text-align: start;flex: 3;">
										<span  style="color: #44233b;font-style: normal;font-size: 18px!important; text-align: start; display: flex !important; flex-direction: column;">
											
											<div class="d-inline">

											
												<div class="d-inline" style="white-space: nowrap;">Current Count Parayanam:&nbsp; </div>
												<div class="d-inline">
													<?= number_format(@$evt['resultd'][0]['sum'] ?? 0) ?> \ <?= number_format($evt['maxCount']) ?><br>
												</div>
											</div>
											<div>

												<div class="d-inline"> Koti Nama Stothra Parayanam: </div>
												<div class="d-inline">
													<?= number_format(@$evt['resultd'][0]['kotiCount'] ?? 0) ?> \ <?= number_format('100000000') ?>
												</div>
											</div>

										</span>
									</div>
									<div class="event-item">
										<?php
										if ((int)@$evt['resultd'][0]['sum'] == 0) {

										?>
											<button class="participate-btn" onclick="checkLoginStatus('partishipent_events','<?= $evt['refDataName'] ?>','<?= $evt['_id'] ?>','<?= $evt['maxCount'] ?>','<?= $evt['startDate'] ?>','<?= $evt['endDate'] ?>')">
												Participate
											</button>
										<?php
										} else if ((int)@$evt['resultd'][0]['sum'] == (int)$evt['maxCount']) {
										?>
											<button class="participate-btn" disabled style="background-color:rgb(115, 115, 115) !important;">
												Participate
											</button>

										<?php
										} else {
										?>
											<button class="participate-btn" onclick="checkLoginStatus('partishipent_events','<?= $evt['refDataName'] ?>','<?= $evt['_id'] ?>','<?= $evt['maxCount'] ?>','<?= $evt['startDate'] ?>','<?= $evt['endDate'] ?>')">
												Participate
											</button>
										<?php
										}
										?>
									</div>
								</div>
							<?php
							}
							?>
						</div>

					</div>
				<?php
				}
				$ClientInfo = getclientInfoById();

				?>

				<!-- new section starts here -->
				<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 class="mb-0 title">
								<?= GetProjectName(); ?> Donations
							</h2>
							<div style="display: flex; justify-content: center;">
								<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 20%; max-width: 20%;">
							</div>
						</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('donations?type=annadanam'); ?>">
												<img src="<?= base_url('assets/img/annadanam.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?type=annadanam'); ?>">Annadanam
														</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="https://www.shangrilausa.org/projects/gau-shala" target="_blank">
												<img src="<?= base_url('assets/img/gaushala.png'); ?>"  />
											</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="https://www.shangrilausa.org/projects/gau-shala" target="_blank"> Vrindavan Dham
														</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?type=utsav'); ?>">
												<img src="<?= base_url('assets/img/utsavvigrahadonation.png') ?>"  />
											</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?type=utsav'); ?>"> Utsav Vigraha Donation
														</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>
				<!-- ṇew section ends here -->

				<div class="col-md-12 mb-4 <?= empty($partishipent_events) ? 'mt-4' : '' ?>">
					<div class="mb-3 p-0" style="display: flex; align-items: center; flex-direction: column;">
						<div style="display: flex; align-items: center; justify-content: center;">
							<h2 class="mb-0 title" style="margin-right: 10px;">
								Today's <?= @$ClientInfo['data'][0]['city'] ?> Panchangam
							</h2>
							<a href="<?= base_url('calendar?q=panchangan') ?>" style="text-decoration: none; color: inherit;">
								<i class="fa fa-eye" style="font-size: 25px; cursor: pointer;"></i>
							</a>
							&nbsp;&nbsp;&nbsp;<a href="javaScript:void(0);" onclick="checkLoginStatus('TodayPanchangamMail')" id="SendPanchangamMailPdf" class="  mx-auto d-block" href="<?= base_url('Home/sendPanchangaPdfMail') ?>" style="color:blue;text-decoration: underline;">Subscribe Now</a>

						</div>
						<div style="display: flex; justify-content: center; margin-top: 5px;">
							<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 30%; max-width: 30%;">
						</div>
					</div>


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

				<div class="col-lg-4 col-sm-6">
					<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 bottomborder card-home-header">SPECIAL&nbsp;EVENTS</h3>

							<div class="list-group list-group-flush px-0 mx-0" style="overflow: auto; height: 440px;">
								<?php
								// var_dump($special_events);
								foreach ($special_events as $key => $val) {

								?>


									<?php if (isset($val['eventLink']) && $val['eventLink'] != '') {
										$eventLink = $val['eventLink'];
									} else {
										// $eventLink = 'javascript:void()';
										$eventLink = base_url('event/' . urlencode($val['refDataName']) . '/' . $val['_id']);
									} ?>


									<a href="<?= $eventLink ?>" style="text-decoration: none!important;">
										<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" style="min-height: 100px; max-height: max-content;">
													<div class="row mx-0">
														<div class="col-md-12 mx-0 px-0">
															<div class="row mx-0 px-0">

																<style type="text/css">
																	.animate-charcter {
																		color: #9b0000;
																	}
																</style>
																<div class="col-md-12 m-0 p-0 text-center">
																	<div class="container">
																		<div class="row">


																			<?php
																			$qr = '';
																			$display = '';
																			if (isset($val['qrCode']) && $val['qrCode'] != '') {

																				$qr = $val['qrCode'];
																				$display = 'd-flex';
																			}
																			?>
																			<div class="col-md-12 text-center <?= $display ? $display : '' ?>">
																				<h3 class="animate-charcter mb-0" style="font-size: 28px;font-family: 'Charm', cursive;font-weight: bolder;"> <?= $val['refDataName'] . "<br>"; ?></h3>

																				<?php if (!empty($qr)) {
																					echo '<img src="' . ApiBaseUrl()['url'] . @$val['qrCode'] . '" height="100">';
																				} ?>


																			</div>
																		</div>
																	</div>
																	<span style="color: #9b0000;font-size: 18px!important;padding: 2px 7px; font-weight:normal;">
																		<?= format_event_date(@$val['startDate'], @$val['endDate'], @$val['startTime'], @$val['endTime']); ?>
																	</span>

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

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

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

																</div>

															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</a>
								<?php 	} ?>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-sm-6">
					<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 bottomborder card-home-header">TEMPLE&nbsp;SCHEDULES</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;
								}
							</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: 404px;padding-top: 1px;">

								<div class="panel-body">
									<div class="tab-content">

										<?php foreach ($daily_schedules as $key => $val) { ?>
											<!-- <?php echo '<pre>';
													var_dump($val);
													echo '</pre>'; ?> -->
											<div class="tab-pane active <?= $val['scheduleType'] ?>">
												<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;">

																				<?php if (!empty($val['linkUrl'])) { ?>
																					<a href="<?= $val['linkUrl'] ?>" target="_blank" style="color:#642318;">
																						<?= $val['refDataName']; ?>
																					</a>
																				<?php } else { ?>
																					<?= $val['refDataName']; ?>
																				<?php } ?>
																				<!-- 👁️ Eye icon shown only if description exists -->
																				<?php if (!empty($val['description'])) { ?>
																					<a href="javascript:void(0);" onclick="showDescriptionModal(`<?= htmlspecialchars($val['description'], ENT_QUOTES) ?>`)" style="text-decoration: none; color: inherit; margin-left: 8px;">
																						<i class="fa fa-eye" style="font-size: 18px; cursor: pointer;"></i>
																					</a>
																				<?php } ?>

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

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

											</div>

										<?php 	} ?>

									</div>
								</div>

								<!-- Description Modal -->
								<!-- Description Modal (Custom without Bootstrap JS) -->
								<div id="descriptionModal" class="custom-modal">
									<div class="custom-modal-content">
										<span class="custom-close">&times;</span>
										<h4 class="modal-title" style="color: #76020f !important;">Description</h4>
										<div id="modalDescriptionContent"></div>
									</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-4 col-sm-6">
					<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 bottomborder card-home-header" style="">UPCOMING EVENTS</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;

								usort($upcoming_events, function ($a, $b) {
									$dateA = DateTime::createFromFormat('m/d/Y', $a['startDate']);
									$dateB = DateTime::createFromFormat('m/d/Y', $b['startDate']);

									// Compare the dates and return an integer
									if ($dateA < $dateB) {
										return -1; // $a comes before $b
									} elseif ($dateA > $dateB) {
										return 1; // $a comes after $b
									} else {
										return 0; // $a and $b are equal
									}
								});
								// echo "<pre>";
								// var_dump($upcoming_events[0]);


								foreach ($upcoming_events as $val) {
									if (strtotime($val['startDate']) >= strtotime(date('m/d/Y')) || strtotime($val['endDate']) >= strtotime(date('m/d/Y'))) {
										if (empty($val['parentService'])) {
											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: 70px;height:70px">
																			</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" style="padding-left: .5rem !important;">
																					<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" style="padding-left: .5rem !important;">
																							<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>
																						</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>

	</section>

	<section class="temple-services pt-0" style="background-color: var(--page-wrapper-bg-color)!important;">

		<div class="responsive-container">
			<div class="row">

				<div class="col-md-6 text">


					<div class="mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
						<h2 class="mb-0 title">
							About <?= camelCase(GetProjectName()); ?>
						</h2>
						<div style="display: flex; justify-content: center;">
							<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 50%; max-width: 50%;">
						</div>
					</div>

					<p class="text-start">Chatwala is envisioned to be a center of excellence for women empowerment and the focus here is to preserve and propagate Sanatana Dharma. Sanatana Dharma is the only one where women are worshipped as goddesses and hence women are placed on a high pedestal. They are worshipped as girls (Bala puja), as kanyas (Kanya puja), as gruhalaxmis (Suvasini Puja)and so on. Our Vedic scriptures and hymns glorify the dignity of women “yatra naryastu pujyante ramante tatra devata” which means “Where women are honoured, there the deities are pleased.” The focus at Chatwala is therefore to involve women in dharmic activities by showcasing their importance.


					</p>
					<!-- <p>The HSEW Temple is a spiritual and cultural hub for the Hindu community in Eastern Washington. </p>
					<p>This temple serves as a place of worship, meditation, and community gathering, providing a serene and sacred space for devotees to connect with their faith and culture.</p> -->
				</div>
				<div class="col-md-6  pt-5">
					<div class="container-fluid">
						<img src="<?= base_url('assets/img/Jai-Sriram.jpg'); ?>" class="img-fluid shadow-lg mb-3 rounded" style="float: left;width:100%;">
					</div>
					<center>
						<a href="<?= base_url('about-temple') ?>" class="in-page-btn loader btn btn-primary my-3" style="background-color:var(--main-color-new-theme) !important;">
							KNOW MORE</a>
						<a href="<?= base_url('about-deities') ?>" class="in-page-btn btn loader btn-primary mx-3 my-3" style="background-color:var(--main-color-new-theme) !important;">
							ABOUT DEITIES</a>
						<!-- <a href="<?= base_url('general-reference') ?>" class="in-page-btn loader btn btn-primary">
							GENERAL INFO</a> -->
					</center>
				</div>
				<div class="col-md-12">

				</div>
			</div>



	</section>

	<!-- ======= Temple Events Section ======= -->


	<section class="temple-services pt-2" style="background-color: var(--page-wrapper-bg-color)!important;">

		<div class="responsive-container">
			<div class="row">
				<div class="col-md-5  pt-5">
					<div class="container-fluid">
						<img src="<?= base_url('assets/img/imgpsh_fullsize_anim.png'); ?>" class="img-fluid shadow-lg mb-3 rounded" style="float: left;width:461PX;">
					</div>

				</div>
				<div class="col-md-7 text">


					<div class="mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
						<h2 class="mb-0 title text-center">
							Siddhashram of North America (Shangri-La)
						</h2>
						<div style="display: flex; justify-content: center;">
							<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 50%; max-width: 50%;">
						</div>
					</div>
					<div style="overflow-x: hidden;overflow-y: auto; max-height: 380px; min-height: 97px;">
						<p class="text-start">Siddheswari Seva Inc, a 501(c)(3) non-profit organization with Tax ID 45-2829888, was formed in the year 2011 with the divine blessings of His Holiness Sri Sri Sri Siddheswarananda Bharati Mahaswamy, the current pontiff of the Sri Siddheswari Peetham, Courtallam, Tamil Nadu, India.</p>

						<p class="text-start">It's a volunteer-based non-profit organization, dedicated to fostering an inclusive culture that promotes, preserves and protects global harmony, universal peace and brotherhood for all humanity (Sanatana Dharma). Its mission includes but is not limited to promoting virtues such as honesty, refraining from injuring living beings, purity, goodwill, mercy, patience, forbearance, self-restraint, generosity, protecting the environment and asceticism.</p>

						<p class="text-start">Siddhashram of North America (Shangri-La) and Chatwala are two branches of Sri Siddheswari Seva Inc. having separate physical locations to reach out to larger communities with their own mission statements.</p>
					</div>
					<div style="display: flex; justify-content: center;">


						<!-- <a href="https://www.shangrilausa.org/" class="animated-button1" target="_blank" style="float: right!important;border: 1px solid white;">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							VIEW MORE <i class="fa fa-paper-plane"></i>
						</a> -->
						<a href="https://www.shangrilausa.org/" class="in-page-btn btn btn-primary my-3" target="_blank" style="background-color:var(--main-color-new-theme) !important;">
							VIEW MORE <i class="fa fa-paper-plane"></i></a>


					</div>
				</div>


			</div>



	</section>
	<!--===========================-->

	<!-- End Temple Services Section -->


	<!-- About Founder Open-->

	<!-- 	<section class="temple-services pt-0" style="background-color: var(--page-wrapper-bg-color)!important;">

		<div class="responsive-container">
			<div class="row">
				<div class="col-md-6  pt-5">

					<div class="container-fluid">
						<img src="<?= base_url('assets/img/founder-of-srihanuman-temple.jpg'); ?>" class="img-fluid shadow-lg mb-3 rounded" style="float: left;width:90%;">
					</div>
				</div>


				<div class="col-md-6 text">


					<div class="mb-3  p-0" style="display: flex; align-items: center; flex-direction: column;">
						<h2 class="mb-0 title">
							About Temple Founder
						</h2>
						<div style="display: flex; justify-content: center;">
							<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 50%; max-width: 50%;">
						</div>
					</div>

					<p class="text-start" style="text-align: left;color: black!important; font-weight: 400; line-height: 2;">Welcome to the Hindu Society of Eastern Washington (HSEW) Temple located at 2100 Bombing Range Rd, West Richland, WA 99353.</p>


					<p>The HSEW Temple is a spiritual and cultural hub for the Hindu community in Eastern Washington.</p>

					<p>This temple serves as a place of worship, meditation, and community gathering, providing a serene and sacred space for devotees to connect with their faith and culture.
					</p>
					<center>
						<a href="<?= base_url('about-temple-founders') ?>" class="in-page-btn loader btn btn-primary my-3">
							KNOW MORE</a>
					</center>
				</div>

				<div class="col-md-12">

				</div>
			</div>
	</section> -->

	<!-- About Founders Section Close -->

	<!-- <section class="m-0 p-0 temple-services" style="background-image: url('<?= base_url('assets/img/bg-banner2.jpg') ?>');background-size: cover; background-attachment: fixed;">
		<div style="padding: 70px 0px; background-color: #000000c9;">
			<div class="responsive-container">
				<div class="row">
					<div class="col-md-6 shadow-lg">
						<img src="<?= base_url('assets/img/bg-hanuman-ji.png') ?>" class="img-fluid" style="border:2px solid white;border-radius: 5px;">
					</div>
					<div class="col-md-6 px-5 temple-improvements-heading" style="font-family: 'Bree Serif', serif !important; font-weight: normal!important;">
						<p class="temple-improvements-p">Jai Sri Ram ! Jai Hanuman !</p>
						<h2 class="text-white temple-improvements-subheading"><?= PROJECT_NAME; ?> <br>Temple Improvements Project</h2>
						<a href="<?= base_url('donate-for-temple-improvements') ?>" class="btn loader mt-4 shadow temple-improvements-btn">Donate</a>
					</div>
				</div>
			</div>
		</div>
	</section> -->

	<!-- ======= Temple Services Section ======= -->

	<!-- <section style="background:#fff5f5;">
		<div class="container">
			<center>
				<h2 style="font-weight:bolder!important;font-size: 35px!important;color: var(--orange) !important;">Membership <br><img src="<?= base_url('assets/img/border.png') ?>" width="15%" class="img-fluid"></h2>
			
			
					<a href="<?= base_url('membership-form') ?>" class="animated-button1 loader" style="border: 1px solid white;-webkit-box-shadow: 0 0;box-shadow: 0 0;">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						Click Here To Continue <i class="fa fa-paper-plane"></i>
					</a>
				
			</center>


		</div>
	</section> -->



	<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 class="mb-0 title">
					<?= GetProjectName(); ?> Services
				</h2>
				<div style="display: flex; justify-content: center;">
					<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid" style="width: 20%; max-width: 20%;">
				</div>
			</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('services'); ?>">
									<img src="<?= base_url('assets/img/img2.jpg'); ?>" />
								</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('services'); ?>">Temple Services
											</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-1677530346267-825191549.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'); ?>"> Donations
											</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('all-upcoming-events'); ?>">
									<img src="<?= base_url('assets/img/Jai-Sriram.jpg') ?>" />
								</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('all-upcoming-events'); ?>"> Upcoming Events
											</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>
	<!-- End Temple Services Section -->



	<!-- ======= Temple Events Section ======= -->
	<!-- <section style="background-color: var(--menu-bg) !important;">
		<div class="container">
			<center>
				<h2 style="font-weight:bolder!important;font-size: 35px!important;color: #fefefe!important;">About Hindu School <br><img src="<?= base_url('assets/img/border.png') ?>" width="15%" class="img-fluid"></h2>
			</center>


			<div class="list-group list-group-flush px-0 mx-0" style="overflow: auto; max-height: 400px; min-height: 97px;">

				<div class="row">
					<div class="col-md-6">
						<img src="<?= base_url('assets/img/formimg.jpg') ?>" alt="" style="width: -webkit-fill-available;">
					</div>
					<div class="col-md-6">
						<h3 class="text-light mt-1"> <b>HSKY - School Registration 2024-2025</b></h3>
						<p class="text-p">Hindu School of Kentucky(HSKY) registration for the year 2024-2025 is now open.</p>

						<p class="text-p">For any questions, please reach out to </p>

						<p class="text-p">Anuya Kulkarni - 502 229 1266</p>

					</div>
				</div>

			</div>


			<div style="display: flex; justify-content: flex-end;">


				<a href="https://Chatwala.vaaptech.com/hskylou.org" class="animated-button1 loader" style="float: right!important;border: 1px solid white;">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					VIEW MORE <i class="fa fa-paper-plane"></i>
				</a>



			</div>


		</div>
	</section> -->



	<!-- ======= community Section ======= -->
	<section id="community" class="community p-0 m-0" style="background-image: url(<?= base_url('assets/img/elegant-background-with-mandala.png'); ?>);background-size: auto;">
		<div class="container-fluid p-0 m-0">
			<div class="row text-center p-0 m-0">
				<!-- <div class="col-md-4 col-lg-4 p-0 m-0" style="background-image: url('<?= base_url('assets/img/pada.jpg'); ?>');background-size: cover;background-repeat: no-repeat;">

										<h4 class="title2">Donate</h4>
										<span class="mt-4 community-sec-desc">
											The <?= GetProjectName(); ?> is fully dedicated in its mission of providing Hindu religious services to its devotee community.
										</span><br>
										<a href="<?= base_url('donations') ?>" class="btn font-weight-bold loader btn-outline-light mt-4">DONATE</a>
									</div>

								</div> -->
				<div class="col-md-6 col-lg-6 p-0 m-0" style="background-image: url('<?= base_url('assets/img/image-1715237726686-31953687.png'); ?>');background-size: cover;background-repeat: no-repeat;">
					<div class=" text-white community-div" style="">
						<!-- <h4 class="title" style="color:#ffb150!important">Expanding your reach</h4> -->
						<h2 class="title2">Volunteer Registration</h2>
						<span class="mt-4 community-sec-desc">
							We are excited to have you join us as a volunteer at the Chatwala. Please complete the form below to register as a volunteer. Your participation is highly appreciated!
						</span><br>
						<center>
							<a href="<?= base_url('volunteer') ?>" class="in-page-btn btn loader btn-primary mx-3 my-3">Register</a>
						</center>
					</div>
				</div>
				<div class="bg-image col-md-6 col-lg-6 p-0 m-0" style="background-image: url('<?= base_url('assets/img/10.jpg'); ?>');background-size: cover;background-repeat: no-repeat;">
					<div class=" text-white community-div2" style="">
						<!-- <h4 class="title" style="color:#ffb150!important">Subscribe on our newsletter</h4> -->
						<h2 class="title2">Subscribe</h2>
						<span class="mt-4 community-sec-desc">
							To learn more about Chatwala monthly events and special occasions, please subscribe to the Chatwala mailing list.
						</span><br>
						<center>
							<a href="javaScript:void(0)" onclick="subscribeNewsletterCheckLogin()" class="in-page-btn btn loader btn-primary mx-3 my-3">Subscribe</a>
						</center>
					</div>
				</div>
			</div>

		</div>
	</section>
</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">
	// function openModal(id, serviceName, serviceAmount, serviceTypes, serviceCategory, deity, daytype, startDate, startTime, image, description) {

	// 	$("#UpcomingEventId").text(id);
	// 	$("#UpcomingEventDescription").text(description);
	// 	$("#UpcomingEventImage").text(image);
	// 	$("#UpcomingEventName").text(serviceName);
	// 	$("#UpcomingEventAmount").text('$ '+parseFloat(serviceAmount)+'.00');
	// 	$("#UpcomingEventAmountWithoutDollarSign").text(parseFloat(serviceAmount));
	// 	$("#UpcomingEventServiceTypes").text(serviceTypes);
	// 	$("#UpcomingEventServiceCategory").text(serviceCategory);


	// 	$("#UpcomingEventDeity").text(deity);
	// 	$("#UpcomingStartDate").text(startDate);
	// 	$("#UpcomingStartTime").text(startTime);
	// 	$("#UpcomingDayType").text(daytype);

	// 	$('#exampleModal').modal('show');

	// }

	// function AddEventToCart(){


	// 	var totalPrice = 0;

	// 	var ids = [];
	// 	var qty = [];
	// 	var ctg = [];
	// 	var serviceTypes = [];
	// 	var serviceName = [];
	// 	var startDate = [];
	// 	var startTime = [];
	// 	var serviceAmount = [];
	// 	var description = [];
	// 	var image = [];
	// 	var cart_ctg = [];
	// 	var cartCount = 0;


	// 	$('input[name="services_id[]"]:checked').each(function() {
	// 		id = $(this).attr('data-id');  

	// 		startDate.push($(this).attr('data-start-time')); 
	// 		startTime.push($(this).attr('data-start-date')); 


	// 		ctg.push($(this).attr('data-category')); 
	// 		serviceTypes.push($(this).attr('data-service-type')); 
	// 		serviceName.push($(this).attr('data-service-name')); 
	// 		image.push($(this).attr('data-image'));


	// 		description.push($(this).attr('data-description').replace(/['"`]/g, '')); 
	// 		cart_ctg.push($(this).attr('cart_category')); 
	// 		serviceAmount.push($(this).attr('data-price')); 
	// 		ids.push($(this).attr('data-id')); 

	// 		qty.push(1);  


	// 		cartCount = ids.length;
	// 		$(".cart-count").text(cartCount);

	// 		$.ajax({
	// 			type: "POST", 
	// 			url: "<?= base_url('DailySchedules/addCart'); ?>", 
	// 			dataType: "json",
	// 			data: {ids: ids, totalPrice:totalPrice, qty: qty, ctg: ctg, serviceTypes: serviceTypes, serviceName: serviceName, startDate: startDate, startTime: startTime, serviceAmount: serviceAmount, image: image, description: description, cart_ctg: cart_ctg},


	// 			success: function(result){

	// 				;
	// 				console.log(result);
	// 				$(".daily-schedule-close-btn").click();


	// 			}
	// 		});
	// 	});



	// }

	// Open Modal


	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;

		// We are using this Api (https://api.wheretheiss.at/v1/coordinates/latitude,Longitude) For get tzone by using Lat & Log.//

		$.ajax({
			url: "https://api.wheretheiss.at/v1/coordinates/" + Latitude + "," + Longitude,
			//type: "POST",
			//dataType: "json",
			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);
			}
		});
	}




	function GetUpcomingEventByID(id, category, serviceType, serviceName, daytype, startDate, endDate, startTime, endTime, serviceAmount) {


		var poojalist = $("#hidden_eventdetails" + id).text();

		var serviceID = id;
		var category = category;
		var serviceType = serviceType;
		var serviceName = serviceName;
		var daytype = daytype;
		var startDate = startDate;
		var endDate = endDate;
		var startTime = startTime;
		var endTime = endTime;
		var serviceAmount = serviceAmount;


		var html = '';
		if (serviceName != '') {
			html += '<tr><th>Service Name</th><td>' + serviceName + '</td></tr>';
		}
		if (daytype != '') {
			html += '<tr><th>Day</th><td>' + daytype + '</td></tr>';
		}
		if (startDate != '') {
			html += '<tr><th>Start Date</th><td>' + startDate + ' - ' + endDate + '</td></tr>';
		}
		if (startTime != '') {
			html += '<tr><th>Time</th><td>' + startTime + ' - ' + endTime + '</td></tr>'
		}
		if (serviceAmount > 0) {
			html += '<tr><th>Service Amount</th><td>$' + (serviceAmount / 1).toFixed(2) + '</td></tr>'
		}

		if (poojalist != '') {
			html += '<tr><th>Description</th><td><pre style="font-size: 16px;font-weight: 600;">' + poojalist.trim() + '</pre></td></tr>'
		}
		$("#eventdetails").html(html);




		$("#booknowUpcomingEvent").html('<button class="btn btn-primary" style="float: right;background: #910301; border: 1px solid white;" onclick="checkLoginStatus(' + "'" + serviceAmount + "'" + ', ' + "'" + serviceName + "'" + ', ' + "'" + serviceID + "'" + ', ' + "'" + category + "'" + ', ' + "'" + serviceType + "'" + ', ' + "'" + daytype + "'" + ', ' + "'" + startDate + "'" + ', ' + "'" + startTime + "'" + ')">BOOK NOW</button>');


	}

	// function showDescriptionModal(description) {
	//     document.getElementById('modalDescriptionContent').innerHTML = description;
	//     $('#descriptionModal').modal('show');
	// }
</script>

<script>
	function showDescriptionModal(description) {
		document.getElementById("modalDescriptionContent").innerHTML = description;
		document.getElementById("descriptionModal").style.display = "block";
	}

	document.addEventListener('DOMContentLoaded', function() {
		const closeBtn = document.querySelector(".custom-close");
		const modal = document.getElementById("descriptionModal");

		// Close on X click
		if (closeBtn) {
			closeBtn.addEventListener("click", function() {
				modal.style.display = "none";
			});
		}

		// Close on outside click
		window.addEventListener("click", function(event) {
			if (event.target === modal) {
				modal.style.display = "none";
			}
		});
	});
</script>

<script>
	function loadFlashNews() {
		$.ajax({
			url: 'https://aspgen.vaaptech.com:9000/api/puja/getParticipateEventList',
			type: 'POST',
			contentType: 'application/json',
			data: JSON.stringify({
				"dataJson": {},
				"clientId": "663a5c489f155e1f2e7d0c70"
			}),
			success: function(response) {
				let tickerContent = '';
				if (response && response.data) {
					response.data.forEach(function(item) {
						if (item.refDataName && item.resultd && item.resultd[0]) {
							const sum = item.resultd[0].sum || 0;
							tickerContent += `
                            <div class="ticker-item">
                                🔸 ${item.refDataName} (Count: ${sum})
                                <button class="participate-btn" onclick="handleParticipate('${item._id}')">
                                    Participate
                                </button>
                            </div>`;
						}
					});
				}
				$('#newsTickerContent').html(tickerContent);
			},
			error: function(xhr, status, error) {
				console.error('Error loading flash news:', error);
			}
		});
	}

	// ✅ Function to check login status via AJAX
	function handleParticipate(eventId) {
		$.ajax({
			url: '<?= base_url("Home/checkLoginStatus") ?>',
			type: 'GET',
			success: function(response) {
				if (response == 1) {
					// Logged in: redirect to participate page
					// window.location.href = '<?= base_url("Admin/Dashboard/") ?>'
				} else {
					// Not logged in: open login modal and set redirect after login
					// sessionStorage.setItem('redirect_after_login', '<?= base_url("dashboard/participate/") ?>' + eventId);
					// $('#loginModal').modal('show');
					openLoginModal('Partisipent')
				}
			},
			error: function(xhr, status, error) {
				console.error('Login check failed:', error);
			}
		});
	}

	// ✅ After successful login, handle redirect
	$(document).ready(function() {
		loadFlashNews();
		setInterval(loadFlashNews, 300000);

		const redirectUrl = sessionStorage.getItem('redirect_after_login');
		if (redirectUrl && window.location.pathname.includes('login-success')) {
			sessionStorage.removeItem('redirect_after_login');
			window.location.href = redirectUrl;
		}
	});
</script>




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