<!DOCTYPE html>
<html lang="en">
    <head> 
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Website CSS style -->
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">

		<!-- Website Font style -->
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
		<link rel="stylesheet" href="/static/css/style.css">
		<!-- Google Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
		<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<title>Subscription Based</title>
	</head>
	<body>
		<div class="container">
			<div class="row main">
            
				<div class="main-login main-center">
				<h5>Sign up once and and get free subscription</h5>
					<form class="" id="signup">
						<div id="output" class="text-center text-primary font-weight-medium alert"></div>
						
						<div class="form-group">
							<label for="name" class="cols-sm-2 control-label">First Name</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
									<input type="text" class="form-control" id="fname"  placeholder="Enter your First Name"/>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="cols-sm-2 control-label">Last Name</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
									<input type="text" class="form-control" id="lname"  placeholder="Enter your Last Name"/>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label for="email" class="cols-sm-2 control-label">Your Email</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
									<input type="text" class="form-control" id="email"  placeholder="Enter your Email" autocomplete="off" />
								</div>
							</div>
							<div id="emailMessage"></div>
						</div>

						<div class="form-group">
							<label for="username" class="cols-sm-2 control-label">Username</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
									<input type="text" class="form-control" id="username"  placeholder="Enter your Username"/>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label for="password" class="cols-sm-2 control-label">Password</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
									<input type="password" class="form-control" id="password1"  placeholder="Enter your Password"/>
								</div>
							</div>
							<div id="strengthMessage"></div>
						</div>

						<div class="form-group">
							<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
									<input type="password" class="form-control" id="password2"  placeholder="Confirm your Password"/>
								</div>
							</div>
							<div id="matchMessage"></div>
						</div>

						<div class="form-group ">
							<button type="submit" id="submit" class="btn btn-primary btn-lg btn-block login-button">Register</button>
						</div>
						
					</form>
              <p>already have an account? <a href="login">Login</a></p > 
                    
				</div>
                
			</div>
		</div>

		 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="/static/js/bootstrap.min.js"></script> -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


    <script type="text/javascript" src="/static/js/passwordChecker.js"></script>
<script type="text/javascript">
    // Get Form and Sumbit
    $('#signup').on('submit', function(e){

        e.preventDefault();

          $.ajax({
               type : "POST",
               url: "{% url 'register' %}", /* django ajax posting url  */
               data: {
                first_name : $('#fname').val(),
                last_name : $('#lname').val(),
                email : $('#email').val(),
                username : $('#username').val(),
                password : $('#password1').val(),
                password2 : $('#password2').val(),
                csrfmiddlewaretoken: '{{ csrf_token }}',
                dataType: "json",

               },
               
               success: function(data){
                if (data.error){
                    $('#signup').find('.alert').removeClass('alert-success');
                    $('#signup').find('.alert').removeClass('none');
                    $('#signup').find('.alert').addClass('alert-warning');
                    $('#output').html(data.error) /* response message */
                }
                else{
                    $('#signup').find('.alert').removeClass('alert-warning');
                    $('#signup').find('.alert').removeClass('none');
                    $('#signup').find('.alert').addClass('alert-success');
                    $('#output').html(data.success) /* response message */
                    window.setTimeout(function(){
                        $('#signup').find('input[type=text], textarea').val('');
                    }, 700);
                    setTimeout(redirect, 2000);
                    function redirect(){
                       window.location.href = "{% url 'login' %}";
                    }
                }
                
               },

               failure: function() {
          //       console.log(typeof(data.msg));
                // $('.alert').html(data.msg+"hello")
                   
               }


       });
    });

    function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      };

    $('#email').keyup( function(){
        var email = $('#email').val();

        // preventDefault();
        if(IsEmail(email)==false){
                $('#emailMessage').removeClass();
                $('#emailMessage').addClass('InUse');
                $('#emailMessage').html('Email is not valid');
                return false;
        }

          $.ajax({
               type : "GET",
               url: "{% url 'check_mail_ajax' %}", /* django ajax posting url  */
               data: {
                email : $('#email').val(),
                // csrfmiddlewaretoken: '{{ csrf_token }}',
                dataType: "json",

               },
               
               success: function(data){
                if (data.error){
                    $('#emailMessage').removeClass();
                    $('#emailMessage').addClass('InUse');
                    $('#emailMessage').html('Email already exists');
                }
                else {
                    $('#emailMessage').removeClass();
                    $('#emailMessage').addClass('CoolEmail'); 
                    $('#emailMessage').html('Email is cool');
                }
                
               },

               failure: function() {
          //       console.log(typeof(data.msg));
                // $('.alert').html(data.msg+"hello")
                   
               }


       });
    });
</script>
	</body>
</html>