<!doctype html>
<html lang="en">
  <head>
  </head>
  
  <body>
    <div role="tabpanel" class="tab-pane active" id="products">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 sign-in-container">
            <div class="sign-in-box">
            <h2><strong>Register for Sayvour</strong></h2>
				<?php 
				if(isset($_SESSION["fail"])){
				echo '<p class="bg-danger">'.$_SESSION["fail"].'</p>';
				unset($_SESSION["fail"]);
				} 
				?>
				
                <form id="app2" ng-app="signupform"  ng-controller="Ctrl2" id='signupform' name="signupform" method="post" action="includes/reg.php" novalidate >
                    <div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="User Name" type="text" name="username" ng-model="name" ng-minlength="4" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.username.$dirty && signupform.username.$valid">
                                OK
                            </span>
                        
                            <span style="color:red" ng-show="signupform.username.$dirty && signupform.username.$error.minlength">
                                too short!
                            </span>
                        </div>
                    </div>
					
					<div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="First Name" type="text" name="First_Name" ng-model="firstname" ng-minlength="1" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.First_Name.$dirty && signupform.First_Name.$valid">
                                OK
                            </span>
                        
                            <span style="color:red" ng-show="signupform.First_Name.$dirty && signupform.First_Name.$error.minlength">
                                too short!
                            </span>
                        </div>
                    </div>
					
					<div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="Last Name" type="text" name="Last_Name" ng-model="lastname" ng-minlength="1" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.Last_Name.$dirty && signupform.Last_Name.$valid">
                                OK
                            </span>
                        
                            <span style="color:red" ng-show="signupform.Last_Name.$dirty && signupform.Last_Name.$error.minlength">
                                too short!
                            </span>
                        </div>
                    </div>
					
					<script>
					function gen(){
						var div = document.getElementById('aa'); 
						div.setAttribute("class", "");  
						}
					</script>
					
					<div class="controls input-group">
                        <select style="text-align:left" class="form-control" name="gender" onchange='gen()'>
							<option value="gender" selected='selected' disabled='disabled'>Gender</option>
							<option value="Mr">Mr</option>
							<option value="Ms">Ms</option>
							<option value="Mrs">Mrs</option>
						</select>
                        <div class="input-group-addon">
                            <span class='hidden' style="color:green" id='aa' class='hidden'>
                                OK
                            </span>
                        </div>
                    </div>
					
					<div class="controls input-group">
                        <input style="text-align:left; padding-right:0" class="form-control" placeholder="Date of Birth" type="text" onfocus="(this.type='date')" name="birthday" ng-model="birthday" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.birthday.$dirty && signupform.birthday.$valid">
                                OK
                            </span>
                        </div>
                    </div>
					
					<div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="Telephone Number" type="text" name="phone" ng-model="phone" ng-minlength="8" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.phone.$dirty && signupform.phone.$valid">
                                OK
                            </span>
                        
                            <span style="color:red" ng-show="signupform.phone.$dirty && signupform.phone.$error.minlength">
                                too short!
                            </span>
                        </div>
                    </div>
                    
                    <div class="controls input-group">
                        <textarea style="text-align:left" class="form-control" placeholder="Billing Address" type="text" name="address" ng-model="text" required></textarea>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.address.$dirty && signupform.address.$valid">
                                OK
                            </span>
                        </div>
                    </div>
                    
                    <div class="controls input-group">
                        <input class="form-control" placeholder="Password" type="password" name="password" ng-model="password" ng-minlength="4" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.password.$dirty && signupform.password.$valid">
                                OK
                            </span>
                        
                            <span style="color:red" ng-show="signupform.password.$dirty && signupform.password.$error.minlength">
                                too short!
                            </span>
                        </div>
                    </div>
                    
                    <div class="controls input-group">
                        <input class="form-control" placeholder="Confirm Password" type="password" name="Cpassword" ng-model="Cpassword">
                        <input class="hidden" ng-model="true" value="OK">
                        <div class="input-group-addon">
                            <span ng-show="signupform.Cpassword.$dirty && signupform.password.$dirty">
                                {{password == Cpassword}}
                            </span>
                        </div>
                    </div>  
                    
                    <div class="controls input-group">
                        <input class="form-control" placeholder="Email Address" type="email" name="email" ng-model="email" required>
                        
                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.email.$dirty && signupform.email.$valid">
                                OK
                            </span>
                        
                            <span style="color:red" ng-show="signupform.email.$dirty && signupform.email.$error.email">
                                Not a valid email address
                            </span>
                        </div>
                    </div>
                    
                    <label style="font-weight: 400;font-size: 14px;">
                    	<input type="checkbox" ng-model="subscription_tags['marketing.news']" style="margin-right:5px" class="ng-pristine ng-untouched ng-valid">Yes, send me email updates and promotions
                    </label>
                    
                    <div class="controls">
                        <input class="btn btn-sign-in" type="submit" name="submit" value="Register Now!" ng-disabled="signupform.$invalid">
                    </div>
                </form>
                
                <div class="links-container">
                    <a href="#sign-in" role="tab" data-toggle="tab"> Login</a><br>
                    <a  href="#forgot-password" role="tab" data-toggle="tab"> Forgot password</a><br>
                </div>
            </div>
        </div>
    </div>
    
    <script>
    var app2 = angular.module('signupform', []);
    app2.controller('Ctrl2', function($scope) {
    });
	angular.bootstrap(document.getElementById("app2"), ['signupform']);
    </script>
  </body>
</html>