@extends('main')
@section('styles')
	<style type="text/css">
	#verify-form,
	.hide {
		display: none;
	}
	</style>
@endsection
@section('content')
	<div class="shop-header bg-color--grey fix-head">
		<div class="container space-y--15">
			<div class="row align-items-center">
				<div class="col-9">
					<h1 class="category-title text-right">{!! __("Reset Password") !!}</h1>
				</div>
				<div class="col-3 text-left">
					<a href="javascript:history.back()" class="back-link">{!! __('Back') !!} <i class="fa fa-long-arrow-left"></i> </a>
				</div>
			</div>
		</div>
	</div>
	<div class="auth-page-body">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="divider-br"></div>
					<div class="message text-center">
						{!! __('Please enter your account mobile number') !!}
					</div>
					<div class="divider-br"></div>
					<div class="alert alert-danger hide" id="error-message"></div>
					<div class="alert alert-success hide" id="sent-message"></div>
					<div class="divider-br"></div>
					<div id="otp-send-form" class="text-center">
						<form >
							<div id="recaptcha-container"></div>
							<div class="mb-3 text-center">
								<div class="mb-3">
									<input dir="ltr" required type="text" id="phone-number" class="form-control" placeholder="01XXXXXXXXXX" >
								</div>
								<button id="otp_send" type="button" class="btn btn-info" onclick="otpSend();">{!! __('Request activation code') !!}</button>
							</div>
						</form>
					</div>
					<div id="verify-form">
						<form>
							<div class="mb-3">
								<label for="otp-code" class="form-label">{!! __('Verify account') !!}:</label>
								<input type="text" id="otp-code" class="form-control" placeholder="{!! __('Account verification code') !!}">
							</div>
							<div class="text-center">
								<button type="button" class="btn btn-success" onclick="otpVerify();">{!! __('Verify account') !!}</button>
							</div>
						</form>
					</div>
					<div class="divider-br"></div>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
	<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>
	{!! Html::script(asset('js/main-config.js')) !!}

	<script type="text/javascript">
		window.onload = function () {
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
			render();
		};
		function render() {
			// reCAPTCHA widget
			window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
				'size': 'invisible',
				'callback': (response) => {
					document.getElementById("otp-send-form").classList.add("d-block");
				}
			});
		}
		function otpSend() {
			var phoneNumber = document.getElementById('phone-number').value;
			phoneNumber = phoneNumber.replace(/[٠-٩]/g, d => "٠١٢٣٤٥٦٧٨٩".indexOf(d)).replace(/[۰-۹]/g, d => "۰۱۲۳۴۵۶۷۸۹".indexOf(d));

			if (phoneNumber.length < 10) {
				document.getElementById("error-message").innerHTML = "{!! __('Please enter your account mobile number') !!}";
				document.getElementById("error-message").classList.add("d-block");
				return false;
			}
			else {
				$.ajax({
					type: "POST",
					url: '{{ route("mobily.otp.check.mobile") }}' ,
					data: {
						'mobile': phoneNumber,
					},
					success: function(data) {
						document.getElementById("error-message").classList.add("d-none");
						const appVerifier = window.recaptchaVerifier;
						document.getElementById('otp-code').value = '';
						firebase.auth().signInWithPhoneNumber('+2'+phoneNumber, appVerifier)
						.then((confirmationResult) => {
							// SMS sent. Prompt user to type the code from the message, then sign the
							// user in with confirmationResult.confirm(code).
							window.confirmationResult = confirmationResult;
							document.getElementById("sent-message").innerHTML = "{!! __('Account verification code has been sent to the mobile') !!}";
							document.getElementById("sent-message").classList.add("d-block");
							document.getElementById("verify-form").classList.add("d-block");
						}).catch((error) => {
							document.getElementById("error-message").innerHTML = "{!! __('Please try soon') !!}";
							document.getElementById("verify-form").classList.add("d-none");
							document.getElementById("error-message").classList.add("d-block");
						});
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						document.getElementById("error-message").innerHTML = "{!! __('Mobile number not registered') !!}";
						document.getElementById("error-message").classList.add("d-block");
						return false;
					}
				});
			}
			return false;
		}
		function otpVerify() {
			var code = document.getElementById('otp-code').value;
			code = code.replace(/[٠-٩]/g, d => "٠١٢٣٤٥٦٧٨٩".indexOf(d)).replace(/[۰-۹]/g, d => "۰۱۲۳۴۵۶۷۸۹".indexOf(d));

			confirmationResult.confirm(code).then(function (result) {
				// User signed in successfully.
				var user = result.user;
				// document.getElementById("sent-message").innerHTML = "You are succesfully logged in.";
				// document.getElementById("sent-message").classList.add("d-block");
				$.ajax({
					type: "POST",
					url: '{{ route("mobily.otp.ok") }}' ,
					data: {
						'quantity': 'ok login',
					},
					success: function(data) {
						window.location.href = '{!! route('mobily.update.account.password') !!}';
					}
				});
			}).catch(function (error) {
				document.getElementById("error-message").innerHTML = "{!! __('The verification code is incorrect or has expired') !!}";
				document.getElementById("error-message").classList.add("d-block");
			});
		}
	</script>
@endsection