<body>
	<?php
	$special_events = getShowInSplEvnt();
	?>
	<style type="text/css">
		#topbar {
			background-image: url('<?= base_url('assets/img/hsew-header-bg.png') ?>');
			padding: 5px 0;
			font-size: 14px;
			color: white;
			border-top: 5px solid var(--main-color-new-theme);
		}

		#topbar .topbar-text-color {
			color: white !important;
		}

		/* Navbar Links */
		.navbar a,
		.navbar a:focus {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 15px;
			font-size: 13px;
			color: #ffffff;
			text-transform: uppercase;
			transition: 0.3s;
		}

		.navbar a:hover,
		.navbar .active,
		.navbar .active:focus,
		.navbar li:hover>a {
			color: #c00000;
			background: white;
		}

		/* Logo */
		#logo-2 {
			float: right;
			height: 150px;
			margin: 8px 0;
		}

		/* Headings */
		.head-line {
			color: #a92828 !important;
			font-weight: 500;
		}

		.head-line2 {
			color: #a92828 !important;
			font-size: 1.125em !important;
			font-weight: 600;
			font-style: normal;
		}

		/* Flexbox for Topbar */
		#topbar .row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin: 0;
		}

		#topbar .contact-info i,
		#topbar .contact-info a {
			color: white;
		}

		/* Buttons */
		#topbar .btn {
			background: linear-gradient(-45deg, #ee7752, #e73c7e);
			color: white;
			border-radius: 4px;
			text-decoration: none;
			font-size: 0.9em;
			padding: 5px 10px;
			margin-right: 10px;
			text-align: center;
		}

		/* RESPONSIVE STYLES */

		/* For Tablets and Smaller Desktops (<= 992px) */
		@media (max-width: 992px) {
			#topbar {
				text-align: center;
			}

			#topbar .row {
				flex-direction: column;
			}

			#topbar .col-md-12,
			#topbar .col-md-4,
			#topbar .col-lg-7 {
				width: 100%;
				text-align: center;
				/* margin-bottom: 10px; */
			}

			#topbar .btn {
				width: 50%;
				margin: 5px auto;
			}

			#topbar #logo-2 {
				height: 100px;
			}

			.head-line {
				font-size: 1.5em;
			}

			.head-line2 {
				font-size: 1em;
			}
		}

		/* For Mobile Devices (<= 768px) */
		@media (max-width: 768px) {
			#topbar .row {
				flex-direction: column;
				text-align: center;
			}

			#topbar .btn {
				width: 80%;
				margin-bottom: 8px;
			}

			.head-line {
				font-size: 1.3em;
			}

			.head-line2 {
				font-size: 0.9em;
			}

			#topbar img {
				max-width: 40%;
				height: auto;
			}
		}

		/* For Smaller Mobile Devices (<= 480px) */
		@media (max-width: 480px) {
			#topbar .btn {
				width: 90%;
			}

			.head-line {
				font-size: 1.1em;
			}

			.head-line2 {
				font-size: 0.8em;
			}

			#topbar img {
				max-width: 40%;
				height: auto;
			}
		}

		@media (max-width: 1360px) and (min-width: 768px) {
			.head-line {
				/* text-align: left !important; */
				margin-top: unset !important;
				/* Remove top margin */
			}
		}

		@media (max-width: 1600px) and (min-width: 993px) {
			.contact-info-section {
				font-size: unset !important;
			}
		}


		@media screen and (max-width: 992px) and (min-width: 300px) {
			.contact-info-section {
				border-bottom-left-radius: unset !important;
				font-size: unset !important;

			}

			.col-md-4 {
				margin-top: unset !important;
			}

			.head-line {
				font-size: 26px !important;
				text-align: center !important;
				margin-left: unset;
			}

			.topbar-text-color {
				margin-right: unset !important;
			}


		}

		@media only screen and (max-width: 320px) {

			.donation-tab a,
			.service-tab a {
				width: 155px !important;
				font-size: 12px !important;
				padding: 4px 15px !important;/
			}

			.service-tab {
				margin-right: 10px;
				/* Adjust margin for service-tab */
			}
		}

		@media screen and (max-width: 1437px) and (min-width: 1040px) {

			.phone-tab a,
			.email-tab a {
				font-size: unset !important;
			}
		}

		@media screen and (max-width: 992px) and (min-width: 300px) {
			.head-line {
				text-align: center !important;
				/* Center the text */
				margin: 0 auto !important;
				/* Auto margin for centering */
				letter-spacing: 5px !important;
				/* Adjust for better fit */
				word-spacing: 1px !important;
				font-size: 2.5em !important;
				/* Slightly reduce size for small screens */
				line-height: 1.3 !important;
			}

			.head-line span {
				text-align: center !important;
				display: block;
			}
		}

		@media screen and (max-width: 767px) {
			#imgContanr .row {
				/* flex-direction: row; */
			}
		}

		@media screen and (max-width: 992px) {
			#topbar .row {
				/* flex-direction: row; */
			}
		}

		@media only screen and (max-width: 320px) {
			#imgContanr .row {
				/* flex-direction: row; */
			}
		}

		@media screen and (max-width: 992px) {
			#imgContanr .row {
				/* flex-direction: row; */
			}
		}

		@media only screen and (max-width: 1233px) and (min-width: 1176px) {
			.service-tab a {
				/* width: 236px !important; */
			}
		}

		@media screen and (max-width: 1177px) and (min-width: 993px) {
			.service-tab a {
				/* width: 145px !important; */
				width: 199px !important;
			}

			.signin-tab a {
				width: 159px !important;
				/* width: 258px !important; */
			}
		}

		@media screen and (max-width: 1600px) and (min-width: 1070px) {
			h2.head-line {
				/* margin-left: -32px !important; */
			}
		}


		@media screen and (max-width: 992px) {

			#imgContanr .row {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
			}


			#imgContanr .col-md-4 {
				flex: 0 0 auto;
				width: auto;
				/* margin-right: 10px; */
			}

			#logo-1 {
				height: 50px !important;
			}


			#imgContanr .col-md-8 {
				flex-grow: 1;
				text-align: left;
			}


			.head-line {
				font-size: 1.8em !important;
			}

			.head-line2 {
				font-size: 1em !important;
			}
		}

		@media screen and (max-width: 992px) and (min-width: 320px) {
			.head-line {
				/* margin-left: -261px !important; */
			}

			#logo-1 {
				height: 81px !important;
				width: 87px;
				margin-top: 12px;
				/* margin-bottom: 11px; */

			}
		}

		@media screen and (max-width: 769px) {
			#imgContanr .col-md-4 {
				flex: 0 0 auto;
				width: 100%;
				/* margin-right: 10px; */
			}
		}

		@media screen and (max-width: 992px) and (min-width: 769px) {
			.head-line {
				/* margin-left: -123px !important; */
			}

			#logo-1 {
				height: 90px !important;
				width: 100px;
				margin-left: 6px !important;
				margin-top: 12px;
			}
		}

		@media screen and (max-width: 768px) and (min-width: 500px) {
			.head-line {
				/* margin-left: -319px !important; */
			}


		}

		@media screen and (max-width: 992px) and (min-width: 250px) {
			.contact-row {
				display: unset !important;
			}
		}

		@media screen and (max-width: 992px) and (min-width: 250px) {
			.email-tab {
				font-size: 17px !important;
			}
		}

		@media screen and (max-width: 992px) and (min-width: 250px) {
			.phone-tab {
				font-size: 16px !important;
			}
		}

		@media screen and (max-width: 2760px) and (min-width: 1607px) {
			.address-section {
				/* margin-top: unset !important; */
			}

			.contact-info-section {
				font-size: 18px !important;
			}
		}

		@media screen and (max-width: 324px) {

			.head-line {
				font-size: 1.4em !important;
			}
		}


		/* End css */
	</style>

<?php
$partishipent_events =  getPartisipentEvnt();
?>
	<?php
	$header_data = getWebSyncsData('Header Settings', 'headerSettings', '');
	if ($this->session->userdata('logged_in') == 1 && $this->session->userdata('userType') == 'Devotee') {
		$isLogin = true;
	} else {
		$isLogin = false;
	}
	?>

	<section id="topbar">
		<div class="row">
			<!-- Left section: Logo and Heading -->
			<div class="col-md-12 col-lg-8" id="imgContanr">
				<div class="row">
					<!-- Logo -->
					<div class="col-sm-4 col-md-4 text-left">

						<a href="<?= base_url() ?>" style="display: flex; justify-content: center; margin-top: -2px;">
							<img id="logo-1" src="<?= ApiBaseUrl()['url'] . @$header_data[0]['leftImage'] ?>" class="img-fluid mx-auto d-block">
						</a>
					</div>

					<!-- Heading -->
					<div class="col-sm-8 col-md-8 text-center">
						<div>
							<?php if (isset($header_data[0]['refDataName']) && !empty($header_data[0]['refDataName'])) {
								$refDataName = explode(" ", $header_data[0]['refDataName']);
							?>
								<h2 class="head-line m-0 p-0 topbar-text-color"
									style="font-weight: bold!important; font-size: 2.89em; color: var(--main-color-new-theme) !important;font-family: 'Vollkorn', serif; letter-spacing: 9px; line-height: 1.2;">

									<!-- Combined Header Name in a Single Line -->
									<span style="display: inline; text-align: left; font-size: 1em !important; font-family: auto; letter-spacing: normal;">
										<?= $refDataName[0] . " " . $refDataName[1] ?>
									</span>
									<span style="display: inline; text-align: left; font-size: 1em !important; font-family: auto; margin-left: 2px; letter-spacing: normal;">
										<?= $refDataName[2] ?>
									</span>
								</h2>
							<?php } ?>

							<?php if (isset($header_data[0]['subHeading']) && !empty($header_data[0]['subHeading'])) { ?>

							<?php } ?>
						</div>
					</div>
				</div>
			</div>

			<!-- Right section: Address, Email, Phone, Donation, and Service -->
			<div class="col-md-4 text-right" style="height: 100%; display: flex; flex-direction: column;margin-top: 0px; padding: 0px;">





				<!-- Horizontal Border Between Sections -->
				<hr style="border: 0; border-top: 2px solid #fff; margin: 0;">

				<div class="contact-info-section" style="flex: 1; font-size: 22px; text-align: center; width: 100%;">
					<div class="tabs" style="display: flex; justify-content: center; align-items: center;">

						<!-- Service Tab (Request for Puja) -->
						<div class="service-tab animated-button4" style="flex: none; width: 179px; position: relative;">
							<span></span><span></span><span></span><span></span>
							<a class="topbar-text-color"
								href="<?= base_url('services') ?>"
								style="font-size: revert !important; color: white !important; padding: 6px 12px; border-radius: 4px 0 0 4px; text-decoration: none; display: inline-block; width: 188px; text-align: center;margin-left: -10px; position: relative; z-index: 1;">
								<i class="fa topbar-text-color"></i> Request for Puja
							</a>
						</div>

						<!-- Vertical Divider -->
						<div style="border-right: 1.7px solid var(--main-color-new-theme-light); margin: -8px 1px; align-self: stretch; margin-top: 0px; height: 35px;"></div>

						<!-- Sign-In / My Account Tab -->
						<div class="signin-tab animated-button4" style="flex: none; position: relative;">
							<span></span><span></span><span></span><span></span>
							<?php if ($this->session->userdata('logged_in') == 1) { ?>
								<a class="topbar-text-color"
									href="<?= base_url('Admin/Dashboard') ?>"
									style="font-size: revert !important; color: white !important; padding: 6px 12px; border-radius: 0 4px 4px 0; text-decoration: none; display: inline-block; width: 188px; text-align: center; position: relative; z-index: 1;">
									<i class="fa topbar-text-color"></i> Devotee Portal
								</a>
							<?php } else { ?>
								<a class="topbar-text-color"
									href="javaScript:void(0);"
									onclick="CartCheckLoginTabFacility()"
									style="font-size: revert !important; color: white !important; padding: 6px 12px; border-radius: 0 4px 4px 0; text-decoration: none; display: inline-block; width: 188px; text-align: center; position: relative; z-index: 1;">
									<i class="fa topbar-text-color"></i> Devotee Portal
								</a>
							<?php } ?>
						</div>

					</div>
				</div>

				<div class="row">
					<?php
					if (!empty($partishipent_events)) {
						$pevent = $partishipent_events[0];
					?>
						<div class="col-md-12" style="text-align: center; padding-top: 6px;">
						<div class="animated-border" style="flex: none; position: relative;font-size: 21px;font-family: 'Charm', cursive;font-weight: bolder;">
								<span></span><span></span><span></span><span></span>
								<a class="topbar-text-color flashy-text" href="javaScript:void(0);" onclick="CartCheckLoginTabFacility('partishipent_events','<?= $pevent['refDataName'] ?>','<?= $pevent['_id'] ?>','<?= $pevent['maxCount'] ?>','<?= $pevent['startDate'] ?>','<?= $pevent['endDate'] ?>')" style="font-size: revert !important; color: var(--main-color-new-theme) !important; padding: 6px 12px; border-radius: 0 4px 4px 0; text-decoration: none; display: inline-block;text-align: center; position: relative; z-index: 1;">
									<i class="fa topbar-text-color"></i><?= $pevent['refDataName'] ?>&nbsp;Count - <?= number_format(@$pevent['resultd'][0]['sum'] ?? 0) ?><br>
									Koti Nama Stotra Parayanam : <?= number_format(@$pevent['resultd'][0]['kotiCount'] ?? 0) ?>
								</a>
							</div>
						</div>
					<?php
					}
					?>
				</div>



			</div>
		</div>

	</section>

	<!-- Main Content Section with Gradient -->
	<!-- <div style="background: linear-gradient(to top, #93291E, #ED213A);">
		<div class="row">
			<div class="col-md-12" style="text-align: right; padding-top: 6px;">
				<a href="<?php echo base_url('services'); ?>" class="btn btn-warning btn-sm mx-2" style="color: white; background-color: #B02135; border-radius: 5px!important; display: none;">
					Request For Puja Service
				</a>

				<?php if ($isLogin == true) { ?>
					<a href="<?= base_url('Admin/Dashboard') ?>" class="btn btn-info btn-sm mx-2" style="color: white; background-color: #B02135; border-radius: 5px!important; display: none;">
						Welcome! <?= $this->session->userdata('refDataName'); ?>
					</a>

				<?php } else { ?>
					<a href="javaScript:void(0)" onclick="CartCheckLoginTabFacility();" class="btn btn-info btn-sm" style="color: white; background-color: #B02135; border-radius: 5px!important; display: none;">
						Devotee Portal
					</a>
				<?php } ?>

				<style type="text/css">
					.modal-backdrop {
						opacity: 0.5 !important;
					}
				</style>
				<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
					<div class="modal-dialog modal-md">
						<div class="modal-content">
							<div class="modal-body">
								<p style="font-size: 18px;" class="px-5 text-center">Alert! Are you sure you want to sign off from your self-service devotee portal.</p>
							</div>
							<div class="modal-footer" style="display: flex; justify-content: space-evenly; padding: 10px 85px;">
								<div class="actionsBtns">
									<a href="<?= base_url('logout'); ?>" onclick="logoutButton()" class="btn btn-danger mx-4">Logout</a>
									<button class="btn btn-primary" data-dismiss="modal">Cancel</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div> -->


	<script type="text/javascript">
		// Function to clear localStorage before logout
		function clearLocalStorageBeforeLogout() {
			localStorage.removeItem('alertShown');
		}
	</script>