{% extends 'base.html.twig' %}

{% block title %}Edit Profile{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>

{{ form_start(form, { 'attr': { 'class': 'kt-form frmProfile' }}) }}
<div class="kt-container kt-grid__item kt-grid__item--fluid">
	<div class="kt-portlet kt-portlet--mobile">
		<div class="kt-portlet__head kt-portlet__head--lg">
			<div class="kt-portlet__head-label">
				<h3 class="kt-portlet__head-title">Edit Profile</h3>
			</div>

			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<a href="{{ path('profile') }}" class="btn btn-clean btn-icon-sm mr-2"><i
							class="la la-long-arrow-left"></i>Back</a>
					<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
					<button class="btn btn-primary btn-bold g-recaptcha" data-sitekey="{{gg_recaptcha_site_key}}"
						type="submit">Submit</button>
				</div>
			</div>
		</div>

		<div class="kt-portlet__body">
			<div class="form-group row">
				{{ form_label(form.email, '', {'label_attr': { 'class': 'col-2 col-form-label font-weight-bold' }}) }}

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.email, {'attr': { 'class': 'form-control
					profile_email','autocomplete':'off','readonly':'true','placeholder':'Enter email'}})}}
					{{ form_errors(form.email) }}
					<span id="sentemailmsg"></span>
				</div>
				<div class="col-md-1">
					<a href="javascript:void(0)" id="changeEmail" class="btn btn-link changeEmail">Change</a>
					<a href="javascript:void(0)" id="sendOTPEmail" class="btn btn-link sendEotp"
						style="{{ sendOtp }}">SendOTP</a>
					<div class="timeEmailOTP" style="display: none;">
						<span id="timer" class="btn btn-default"></span>
					</div>
				</div>
			</div>
			<div class="form-group row d-none sendOTPEmail">
				<label class="col-2 col-form-label font-weight-bold">Email OTP</label>
				<div class="col-lg-6 col-xl-4">
					<input type="text" minlength="6" maxlength="6" pattern="^[0-9]{1,6}*$"
						oninput="this.value = this.value.replace(/\D/g,'')" id="emailOTP" name="emailOTP"
						class="form-control verifyOTPEmail">
					<span class="errorEmail"></span>
				</div>
				<div class="col-md-2">
					<a href="javascript:void(0)" id="verifyOTPEmail" class="btn btn-link">Verify OTP</a>
				</div>
			</div>
			<div class="form-group row">
				{{ form_label(form.mobile, '', {'label_attr': { 'class': 'col-2 col-form-label font-weight-bold' }}) }}

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.mobile, {'attr': { 'class': 'form-control
					profile_mobile','readonly':'true','min':'1','minlength':'8','maxlength':'10', 'onkeypress':"return
					/[0-9]/i.test(event.key)"}})
					}}
					{{ form_errors(form.mobile) }}
					<div id="sentmobilemsg"></div>
				</div>
				<div class="col-md-1">
					<a href="javascript:void(0)" id="changeMobile" class="btn btn-link changeMobile">Change</a>
					<a href="javascript:void(0)" id="sendOTPMobile" class="btn btn-link sendotp"
						style="{{ sendOtp }}">Send OTP</a>
					<div class="timeMobileOTP" style="display: none;">
						<span id="timerMobile" class="btn btn-default"></span>
					</div>
				</div>
			</div>
			<div class="form-group row d-none sendOTPMobile">
				<label class="col-2 col-form-label font-weight-bold">Mobile OTP</label>
				<div class="col-lg-6 col-xl-4">
					<input type="text" minlength="6" maxlength="6" oninput="this.value = this.value.replace(/\D/g,'')"
						id="mobileOTP" name="mobileOTP" class="form-control">
					<input type="hidden" name="mobile_otp" id="mobile_otp" value="">
					<span class="errorMobile"></span>
				</div>
				<div class="col-md-2">
					<a href="javascript:void(0)" id="verifyOTPMobile" class="btn btn-link">Verify OTP</a>
				</div>
			</div>
		</div>
	</div>
</div>
{{ form_end(form) }}
{% endblock %}
{% block scripts %}
{{ parent() }}
<script src="https://www.google.com/recaptcha/api.js?render={{gg_recaptcha_site_key}}" async defer></script>
<script>
	jQuery(document).ready(function () {
		jQuery('.g-recaptcha').click(function (e) {
			e.preventDefault();
			grecaptcha.ready(function () {
				grecaptcha.execute('{{gg_recaptcha_site_key}}', { action: 'submit' }).then(function (token) {
					jQuery('.frmProfile').submit();
				});
			});
		});
	});
</script>
<script>
	$(document).ready(function () {
		let timerOn = true;
		function EmailOTPTimer(remaining) {
			var m = Math.floor(remaining / 60);
			var s = remaining % 60;
			m = m < 10 ? '0' + m : m;
			s = s < 10 ? '0' + s : s;
			document.getElementById('timer').innerHTML = m + ':' + s;
			remaining -= 1;
			if (remaining >= 0 && timerOn) {
				setTimeout(function () {
					EmailOTPTimer(remaining);
				}, 1000);
				return;
			}
			if (!timerOn) {
				return;
			}
			$('.timeEmailOTP').attr('style', 'display:none');
			$('.sendEotp').attr('style', 'display:none');
		}
		function MobileOTPTimer(remaining) {
			var m = Math.floor(remaining / 60);
			var s = remaining % 60;
			m = m < 10 ? '0' + m : m;
			s = s < 10 ? '0' + s : s;
			document.getElementById('timerMobile').innerHTML = m + ':' + s;
			remaining -= 1;
			if (remaining >= 0 && timerOn) {
				setTimeout(function () {
					MobileOTPTimer(remaining);
				}, 1000);
				return;
			}
			if (!timerOn) {
				return;
			}
			$('.sendotp').attr('style', 'display:none');
			$('.timeMobileOTP').attr('style', 'display:none');
		}
		$('#sendOTPEmail').addClass('d-none', true);
		$('#sendOTPMobile').addClass('d-none', true);
		$('.changeEmail').on('click', function () {
			$('#profile_email').val('');
			$('.changeEmail').addClass('d-none', true);
			$('.sendEotp').removeClass('d-none', true);
			$('button[type=submit]').attr('disabled', 'disabled');
			$('.sendEotp').attr('style', 'display:none');
			$('.profile_email').attr('readonly', false);
		});
		$('.changeMobile').on('click', function () {
			$('#profile_mobile').val('');
			$('.changeMobile').addClass('d-none', true);
			$('.sendotp').removeClass('d-none', true);
			$('button[type=submit]').attr('disabled', 'disabled');
			$('.sendotp').attr('style', 'display:none');
			$('.profile_mobile').attr('readonly', false);
		});
		var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
		$('#profile_email').on('blur', function () {
			if ($(this).val() != '' && pattern.test($(this).val())) {
				$('#sendOTPEmail').attr('style', 'display:block');
				$('#sentemailmsg').text("");
				$('button[type=submit]').attr('disabled', true);
			} else {
				$('button[type=submit]').attr('disabled', true);
				$('#sendOTPEmail').attr('style', 'display:none');
				$('#sentemailmsg').text("Please enter Email.").css('color', 'red');
			}
		})
		$('#profile_mobile').on('blur', function () {
			if ($(this).val() != '' && $(this).val().length == 10) {
				$('#sendOTPMobile').attr('style', 'display:block');
				$('#sentmobilemsg').text("");
				$('button[type=submit]').attr('disabled', true);
			} else {
				$('button[type=submit]').attr('disabled', true);
				$('#sendOTPMobile').attr('style', 'display:none');
				$('#sentmobilemsg').text("Please enter Mobile.").css('color', 'red');
			}
		})
		$('#sendOTPEmail').on('click', function (e) {
			e.preventDefault();
			$('.timeEmailOTP').attr('style', 'display:block');
			$('.sendEotp').attr('style', 'display:none');
			$('.sendOTPEmail').removeClass('d-none', true);
			$('button[type=submit]').attr('disabled', 'disabled');
			$('#profile_email').attr('readonly', true);
			var email = $('#profile_email').val();
			if ($('#profile_email').val() != '' && pattern.test($('#profile_email').val())) {
				EmailOTPTimer(60);

				grecaptcha.ready(function () {
					grecaptcha.execute('{{ gg_recaptcha_site_key }}', { action: 'submit' }).then(function (token) {
						$.ajax({
							method: "POST",
							url: "{{ path('sendEmailOtp') }}",
							data: {
								'emailId': email,
								'google_response': token
							},
							success: function (response) {
								$('.changeEmail').addClass('d-none', true);
								$('.profile_email').attr('readonly', true);
							}
						});
					});
				});
			} else {
				$('#sentemailmsg').text("Please enter Email.").css('color', 'red');
				$('.profile_email').attr('readonly', false);
			}
		});

		/* For Email Verify OTP */
		$('#verifyOTPEmail').on('click', function () {
			var emailOTP = $('.verifyOTPEmail').val();
			if (emailOTP == '') {
				$('.errorEmail').text("Please enter OTP.").css('color', 'red');
			} else if (emailOTP.length != '6' || emailOTP.length > 6) {
				$('.errorEmail').text("Please enter 6 digits Email OTP.").css('color', 'red');
			}
			else {
				var email = $('#profile_email').val();
				$.ajax({
					url: "{{path('verifyEmailOTP')}}",
					cache: false,
					type: "POST",
					data: { eOTP: emailOTP, emailAddress: email },
					success: function (result) {
						Swal.fire(
							'Congratulation!',
							'Email OTP verified successfully!',
							'success'
						)
						$('button[type=submit]').attr('disabled', false);
						$('.sendEotp').addClass('d-none', true);
						$('.sendOTPEmail').addClass('d-none', true);
						$('.changeEmail').removeClass('d-none', true);
						$('.timeEmailOTP').attr('style', 'display:none');
						$('.profile_email').attr('readonly', true);
					},
					error: function (error) {
						$('.errorEmail').text("Invalid Email OTP.").css('color', 'red');
					},
				});
			}
		});
		/* For Mobile Verify OTP */
		$('#sendOTPMobile').on('click', function () {
			$('.timeMobileOTP').attr('style', 'display:block');
			$('.sendotp').attr('style', 'display:none');
			$('#profile_mobile').attr('readonly', true);
			$('.sendOTPMobile').removeClass('d-none', true);
			var mobile = $('#profile_mobile').val();
			$('button[type=submit]').attr('disabled', 'disabled');
			if ($('#profile_mobile').val() != '' && $('#profile_mobile').val().length == 10) {
				MobileOTPTimer(60);


				grecaptcha.ready(function () {
					grecaptcha.execute('{{ gg_recaptcha_site_key }}', { action: 'submit' }).then(function (token) {
						$.ajax({
							method: "POST",
							url: "{{ path('sendSMSOtp') }}",
							data: {
								'mobileNo': mobile,
								'google_response': token
							},
							success: function (response) {
								$('.changeMobile').addClass('d-none', true);
								$('.profile_mobile').attr('readonly', true);
							}
						});
					});
				});
			} else {
				$('#sentmobilemsg').text("Please enter Mobile.").css('color', 'red');
				$('.profile_mobile').attr('readonly', false);
			}
		});
		$('#verifyOTPMobile').on('click', function () {
			var mobile = $('#profile_mobile').val();
			var mobileOTP = $('#mobileOTP').val();
			if (mobileOTP == '') {
				$('.errorMobile').text("Please enter OTP.").css('color', 'red');
			} else if (mobileOTP.length != 6 || mobileOTP.length > 6) {
				$('.errorMobile').text("Please enter 6 digits Mobile OTP.").css('color', 'red');
			}
			else {
				$.ajax({
					url: "{{path('verifyMobileOtp')}}",
					cache: false,
					type: "POST",
					data: { mobileNo: mobile, mOTP: mobileOTP },
					success: function (result) {
						console.log(result);
						Swal.fire(
							'Congratulation!',
							'Mobile OTP verified successfully!',
							'success'
						)
						$('.timeMobileOTP').attr('style', 'display:none');
						$('.sendOTPMobile').addClass('d-none', true);
						$('.changeMobile').removeClass('d-none', true);
						$('button[type=submit]').attr('disabled', false);
						$('.sendotp').addClass('d-none', true);
					},
					error: function (error) {
						console.log(error);
						$('.errorMobile').text("Invalid Mobile OTP.").css('color', 'red');
					},
				});
			}
		});
	});
</script>
{% endblock %}