<?php $__env->startSection('content'); ?>

<div class="container">
	<?php if(isset($indicador_nome) && !empty($indicador_nome)): ?>
	<div class="indique confirm">
		<div class="bloco">
			<img src="img/site/selo.png" alt="Indique a VinumDay">
			<div class="content">
				<h4>Você ganhou um cupom de R$20!</h4>
				<p><?php echo e($indicador_nome); ?> indicou você para ganhar um cupom de R$ 20 em sua primeira compra.<br>Cadastre-se e aproveite agora mesmo!</p>
			</div>
		</div>
	</div>
	<?php endif; ?>

	<section class="identificacao" style="margin-top:80px;">
		<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" <?php echo (\Request::segment(1) == 'cadastro' || \Request::segment(1) == 'cadastro-indicacao') ? 'style="display:none;"' : ''; ?>>
			<div class="acesse-rede-social">
				<h2 class="acesse__title">Acesse com sua rede social</h2>
				<div class="checkout-facebook" onclick="facebookLogin()">
					<i class="fa fa-facebook-square"></i>
					Acesse com o Facebook
				</div>

				<div class="checkout-twitter" onclick="twitterLogin()">
					<i class="fa fa-twitter"></i>
					Acesse com o Twitter
				</div>

				<div class="checkout-google">
					<i class="fa fa-google-plus"></i>
					Acesse com o Google
				</div>
				<div class="hidden">
					<div class="g-signin2" data-onsuccess="onSignInGoogle" data-theme="dark"></div>
				</div>

			</div>
			<div class="ou">
				Ou
			</div>
			<div class="acesse-login">
				<h2 class="acesse__title" style="margin-bottom: 0;">Acesse com sua conta VinumDay</h2>
				<form id="login-form" action="<?php echo url('cadastro/login'); ?>" method="POST">
					<input type="hidden" name="redirect" value="<?php echo $redirect; ?>">
					<input id="email" name="email" type="email" 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" <?php echo (\Request::segment(1) == 'cadastro' || \Request::segment(1) == 'cadastro-indicacao') ? 'style="display:block;"' : ''; ?>>
			<div class="checkout-rede-social">
				<div class="checkout-facebook" onclick="facebookLogin()" >
					<i class="fa fa-facebook-square"></i>
					Cadastre-se com o Facebook
				</div>
				<div class="checkout-twitter" onclick="twitterLogin()">
					<i class="fa fa-twitter"></i>
					Cadastre-se com o Twitter
				</div>
				<div class="checkout-google">
					<i class="fa fa-google-plus"></i>
					Cadastre-se com o Google
				</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="codigo_indicacao" value="<?php echo isset($codigo_indicacao) ? $codigo_indicacao : ''; ?>">
				<input type="hidden" name="redirect" value="<?php echo $redirect; ?>">
				<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="<?php echo e(old('nome')); ?>">
							</div>
							<div class="sobrenome">
								<label>Sobrenome</label>
								<input placeholder="Sobrenome" tabindex="2" required type="text" class="default-input" name="sobrenome" value="<?php echo e(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="<?php echo e(old('data_nascimento')); ?>">
						</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="<?php echo e(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="<?php echo e(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="<?php echo e(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">
						<?php echo Recaptcha::render(); ?>

					</div>
				</div>

				<button type="submit" class="minha-conta__button-orange">Concluir Cadastro</button>
			</form>
		</div>
	</section>
</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();
		});
	});

	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 onSignInGoogle(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){
							window.location.href = data.url;
						}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){
								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>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>