<div class="identificacao">

	<script src="https://accounts.google.com/gsi/client" async defer></script>

	<style>
		.g_id_signin div{
			border-color: #F0F0F0 !important;
		}
		.g_id_signin span{
			font-weight: 600 !important;
			margin-left: 5px;
		}
		.checkout-rede-social{
			display: flex;
			justify-content: start;
		}
		.checkout-twitter{
			height: 38px !important;
			margin-top: 0 !important;
			padding: 0 20px !important;
			text-transform: none !important;
			font-size: 13px !important;
		}
		@media screen and (max-width: 768px) {
			.checkout-rede-social{
				flex-direction: column;
				gap: 10px;
			}
		}
	</style>

	<div class="etapa">
		<div class="circle-icon">
			<i class="fa fa-user"></i>
		</div>
		<h2 class="etapa__title">Identificação</h2>
	</div>
	<div class="flex-between" id="login">
		<div class="hidden">
			<div class="g-signin2" data-onsuccess="onSignInGoogle" data-theme="dark"></div>
		</div>
		<div class="acesse-rede-social">
			<h2 class="acesse__title" style="margin-bottom: 10px;">Acesse com sua rede social</h2>
			<div class="checkout-twitter" onclick="twitterLogin()" style="background: black; color: white; margin: 10px 0;">
				Acesse com o
				<img src="img/site/x_logo_white.png" alt="Twitter" style="width: 15px;">
			</div>

			<div id="g_id_onload"
				 data-client_id="692751143782-ccaup7s389f20tclaje55qkabohfis2t.apps.googleusercontent.com"
				 data-callback="onSignInGoogle">
			</div>
			<div class="g_id_signin" data-type="standard"></div>
		</div>
		<div class="ou">
			Ou
		</div>
		<div class="acesse-login">
			<h2 class="acesse__title">Acesse com sua conta VinumDay</h2>
			<form id="login-form" action="<?php echo url('cadastro/login'); ?>" method="POST">
				<input type="hidden" name="redirect" value="">
				<input id="email" name="email" type="text" class="default-input" placeholder="Digite seu e-mail">
				<input id="password" name="password" type="password" class="default-input" placeholder="Digite sua senha">
				<div class="lembrar-me">
					<input type="checkbox" value="1" id="lembrar" name="lembrar" checked><label for="lembrar">Permanecer conectado</label>
				</div>
				<button type="submit" class="btn-blue">Acessar</button>
				<div class="flex-between">
					<p class="esqueci"><a href="<?php echo url('admin/forgot_password'); ?>">Esqueci a senha.</a></p>
					<p class="cadastre-se">Não possui cadastro? <b id="cadastrar-se">Cadastre-se aqui!</b></p>
				</div>
			</form>
		</div>
	</div>
	<div class="register-section">
		<div class="checkout-rede-social">
			<div class="checkout-twitter" onclick="twitterLogin()" style="background: black; color: white; width: 190px; margin-right: 15px;">
				Acesse com o
				<img src="img/site/x_logo_white.png" alt="Twitter" style="width: 15px;">
			</div>
			<div id="g_id_onload"
				 data-client_id="692751143782-ccaup7s389f20tclaje55qkabohfis2t.apps.googleusercontent.com"
				 data-callback="onSignInGoogle">
			</div>
			<div class="g_id_signin" data-type="standard"></div>
		</div>
		<h2 class="register-section__title">OU PREENCHA O <b>FORMULÁRIO ABAIXO</b></h2>
		<form id="register-form" action="<?php echo url('register-checkout'); ?>" method="POST">
			<input type="hidden" name="id_facebook">
			<input type="hidden" name="id_twitter">
			<input type="hidden" name="id_google">
			<div class="flex-between">
				<div class="register-left">
					<div class="flex-between">
						<div class="nome">
							<label>Nome</label>
							<input placeholder="Nome" tabindex="1" required type="text" class="default-input" name="nome" value="{{ old('nome') }}">
						</div>
						<div class="sobrenome">
							<label>Sobrenome</label>
							<input placeholder="Sobrenome" tabindex="2" required type="text" class="default-input" name="sobrenome" value="{{ old('sobrenome') }}">
						</div>
					</div>
					<div class="form-group has-feedback">
						<label>Data de Nascimento</label>
						<input placeholder="DD/MM/AAAA" tabindex="4" required type="date" class="default-input" name="data_nascimento" value="{{ old('data_nascimento') }}" max="<?php echo date('Y-m-d'); ?>">
					</div>
					<div class="form-group has-feedback">
						<label>CPF</label>
						<input placeholder="000.000.000-00" tabindex="6" required type="text" class="default-input" name="cpf" value="{{ old('cpf') }}">
					</div>
					<div class="form-group has-feedback">
						<label>Senha</label>
						<input placeholder="Crie uma senha" tabindex="16" required type="password" class="default-input" name="password">

					</div>
				</div>
				<div class="register-right">
					<div class="form-group has-feedback">
						<label>E-mail</label>
						<input placeholder="Digite seu e-mail" tabindex="3" required type="email" class="default-input" name="email" value="{{ old('email') }}">
					</div>
					<div class="form-group has-feedback">
						<label>Telefone</label>
						<input placeholder="Digite seu telefone" tabindex="5" required type="text" class="default-input" name="telefone" value="{{ old('telefone') }}">
					</div>

					<div class="form-group has-feedback">
						<label>Gênero</label>
						<select name="genero" required tabindex="7" class="default-select">
							<option value="" disabled selected>Escolha</option>
							<option value="M">Masculino</option>
							<option value="F">Feminino</option>
						</select>
					</div>
					<div class="form-group has-feedback">
						<label>Confirme sua Senha</label>
						<input placeholder="Digite sua senha novamente" tabindex="17" required type="password" class="default-input" name="confirm_password">
					</div>
					
				</div>

			</div>
			
			<div class="ofertas-email">
				<input type="checkbox" name="receber_novidades" checked value="1">
				<p>Desejo receber novidades e ofertas exclusivas por e-mail</p>
			</div>

			<div class="ofertas-email">
				<div class="item" style="" id="recaptcha">
					{!! Recaptcha::render() !!}
				</div>
			</div>
				
			<button type="submit" class="minha-conta__button-orange">Concluir Cadastro</button>
		</form>
	</div>
</div>



<script>
	$(document).ready(function(){
		$('#cadastrar-se').click(function(){
			$('#login').hide();
			$('.register-section').fadeIn();
		});

		$('#login-form, #register-form').submit(function(e){
			e.preventDefault();
			$.ajax({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				url:$(this).attr('action'),
				type:$(this).attr('method'),
				data:$(this).serialize(),
				beforeSend:function(){
					$('.carregando').fadeIn();
				},
				success:function(data){
					if(data.status){
						if(data.primeira_compra == true){
							$('#adega').html('');
						}
						$('#identificacao').html(data.html);
						$('#cupom-desconto').html(data.html_cupom);
						$('#listagem-cart').html(data.html_listagem);
					}else{
						alertUtil.alertError(data.message);
					}
					$('.carregando').fadeOut();
				}
			}).fail(function(jqXHR) {

			  $('.carregando').fadeOut();
			  
			  if(jqXHR.responseJSON.cpf){
			  	alertUtil.alertError(jqXHR.responseJSON.cpf);
			  }else{
			  	alertUtil.alertError(jqXHR.responseText);
			  }

	        });
		});

		$('[name="cpf"]').mask('999.999.999-99');
		
		function inputHandler(masks, max, event) {
			var c = event.target;
			var v = c.value.replace(/\D/g, '');
			var m = c.value.length > max ? 1 : 0;
			VMasker(c).unMask();
			VMasker(c).maskPattern(masks[m]);
			c.value = VMasker.toPattern(v, masks[m]);
		}
		if($('[name="telefone"]').length){
			var telMask = ['(99) 9999-9999', '(99) 99999-9999'];
			var tel = document.querySelector('[name="telefone"]');
			VMasker(tel).maskPattern(telMask[0]);
			tel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);
		}


		$('.select2').select2();

		
	});

	function onSignInGoogle(response) {
		const token = response.credential;
		const payload = JSON.parse(atob(token.split('.')[1]));
		const userId = payload.sub;

		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url:'/login-google',
			type:'POST',
			data:{
				id:userId
			},
			beforeSend:function(){
				//$('.carregando').fadeIn();
			},
			success:function(data){
				if(data.status){
					if(data.user){
						window.location.href = data.url;
					}else{
						let nameUser = getNameAndSurname(payload.name);

						$('[name="nome"]').val(nameUser.firstName).attr('readonly', true);
						$('[name="sobrenome"]').val(nameUser.lastName).attr('readonly', true);
						$('[name="email"]').val(payload.email).attr('readonly', true);

						$('[name="id_google"]').val(userId);
						$('[name="password"]').val(userId).closest('.form-group').hide();
						$('[name="confirm_password"]').val(userId).closest('.form-group').hide();
						$('#cadastrar-se').trigger('click');
						$('[name="data_nascimento"]').focus();
					}
				}else{
					alertUtil.alertError(data.message);
				}
			}
		});
	}

	function OldonSignInGoogle(googleUser) {
		if(clicked == true){
		  // Useful data for your client-side scripts:
		  var profile = googleUser.getBasicProfile();

		  $.ajax({
		  	headers: {
		  		'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		  	},
		  	url:'/login-google',
		  	type:'POST',
		  	data:{
		  		id:profile.getId()
		  	},
		  	beforeSend:function(){
				  //$('.carregando').fadeIn();
				},
				success:function(data){
					if(data.status){
						if(data.user){
							if(data.primeira_compra == true){
								$('#adega').html('');
							}
							$('#identificacao').html(data.html);
							$('#cupom-desconto').html(data.html_cupom);
							$('#listagem-cart').html(data.html_listagem);
						}else{
							$('[name="nome"]').val(profile.getGivenName()).attr('readonly', true);
							$('[name="sobrenome"]').val(profile.getFamilyName()).attr('readonly', true);
							$('[name="email"]').val(profile.getEmail()).attr('readonly', true);

							$('[name="id_google"]').val(profile.getId());
							$('[name="password"]').val(profile.getId()).closest('.form-group').hide();
							$('[name="confirm_password"]').val(profile.getId()).closest('.form-group').hide();
							$('#cadastrar-se').trigger('click');
							$('[name="data_nascimento"]').focus();
						}
					}else{
						alertUtil.alertError(data.message);
					}
				}
			});

		  // The ID token you need to pass to your backend:
		  var id_token = googleUser.getAuthResponse().id_token;
		  //console.log("ID Token: " + id_token);
		}
	};

	function facebookLogin() {
		FB.login(function(){
			FB.api('/me', {fields: 'first_name, last_name, email, birthday'}, function(response) {
				$.ajax({
				  	headers: {
				  		'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				  	},
				  	url:'/login-facebook',
				  	type:'POST',
				  	data:{
				  		id:response.id,
				  	},
				  	beforeSend:function(){
						 //$('.carregando').fadeIn();
					},
					success:function(data){
						if(data.status){
							if(data.user){
								if(data.primeira_compra == true){
									$('#adega').html('');
								}
								$('#identificacao').html(data.html);
								$('#cupom-desconto').html(data.html_cupom);
								$('#listagem-cart').html(data.html_listagem);
							}else{
								$('[name="nome"]').val(response.first_name).attr('readonly', true);
								$('[name="sobrenome"]').val(response.last_name).attr('readonly', true);
								$('[name="email"]').val(response.email).attr('readonly', true);

								$('[name="id_facebook"]').val(response.id);
								$('[name="password"]').val(response.id).closest('.form-group').hide();
								$('[name="confirm_password"]').val(response.id).closest('.form-group').hide();
								$('#cadastrar-se').trigger('click');
								$('[name="data_nascimento"]').focus();
							}
						}else{
							alertUtil.alertError(data.message);
						}
					}
				});
				
		  //$('[name="data_nascimento"]').val(response.first_name);
		});
		}, {scope: 'public_profile,email'});
	}

	function twitterLogin(){
		var provider = new firebase.auth.TwitterAuthProvider();
		firebase.auth().languageCode = 'pt';
		firebase.auth().signInWithPopup(provider).then(function(result) {
			// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
			// You can use these server side with your app's credentials to access the Twitter API.
			var token = result.credential.accessToken;
			var secret = result.credential.secret;
			// The signed-in user info.
			var user = result.user;

		  	$.ajax({
			  	headers: {
			  		'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			  	},
			  	url:'/login-twitter',
			  	type:'POST',
			  	data:{
			  		id:user.uid,
			  	},
			  	beforeSend:function(){
					 //$('.carregando').fadeIn();
				},
				success:function(data){
					if(data.status){
						if(data.user){
							if(data.primeira_compra == true){
								$('#adega').html('');
							}
							$('#identificacao').html(data.html);
							$('#cupom-desconto').html(data.html_cupom);
							$('#listagem-cart').html(data.html_listagem);
						}else{
							$('[name="nome"]').val(user.displayName);
							$('[name="email"]').val(user.email).attr('readonly', true);
							
							$('[name="id_twitter"]').val(user.uid);
							$('[name="password"]').val(user.uid).closest('.form-group').hide();
							$('[name="confirm_password"]').val(user.uid).closest('.form-group').hide();
							$('#cadastrar-se').trigger('click');
							$('[name="data_nascimento"]').focus();
						}
					}else{
						alertUtil.alertError(data.message);
					}
				}
			});
		  // ...
		}).catch(function(error) {
		  // Handle Errors here.
		  var errorCode = error.code;
		  var errorMessage = error.message;
		  // The email of the user's account used.
		  var email = error.email;
		  // The firebase.auth.AuthCredential type that was used.
		  var credential = error.credential;
		  // ...
		});
	}


	
  </script>