@extends('main')
@section('styles')
	<style type="text/css">
	#otp-send-form,
	#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">{!! __("Verification code") !!}</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="alert alert-danger hide" id="error-message"></div>
					<div class="alert alert-success hide" id="sent-message"></div>
					<div class="message text-center">
						<div class="divider-br"></div>
						{!! __('Verification code sent to mobile') !!}
						<div class="divider-br"></div>
						{!! __('Check messages, enter the verification code') !!}
					</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 id="otp-send-form" class="text-center">
						<form >
							<div id="recaptcha-container"></div>
							<div class="mb-3 text-center">
								<button id="otp_send" type="button" class="btn btn-info" onclick="otpSend();">{!! __('Request verification code') !!}</button>
							</div>
						</form>
						<div class="divider-br"></div>
					</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) => {
					// reCAPTCHA solved, allow signInWithPhoneNumber.
					// alert('reCAPTCHA solved, allow signInWithPhoneNumber.');
					document.getElementById("otp-send-form").classList.add("d-block");
				}
			});
			otpSend();
		}
		function otpSend() {
			var phoneNumber = '+2{{ auth()->user()->mobile }}';
			const appVerifier = window.recaptchaVerifier;
			document.getElementById('otp-code').value = '';
			firebase.auth().signInWithPhoneNumber('+2{{ auth()->user()->mobile }}', 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");
			});
		}
		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.site.account.home') }}';
					}
				});
			}).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