<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<style type="text/css">
    /* Made with love by Mutiullah Samim*/



html,body{

background-size: cover;
background-repeat: no-repeat;

 height:800px;
font-family: 'Numans', sans-serif;
}</style>
</head>
<body> <?php include 'heder.php';?>
      <br><br><br>
<div class="container" >
<br> 
<hr>


<center>
<div class="col-md-9" style="border-radius: 15px;font-family:Rockwell;font-size: 20px; 
        background-color: #4682B4 ; "><div class="card-header">
      <a href="event2.php" class="float-right btn btn-primary" style="font-size: 30px;">Login</a>
    <h1 class="text-red" style="text-align: center;color:#8B0000;font-family:Monotype Corsiva;font-size: 60px;"><b>Sign Up  </b></h1>

<article class="card-body">
<form method="post" action="Signin_process.php">

     <div class=" form-group" >
        
       
    <input type="hidden" id="role1" name="role" class="form-control" readonly="" placeholder="customer"  value="customer" required>
      </div>
	<div class="form-row">
	
		<div class="col form-group">
			<label style="font-size: 20px; color: black ">First name </label>   
		  	<input type="text" id="fname" minlength="5" maxlength="10" name="fname" class="form-control" autocomplete="off" placeholder="First Name" required>
		  	<h5 id="fnamecheck"></h5>
		</div> <!-- form-group end.// -->
		<div class="col form-group">
			<label style="font-size: 20px; color: black ">Last name</label>
		  	<input type="text" id="lname" minlength="5" maxlength="8" name="lname" class="form-control" autocomplete="off"  placeholder="Last Name " required>
		  	<h5 id="lnamecheck"></h5>
		</div> <!-- form-group end.// -->
	</div> <!-- form-row end.// -->
	<div class="form-group">
		<label style="font-size: 20px; color: black ">Email address</label>
		<input type="email" id="email" name="email" class="form-control" autocomplete="off"  placeholder="Email" required>
		<h5 id="emailcheck"></h5>
		
	</div> <!-- form-group end.// -->
		<div class="form-group">
		<label style="font-size: 20px; color: black ">Address</label>
		<textarea class="form-control" minlength="5" maxlength="15" name="address" id="address" autocomplete="off"  placeholder="Address" required></textarea>
		<h5 id="addresscheck"></h5>
		
	</div> <!-- form-group end.// -->
	<div class="form-group">
		<label style="font-size: 20px; color: black ">Phone Number:</label>
		<input type="text" name="phone" id="phone" class="form-control" autocomplete="off"  placeholder="Phone Number" onkeypress="if(this.value.length==10) return false;" required>
		<h5 id="phonecheck"></h5>
	</div> <!-- form-group end.// -->
	<div class="form-group" id="male">
			<label style="font-size: 20px; color: black " class="form-check form-check-inline">
		  <input class="form-check-input" name="gender" checked=""  required="" type="radio"  name="gender" value="Male" required>
		  
		  <span style="font-size: 20px; color: black "  class="form-check-label"> Male </span>
		</label>
		<label  style="font-size: 20px; color: black "class="form-check form-check-inline">
		  <input class="form-check-input" name="gender"   type="radio" id="female" name="gender" value="Female" required>
		  <h5 id="femalecheck"></h5>
		  <span style="font-size: 20px; color: black " class="form-check-label"> Female</span>
		</label>
<h5 id="malecheck"></h5>
</div>
	<div class="form-row">
		<div class="form-group col-md-6">
		  <label style="font-size: 20px; color: black ">City</label>
		  <input type="text" id="city" maxlength="10" minlength="5" name="city" autocomplete="off" placeholder="City"  class="form-control" required>
         
		  <h5 id="citycheck"></h5>
		</div> <!-- form-group end.// -->
		<div class="form-group col-md-6">
		  <label style="font-size: 20px; color: black ">Country</label>
		 
           <select class="form-control" name="country"  id="country" required>
          <option value=""  hidden="">---select---</option>
        
         
       <option value="Uzbekistan" >Uzbekistan</option>
              <option value="Russia">Russia</option>
              <option  value="India">India</option>
              <option value="Afganistan">Afganistan</option>
        
        </select>
        <h5 id="countrycheck"></h5>
		</div> <!-- form-group end.// -->
	</div> <!-- form-row.// -->
	<div class="form-group">
		<label style="font-size: 20px; color: black ">UserName</label>
		<input type="text" id="Username" autocomplete="off" minlength="5" maxlength="8"   name="username" class="form-control" placeholder="Username" required>
		<h5 id="usercheck"></h5>
	</div> <!-- form-group end.// -->
	<div class="form-group">
		<label style="font-size: 20px; color: black ">Create password</label>
	    <input class="form-control" name="password" minlength="8" maxlength="8" autocomplete="off" placeholder="password"  id="password" type="password" required>
	    <h5 id="passcheck"></h5>
	</div> <!-- form-group end.// --> 
	
    <div class="form-group">
        <button type="submit" name="ragister" id="ragister" class="btn btn-primary btn-block"> Register  </button>
    </div> <!-- form-group// -->      
                                              
</form>
</article> <!-- card-body end .// -->

</div> <!-- card.// -->
</div> <!-- col.//-->

</div> <!-- row.//-->

</center>
</div> 
<!--container end.//-->
<br>
 <div class="jumbotron" style="margin-top: 0px;background-color:#2980B9;  margin-bottom: 0px;">
    <div class="container" style="margin-top: 30px;">
      <p id="abt-ftr" style="color: white">@ Copyright 2019-2020 www.bi_lal.com. All rights reseerved. Developed by <span style="color:black;">Saurabh Salvi</span> &nbsp;<span style="color: white;"> Privacy policy &#10072; Disclaimer</span></p>
    </div>
  </div>
  </div>
<script type="text/javascript">
    $(document).ready(function(){
    		$('fnamecheck').hide();
    		
    		$('emailcheck').hide();
    		$('addresscheck').hide();
    		$('phonecheck').hide();
    		$('malecheck').hide();
    		$('countrycheck').hide();
            $('usercheck').hide();
            $('citycheck').hide();
            $('conpasswordcheck').hide();
            
            

            $('#fname').keyup(function(){
                fname_check();
            });
            function fname_check(){
                var fname_val =$('#fname').val();

                if (fname_val.length == '') {
                    $('#fnamecheck').show();
                    $('#fnamecheck').html("<p class=text-DarkRed>**Please Fill the fname</p>");
                    $('#fnamecheck').focus();
                    $('#fname').css("border","2px solid DarkRed ");
                    user_err =false;
                    return false;
                } else {
                    $('#fnamecheck').hide();
                }
                  if ((fname_val.length  >= 5) == (fname_val.length  <= 10)) {
                
                    
                                   $('#fnamecheck').focus();
$('#fnamecheck').show();
                    $("#fname").css("border","2px solid DarkGreen ");
                    $("#fnamecheck").html("<p class=text-light>Nice</p>");
                    return true;
                } else {
      $('#fnamecheck').show();
                    $('#fnamecheck').html("<p class=text-DarkRed >**fname length must be between 5 and 10</p>");
                    $('#fnamecheck').focus();
                      $("#fname").css("border","2px solid DarkRed ");
                    return false;
                    
                }
            }
             $('#lname').keyup(function(){
                lname_check();
            });
            function lname_check(){
                var lname_val =$('#lname').val();

                if (lname_val.length == '') {
                    $('#lnamecheck').show();
                    $('#lnamecheck').html("<p class=text-DarkRed >**Please Fill the lname</p>");
                    $('#lnamecheck').focus();
                    $('#lname').css("border","2px solid DarkRed ");
                    user_err =false;
                    return false;
                } else {
                    $('#lnamecheck').hide();
                }
                  if ((lname_val.length  >= 5) == (lname_val.length  <= 8)) {
                
                    
                                   $('#lnamecheck').focus();
$('#lnamecheck').show();
                    $("#lname").css("border","2px solid DarkGreen ");
                    $("#lnamecheck").html("<p class=text-light>Nice</p>");
                    return true;
                } else {
      $('#lnamecheck').show();
                    $('#lnamecheck').html("<p class=text-DarkRed >**lname length must be between 5 and 8</p>");
                    $('#lnamecheck').focus();
                      $("#lname").css("border","2px solid DarkRed ");
                    return false;
                    
                }
            }

            $('#email').keyup(function(){
                email_check();
            });
            function email_check(){
                var email_val =$('#email').val();
                var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                if (email_val.length == '') {
                    $('#emailcheck').show();
                    $('#emailcheck').html("<p class=text-DarkRed >**Please Fill the email</p>");
                    $('#emailcheck').focus();
                    $("#email").css("border","2px solid DarkRed ");
                    
                    return false;
                } else {
                    $('#emailcheck').hide();
                } if (reg.test(email_val)) {
                    
                    
                  //if ((email_val.length  >= 5) == (email_val.length  <= 8)) {
                    $('#emailcheck').show();
                    $("#email").css("border","2px solid DarkGreen ");
                    $("#emailcheck").html("<p class=text-light>Validated</p>");
                     $('#emailcheck').focus();
                    return true;
                } else {
$('#emailcheck').focus();
$('#emailcheck').show();
                    $("#email").css("border","2px solid DarkRed ");
                    $("#emailcheck").html("<p class=text-DarkRed >Un-Validated</p>");
                    return false;
                }
            }

            $('#address').keyup(function(){
                address_check();
            });
            function address_check(){
                var address_val =$('#address').val();

                if (address_val.length == '') {
                    $('#addresscheck').show();
                    $('#addresscheck').html("<p class=text-DarkRed >**Please Fill the address</p>");
                    $('#addresscheck').focus();
                    $('#address').css("border","2px solid DarkRed ");
               
                    return false;
                } else {
                    $('#addresscheck').hide();
                }
                  if ((address_val.length  >= 5) == (address_val.length  <= 15)) {
                
                    
                                   $('#addresscheck').focus();
$('#addresscheck').show();
                    $("#address").css("border","2px solid DarkGreen ");
                    $("#addresscheck").html("<p class=text-light>Nice</p>");
                    return true;
                } else {
      $('#addresscheck').show();
                    $('#addresscheck').html("<p class=text-DarkRed >**address length must be between 5 and 15</p>");
                    $('#addresscheck').focus();
                      $("#address").css("border","2px solid DarkRed ");
                    return false;
                    
                }
            }
           
         
            
             $('#phone').keyup(function(){
                phone_check();
            });
            function phone_check(){
                var phone_val =$('#phone').val();
                var rag=/^0[0-9]{9}$/;
                if (phone_val.length == '') {
                    $('#phonecheck').show();
                    $('#phonecheck').html("<p class=text-DarkRed >**Please Fill the phone</p>");
                    $('#phonecheck').focus();
                    $('#phone').css("border","2px solid DarkRed ");
                    user_err =false;
                    return false;
                } else {
                    $('#phonecheck').hide();
                }
                   if ((phone_val.length == '10'))
                {
                
                    
                                   $('#phonecheck').focus();
$('#phonecheck').show();
                    $("#phone").css("border","2px solid DarkGreen ");
                    $("#phonecheck").html("<p class=text-light>Validated</p>");
                    return true;
                } else {
      $('#phonecheck').show();
                    $('#phonecheck').html("<p class=text-DarkRed >**phone only 10 numbers</p>");
                    $('#phonecheck').focus();
                      $("#phone").css("border","2px solid DarkRed ");
                    return false;
                    
                }
            }
            $('#male').keyup(function(){
                male_check();
            });
            function male_check(){
                var male_val =$('#male').val();

                if (male_val.length == '') {
                        $('#malecheck').focus();
$('#malecheck').show();
                    $("#male").css("border","2px DarkGreen ");
                    $("#malecheck").html("<p class=text-light>checked</p>");
               
                    return true;
                } else {
                     $('#malecheck').show();
                    $('#malecheck').html("<p class=text-DarkRed >**Please Fill the male</p>");
                    $('#malecheck').focus();
                    $('#male').css("border","2px solid DarkRed ");
                    $('#malecheck').hide();
                       return false;
                }
            }


           

           
         
             $('#city').keyup(function(){
                city_check();
            });
            function city_check(){
                var city_val =$('#city').val();

                if (city_val.length == '') {
                    $('#citycheck').show();
                    $('#citycheck').html("<p class=text-DarkRed >**Please Fill the city</p>");
                    $('#citycheck').focus();
                    $('#city').css("border","2px solid DarkRed ");
               
                    return false;
                } else {
                    $('#citycheck').hide();
                }
                  if ((city_val.length  >= 5) == (city_val.length  <= 10)) {
                
                    
                                   $('#citycheck').focus();
$('#citycheck').show();
                    $("#city").css("border","2px solid DarkGreen ");
                    $("#citycheck").html("<p class=text-light>Nice</p>");
                    return true;
                } else {
      $('#citycheck').show();
                    $('#citycheck').html("<p class=text-DarkRed >**city length must be between 5 and 15</p>");
                    $('#citycheck').focus();
                      $("#city").css("border","2px solid DarkRed ");
                    return false;
                    
                }
            }


             

         


         $('#Username').keyup(function(){
                Username_check();
            });
            function Username_check(){
                var Username_val =$('#Username').val();

                if (Username_val.length == '') {
                    $('#usercheck').show();
                    $('#usercheck').html("<p class=text-DarkRed >**Please Fill the Username</p>");
                    $('#usercheck').focus();
                    $('#Username').css("border","2px solid DarkRed ");
               
                    return false;
                } else {
                    $('#usercheck').hide();
                }
                  if ((Username_val.length  >= 5) == (Username_val.length  <= 8)) {
                
                    
                                   $('#usercheck').focus();
$('#usercheck').show();
                    $("#Username").css("border","2px solid DarkGreen ");
                    $("#usercheck").html("<p class=text-light>Nice</p>");
                    return true;
                } else {
      $('#usercheck').show();
                    $('#usercheck').html("<p class=text-DarkRed >**Username length must be between 5 and 8</p>");
                    $('#usercheck').focus();
                      $("#Username").css("border","2px solid DarkRed ");
                    return false;
                    
                }
            }
           
          
         
            $('#password').keyup(function(){
                if(password_check()){
                	$("#password").css("border","2px solid DarkGreen ");
                	$("#passcheck").html("<p class=text-light> password is Valid</p>");

                }else{
                	$("#password").css("border","2px solid DarkRed ");
                	$("#passcheck").html("<p class=text-DarkRed >password not Valid</p>");
                }

            });
            function password_check(){
                var passwrdstr =$('#password').val();

                if ((passwrdstr.length == '8')) {
                   return true;
                } else {
                	return false;
                 
                }
                

            }
            $('#conpassword').keyup(function(){
                if(con_password()){
            	$("#canpassword").css("border","2px solid DarkGreen ");
                	$("#conpasswordcheck").html("<p class=text-light> password is Valid</p>");

            }else{
            	$("#canpassword").css("border","2px solid DarkRed ");
                	$("#conpasswordcheck").html("<p class=text-DarkRed > password is Valid</p>");

            }
            });
            function con_password(){
                var conpass =$('#conpassword').val();
                var passwrdstr =$('#password').val();

                if (passwrdstr == conpass) {
                    
                    
                    conpass_err =true;
                    return true;
                } else {
                	return false;
                    
                }  
          
                
            }
           

            

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