<?php 
	include ('include/header.php');
?>
<script>
	$(document).ready(function(){
		$(".showsign").click(function(){
			$("#mainlogin").hide(500);
			$("#signupLogin").show(500);
			$("#resetpassdivuser").hide(500);
			$("#token").val('usersign');
			$(".headtext").html('Sign Up');
		})
		$(".mainlogin").click(function(){
			$("#mainlogin").show(500);
			$("#signupLogin").hide(500);
			$("#resetpassdivuser").hide(500);
			$(".headtext").html('Log In');
		})
		$(".resetpassdiv").click(function(){
			$("#resetpassdivuser").show(500);
			$("#mainlogin").hide(500);
			$("#signupLogin").hide(500);
			$("#token").val('resetuserpassword');
			$(".headtext").html('Reset Password');
		})
	})
</script>
<div class="container">
	<div class="row" style="margin-top:30px;">
		<div class="col-sm-12 textcenter">
			 <img src="<?php echo base_url();?>assets/survey/assets/beatle_logo.png" style="width:25%">
		</div>
		<div class="col-sm-12 textcenter">
			<h2 class="headingtext">Welcome To <br>Beatle Analytics</h2>
		</div>
	</div>
</div>


<div class="col-sm-12 headerback textcenter">
	<form onSubmit="javascript: return validateForm(this);" name="userLoginForm" id="userLoginForm" method="post" action="" class="" style="">
			<div class="col-sm-12 headtext" >Sign UP Here</div>
			 
			<div id="mainlogin">
			<input type="hidden" name="token" id="token" value="">
				  <!--<label class="item item-input input-dept">
					<input type="email" placeholder="Email-Id"  name="enduseremail" required class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required textboxlive" id="enduseremail">
				  </label> -->
				  <!--<br><br> -->
				  <label class="item item-input input-dept">
					<input type="tel" max="10" maxlength="10"  onKeyUp="javascript: return isNumber(event);" placeholder="Mobile number" name="endusermobile" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required textboxlive" id="endusermobile" >
                    
                    <span style="float:left; height:0px !important; color:#fff;">(10 number only)</span><br><br>
				  </label>
				  <!--<br><br> -->
				  <label class="item item-input input-dept">
					<input type="password" placeholder="Password" name="endpassword"  class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required textboxlive" id="endpassword" >
<span style="float:left; height:0px !important;color:#fff;">(6 to 15 Charatcters)</span><br><br>
				  </label>
                  <label class="item item-input input-dept">
					<input type="password" placeholder="Retype password" name="retype_endpassword"  class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required textboxlive" id="retype_endpassword" >
				  </label>
			</div>
			<!--<div id="resetpassdivuser" style="display:none;margin-top:40px;">
				<label class="item item-input input-dept">
					<input type="text" placeholder="Enter Email Or Mobile Number" style="font-size:15px;margin-left:12%;margin-top:10px;" name="endusername" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" id="endusername" >
				  </label>
			</div>-->
         <script>
		 function isNumber(evt) {
			evt = (evt) ? evt : window.event;
			var charCode = (evt.which) ? evt.which : evt.keyCode;
			
			if (charCode > 31 && (charCode < 48 || charCode > 57)) {
				return false;
			}
			return true;
		}
	
		 	function validateForm(theFrom){
				var mobNo = theFrom.endusermobile.value.trim();
				var pass = theFrom.endpassword.value.trim();
				var rpass = theFrom.retype_endpassword.value.trim();
				var error = 0;
				
				if(mobNo == ""){
					theFrom.endusermobile.style.border = "2px solid red";
					error = 1;
				}else{
					theFrom.endusermobile.style.border = "2px solid #369498";
				}
				
				if(mobNo.length != 10){
					theFrom.endusermobile.style.border = "2px solid red";
					error = 1;
				}else{
					theFrom.endusermobile.style.border = "2px solid #369498";
				}
				
				if(pass ==  ""){
					theFrom.endpassword.style.border = "2px solid red";
					error = 1;
				}else{
					theFrom.endpassword.style.border = "2px solid #369498";
				}
				if(pass.length <= 5 || pass.length >= 15){
					theFrom.endpassword.style.border = "2px solid red";
					error = 1;
				}else{
					theFrom.endpassword.style.border = "2px solid #369498";
				}
				
				if(rpass ==  ""){
					theFrom.retype_endpassword.style.border = "2px solid red";
					error = 1;
				}
				else{
					if(rpass !=  pass){
						theFrom.retype_endpassword.style.border = "2px solid red";
						error = 1;
					}else{
						theFrom.retype_endpassword.style.border = "2px solid #369498";
					}
				}
				if(error == 1)
				return false;
			}
         </script>
		<div class="container">
		  <div class="row">
			<div class="col-sm-12 button-login-reset-sign-up">
					<table align="center" style="margin-left:20px; width:100%;" >
						<tbody>
							<tr>
								<!--<td align="center">
									<a href="<?php echo base_url();?>index.php/survey/forgetpassword" class="buttonwhite resetpassdiv" name="resetpass" id="resetpass">Reset Password</a>
								</td> -->
								<!--<td align="left">
									<a href="javascript:;"  class="buttonwhite showsign" name="usersignup" id="usersignup">Sign Up</a>
								</td> -->
								<td align="left">
									<a href="<?php echo base_url();?>index.php/survey/end_user_login"  class="buttonwhite showsign" name="usersignup" id="usersignup">BACK to Login</a>
								</td>
<td align="left">
									<button class="button buttom-calm background-beatle beatle-button-1x" style="background-color:#FFF; color:#000;font-size:12px;border:1px solid #FFF;" type="submit" name="userSubmit" id="userSubmit">Sign UP Now</button>
								</td>
							</tr>
						</tbody>
					</table>
			</div>
			</div>
		  </div>
		  <?php 
			if (!empty($error_masg))
			{
		?>
			<div class="col-sm-12" style="color:#900; font-size:12px;"><?php echo $error_masg ?></div>
		<?php
			}
		?>
		  <!--ng-show="departmentLoginForm.$invalid"-->
		</form>
</div>
<?php 
	include ('include/footer.php');
?>