<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<html>
<head>
<script>
$(document).ready(function(){
 $('#companySelect').change(function () {
  var selectedValue = $(this).prop('value');
  if (selectedValue == '--Please Select') {
   $('#officeName').empty();
  } else {
   $.post('${pageContext.request.contextPath}/docmanager/admin/officeListjson', selectedValue, function(data) {
    $('#officeName').empty();
    $.each(data, function(index,value) {
     //alert("index"+index +"-value="+value.officeId);
     $('#officeName').append($("<option></option>").val(value.officeId).html(value.officeName));
    });
   }, 'json');
  }
 });
 $("form[id='createUserForm']").submit(function() {
     $(this).ajaxSubmit({
      dataType: "json",
      //success: dialogSaveStatusCheck,
      success: function(data) {
          if(data.success == 'true') alert('Saved Successfully..');
          else alert('Failed adding person: ' + data.success + ', ' + data.errorMessage);
        },
      error: formSaveError
     });
     return false;
 });
 $('#btnSubmit').click(function(e) {
  var isValid = true;
  if ( $('#fName').val() == '' )
  {
                isValid = false;
                 $('#fName').css({
                      "border": "1px solid red",
                      "background": "#FFCECE"
                  });
  }
  var fName = $('#fName').val();
  if(validateFNameSize(fName)){  
   //$('#fNameErr').hide();  
  }
  else {
   
   $("#fNameErr").text("Invalid First Name")
            $('#fNameErr').css({
                "border": "1px solid red",
                "background": "#FFCECE"
            });
          
            e.preventDefault();
             $('#fName').focus();
        }
  
  if ( $('#lName').val() == '' )
  {    isValid = false;
                 $('#lName').css({
                      "border": "1px solid red",
                      "background": "#FFCECE"
                  });
  }
  var lName = $('#lName').val()
  if(validateLNameSize(fName)){  
    //$('#fNameErr').hide();  
  }
   else {
    
    $("#lNameErr").text("Invalid Last Name")
             $('#lNameErr').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
            
             e.preventDefault();
              $('#LName').focus();
         }
  
  
  
  if ( $('#email').val() == '' )
  {
    isValid = false;
            $('#email').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
  }
  
  if ( $('#login').val() == '' )
  {
    isValid = false;
            $('#login').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
  }
  var login = $('#login').val()
  if(validatelogin(login)){  
    //$('#fNameErr').hide();  
  }
   else {
    
    $("#login").text("Invalid login Name")
             $('#login').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
            
             e.preventDefault();
              $('#LName').focus();
         }
  
  
  
  
  
  if ( $('#officeName').val() == '' )
  {
    isValid = false;
            $('#officeName').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
  }
  var officeName = $('#officeName').val()
  if(validateLNameSize(officeName)){  
    //$('#fNameErr').hide();  
  }
   else {
    
    $("#lNameErr").text("Invalid office Name")
             $('#lNameErr').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
            
             e.preventDefault();
              $('#LName').focus();
         }
  
  
  
  
  if ( $('#password').val() == '' )
  {
    isValid = false;
            $('#password').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
  }
  var passwordName = $('#password').val()
  if(validatePassword(passwordName)){  
    //$('#fNameErr').hide();  
  }
   else {
    
    $("#pwdErr").text("Invalid Password")
             $('#pwdErr').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
            
             e.preventDefault();
            
         }
  
  
  
   var sEmail = $('#email').val();
    if ($.trim(sEmail).length == 0) {
            // alert('Please enter valid email address');
             e.preventDefault();
         }
         if (validateEmail(sEmail)) {
             //alert('Email is valid');
             $('#emailErr').hide();
         }
         else {
          
          $("#emailErr").text("Invalid Email Address")
             $('#emailErr').css({
                 "border": "1px solid red",
                 "background": "#FFCECE"
             });
             //alert('Invalid Email Address');
             e.preventDefault();
              $('#email').focus();
         }
        
  if (isValid == false)
            e.preventDefault();
  
      
         $('#createUserForm input').blur(function() {
         
          alert('Thanks');
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
        if (isValid == false)
            e.preventDefault();
        else
            alert('Thank you for submitting');
    });
 
});
function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}
function validateFNameSize(fName) { 
     if (fName.length <= 6) {     
         $("#fNameErr").text("First Name must be at least 5 characters long")
         $('#fNameErr').css({
             "border": "1px solid red",
             "background": "#FFCECE"
         });
         return true;
        
     }   
    else {
        return false;
    }
}
function validateLNameSize(lName) { 
    if (lName.length <= 6) {     
        $("#lNameErr").text("Last Name must be at least 5 characters long")
        $('#lNameErr').css({
            "border": "1px solid red",
            "background": "#FFCECE"
        });
        return true;
      
    }   
   else {
       return false;
   }
}
function validatePassword(passwordName) { 
    if (passwordName.length <= 3) {     
        $("#pwdErr").text("Password must be at least 3 characters long")
        $('#pwdErr').css({
            "border": "1px solid red",
            "background": "#FFCECE"
        });
        return true;
      
    }   
   else {
       return false;
   }
}
function validatelogin(login) { 
    if (login.length <= 6) {     
        $("#loginErr").text("login must be at least 6 characters long")
        $('#loginErr').css({
            "border": "1px solid red",
            "background": "#FFCECE"
        });
        return true;
      
    }   
   else {
       return false;
   }
}
</script>
</head>
<body>
<form:form  id="createUserForm" method="POST" commandName="user" action="${pageContext.request.contextPath}/docmanager/admin/save">
 <div class="mainDiv">
 <div class="inner1Div">USER DETAILS</div>
 <table border="1" class="tableNav">
  <tr>
   <td>FirstName * : <form:input id="fName" path="firstName" /><!-- <div class="ui-widget">
  <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
      <strong>Alert:</strong> Sample ui-state-error style.</p>
  </div>
</div> -->
<div id="fNameErr"></div></td>
   <td>LastName *: <form:input id="lName" path="lastName" /><div id="lNameErr"></div></td>
   <td>Email *: <form:input id="email" path="email" /><div id="emailErr"></div></td>
  </tr>
  <tr>
   <td>Login *       : <form:input id="login" path="login" /><div id="loginErr"></div></td>
   <td>Password * : <form:password id="password"path="password" /><div id="pwdErr"></div></td>
  </tr>
 </table>
 </div>
 <div class="_blankDiv"></div>
 <div class="mainDiv">
 <div class="inner1Div">USER ACCESS</div>
 <table border="1" class="tableNav">
  <tr>
   <td><form:label path="companyName"></form:label></td>
   <td>CompanyId* <form:select path="companyId"
    id="companySelect" cssClass="select">
    <form:option value="-" label="--Please Select" />
    <form:options path="companyId" items="${compList}"
     itemValue="companyId" itemLabel="companyName" />
   </form:select></td>
   <td><form:label path="officeId"></form:label></td>
   <td>OfficeId*<form:select id="officeName" path="officeId"
    cssClass="select"></form:select></td>
  </tr>
 </table>
 </div>
 <div class="_blankDiv"></div>
 <div class="mainDiv">
 <div class="inner1Div">USER ROLE</div>
 <table class="tableNav">
  <tr>
   <td><form:radiobutton path="role" value="3"/>USER_ROLE</td>
   <td><form:radiobutton path="role" value="2"/>ADMIN_ROLE</td>
   <td><form:radiobutton path="role" value="1" disabled="true"/>SUPER_USER</td>
  </tr>
 </table>
 </div>
 <div class="_blankDiv"></div>
 <div>
 <table>
  <tr>
   <td width="30%">
   <button type="submit" value="Submit" class="button" id="btnSubmit">Submit</button>
   </td>
   <td width="30">
   <button type="reset" value="Reset" class="button">Reset</button>
   </td>
  </tr>
 </table>
 </div>
</form:form>
</body>
</html>