<style type="text/css">
	.modalCloseBtn {
		position: absolute;
		left: 91%;
	}

	.modatTitle {
		display: block;
		margin-left: auto;
		margin-right: auto;
		font-size: 16px;
		font-family: 'Open Sans', sans-serif !important;
		font-weight: 800;
		color: #7D1456;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	input[type=number] {
		-moz-appearance: textfield;
	}

	.h5-title {
		font-size: 16px;
		font-family: 'Open Sans', sans-serif !important;
		font-weight: 800;
		color: #B02135;
	}

	.modal-header {
		border-top: 6px solid #910301;
	}

	#sinupformid .form-control {
		margin: auto !important;
	}
</style>
<?php
$header_data = getWebSyncsData('Header Settings', 'headerSettings', '');
$modalClbtn = 'modalClbtn';
if ($this->session->userdata('logged_in') == 1) {
	$modalClbtn = '';
}
?>
<style>
	.spinner-border {
		--bs-spinner-width: 20px !important;
		--bs-spinner-height: 20px !important;
		--bs-spinner-vertical-align: -0.125em;
		--bs-spinner-border-width: 0.25em;
		--bs-spinner-animation-speed: 0.75s;
		--bs-spinner-animation-name: spinner-border;
		border: var(--bs-spinner-border-width) solid currentcolor;
		border-right-color: transparent;
	}
</style>
<!-- Registration Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content" style="background-image:url(<?= base_url('assets/img/login-backgound.png'); ?>);">
			<form action="#" method="post" id="sinupformid" onsubmit="return SignupUserLogin('<?= base_url('signuplogin') ?>')" autocomplete="off">
				<div class="modal-header text-center d-block">
					<h5 class="modal-title modatTitle" style="">SIGN UP</h5>
					<img src="<?= base_url('assets/img/border.png'); ?>" class="img-fluid mx-auto" style="width: 35%; max-width: 70%;">
					<button type="button" class="btn-close modalCloseBtn <?= $modalClbtn; ?>" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>

				<div class="modal-body p-0">
					<div class="container">
						<img src="<?= $header_data[0]['leftImage'] ? ApiBaseUrl()['url'] . '/' . @$header_data[0]['leftImage'] : base_url('assets/img/logo.png') ?>" class="img-fluid my-3" height="120px" width="150px" style="display: block;margin-left: auto;margin-right: auto;">
						<div class="row" style="text-align:center;">
							<div class="col-md-12">

								<div class="hs-toast-wrapper mb-3" id="signup-error-flashmsg"></div>
								<div class="hs-toast-wrapper mb-3" id="signup-success-flashmsg"></div>
								<p id="signup-error-flashmsg1" class="text-center" style="color: red!important;font-size: 18px !important;font-weight: 600;">Please verify your email id before you Register</p>
								<!-- <span id="signup-success-flashmsg" class="text-center" style="color: green;"></span> -->
							</div>
						</div>
						<div class="row d-flex justify-content-center align-items-center">
							<div class="col-xl-12">
								<div class="row g-0">
									<div class="col-xl-12">
										<style>
											.form-outline {
												position: relative;
											}

											.form-outline .form-control {
												/* padding-right: 50px; */
												/* Adjust this value to fit the button */
											}

											#verifySignupEmailbtn {
												position: absolute;
												right: 0px;
												top: 72%;
												transform: translateY(-50%);
												padding: 7px 10px;
												border: none;
												background-color: #000d8c;
												color: white;
												border-radius: 0;
												cursor: pointer;
											}

											.form-label {
												margin-bottom: 0px !important;
											}
										</style>
										<div class="row">
											<div class="col-md-12 mb-4">
												<div class="form-outline" style="position: relative;">
													<label class="form-label" for="signupEmail">Email - Head of Household <span class="text-danger">*</span></label>
													<input type="email" id="signupEmail" name="email" class="form-control" style="padding-right: 50px;" autocomplete="off" placeholder="Enter Email - Head of Household" oninput="this.value = this.value.toLowerCase();" />
													<!-- <button class="" id="verifySignupEmailbtn" type="button" data-toggle="modal" data-target="#signUpOTP">Verify</button> -->
													<button class="" id="verifySignupEmailbtn" type="button" onclick="sendMemberAuthCode('<?= base_url('send-member-auth-code') ?>')">VERIFY</button>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12 mb-4">
												<div class="form-outline">
													<label class="form-label" for="fname">First Name - Head of Household <span class="text-danger">*</span></label>
													<input type="text" id="fname" name="fname" class="form-control" autocomplete="off" placeholder="Enter First Name - Head of Household" />
												</div>
											</div>
											<div class="col-md-12 mb-4">
												<div class="form-outline">
													<label class="form-label" for="lname">Last Name - Head of Household <span class="text-danger">*</span></label>
													<input type="text" id="lname" name="lname" class="form-control" autocomplete="off" placeholder="Enter Last Name - Head of Household" />
												</div>
											</div>
										</div>

										<!-- 
                    <div class="row">
                      <div class="col-md-12 mb-4">
                        <div class="form-outline">
                          <label class="form-label" for="signupEmail">Email</label>
                          <input type="email" id="signupEmail" name="email" class="form-control" required autocomplete="off"  placeholder="Enter your email"  oninput="this.value = this.value.toLowerCase();"/>
                        </div>
                      </div>
                    </div>-->



										<div class="row">
											<div class="col-md-12 mb-4">
												<div class="form-outline">
													<label class="form-label" for="signupPhoneNumber">Phone Number - Head of Household <span class="text-danger">*</span></label>
													<input type="tel" placeholder="Ex. +1 123-456-7890" minlength="10" maxlength="15" id="signupPhoneNumber" name="phone" class="phone-with-country-code form-control phone" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57 || event.charCode==43 || event.charCode==13 ))" oninput="nonEditCuntryCode1(this);" value="+1" minlength="10" autocomplete="none">
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12 mb-4">
												<div class="form-outline text-center">
													<div class="col-md-12">
														<button type="button" onclick="checkVerifyEmail()" class="btn  ms-2" id="signupBtnAlert" style="color: #fff!important;">REGISTER</button>
														<button type="submit" class="btn  ms-2 d-none" id="signupBtn" disabled style="color: #fff!important;">REGISTER</button>
														<button type="button" class="signupBtnClose btnClose btn btn-danger ms-2" data-dismiss="modal" hidden>CLOSE</button>
													</div>
												</div>
											</div>
										</div>


									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="d-flex justify-content-center modal-footer">
					<div class="row mx-auto d-block my-4">

						<div class="col-md-12 my-4s">
							<a href="javaScript:void(0)" onclick="openLoginModal()" style="color:black!important;">Already registered? <span style="color: red !important; font-weight: bold; font-size: 16px !important;">Sign In</span></a>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- End Registration Modal -->


<!-- Login  Modal -->
<div class="modal fade modal-danger modal-outline" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content" style="background-image:url(<?= base_url('assets/img/login-backgound.png'); ?>);">




			<form action="#" method="post" id="phonemyForm" autocomplete="off">
				<div class="modal-header text-center">
					<!-- <h5 class="modal-title text-center bottomborder modatTitle" >SIGN IN</h5> -->
					<button type="button" class="btn-close modalCloseBtn <?= $modalClbtn; ?>" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body p-0">
					<img src="<?= ApiBaseUrl()['url'] . @$header_data[0]['leftImage'] ?>" class="img-fluid mb-4" height="100px" width="100px" style="display: block;margin-left: auto;margin-right: auto;">
					<style type="text/css">
						.nav-fill .nav-item .nav-link,
						.nav-justified .nav-item .nav-link {
							width: 100%;
							background: #cdcdcd9c !important;
							color: #000000;
						}

						.nav-tabs .nav-item.show .nav-link,
						.nav-tabs .nav-link.active {
							color: #ffffff !important;
							background: var(--main-color-new-theme) !important;
							border-color: var(--bs-nav-tabs-link-active-border-color)
						}
					</style>

					<div class="row" style="margin-left: 50px;margin-right: 50px;">
						<h5 class="text-center bottomborder modatTitle">SIGN IN</h5>
						<div class="col-md-12 mt-4">
							<div class="container mt-3">
								<div class="row g-0">
									<div class="col-xl-12">
										<div class="row" style="text-align:center;">
											<div class="col-md-12">
												<div class="hs-toast-wrapper mb-3" id="login-error-flashmsg"></div>
												<div class="hs-toast-wrapper mb-3" id="login-success-flashmsg"></div>

												<!-- <span id="login-error-flashmsg" class="text-center" style="color: red;"></span> -->
												<!-- <span id="login-success-flashmsg" class="text-center" style="color: green;"></span> -->
											</div>
										</div>
									</div>
								</div>
								<div class="row d-flex justify-content-center align-items-center">
									<div class="col-xl-12">
										<div class="row">
											<div class="col-xl-12">
												<span class="email_section">
													<div class="row">
														<ul id="tabs" class="nav nav-tabs nav-fill" style="border: 0px; box-shadow: 1px -4px 8px grey; margin: 0px; padding: 0px;">
															<!-- <li class="nav-item"><a href="#AdministratorTab" id="AdministratorTab" tab-name="Management" data-toggle="tab" class=" nav-link rounded-0 border-0 m-0">Management</a></li> -->
															<li class="nav-item"><a href="#devoteeTab" id="devoteeTab" tab-name="Devotee" data-toggle="tab" class="nav-link  rounded-0 active border-0 m-0">Devotee</a></li>
														</ul>
														<div class="col-md-12 p-0 mt-4">
															<input type="email" id="loginEmail" placeholder="Enter your email Id." name="email" class="form-control" data-onclick="<?= base_url('send-email-otp'); ?>" style="margin: 0px;" oninput="loginBy('email');this.value = this.value.toLowerCase();" autocomplete="none" />
															<span class="otpsendmsg" style="color: green; font-size: 11px;margin-left: 12px;"></span>
														</div>
													</div>

												</span>

												<!-- Remove d-none if you want to on SMS Login with Phone Number -->

												<span class="mobile_section">
													<div class="text-center mb-3">--OR--</div>
													<div class="row">


														<div class="col-md-12 mx-0 px-0">

															<input type="tel" placeholder="Ex. +1 (702) 123-4567" id="loginPhoneNumber" name="phone" class="phone-with-country-code form-control phone" data-onclick="<?= base_url('send-email-otp'); ?>" minlength="10" maxlength="15" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57 || event.charCode==43  || event.charCode==13 ))" oninput="nonEditCuntryCode(this);loginBy('mobile')" value="+1" minlength="10" autocomplete="none">
															<span class="otpsendmsg_number" style="color: green; font-size: 18px;margin-left: 12px;"></span>
														</div>


														<div class="col-md-12 my-4">
															<center>
																<button id="emailotpntn" class="btn btn-success" onclick="sendEmailOtp('<?= base_url('send-email-otp') ?>')">Login</button>
															</center>
														</div>
													</div>
												</span>

												<div class="row vOtpBox" id="otptoggle" style="display:none;">
													<div class="col-md-8 mx-0 px-0">
														<input type="number" name="emailotp" id="emailotp" placeholder="Please enter OTP to continue." class="form-control" onkeypress="if(event.charCode==13 ){ verifyEmailOtp('<?= base_url('email-otp-verification'); ?>');  }" required />


														<div id="timerMessage" class="mt-2" style="font-size: 13px;">You can resend OTP after <span id="timeCounter2">2:00</span> Seconds</div>



														<!-- <a id="resendButton" style="color:red; padding: 10px;" onclick="sendEmailOtp('<?= base_url('send-email-otp') ?>')" href="javaScript:void(0)" disabled>Resend OTP</a> -->




														<a id="resendButton" style="color:red; padding: 10px;" onclick="resendOtp()" href="javaScript:void(0)" disabled>Resend OTP</a>



														<span id="timerCounter" style="font-size: 13px;"></span>
													</div>
													<div class="col-md-4 mb-4">
														<button id="emailotpverifybtn" class="btn btn-success verifyBtn" onclick="verifyEmailOtp('<?= base_url('email-otp-verification'); ?>')">VERIFY</button>
													</div>
													<div class="col-md-4 mb-4">
													</div>
												</div>
												<div class="row mobile-section otpmobilebox vOtpBox" id="mobiletoggle" style="display:none;">
													<div class="col-md-8 mb-4 mx-0 px-0">
														<input type="number" id="mobileotp" name="mobileotp" placeholder="Please enter OTP to continue." class="form-control" />
														<!-- <span class="otpsendmsg_number_error" style="color: red; font-size: 18px;margin-left: 12px;"></span> -->

														<div class="hs-toast-wrapper mb-3" class="otpsendmsg_number_errorg"></div>

													</div>
													<div class="col-md-4 mb-4">
														<button id="mobileotpverifybtn" class="btn btn-success verifyBtn" onclick="submitPhoneNumberAuthCode()" onkeydown="if(event.keyCode === 13) document.getElementById('mobileotpverifybtn').click()">VERIFY</button>
													</div>
												</div>
												<div class="row">
													<div class="col-md-12" id="recaptcha-container"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="d-flex justify-content-center text-center modal-footer">
					<div class="row">
						<div class="col-md-12">
							<button type="submit" class="btn btn-warning" id="loginBtn">LOGIN</button>
							<button type="button" class="loginBtnClose btnClose btn btn-danger ms-2" data-dismiss="modal" hidden>CLOSE</button>
						</div>
						<div class="col-md-12 my-4">
							<!-- <a href="javaScript:void(0)" onclick="openSignupModal()" id="signupLink" style="display:none">New User? Sign Up</a> -->
							<a href="javaScript:void(0)" onclick="openSignupModal()" id="signupLink" style="color:black!important;">New User? <span style="color: red !important; font-weight: bold; font-size: 16px !important;">Register</span></a>
						</div>
					</div>
				</div>
			</form>

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



<?php $serviceDetails = $this->session->userdata('serviceDetails') ?>
<!-- Payment Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content" style="background-image:url(<?= base_url('assets/img/login-backgound.png'); ?>);">

			<form action="#" method="post" onsubmit="return SignupUser('<?= base_url('signup') ?>')">
				<div class="modal-header text-center">
					<h5 class="modal-title bottomborder modatTitle">CHECKOUT</h5>
					<button type="button" class="btn-close modalCloseBtn <?= $modalClbtn; ?>" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="container">
						<img src="<?= ApiBaseUrl()['url'] . @$header_data[0]['leftImage'] ?>" class="img-fluid mb-4" height="100px" width="100px" style="display: block;margin-left: auto;margin-right: auto;">
						<div class="row d-flex justify-content-center align-items-center">
							<div class="col-xl-12">
								<div class="row g-0">
									<div class="col-xl-12">
										<div class="row">
											<div class="col-md-12 mb-4">
												<table class="table table-responsive table-bordered text-center">
													<thead>
														<tr>
															<th>
																<h5 class="h5-title">Service</h5>
															</th>
															<th>
																<h5 class="h5-title">Amount to Pay</h5>
															</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td><span id="serviceName" class="serviceName"></span></td>

															<td id="edittable">

															</td>
															<input type="hidden" name="" id="serviceCategoryTypes">
															<input type="hidden" name="" id="serviceTypes">
															<input type="hidden" name="" id="dayTypes">
															<input type="hidden" name="" id="startDate">
															<input type="hidden" name="" id="startTime">
														</tr>
													</tbody>
												</table>


												<table class="table table-responsive table-bordered text-center" id="dateTimeTable">
													<tbody id="servicesDetails">

														<tr>
															<td>Date</td>
															<td>
																<input type='text' class='form-control datepicker-child-events' id='serviceStartDate' onkeyup='date_reformat_mm(this);' onkeypress='date_reformat_mm(this);' placeholder="MM/DD/YYYY" onpaste='date_reformat_mm(this);' autocomplete='off'>
															</td>
														</tr>

														<tr>
															<td>Time</td>
															<td id='ServiceStartTime'>
																<div class='timepicker_div'>
																	<input type='text' class='form-control' id="timepicker" placeholder='Time'>
																</div>
															</td>
														</tr>

													</tbody>
												</table>


												<div id="addressField"></div>
											</div>
										</div>

										<div class="d-flex justify-content-center text-center modal-footer">
											<div class="row">

												<div class="col-md-12">
													<div class="oooooookkakak" id="paypal-button-container"></div>
													<button type="button" class="btn PaymentClosebtn btn-danger ms-2" data-dismiss="modal" hidden>CLOSE</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Donate to Temple Payment Modal -->
<div class="modal fade" id="DonateToTemplePaymentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content" style="background-image:url(<?= base_url('assets/img/login-backgound.png'); ?>);">


			<form action="#" method="post">
				<div class="modal-header text-center">
					<h5 class="modal-title bottomborder modatTitle">DONATE TO TEMPLE</h5>

					<button type="button" class="btn-close modalCloseBtn <?= $modalClbtn; ?>" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="container">
						<img src="<?= ApiBaseUrl()['url'] . $header_data[0]['leftImage'] ?>" class="img-fluid mb-4" height="100px" width="100px" style="display: block;margin-left: auto;margin-right: auto;">
						<div class="row d-flex justify-content-center align-items-center">
							<div class="col-xl-12">
								<div class="row g-0">
									<div class="col-xl-12">
										<div class="row">
											<div class="col-md-12 mb-4">
												<table class="table table-responsive table-bordered text-center">
													<thead>
														<tr>
															<th style="display: none;">
																<h5 class="h5-title">SERVICE</h5>
															</th>
															<th>
																<h5 class="h5-title">AMOUNT TO PAY (IN $)</h5>
															</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td style="display:none;"><span id="DonationName" class="DonationName"></span></td>
															<td><input style="text-align: right;" type="number" class="form-control currency" id="DonationAmt" min="1.00" value="1.00" required /></td>
															<input type="hidden" name="" id="DonateToTemple">

															<input type="hidden" name="" id="DonationId">
															<input type="hidden" name="" id="DonationCategoryTypes">
															<input type="hidden" name="" id="DonationTypes">
															<input type="hidden" name="" id="DonationdayTypes">
															<input type="hidden" name="" id="DonationstartDate">
															<input type="hidden" name="" id="DonationstartTime">


															<input type="hidden" id="donateToTempleBtnBeforeLogin" name="donateToTempleBtnBeforeLogin">

														</tr>
													</tbody>
												</table>
											</div>
										</div>

										<div class="d-flex justify-content-center text-center modal-footer">
											<div class="row">

												<div class="col-md-12">
													<div id="paypal-button-container-donation"></div>
													<button type="button" class="btn PaymentClosebtn btn-danger ms-2" data-dismiss="modal" hidden>CLOSE</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>



<!--- signup OTp---->
<div class="modal fade" id="signUpOTP" tabindex="-1" role="dialog" aria-labelledby="signUpOTPTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle">Please verify OTP</h5>
				<button type="button" class="close" style="background: white;" onclick="closesignUpOTPModal()">
					<span aria-hidden="true" style="font-size: 22px !important;font-weight: 900;">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row" style="text-align:center;">
					<div class="col-md-12">

						<div class="hs-toast-wrapper mb-3" id="signup-auth-error-flashmsg"></div>
						<div class="hs-toast-wrapper mb-3" id="signup-auth-success-flashmsg"></div>
					</div>
				</div>
				<div class="row">

					<div class="col-md-12 mb-4 mx-0 px-0">
						<input type="number" id="signUpOtp" name="otp" placeholder="Please enter OTP to continue." class="form-control" />
						<!-- <span class="otpsendmsg_number_error" style="color: red; font-size: 18px;margin-left: 12px;"></span> -->

						<div class="hs-toast-wrapper mb-3" class="otpauthsendmsg_number_errorg"></div>

					</div>
					<div class="col-md-12 mb-4 mx-0 px-0">
						<a class="" id="resendOtpBtn" type="button" onclick="resendMemberAuthCode('<?= base_url('send-member-auth-code') ?>')" href="javaScript:void(0)">Resend OTP?</a>
					</div>
				</div>
			</div>
			<div class="modal-footer text-center" style="display: flow!important;">
				<!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
				<button type="button" id="memberAuthCodeVerifyBtn" onclick="verifyMemberAuthCode('<?= base_url('email-otp-verification') ?>')" class="btn btn-danger" style="color: #ffffff;
    border-radius: 9px !important;
    border-color: white;
    background: var(--main-color-new-theme) !important;
    padding: 10px 40px;
    box-shadow: 1px 1px 10px #7e455561;">Verify OTP</button>
			</div>
		</div>
	</div>
</div>
<!--- signup OTp---->

<!-- Login  Modal -->
<div class="modal fade modal-danger modal-outline" id="loginModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="background-image:url(<?= base_url('assets/img/login-backgound.png'); ?>);">




      <form action="#" method="post" id="phonemyForm2" autocomplete="off">
        <div class="modal-header text-center">
          <!-- <h5 class="modal-title text-center bottomborder modatTitle" >SIGN IN</h5> -->
          <button type="button" class="btn-close modalCloseBtn <?= $modalClbtn; ?>" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <img src="<?= ApiBaseUrl()['url'] . @$header_data[0]['leftImage'] ?>" class="img-fluid mb-4" height="100px" width="100px" style="display: block;margin-left: auto;margin-right: auto;">
          <style type="text/css">
            .nav-fill .nav-item .nav-link,
            .nav-justified .nav-item .nav-link {
              width: 100%;
              background: #cdcdcd9c !important;
              color: #000000;
            }

            .nav-tabs .nav-item.show .nav-link,
            .nav-tabs .nav-link.active {
              color: #ffffff !important;
              background: var(--main-color-new-theme) !important;
              border-color: var(--bs-nav-tabs-link-active-border-color)
            }
          </style>

          <div class="row">
            <h5 class="text-center bottomborder modatTitle">SIGN IN</h5>
            <div class="col-md-12 mt-4">
              <div class="container mt-3">
                <div class="row g-0">
                  <div class="col-xl-12">
                    <div class="row" style="text-align:center;">
                      <div class="col-md-12">
                        <div class="hs-toast-wrapper mb-3" id="login-error-flashmsg2"></div>
                        <div class="hs-toast-wrapper mb-3" id="login-success-flashmsg2"></div>

                        <!-- <span id="login-error-flashmsg" class="text-center" style="color: red;"></span> -->
                        <!-- <span id="login-success-flashmsg" class="text-center" style="color: green;"></span> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row d-flex justify-content-center align-items-center" style="margin-left: 50px;margin-right: 50px;">
                  <div class="col-xl-12">
                    <div class="row">
                      <div class="col-xl-12">
                        <span class="email_section">
                          <div class="row">
							
                            <ul id="tabs2" class="nav nav-tabs nav-fill" style="border: 0px; box-shadow: 1px -4px 8px grey; margin: 0px; padding: 0px;">
                              <!-- <li class="nav-item"><a href="#AdministratorTab" id="AdministratorTab2" tab-name="Management" data-toggle="tab" class=" nav-link rounded-0 border-0 m-0">Management</a></li> -->
                              <li class="nav-item"><a href="#devoteeTab" id="devoteeTab2" tab-name="Devotee" data-toggle="tab" class="nav-link  rounded-0 active border-0 m-0">Devotee</a></li>
                            </ul>
                            <div class="col-md-12 p-0 mt-4">
                              <input type="email" id="loginEmail2" placeholder="Enter your email id" name="email" class="form-control" data-onclick="<?= base_url('send-email-otp'); ?>" style="margin: 0px;" oninput="loginBy('email');this.value = this.value.toLowerCase();" autocomplete="none" />
                              <span class="otpsendmsg" style="color: green; font-size: 11px;margin-left: 12px;"></span>
                            </div>
                          </div>

                        </span>

                        <span class="mobile_section">
                          <div class="text-center mb-3">--OR--</div>
                          <div class="row">
                            <div class="col-md-12 mx-0 px-0">

                              <input type="tel" placeholder="Ex. +1 (702) 123-4567" id="signupPhoneNumber2" name="phone" class="phone-with-country-code form-control phone" minlength="10" maxlength="20" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57 || event.charCode==43  || event.charCode==13 ))" oninput="nonEditCuntryCode2(this);" value="+1" minlength="10" autocomplete="none">
                              <span class="otpsendmsg_number" style="color: green; font-size: 18px;margin-left: 12px;"></span>
                            </div>



                          </div>
                        </span>


                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-center text-center modal-footer">
          <div class="row">
            <div class="col-md-12">
              <button class="btn btn-warning emailotpntn2" id="" onclick="WithoutOtpLogin(event)">LOGIN</button>
              <button type="button" class="loginBtnClose btnClose btn btn-danger ms-2" data-dismiss="modal" hidden>CLOSE</button>
            </div>
            <div class="col-md-12 my-4">
              <!-- <a href="javascript:void(0)" onclick="openSignupModal()" id="signupLink" style="display:none">New User? Sign Up</a> -->
              <a href="javascript:void(0)" onclick="openSignupModal()" id="signupLink">New User? Sign Up</a>
            </div>
          </div>
        </div>
      </form>

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



<!-- Modal Structure -->
<div class="modal fade" id="partishipent_events-Modal" tabindex="-1" aria-labelledby="partishipent_events-ModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">

			<!-- Modal Header -->
			<div class="modal-header text-white" style="background-color: var(--main-color-new-theme);">
				<h5 class="modal-title" id="partishipent_events-ModalLabel">Event Contributions</h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>

			<!-- Modal Body -->
			<div class="modal-body">

				Loading...
			</div> <!-- End Modal Body -->
		</div>
	</div>
</div>


<?php $userSession = $this->session->userdata('refDataName');
if (isset($userSession)) { ?>
	<input type="hidden" name="" id="refDataName" value="<?= $userSession ?>">
<?php } ?>
<input type="hidden" name="serviceId" id="serviceId">
<input type="hidden" name="hpEvntName" id="pEvntName">
<input type="hidden" name="hpEvntName1" id="pEvntName1">
<input type="hidden" name="hEvtCount" id="EvtCount">
<input type="hidden" name="hEvntStartDate" id="EvntStartDate">
<input type="hidden" name="hEvntendDate" id="EvntendDate">
<input type="hidden" name="fullPackage" id="fullPackage">
<input type="hidden" name="fromPage" id="fromPage">




<script>
	$(document).ready(function() {
		// Validation function
		function validateFormData(data) {
			const required = ['date', 'count', 'memberId', 'memberName', 'eventName', 'eventId'];
			return required.every(field => data[field]);
		}

		// Alert function
		function showAlert(message, type = 'warning') {
			const alert = $(`
            <div class="alert alert-${type} alert-dismissible fade show mt-2">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
			$('.modal-body').prepend(alert);
			setTimeout(() => alert.alert('close'), 3000);
		}

		// Handle submit click
		$('.submit-contribution').click(function() {
			const form = $('.contribution-form-0');

			// Get values
			const count = parseInt($('#EvtCount').val());
			const date = $('#EvntDate').val();

			// Basic validation
			if (!count || count < 1) {
				showAlert('Please enter a valid count', 'danger');
				return;
			}

			if (!date) {
				showAlert('Please select a date', 'danger');
				return;
			}

			// Prepare form data
			const formData = {
				date: date,
				count: count,
				memberId: form.find('input[name="memberId"]').val(),
				memberName: form.find('input[name="memberName"]').val(),
				eventName: $('#inppEvntName').val(),
				eventId: $('#inppEvntId').val(),
				itemName: $('#inppEvntName1').val(),
				clientId: form.find('input[name="clientId"]').val()
			};

			// Validate all required fields
			if (!validateFormData(formData)) {
				showAlert('Please fill all required fields', 'danger');
				return;
			}

			// Disable submit button
			const submitBtn = $(this);
			submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Submitting...');

			// Format date and time
			const dateObj = new Date(formData.date);
			const formattedDate = `${(dateObj.getMonth() + 1).toString().padStart(2, '0')}/${dateObj.getDate().toString().padStart(2, '0')}/${dateObj.getFullYear()}`;
			const formattedTime = new Date().toLocaleTimeString('en-US', {
				hour: 'numeric',
				minute: '2-digit',
				hour12: true
			});

			// Prepare API payload
			const payload = {
				dataJson: {
					memberId: formData.memberId,
					memberName: formData.memberName,
					eventName: formData.eventName,
					eventId: formData.eventId,
					itemName: formData.itemName,
					count: count,
					cartCreDate: formattedDate,
					cartCreTime: formattedTime
				},
				clientId: formData.clientId
			};

			// Make API request
			$.ajax({
				url: '<?= base_url("admin/add-participate-event") ?>',
				type: 'POST',
				contentType: 'application/json',
				data: JSON.stringify(payload),
				success: function(response) {
					if (response && response.success === true) {
						// Show success message
						showAlert('Contribution added successfully!', 'success');

						// Reset form
						$('#EvtCount').val('');
						$('#EvntDate').val('<?= date('Y-m-d') ?>');

						// Close modal after delay
						setTimeout(() => {
							$('#partishipent_events-Modal').modal('hide');
							// Optional: Refresh page to update counts
							location.reload();
						}, 2000);
					} else {
						showAlert(response.message || 'Failed to add contribution', 'danger');
					}
				},
				error: function(xhr, status, error) {
					console.error('Submission Error:', error);
					showAlert('Error occurred while adding contribution', 'danger');
				},
				complete: function() {
					submitBtn.prop('disabled', false).html('Submit');
				}
			});
		});

		// Cancel button handler
		$('.cancel-add-btn').click(function() {
			$('#partishipent_events-Modal').modal('hide');
		});
	});
</script>


<script>
	const myInputField = document.getElementById('mobileotp');
	const myButton = document.getElementById('mobileotpverifybtn');

	myInputField.addEventListener('keydown', (event) => {
		if (event.key === 'Enter') {
			myButton.click();
		}
	});

	const resendButton = document.getElementById('resendButton');

	function resendOtp() {

		resendButton.style.display = "none";
		resendButton.disabled = true;
		sendEmailOtp('<?= base_url('send-email-otp') ?>');
	}



	const timerCounter = document.getElementById('timerCounter');
	const timerMessage = document.getElementById("timerMessage");
	const timeCounter2 = document.getElementById("timeCounter2");
</script>