<?php 
	include_once("../view/header-footer/InnerHeader.php");   
?>  
<style>
    .error{
        color:red;
    }
    
    .gradient-custom-3 {
/* fallback for old browsers */
background: #84fab0;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5))
}
.gradient-custom-4 {
/* fallback for old browsers */
background: #84fab0;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1))
}
input,input::placeholder {
    font: 14px/3 sans-serif;
}
</style>
</head>
<body>
    
 
<script> 
$(document).ready(function()
{   
 
        
        jQuery.validator.addMethod("lettersonly", function(value, element) 
        {
            return this.optional(element) || /^[a-z0-9\_\s]+$/i.test(value); 
        }, "Use alphanumaric & _ only"); 
        
        $( "#cuurentId" ).change(function() 
        {
               
              $.ajax({	
                    type: "POST",
                    url: URL+"/ajax/validation.php",
                    data: {userDatacheck:1,Data:$(this).val()},
                    beforeSend: function(){ 
                    },
                    success: function(data)
                        {   
                            if(data==1)
                                 $("#AvailbleId").html("<span style='color:green;'>Available  &#x2713</span>");
                            else  if(data==2)
                                 $("#AvailbleId").html("<span style='color:red;'></span>"); 
                            else  if(data==3)
                                 $("#AvailbleId").html("<span style='color:red;'>Not Available X</span>");      
                        }
                    });
               
             
        });
        
        $( "#passwprd2" ).change(function() 
        {       
              if($("#passwprd").val()!=$("#passwprd2").val()) 
                    $("#PasswordId").html("<span style='color:red;'>Both Password Not Matched</span>");      
                else
              $("#PasswordId").html("<span style='color:red;'></span>");      
      
             
             
        });
        
        


	$("#_frm").validate({
		
		errorElement:'div',
		rules:{ 
			Fname:{
				required:true,
				maxlength:50,
				minlength:3
			},
			ph_no:{
				required:true,
				maxlength:10,
				minlength:10,
				number:true
			//	remote: URL+"/ajax/validation.php"
			
			},
			email:{
			  required:true,
			  email:true  
			},
			passwprd:{
				required:true 
			},
			refId:{
				required:true, 
				remote: URL+"/ajax/validation.php"
			},
			cuurentId:{
				required:true,
				lettersonly:true
			} 
		},
		messages:{
          
		 	Fname:{
				required:"Enter your full name",
				maxlength:"Maximum  50 charaters allow",
				minlength:"Minimum 3 charaters required",
			},
			email:{
				required:"Enter email id" 
			},
			ph_no:{
				required:"Enter your phone no",
				maxlength:"Maximum  10 digits allow",
				minlength:"Minimum 10 digits required",
				number: "Enter numbers only"
				//remote: "This phone no  is already exist"
			
			},
			passwprd:{
				required:"Enter password"
			},
			cuurentId:{
				required:"Creat User ID " 
			},
			refId:{
				required:"Enter Referral ID ",
			 	remote: "This ref id is not exist"
			}  
			 
		}
	}); 
}); 

</script>    

<?php 

?>
    
<section class="vh-100 bg-image"
  style="background-image: url('https://mdbcdn.b-cdn.net/img/Photos/new-templates/search-box/img4.webp');">
  <div class="mask d-flex align-items-center h-100 gradient-custom-3">
    <div class="container h-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col-12 col-md-9 col-lg-7 col-xl-6">
        
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Section: Design Block -->
<?php 
    unset($_SESSION['Regis']);
?>
</body>
</html>
