<?php
$this->headTitle('Sign Up');
$this->inlineScript()->appendFile($this->url('signup.js'));
?>

<div class="container" ng-controller="SignupController">
    <div class="page-title">
        <h1>Signup</h1>
    </div>
    <form name="form.playerForm" method="post" ng-submit="submit()">
        <div class="row">
            <div class="col-sm-5 credentials">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Credentials</h4>
                    </div>
                    <div class="panel-body">
                        <!-- Text input-->
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.username.$dirty && form.playerForm.username.$invalid }">
                            <label class="control-label" for="username">User Name</label>
                            <div class="">
                                <input id="username" name="username" ng-model="fields.username" type="text" class="form-control" required ng-minlength="2" ng-maxlength="50">
                            </div>
                            <div class="text-danger form-control-static" ng-show="form.playerForm.username.$dirty && form.playerForm.username.$invalid">
                                <span ng-show="form.playerForm.username.$error.required">Field is required!</span>
                                <span ng-show="form.playerForm.username.$error.minlength">Should be at least two (2) characters!</span>
                                <span ng-show="form.playerForm.username.$error.maxlength">Should be less than twenty (50) characters!</span>
                            </div>
                        </div>
                        <!-- Password input-->
                        <div class="form-group">
                            <label class="control-label" for="password">Password</label>
                            <div class="">
                                <input id="password" name="password" ng-model="fields.password" type="password" class="form-control" required>
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.email.$dirty && form.playerForm.email.$invalid }">
                            <label class="control-label" for="email">Email</label>
                            <div class="">
                                <input id="email" name="email" type="text" ng-model="fields.email" class="form-control" required>
                            </div>
                            <div class="text-danger form-control-static" ng-show="form.playerForm.email.$dirty && form.playerForm.email.$invalid">
                                <span ng-show="form.playerForm.email.$error.required">Field is required!</span>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.phone.$dirty && form.playerForm.phone.$invalid }">
                            <label class="control-label" for="phone">Phone No.</label>
                            <div class="">
                                <input id="phone" name="phone" type="text" ng-model="fields.phone" class="form-control" required>
                            </div>
                            <div class="text-danger form-control-static" ng-show="form.playerForm.phone.$dirty && form.playerForm.phone.$invalid">
                                <span ng-show="form.playerForm.phone.$error.required">Field is required!</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-7 profile">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Profile</h4>
                    </div>
                    <div class="panel-body">
                        <!-- Text input-->
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.lastName.$dirty && form.playerForm.lastName.$invalid }">
                            <label class="control-label" for="lastName">Last Name</label>
                            <div class="">
                                <input id="lastName" name="lastName" ng-model="fields.lastName" type="text" class="form-control" required>
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.firstName.$dirty && form.playerForm.firstName.$invalid }">
                            <label class="control-label" for="firstName">First Name</label>
                            <div class="">
                                <input id="firstName" name="firstName" ng-model="fields.firstName" type="text" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.nickname.$dirty && form.playerForm.nickname.$invalid }">
                            <label class="control-label" for="nickname">Nickname</label>
                            <div class="">
                                <input id="nickname" name="nickname" type="text" ng-model="fields.nickname" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.birthdate.$dirty && form.playerForm.birthdate.$invalid }">
                            <label control-label">Birth Date</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="birthdate" ng-required="true" ng-model="fields.birthdate"
                                       bs-datepicker fsa-datepicker
                                       data-animation=""
                                       data-placement="top-left"
                                    >
                                            <span class="input-group-btn" data-toggle="datepicker">
                                                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                                            </span>
                            </div>
                            <div class="text-danger form-control-static" ng-show="form.playerForm.birthdate.$dirty && form.playerForm.birthdate.$invalid">
                                <span ng-show="form.playerForm.birthdate.$error.required">Field is required!</span>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.question1.$dirty && form.playerForm.question1.$invalid }">
                            <label class="control-label" for="question1">Which fantasy sports do you play? Check that all apply.</label>
                            <div class="">
                                <div class="checkbox" ng-repeat="sport in sports">
                                    <label>
                                        <input type="checkbox" checklist-model="fields.question1" checklist-value="sport">
                                        {{ sport }}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.playerForm.question2.$dirty && form.playerForm.question2.$invalid }">
                            <label class="control-label" for="question2">During Season, do you...</label>
                            <div class="">
                                <select class="form-control" name="question2" ng-model="fields.question2" required>
                                    <option value="">please select</option>
                                    <option value="play every week">play every week</option>
                                    <option value="couple times a season">couple times a season</option>
                                    <option value="when I remember">when I remember</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
        	<div class="col-xs-12 text-center">
        	   <div class="panel panel-default">
                    <div class="panel-body">
        	    <div class="checkbox">
                   <label>
                       <input type="checkbox" checklist-model="fields.agree" checklist-value="1" required>
                       I agree with the <a href="<?php echo $this->url('toc'); ?>" target="_blank">Terms and Conditions</a> of the site.
                   </label>
                </div>
                </div>
                </div>
        	</div>
        </div>
        <div class="col-xs-12 text-center">
            <button id="submit" name="submit" class="btn btn-lg btn-primary" ng-disabled="form.playerForm.$invalid || isSubmitted">Submit</button>
        </div>
    </form>
</div>