@extends('main')
@section('styles')
	<style type="text/css">
	#verify-form,
	.hide {
		display: none;
	}
	</style>
@endsection

	@section('content')
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-xs-12">
						<ul>
							<li class="home">
								<a href="{{ Route('site.home.page') }}">{{ __('Home') }}</a>
								<span>/</span>
							</li>
							<li>
								<a href="{{ Route('site.account.home') }}">{{ __('My Account') }}</a>
								<span>/</span>
							</li>
							<li >
								{!! __("Verification code") !!}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<section class="main-container col1-layout">
			<div class="main container">
				<div class="cart-collaterals row">
					<div class="col-md-4 col-md-push-4 ">
						<div class="message text-center">
							{!! __('The account will be activated by sending the activation code to your mobile') !!}
							{{-- <div class="divider-br"></div>
							{!! __('Check messages, enter the verification code') !!} --}}
						</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 id="otp-send-form" class="text-center">
							<form>
								{{-- <div class="mb-3">
									<input disabled required type="text" id="phone-number" class="form-control" placeholder="{{ auth()->user()->mobile }}" value="{!! __('Mobile no') !!} {{ auth()->user()->mobile }}" >
								</div> --}}
								<div id="recaptcha-container"></div>
								<div class="mb-3 text-center">
									<button id="otp_send" type="button" class="btn btn-info" onclick="otpSend();">{!! __('Request activation code') !!}</button>
								</div>
							</form>
						</div>
						<div class="divider-br"></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>
		</section>
	@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");
						// reCAPTCHA solved, allow signInWithPhoneNumber.
						// alert('reCAPTCHA solved, allow signInWithPhoneNumber.');
					}
				});
			}
			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("otp.ok") }}' ,
						data: {
							'quantity': 'ok login',
						},
						success: function(data) {
							window.location.href = '{{ route('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