<?php include '../pages/header.php'?>
<?php include '../pages/navbar.php'?>

<!-- ///////////////////sign up funcation////////////////// -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
 $("#form").on('submit',(function(e) {
  e.preventDefault();
  $.ajax({
   url: "api/addusers.php",
   type: "POST",
   data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    $("#err").fadeOut();
   },
   success: function(data)
      {
    if(data == 101)
    {
     // invalid file format.
     
     $("#successmessage").html("Sucessfully Added").fadeIn();
     $("#form")[0].reset(); 
     $("#message").html("").fadeIn();
      window.location.href = "#";
    }
    else if(data == 104)
    {
    $("#successmessage").html("Email Already Register , Please try different email ID ").fadeIn().style.color.red;
    }
   
    else{
    	alert(data);
    }
      },
     error: function(e) 
      {
   $("#successmessage").html("Some thing went  worng").fadeIn().style.color.red;
      }          
    });
 }));
});
</script>
<!-- //////////////////signup//////////////////////////// -->
<div class="content-wrapper">

<div class="container-fluid">

<div>

<div class="row">
<div class="col-sm-12 p-0">
<div class="main-header">
<h4>Add Form</h4>

</div>
</div>
</div>
<span class="successmessage" id="successmessage"></span>

<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<!--<h5 class="card-header-text">Basic Form Validation</h5></div>-->
<div class="card-block">
<form  class="form-horizontal" action="#" method="post" id="form"  enctype="multipart/form-data" novalidate>
<div class="md-group-add-on p-relative">
<span class="md-add-on">
<i class="icofont icofont-ui-user"></i>
</span>
<div class="md-input-wrapper">
<input type="text" class="md-form-control" name="name" id="name">
<label for="username">Full Name</label>
<span class="messages"></span>
</div>
</div>
<div class="md-group-add-on p-relative">
<span class="md-add-on">
<i class="icofont icofont-email"></i>
</span>
<div class="md-input-wrapper">
<input type="email" class="md-form-control" name="email" id="email" onblur="validateEmail(this);">
<label for="email">Email address</label>
<span class="error"  id="error" style="display:none; color:red">!Please Enter Vaild Email Address</span>
</div>
</div>
<div class="md-group-add-on p-relative">
<span class="md-add-on">
<i class="icofont icofont-ui-password"></i>
</span>
<div class="md-input-wrapper">
<input type="password" class="md-form-control" name="password" id="password" >
<label for="password">Enter Password</label>
<span class="messages"  ></span>
</div>
</div>
<div class="md-group-add-on p-relative">
<span class="md-add-on">
<i class="icofont icofont-key"></i>
</span>
<div class="md-input-wrapper">
<input type="password" class="md-form-control" name="confirm_password" id="confirm_password" onblur="check();">
<label for="confirm-password">Enter Confirm password</label>
<span class="passerror" id="passerror" style="display:none; color:red">!Your Password Does Not Match</span>
</div>
</div>
<div class="md-group-add-on p-relative">
<span class="md-add-on">
<i class="icofont icofont-phone"></i>
</span>
<div class="md-input-wrapper">
<input type="text" class="md-form-control" name="phone" id="phone">
<label for="phone">Enter Mobile No</label>
<span class="messages"></span>
</div>
</div>
<div class="md-group-add-on p-relative">
<span class="md-add-on">
<i class="icofont icofont-file"></i>
</span>
<div class="md-input-wrapper">
<input type="file" class="md-form-control" name="image" id="image">
<label for="file">Select image</label>

</div>
</div>

<div class="md-input-wrapper">
<button type="submit" id="btn" class="btn btn-primary waves-effect waves-light">Submit
</button>
</div>
</form>
</div>
</div>

<?php include '../pages/footer.php'?>
<!-- //////////////////////////////validateEmail////////////////////////// -->
<script type="text/javascript">
	
	function validateEmail(emailField) {
		
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
         
         document.getElementById('error').style.display="";
			 document.getElementById('btn').style.display="none";
            return false;
        }
       
	document.getElementById('error').style.display='none';
		 document.getElementById('btn').style.display="";
        return true;

}
</script>
<!-- //////////////////////////////validateEmail////////////////////////// -->
<!-- //////////////////////////////password check match////////////////////////// -->
<script>
var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value && document.getElementById('confirm_password').value!=null && document.getElementById('password').value!=null) {
    
    document.getElementById('passerror').style.display='none';
    document.getElementById('btn').style.display="";
  } else {
  
    document.getElementById('passerror').style.display="";
    document.getElementById('btn').style.display="none";
  }
}
 </script>
<!-- //////////////////////////////password check match////////////////////////// -->