@extends('layouts.website')

@section('content')

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

	<style>
		.g_id_signin{
			margin-right: 10px;
		}
		.g_id_signin div{
			border-color: #F0F0F0 !important;
		}
		.g_id_signin span{
			font-weight: 600 !important;
			margin-left: 5px;
		}
	</style>

<div class="container-800">
	<div class="box-login">
		<div class="block-cadastro">
			<div class="log-title">
				<h3>Quero criar uma conta</h3>
				<p>Cadastre-se rapidamente e com segurança</p>
			</div>

			<form action="/cadastro" class="login-form cad" method="get">
				<div class="form-group">
					<label>E-mail</label>   
					<input id="email" placeholder="Digite seu e-mail" type="email" class="form-control" name="email" value="" required="">
				</div>
				<button type="submit" class="login-btn">Continuar</button>
			</form>

			<p class="text-below">Ficou com dúvidas? <a href="/contato" target="_blank">Fale conosco</a></p>
		</div>
		<div class="block-login">
			<div class="log-title">
				<h3>Já sou cliente</h3>
				<p>Logue na sua conta e finalize a compra</p>
			</div>

			<form action="/cadastro/login" id="login-form" class="login-form cad" method="POST">
				<input type="hidden" name="redirect" value="">
				<div class="form-group">
					<label>E-mail</label>   
					<input id="email" placeholder="Digite seu e-mail" type="email" class="form-control" name="email" value="" required="">
				</div>
				<div class="form-group trailing-icon">
					<label>Senha</label>   
					<input id="password" placeholder="Digite sua senha" type="password" class="form-control" name="password" value="" required="">
					<img src="img/site/login-eye-1.svg" class="show-hide show" alt="Mostrar senha">
					<img src="img/site/login-eye-2.svg" class="show-hide hide" alt="Ocultar senha">
				</div>
				<button type="submit" class="login-btn">Continuar</button>
			</form>

			<p class="text-below centered-log"><a href="/admin/forgot_password">Esqueci minha senha</a></p>
		</div>
		<div class="block-social">

			<!--
			<div class="social-btn">
				<img src="img/site/login-social-1.svg" alt="Google">
				Conectar com Google
			</div>
			<div class="hidden">
				<div class="g-signin2" data-onsuccess="onSignInGoogle" data-theme="dark"></div>
			</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 class="social-btn" onclick="facebookLogin()">
				<img src="img/site/login-social-2.svg" alt="Facebook">
				Conectar com Facebook
			</div> -->

			<div class="social-btn" onclick="twitterLogin()">
				<img src="img/site/login-social-3.svg" alt="Twitter">
				Conectar com Twitter
			</div>
		</div>
	</div>
</div>

<script>
	$('#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){
					location.href = data.url
				}else{
					alertUtil.alertError(data.message);
				}
			},
			complete:function(){
				$('.carregando').fadeOut();
			}
			
		}).fail(function(jqXHR) {

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

        });
	});

	$(document).ready(function(){

		$('[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]);
		}
		
		function inputMaskNumber(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', inputMaskNumber.bind(undefined, telMask, 14), false);
            // telefone: $telefone.replace(/[^0-9]/g, '')
        }

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

		$('#pais').change(function(){
			setCidade($(this).val(), null, null);
		});

		$('#estado').change(function(){
			setCidade(null, $(this).val(), null);
		});

		$('#cep').mask('99999-999');

		$('#cep').blur(function(){

			var cep    = $(this).val().replace('-', '').replace('.', '');
			var verify = $.trim(cep);

			if(verify){
				$.ajax({
					url: "/admin/getcep",
					dataType: 'json',
					type: 'POST',
					data: {
						'cep': verify,
						'_token': $('[name="_token"]').val()
					},
					success: function(resultadoCEP) {
						
						if (resultadoCEP.status) {

                           $('#bairro').val(unescape(resultadoCEP.bairro));
                           $('#logradouro').val(unescape(resultadoCEP.logradouro));
                           $('#complemento').val(unescape(resultadoCEP.complemento));

                           atualizarCidadesEstado(resultadoCEP.uf, resultadoCEP.cidade);

                           $('#numero').focus();

                      	}

					},
					error: function(xhr, ajaxOptions, thrownError) {
						//alertUtil.alertError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
					}
				});

			}else{
				alertUtil.alertWarning('Você deve preencher o campo CEP.');
			}

		});

		$('[name="data_nascimento"]').keydown(function(){
			mascaraData();
		});

		$('[name="data_nascimento"]').change(function(){
			mascaraData();
		});

		/** New Login */
		$(document).on('click', '.show-hide', function(){
			var $this = $(this);

			if($this.hasClass('show')){
				$this.hide();
				$('.show-hide.hide').show();
				$('input[name="password"]').attr('type', 'text');
			}else if($this.hasClass('hide')){
				$this.hide();
				$('.show-hide.show').show();
				$('input[name="password"]').attr('type', 'password');
			}
		})
	});

	function mascaraData(){
		var data = $('[name="data_nascimento"]').val();
		var tamanho = data.length;
		
		if(tamanho > 10){
			var size = tamanho - 10;
			$('[name="data_nascimento"]').val(data.substr(size,10));
		}
	}

	var flag = true;
	function setCidade(pais_id = null, estado_id = null, cidade_id = null){
		if(flag){
			flag = false;
			if(!pais_id){
				pais_id = $('#pais').val();
			}else{
				$('#pais').val(pais_id);
			}
			$.ajax({
				url:'/estado/buscar-estados-pais',
				type:'POST',
				data:{
					pais_id: pais_id
				},
				success:function(data){
					$('[name="estado_id"]').html('');
					$.each(data, function(key , obj){
						var selected = (obj.id == estado_id) ? 'selected' : '';
						$('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
					});

					if(!estado_id){
						estado_id = $('#estado').val();
					}

					$.ajax({
						url:'/cidade/buscar-cidades-estado',
						type:'POST',
						data:{
							estado_id: estado_id
						},
						success:function(data){
							$('[name="cidade_id"]').html('');
							$.each(data, function(key , obj){
								var selected = (obj.id == cidade_id) ? 'selected' : '';
								$('[name="cidade_id"]').append('<option '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
							});
							$('[name="cidade_id"]').trigger('change');
							flag = true;
						}
					});
				}
			});
		}


	}

	function atualizarCidadesEstado(uf = null, cidade = null){

		flag = false;

		  var pais_id = 1; // Brasil
		  $('#pais option').prop('selected', false);
		  $('#pais option[value="'+pais_id+'"]').prop('selected', true);
		  $('#pais').trigger('change');

		  $.ajax({
		  	url:'/estado/buscar-estados-pais',
		  	type:'POST',
		  	data:{
		  		pais_id: pais_id
		  	},
		  	success:function(data){
		  		$('[name="estado_id"]').html('');
		  		$.each(data, function(key , obj){
		  			var selected = (obj.id == estado_id) ? 'selected' : '';
		  			$('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
		  		});


		  		if(uf){
		  			$('[name="estado_id"] option').prop('selected', false);
		  			$('[name="estado_id"] option[data-uf="'+uf+'"]').prop('selected', true);
		  			$('[name="estado_id"]').trigger('change');
		  		}

		  		var estado_id = $('[name="estado_id"] option:selected').val();
		  		$.ajax({
		  			url: "/cidade/buscar-cidades-estado",
		  			type: "post",
		  			data: {
		  				estado_id:estado_id,
		  			},
		  			success:function(data){
		  				$('[name="cidade_id"]').html('');
		  				$.each(data,function(key , data){
		  					var selectedCidade = (cidade && cidade == data.nome) ? 'selected' : '';
		  					$('[name="cidade_id"]').append('<option '+selectedCidade+' value="'+data.id+'">'+data.nome+'</option>')
		  				});

		  				flag = true;
		  			},
		  		});


		  	}
		  });
	}

	function getNameAndSurname(fullName) {
		const nameParts = fullName.trim().split(' ');

		if (nameParts.length < 2) {
			return {
				firstName: nameParts[0] || '',
				lastName: ''
			};
		}

		const firstName = nameParts[0];
		const lastName = nameParts.slice(1).join(' ');

		return {
			firstName: firstName,
			lastName: lastName
		};
	}

	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 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){
								window.location.href = data.url;
							}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){
							window.location.href = data.url;
						}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>
@endsection