<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page pageEncoding="UTF-8" %>
<jsp:include page="header.jsp"/>
<div class="content">
  <div class="container">
    <div class="row">
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#register-form").validate({

        // RuleZ:
        rules: {
            username: {
                required: true,
                minlength: 3
            },
            password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            name: "required",
            lastName: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                number: true
            },
            cbTos: "required"
        },

        // Validation msg:
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
            phone: "Please enter a valid phone number",
            cbTos: "Please accept our Terms and Conditions"
        },

        // Using submitHandler to preform ajax calls only when form is validated!
        submitHandler: function(form) {
            var objectArray = $("#register-form :input").serializeArray(); // Make an array of input vals
            var data, objectData = {};
            action = 'new', name = null;

            for (var i in objectArray)
            {
                name = objectArray[i].value;
                objectData[objectArray[i].name] = objectArray[i].value;
            };

            // Delete stuff that's not needed for processing
            delete objectData.confirm_password;
            delete objectData.cbTos;

            data = { 'action' : action, 'data' : objectData };
            data =  JSON.stringify(data);
            data = "reg=" + data;

            $.ajax({
                type: "POST",
                url: "<%=request.getContextPath()%>/RegisterServlet",
                data: data,
                dataType: "json"
              }).
                success(function(res){
                    if(res.url != null)
                    {
                        $("#msgBox").modal('show');
                        $("#msg").html(res.message);
                        setTimeout(function() {
                              window.location.href = res.url;
                            }, 5000); // is k, 5sec
                    }

                    if (res.error) {
                        $("#err").html(res.message);
                        if ($("#err").is(":hidden"))
                            $("#err").toggle();

                    }

                }).
                error(function(res) {
                    if (res.error)
                        {
                            $("#err").text(res.message);
                            $("#err").toggle();
                        }
                });
            return false;
        }
    });

    // Let's propose a username for our user when onFocus() event happens...
    setTimeout(function() {
    $("#username").focus(function()
    {
        console.log("got focus!");
        var firstname = $("#firstName").val().toLowerCase();
        var lastname = $("#lastName").val().toLowerCase();
        console.log("firstname: " + firstname + " lastname: " + lastname);

        if (firstname && lastname && !this.value)
        {
            this.value = firstname + "." + lastname;
        }
    });
    }, 0);
});
  </script>
<!-- Register form -->
                <div class="col-md-6">
                  <div class="formy well">
                     <h4 class="title">Register a new account</h4>
                                  <div class="form">
                                    <div id="err" class="alert alert-danger" hidden="true"></div>

                                    <form id="register-form" method="post" class="form-horizontal">

                                           <div class="form-group">
                                            <label class="control-label col-md-3" for="name">Name</label>
                                            <div class="col-md-6">
                                              <input type="text" class="form-control" id="firstName" name="name" />
                                            </div>
                                          </div>

                                          <div class="form-group">
                                            <label class="control-label col-md-3" for="lastname">Last name</label>
                                            <div class="col-md-6">
                                              <input type="text" class="form-control" id="lastName" name="lastName" />
                                            </div>
                                          </div>

                                             <div class="form-group">
                                            <label class="control-label col-md-3" for="username2">Username</label>
                                            <div class="col-md-6">
                                              <input type="text" class="form-control" id="username" name="username" />
                                            </div>
                                          </div>
                                          <!-- Password -->
                                          <div class="form-group">
                                            <label class="control-label col-md-3" for="password2">Password</label>
                                            <div class="controls col-md-6">
                                              <input type="password" class="form-control" id="password" name="password" />
                                            </div>
                                          </div>

                                            <div class="form-group">
                                            <label class="control-label col-md-3" for="password2">Confirm Password</label>
                                            <div class="controls col-md-6">
                                              <input type="password" class="form-control" id="confirm_password" name="confirm_password" />
                                            </div>
                                          </div>

                                          <div class="form-group">
                                            <label class="control-label col-md-3" for="phone">Phone</label>
                                            <div class="col-md-6">
                                              <input type="text" class="form-control" id="phone" name="phone" />
                                            </div>
                                          </div>

                                          <div class="form-group">
                                            <label class="control-label col-md-3" for="username2">E-mail</label>
                                            <div class="col-md-6">
                                              <input type="text" class="form-control" id="email" name="email" />
                                            </div>
                                          </div>

                                          <div class="form-group">
                                          <div class="col-md-9 col-md-offset-3">
                                             <div class="checkbox inline">
                                                <label>
                                                   <input type="checkbox" id="cbTos" name="cbTos" value="agree"> Agree with our Terms and Conditions
                                                </label>
                                             </div>
                                            </div>
                                          </div>

                                          <!-- Buttons -->
                                          <div class="form-group">
                                             <!-- Buttons -->
                                             <div class="col-md-6 col-md-offset-3">
                                                <button type="submit" id="reg_btn1" class="btn btn-default">Register</button>
                                                <button type="reset" class="btn btn-default">Reset</button>
                                             </div>
                                          </div>
                                      </form>
                                      <hr />
                                      <h5>Hint</h5>
                                           Register so you can fully explore our website.
                                    </div>
                                  </div>

                </div>
       </div>
  </div>
</div>
<div id="msgBox" class="modal fade">
<div class="modal-dialog">
        <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4>Message:</h4>
  </div>
  <div class="modal-body">

    <div id="msg" class="form"></div>
  </div>
  <div class="modal-footer">
    <p id="cntRedirect"><a href="<%=request.getContextPath()%>/">Home</a></p>
    Note: Page will redirect automatically in 5 seconds.
  </div>
  </div>
  </div>
</div>

<jsp:include page="footer.jsp"/>