<!DOCTYPE html>
<html lang="en">

<?php $title = "Sign Up"; ?>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php include("../admin/head-tag.php");?>
<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
</head>
<body>

<div class="inner-wrapper login-body">
<div class="login-wrapper">
<div class="container">
<div class="loginbox shadow-sm">
<div class="login-left">
<img class="img-fluid" src="../admin/assets/img/logo.png" alt="Logo">
</div>
<div class="login-right">
<div class="login-right-wrap">
<h1>Register</h1>
<p class="account-subtitle">Access to our dashboard</p>

<form action="customer_registered_success.php">
    <!--<div id="error_msg"></div>-->
<div class="form-group">
<input class="form-control" id="customer_name" type="text" name="customer_name" placeholder="Full Name"/required>
</div>
<div class="form-group">
<input class="form-control" id="customer_email" type="email" name="customer_email" placeholder="Email"/required>
<span id='message1'></span>
</div>
<div class="form-group">
<input class="form-control" id="customer_password" type="password" name="customer_password" placeholder="Password" /required>
</div>
<div class="form-group">
<input class="form-control" type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" /required>
<span id='message'></span>
</div>
<div class="form-group">
<input class="form-control" id="customer_phone" type="text" name="customer_phone" placeholder="Phone #"/required>
</div>
<div class="form-group">
<input class="form-control" id="customer_address" type="text" name="customer_address" placeholder="Address"/required>
<span id="message"></span>
</div>
<div class="form-group mb-0">
<button class="btn btn-theme button-1 text-white ctm-border-radius btn-block" type="submit">Register</button>
</div>
</form>

<div class="login-or">
<span class="or-line"></span>
<span class="span-or">or</span>
</div>

<!--<div class="social-login">
<span>Register with</span>
<a href="javascript:void(0)" class="facebook"><i class="fa fa-facebook"></i></a><a href="javascript:void(0)" class="google"><i class="fa fa-google"></i></a>
</div>-->

<div class="text-center dont-have">Already have an account? <a href="login.php">Login</a></div>
</div>
</div>
</div>
</div>
</div>
</div>


<!--Check if user already exists without submitting form | CodeWithAwa-->
<!--https://codewithawa.com/posts/check-if-user-already-exists-without-submitting-form-->

<script>
// $('document').ready(function(){
// $('document').ready(function(){

 var email_state = false;
 var password = false;
 submit();
 		
//  $('#customer_email').on('keyup keypress blur change input', function(){
    $('#customer_email').on('input', function(){
 	var email = $('#customer_email').val();
 	if (email == '') {
 		email_state = false;
 		submit();
 		return;
 	}
 	$.ajax({
      url: 'customer_registered_success.php',
      type: 'post',
      data: {
      	'email_check' : 1,
      	'email' : email,
      },
      success: function(response){
      	if (response == 'taken' ) {
          email_state = false;
          submit();
        //   $('#customer_email').parent().removeClass();
        //   $('#customer_email').parent().addClass("form_error");
        $('#message1').html('Sorry... Email already taken').css('color', 'red');
      	}else if (response == 'not_taken') {
      	  email_state = true;
      	  submit();
      	 // $('#customer_email').parent().removeClass();
      	 // $('#customer_email').parent().addClass("form_success");
      	 $('#message1').html('Email available').css('color', 'green');
      	}
      }
 	});
 });
 

$('#customer_password, #confirm_password').on('keyup', function () {
      if ($('#customer_password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
    password = true;
    submit();
  }else
  {
    $('#message').html('Not Matching').css('color', 'red');
    password = false;
    submit();
  }
});



function submit(){
        if(email_state == false && password == false) {
           $(':input[type="submit"]').prop('disabled', true);
        }
        else
        {
        $(':input[type="submit"]').prop('disabled', false);
        }
     }

// $(':input[type="submit"]').on('click', function(){
//  	var email = $('#customer_email').val();
//  	var password = $('#customer_password').val();
 	
//  	if (email_state == false || password == false) {
// 	  $('#error_msg').text('Fix the errors in the form first');
// 	  return;
// 	}else{
//       // proceed with form submission
//       $.ajax({
//       	url: 'customer_registered_success.php',
//       	type: 'post',
//       	data: {
//       		'save' : 1,
//       		'customer_name' : $('#customer_name').val(),
//       		'customer_email' : email,
//       		'customer_password' : password,
//       		'customer_phone' : $('#customer_phone').val(),
//       		'customer_address' : $('#customer_address').val(),
//       	},
//       	success: function(response){
//       		alert('user saved');
//       		$('#customer_name').val('');
//       		$('#customer_email').val('');
//       		$('#customer_password').val('');
//       		$('#customer_phone').val('');
//       		$('#customer_address').val('');
//       	}
//       });
//  	}
//  });
// });

</script>

<?php include("../admin/scripts.php");?>

</body>

</html>