<!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>註冊D.PROMISE賬戶</strong></h2>
				<?php
if (isset($_SESSION["fail"])) {
	echo '<p class="bg-danger">' . $_SESSION["fail"] . '</p>';
	unset($_SESSION["fail"]);
}

//Function to setup angularjs ng-model's default value(ng-init)
function passBackData($ngModel, $name = null) {
	if (!$name) {
		$name = $ngModel;
	}

	if (empty($_POST[$name])) {
		return '';
	}

	$value = htmlspecialchars($_POST[$name]);
	return "ng-init='{$ngModel}=\"{$value}\"' ";
}
?>

                <style>
                    @media(max-width:600px){
                        .input-group-addon, input-group-btn,
                        .input-group .form-control  {   display:table-row;  }
                        .input-group    {   margin:auto;    }
                    }
                </style>

                <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="用戶名稱 *" type="text" name="username" ng-model="name" <?php echo passBackData('name', 'username') ?> ng-minlength="4" ng-maxlength="15" required unique-check >

                        <div class="input-group-addon">
                            <span style="color:green" ng-show="signupform.username.$dirty && signupform.username.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.username.$dirty && signupform.username.$error.maxlength">
                                不可多於15字
                            </span>

                            <span style="color:red" ng-show="signupform.username.$dirty && signupform.username.$error.minlength">
                                太短
                            </span>

                            <span style="color:red" ng-show="!signupform.username.$error.minlength && signupform.username.$error.usernameUnique">
                                名稱已被使用
                            </span>

                        </div>
                    </div>
					<div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="名字 *" type="text" name="First_Name" ng-model="firstname" <?php echo passBackData('firstname', 'First_Name') ?> ng-minlength="1" required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.First_Name.$dirty && signupform.First_Name.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.First_Name.$dirty && signupform.First_Name.$error.minlength">
                                太短
                            </span>
                        </div>
                    </div>

					<div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="姓氏 *" type="text" name="Last_Name" ng-model="lastname" <?php echo passBackData('lastname', 'Last_Name') ?> ng-minlength="1" required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.Last_Name.$dirty && signupform.Last_Name.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.Last_Name.$dirty && signupform.Last_Name.$error.minlength">
                                太短
                            </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'>性別 *</option>
							<option value="Mr">先生 </option>
							<option value="Ms">小姐</option>
							<option value="Mrs">女士</option>
						</select>
                        <div class="input-group-addon">
                            <span class='hidden' style="color:green" id='aa' class='hidden'>
                                正確
                            </span>
                        </div>
                    </div>

					<div class="controls input-group">
                        <input style="text-align:left; padding-right:0" class="form-control" placeholder="生日 *" type="text" onfocus="(this.type='date')" name="birthday" ng-model="birthday" <?php echo passBackData('birthday') ?> required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.birthday.$dirty && signupform.birthday.$valid">
                                OK
                            </span>

                            <span  ng-show="signupform.phone.$dirty && signupform.phone.$error.required">
                                生日日期需要填寫
                            </span>
                        </div>
                    </div>


					<div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="電話號碼 *" type="text" name="phone" ng-model="phone" <?php echo passBackData('phone') ?> ng-minlength="8" required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.phone.$dirty && signupform.phone.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.phone.$dirty && signupform.phone.$error.minlength">
                                太短
                            </span>

                            <span  ng-show="signupform.phone.$dirty && signupform.phone.$error.required">
                                電話號碼需要填寫
                            </span>
                        </div>
                    </div>

                    <div class="controls input-group">
                        <textarea style="text-align:left" class="form-control" placeholder="賑單地址 *" type="text" name="address" ng-model="text" <?php echo passBackData('text', 'address') ?> required></textarea>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.address.$dirty && signupform.address.$valid">
                                正確
                            </span>
                        </div>
                    </div>

                    <div class="controls input-group">
                        <input class="form-control" placeholder="密碼 *" type="password" name="password" ng-model="password" ng-minlength="4" ng-maxlength="32" required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.password.$dirty && signupform.password.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.password.$dirty && signupform.password.$error.maxlength">
                                不可多於32字
                            </span>

                            <span style="color:red" ng-show="signupform.password.$dirty && signupform.password.$error.minlength">
                                太短
                            </span>
                        </div>
                    </div>

                    <div class="controls input-group">
                        <input class="form-control" placeholder="確認密碼 *" type="password" name="Cpassword" ng-model="Cpassword">
                        <input class="hidden" ng-model="true" value="正確">
                        <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="電郵地址 *" type="email" name="email" ng-model="email" <?php echo passBackData('email') ?> required unique-check>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signupform.email.$dirty && signupform.email.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.email.$dirty && signupform.email.$error.email">
                                電郵地址不正確
                            </span>
                            <span style="color:red" ng-show="signupform.email.$dirty && !signupform.email.$error.email && signupform.email.$error.emailUnique">
                                電郵地址已被使用
                            </span>
                        </div>
                    </div>

                    <label style="font-weight: 400;font-size: 14px;">
                    	<input type="checkbox" name="subscription" ng-model="subscription_tags['marketing.news']" style="margin-right:5px" class="ng-pristine ng-untouched ng-valid">訂閱 D.PROMISE 的宣傳資訊
                    </label>

                    <div style="width: 100%;text-align: left;
    padding-right: 30px;    padding-left: 30px;" >
                        <span style="text-align: left;">* 必需填寫</span>
                    </div>

                    <div class="controls input-group ">
                        <textarea class="form-control " style="display:none;" ng-model="reCaptchaCheck" required></textarea>
                    </div>

                    <div class="controls input-group col-12">
                        <!-- <div class="g-recaptcha" data-sitekey="6Lca1zMbAAAAABd_eS8lSMjjpdGnI4JEQUM8-5h1"></div> -->
                        <div class="g-recaptcha" data-sitekey="6Lca1zMbAAAAABd_eS8lSMjjpdGnI4JEQUM8-5h1"></div>
                    </div>

                    <div class="controls">
                        <input class="btn btn-sign-in" type="submit" name="submit" value="提交" ng-disabled="signupform.$invalid">
                    </div>
                </form>

                <div class="links-container">
                    <a href="#sign-in" role="tab" data-toggle="tab">返回登入</a><br>
                    <a  href="#forgot-password" role="tab" data-toggle="tab">忘記密碼</a><br>
                </div>
            </div>
        </div>
    </div>

    <script>
    var app2 = angular.module('signupform', []);


    //Customize directive to check duplicate value in database,
    //pass element's name and value to ajaxQuery.php on value change,
    //modify mCtrl validation on response.
    //Pass in $http for xhttp service.
    app2.directive('uniqueCheck', function($http) {
        var delay;
        return {
            restrict : 'A',
            require: 'ngModel',
            link: function(scope, element, attr, mCtrl) {
                //$watch watching on scope, trigger function if scope value changed
                scope.$watch(attr.ngModel,function(value){

                    //Remove prev delayed query.
                    clearTimeout(delay);

                    delay = setTimeout(function(){
                        //Pass action, element name and value to ajaxQuery.php.
                        $http.get("../../includes/core/ajaxQuery.php?action=uniqueCheck&name="+element[0].name+"&value="+value).success(function(data) {
                            //Turn received string to boolean,as $setValidity() won't convert data type.
                            var trueFalse = (data.toLowerCase() == 'true');
                            mCtrl.$setValidity(element[0].name+'Unique',trueFalse);
                        });
                        //Delay ajax query for 500ms to avoid "traffic jam".
                    }, 500);
                });
            }
        };
    });

    app2.controller('Ctrl2', function($scope) {

    });
	angular.bootstrap(document.getElementById("app2"), ['signupform']);



    </script>

  </body>
</html>