<section class="margin-top-xs-55">
	<div class="header-text mb-0">
		<div>
			<div class="row ">
				<div class="col-lg-12 col-md-12 col-sm-12 text-center">

					<div class="frame-image">
						<div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
					</div>

				</div>

			</div>
		</div>
	</div>
</section>
<section>
	<div class="container">
		<div class="text-center text-dark py-7">
			<h1 class=""><b><?php echo $category->name; ?></b></h1>
			<ol class="breadcrumb text-center justify-content-center" style="font-size: 15px;">
				<li class="breadcrumb-item">
					<a href="<?php echo base_url(); ?>">Home</a>
				</li>
				<li class="breadcrumb-item text-dark" aria-current="page">Course</li>
				<li class="breadcrumb-item active text-white" aria-current="page"><?php echo $category->name; ?></li>
			</ol>
		</div>
	</div>
</section>
<style>
	.breadcrumb-item a {
  color: #000;
}
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  padding-left: .1rem;
  color: #000;
  content: "/";
}
</style>

<!--Section-->
<section class="sptb bg-white pt-5">
	<div class="container">
		<div class="row product-category">
			<div class="col-xl-3 col-lg-4 col-md-12">

				<div class="card mb-0">
					<form method="GET">
						<div class="card-header">
							<h3 class="card-title">Categories</h3>
						</div>
						<div class="card-body">
							<div id="container">
								<div class="filter-product-checkboxs">
									<?php foreach ($all_category as $category_all):
										$course_count = $this->course_model->count_course_by_cat_id($category_all->id); ?>
										<label class="custom-control form-checkbox mb-3">
											<span>
												<a href="<?php echo base_url() ?>c/<?php echo $category_all->slug ?>" class="text-dark"><?= $category_all->name ?>
													<span class="label label-primary br-7 float-end"><?= $course_count ?></span>
												</a>
											</span>
										</label>
									<?php endforeach; ?>
								</div>
							</div>
						</div>

					</form>

				</div>
			</div>
			<div class="col-xl-9 col-lg-8 col-md-12">
				<div class="row">
					<div class="col-md-12 order-1 order-sm-2">
						<div class="mb-4 popular-list__title">
							<span class="popular-list__title-text" id="course_cat_name"><?php echo $category->name; ?></span>
						</div>
					</div>
				</div>
				<div class="row product-category">
					<?php
					$course_status = false;
					foreach ($all_course as $key => $course):
						$this->db->where('status', 1);
						$this->db->where('id', $course->course_sub_category);
						$sub_cat_staus = $this->db->get('category')->row();
						if ($sub_cat_staus) {
							$course_status = true;
					?>
							<?php
							$is_purchased = false;
							$is_session  = false;
							if ($this->session->userdata('bcount_sess_logged_in') === true) {
								$is_purchased = $this->course_model->course_is_purchased($this->session->userdata('bcount_sess_id'), $course->course_id);
								$is_session  = true;
							}
							?>
							<div class="col-lg-4 col-md-12 col-xl-4">
								<div class="card overflow-hidden">
									<div class="item-card7-img pt-5 px-5">
										<div class="item-card7-imgs">
											<a href="<?php echo base_url() ?>/course/<?php echo $course->course_slug ?>"></a>
											<img src="<?php echo base_url() ?><?php echo $course->course_image ?>" alt="<?php echo $course->course_heading ?>" class="cover-image br-7 border">
										</div>
									</div>
									<div class="card-body text-center">
										<div class="item-card7-desc">
											<div class="item-card7-text">
												<a href="<?php echo base_url() ?>/course/<?php echo $course->course_slug ?>" class="text-dark">
													<h4 class="font-weight-semibold mb-1"><?php echo mb_strimwidth($course->course_heading, 0, 30, "...") ?></h4>
												</a>
											</div>
											<?php if ($course->course_theme == 'theme_1'): ?>
												<div class="d-flex mb-0 justify-content-center course-price-details text-center">

													<?php if ($course->course_in_class_dicount_price > 0): ?>
														<?php
														// Calculate the discount percentage
														$discountPercentage = round((($course->course_in_class_main_price - $course->course_in_class_dicount_price) / $course->course_in_class_main_price) * 100);
														?>
														<h4>
															<b>₹<?php echo $course->course_in_class_dicount_price; ?></b>
															<del class="fs-14 me-1 ms-1">₹<?php echo $course->course_in_class_main_price; ?></del>
															<span class="badge"><?php echo $discountPercentage; ?>% OFF</span>
														</h4>
													<?php else: ?>
														<h4>
															<b>₹<?php echo $course->course_in_class_main_price; ?></b>
														</h4>
													<?php endif; ?>
												</div>
											<?php elseif ($course->course_theme == 'theme_2'): ?>
												<div class="d-flex mb-0 justify-content-center course-price-details text-center">
													<?php
													if ($course->course_is_free == 1): ?>
														<h4>
															<b class="text-success">Free</b>
															<del class="fs-14 me-1 ms-1">₹<?php echo $course->course_online_main_price; ?></del>
															<span class="badge">100% OFF</span>
														</h4>
													<?php elseif ($course->course_onine_dicount_price > 0):
														$discountPercentage = round((($course->course_online_main_price - $course->course_onine_dicount_price) / $course->course_online_main_price) * 100);
													?>
														<h4>
															<b>₹<?php echo $course->course_onine_dicount_price; ?></b>
															<del class="fs-14 me-1 ms-1">₹<?php echo $course->course_online_main_price; ?></del>
															<span class="badge"><?php echo $discountPercentage; ?>% OFF</span>
														</h4>
													<?php else: ?>
														<h4>
															<b>₹<?php echo $course->course_online_main_price; ?></b>
														</h4>
													<?php endif; ?>
												</div>
											<?php endif; ?>

											<?php if ($course->course_theme == 'theme_1'): ?>
												<div class="mt-2">
													<button class="btn w-full text-white" style="width: 100%;font-size:16px;font-weight:700" onclick="openDownloadBrochureModal('<?php echo $course->course_id; ?>', '<?php echo base_url(); ?><?php echo $course->course_pdf_browser; ?>')"><i class="fa fa-download"></i> Download Brochure</button>
												</div>
											<?php else: ?>
												<?php if (!$is_purchased): ?>
													<?php if ($course->course_is_free == 1): ?>
														<?php
														if ($is_session) {
															$url = base_url() . 'course/enrolement/' . $course->course_slug . '/' . $course->course_id;
														} else {
															$url = base_url() . 'register/course/' . $course->course_slug . '/' . $course->course_id;
														}
														?>
														<div class="mt-2">
															<a href="<?php echo $url; ?>" class="btn w-full text-white" style="width: 100%;font-size:16px;font-weight:700"> Enrol Course</a>
														</div>
													<?php else: ?>
														<?php
														if ($is_session) {
															$url = base_url() . 'course/buy_now/' . $course->course_slug . '/' . $course->course_id;
														} else {
															$url = base_url() . 'register/course/' . $course->course_slug . '/' . $course->course_id;
														}
														?>
														<!-- <div class="mt-2">
														<a href="<?php //echo $url; 
																	?>" class="btn w-full text-white" style="width: 100%;font-size:16px;font-weight:700"><i class="fa fa-shopping-cart"></i> Buy Course</a>
													</div> -->
													<?php endif; ?>
												<?php else: ?>
													<div class="mt-2">
														<a href="<?php echo base_url('admin/admin/lesson/' . $course->course_slug . '/' . $course->course_id); ?>" class="btn w-full text-white" style="width: 100%;font-size:16px;font-weight:700"> Go to Course</a>
													</div>
												<?php endif; ?>

											<?php endif; ?>
											<div class="mt-3">
												<a class="btn w-100 text-white" href="<?php echo base_url() ?>course/<?php echo $course->course_slug ?>" style="font-size:16px;background-color:var(--theme-color-3)"><i class="fa fa-eye"></i> View Course</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						<?php };
					endforeach;
					if (!$all_course || $course_status == false): ?>

						<div class="col-lg-4 col-md-12 col-xl-4">
							<div class="card overflow-hidden">
								<div class="card-body text-center">
									<h4 class="text-center">No Course Found</h4>
								</div>
							</div>
						</div>
					<?php endif; ?>
				</div>

			</div>
		</div>
	</div>
</section><!--Section-->

<div class="modal fade" id="browchureModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body" style="padding: 40px;">
				<h3 class="modal_heading">Please enter your Details to get the Course Brochure</h3>
				<form id="download_bowchure" method="post">
					<div class="mb-3">
						<label class="col-form-label">Your Full Name <span class="text-danger">*</span></label>
						<input type="text" id="name" class="form-control form-field" required placeholder="Enter Your Full Name" name="lead_name">
					</div>
					<div class="mb-3">
						<label class="col-form-label">Your Email ID <span class="text-danger">*</span></label>
						<input type="email" id="email" class="form-control form-field" required placeholder="Enter Your Email ID" name="lead_email">
					</div>
					<div class="mb-3">
						<label class="col-form-label">Your Mobile No. <span class="text-danger">*</span></label>
						<input type="text" id="phone" class="form-control form-field" required placeholder="Enter Your Mobile No." name="lead_mobile">
					</div>

					<!-- Occupation Field -->
					<div class="mb-3">
						<label class="col-form-label">Occupation <span class="text-danger">*</span></label>
						<select id="occupation" class="form-control form-field" name="lead_occupation" required>
							<option value="" disabled selected>Select Your Occupation</option>
							<option value="Student">Student</option>
							<option value="Working Professional">Working Professional</option>
							<option value="House Wife">House Wife</option>
							<option value="Business Owner">Business Owner</option>
						</select>
					</div>

					<!-- Education Field -->
					<div class="mb-3">
						<label class="col-form-label">Education <span class="text-danger">*</span></label>
						<select id="education" class="form-control form-field" name="lead_education" required>
							<option value="" disabled selected>Select Your Education</option>
							<option value="Below 10th">Below 10th</option>
							<option value="Below 12th">Below 12th</option>
							<option value="12th Pass">12th Pass</option>
							<option value="BA">BA</option>
							<option value="BCA">BCA</option>
							<option value="B.com">B.com</option>
							<option value="BAF">BAF</option>
							<option value="BMS">BMS</option>
							<option value="BBA">BBA</option>
							<option value="MBA">MBA</option>
							<option value="M.com">M.com</option>
							<option value="Mass communication">Mass communication</option>
							<option value="Other">Other</option>
						</select>
					</div>

					<div class="mb-4">
						<div id="recaptcha-container"></div>
					</div>

					<input type="hidden" class="form-control" required name="lead_course" id="leadCourse">
					<input type="hidden" class="form-control" value="Download Brochure" required name="lead_mode">

					<div class="mb-3 form-check">
						<input type="checkbox" class="form-check-input" id="tac_updates" name="tac_updates" checked>
						<label class="form-check-label" for="tac_updates">I have read and agree to the <a href="<?php echo base_url(); ?>p/privacy-policy"><u>Privacy Policy</u></a> and <a href="<?php echo base_url(); ?>p/terms-conditions"><u>Terms & Conditions.</u></a></label>
					</div>
					<!-- WhatsApp Updates Checkbox -->
					<div class="mb-3 form-check">
						<input type="checkbox" class="form-check-input" id="whatsapp_updates" name="whatsapp_updates" checked>
						<label class="form-check-label" for="whatsapp_updates">Send me updates on WhatsApp</label>
					</div>

					<div class="mt-5">
						<button disabled id="sendOtpButton" type="button" class="btn w-full text-white" style="font-size: 15px;font-weight: 700;">
							<span class="loginButtonText">Submit Now</span>
							<span class="loginButtonLoaderMain">Process....</span>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="otpModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="d-flex justify-content-center align-items-center container">
					<div class="py-3 px-3" style="margin-top: -60px;">
						<h5 class="m-0">Mobile phone verification</h5>
						<span class="mobile-text">Enter the code we just send on your mobile phone
							<b class="text-danger" id="otp_mobile">+91 86684833</b>
						</span>
						<div class="otp-inputs">
							<div class="d-flex flex-row ">
								<input type="text" class="form-control otp-input" maxlength="1" autofocus="">
								<input type="text" class="form-control otp-input" maxlength="1">
								<input type="text" class="form-control otp-input" maxlength="1">
								<input type="text" class="form-control otp-input" maxlength="1">
								<input type="text" class="form-control otp-input" maxlength="1">
								<input type="text" class="form-control otp-input" maxlength="1">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var coursePdfURL;

	function openDownloadBrochureModal(e, url) {
		$('#browchureModel').modal('show');
		$('#leadCourse').val(e);
		coursePdfURL = url;
	}

	$(document).ready(function() {

		var confirmationResult;
		const firebaseConfig = {
			apiKey: "AIzaSyAlfb-Z0KUHo66Z5de-Dm9HEtJE6Oq8H30",
			authDomain: "dotcom-vidya-f38f2.firebaseapp.com",
			projectId: "dotcom-vidya-f38f2",
			storageBucket: "dotcom-vidya-f38f2.appspot.com",
			messagingSenderId: "839557496405",
			appId: "1:839557496405:web:4bc23c520256c6340ededc"
		};

		// Run validation on field changes
		$('.form-field').on('input', function() {
			validateForm();
		});

		function validateForm() {
			var phone = $('#phone').val().trim();
			var name = $('#name').val().trim();
			var email = $('#email').val().trim();

			var nameValid = name.split(' ').length > 1;
			var phoneValid = /^\d{10}$/.test(phone);
			var emailValid = validateEmail(email);

			if (phoneValid && nameValid && emailValid) {
				$('#sendOtpButton').prop('disabled', false);
				$('.loginButtonText').text('Send Verification Code');
			} else {
				$('#sendOtpButton').prop('disabled', true);
				$('.loginButtonText').text('Submit Now');
			}
		}

		function validateEmail(email) {
			return email.match(
				/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
			);
		}

		document.getElementById('sendOtpButton').addEventListener('click', function() {
			$('.loginButtonLoaderMain').show();
			$('.loginButtonText').hide();
			$('#sendOtpButton').prop('disabled', true);

			var phoneNumber = $('#phone').val();
			firebase.initializeApp(firebaseConfig);

			// Initialize reCAPTCHA verifier
			var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
				size: 'invisible',
				callback: function(response) {
					// reCAPTCHA solved
				},
				'expired-callback': function() {
					$('.loginButtonLoaderMain').hide();
					$('.loginButtonText').show();
					$('#sendOtpButton').prop('disabled', false);
				}
			});

			appVerifier.render().then(function(widgetId) {
				window.recaptchaWidgetId = widgetId;
			});

			firebase.auth().signInWithPhoneNumber('+91' + phoneNumber, appVerifier)
				.then(function(result) {
					confirmationResult = result; // Set the global confirmationResult
					$('#otp_mobile').html(phoneNumber);
					$('#browchureModel').modal('hide');
					$('#otpModel').modal('show');
					// swal({
					//    title: "Done!",
					//    text: "OTP Send To Your Mobile No.",
					//    icon: "success",
					// });
				})
				.catch(function(error) {
					console.error('Error during signInWithPhoneNumber', error);
					$('.loginButtonLoaderMain').hide();
					$('.loginButtonText').show();
					$('#sendOtpButton').prop('disabled', false);
					swal({
						title: "Oops!",
						text: "OTP Sending Failed. Please try Again.",
						icon: "error",
					});
				});
		});

		// Function to validate OTP
		function validateOTP() {
			var otp = '';
			$('.otp-input').each(function() {
				otp += $(this).val();
			});

			if (otp.length === 6) {
				if (!confirmationResult) {
					swal({
						title: "Oops!",
						text: "OTP verification is not initialized. Please try again.",
						icon: "error",
					});
					return;
				}

				$("#ajax-preloader").show();
				confirmationResult.confirm(otp).then(function(result) {
					var user = result.user;
					$('#otpMessage').html(''); // Clear any existing message
					$.ajax({
						beforeSend: function() {
							$("#ajax-preloader").show();
						},
						url: '<?php echo base_url(); ?>/home/submit_lead',
						method: 'POST',
						data: $('form#download_bowchure').serialize(),
						success: function(response) {
							if (response) {
								swal({
									title: "Wow!",
									text: "Brochure Download Successfully",
									icon: "success",
								});
								window.open(coursePdfURL, '_blank');
								setTimeout(
									function() {
										location.reload();
									}, 2000);
							} else {
								swal({
									title: "Oops!",
									text: "Please Try Again ",
									icon: "error",
								});
							}
							$("#ajax-preloader").hide();
						},
						error: function(xhr, status, error) {
							console.error('Error:', error);
							$("#ajax-preloader").hide();
						}
					});
				}).catch(function(error) {
					$("#ajax-preloader").hide();
					console.error('Error during confirmationResult.confirm', error);
					swal({
						title: "Oops!",
						text: "Invalid OTP. Please Enter Correct OTP",
						icon: "error",
					});
				});
			}
		}

		// Handle OTP input focus and backspace
		$('.otp-input').on('input', function() {
			if (this.value.length === this.maxLength) {
				$(this).next('.otp-input').focus();
			}
			validateOTP();
		}).on('keydown', function(e) {
			if (e.key === 'Backspace' && this.value.length === 0) {
				$(this).prev('.otp-input').focus().val('').trigger('input');
			}
		});
	});
</script>
<style>
	.course-price-details .badge {
		background: #c83b2b;
		color: #fff !important;
		font-weight: 700;
	}

	.otp-inputs {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin: 20px 0;
	}

	.otp-input {
		width: 40px;
		height: 40px;
		text-align: center;
		font-size: 18px;
		border-color: #959090;
	}

	.loginButtonLoaderMain {
		display: none;
	}


	#browchureModel .modal-header,
	#otpModel .modal-header {
		border-bottom: 0;
	}

	#browchureModel .modal-content {
		background-color: #ddd;
	}

	#browchureModel .modal_heading {
		margin-top: -50px;
		text-align: center;
		font-size: 20px;
		margin-right: 30px;
		font-weight: 700;
	}

	#browchureModel .form-control {
		border: 1px solid #ada9a9;
		/* border-radius: 0; */
		height: 45px;
	}

	#browchureModel,
	#otpModel {
		/* z-index: 9999999; */
	}

	#browchureModel .modal-content {
		border-radius: 20px;
	}

	.modal-backdrop.show {
		opacity: .5;
		/* z-index: 999999; */
	}

	.w-full {
		width: 100%;
	}

	@media (min-width: 992px) {

		.sticky-wrapper.is-sticky .horizontal-main,
		.bg-background-1 .sticky-wrapper.is-sticky .header-style.horizontal-main {
			background: #fff;
			padding: 0 !important;
		}
	}

	input {
		-webkit-appearance: auto;
	}

	.item-card7-imgs img {
		height: 150px;
		object-fit: cover;
	}
</style>