{assign var=gender value=$util->get_values_from_config('GENDER')}
{assign var=emp_sts value=$sm.emp_sts}
{assign var=currency value=$util->get_values_from_config('CURRENCY')}
{assign var=pay_frequency value=$util->get_values_from_config('PAY_FREQUENCY')}
<link rel="stylesheet" type="text/css" href="##LBL_SITE_URL##templates/css_theme/scroll.css"/>
<input type="hidden" name="step" id="step" value="1">
<!-- ******************************** PERSONAL INFO *********************************** -->
<div style="width:580px;">
<div class="modal_heading">
<div class="lft fltlft"></div>
<div class="mdl fltlft" style="width:508px;">
Add Employee
</div>
<div class="rht fltlft"></div>
<div class="clear"></div>
</div>
<div class="modal_body" style="padding:0px;">
<div id="wizard">
<ul id="status">
<li class="active"><strong>1. Personal details</strong></li>
<li><strong>2. Contact details</strong></li>
<li><strong>3. Job</strong></li>
</ul>
<div class="items">
<div class="page">
<h2>
<font color=#707070><strong>Step 1: </strong> Personal Details</font>
<em>Please enter employee personal information: </em>
</h2>
<form id="personal_info" name="personal_info" method="post" action="javascript:void(0);">
<table>
<tr>
<td>
<b>First name: </b>
</td>
<td>
<input type="text" name="employee[firstname]" value="" id="firstname" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Middle name: </b>
</td>
<td>
<input type="text" name="employee[middlename]" value="" id="middlename" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Last name: </b>
</td>
<td>
<input type="text" name="employee[lastname]" value="" id="lastname" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Date of birth: </b>
</td>
<td>
<input type="text" name="dob" value="" id="dob" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Nationality: </b>
</td>
<td>
<input type="text" name="employee[nationality]" value="" id="nationality" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Gender: </b>
</td>
<td>
{html_radios name="employee[gender]" options=$gender selected="M" separator="" }
</td>
</tr>
<tr>
<td>
<b>SSN No.: </b>
</td>
<td>
<input type="text" name="employee[ssn_no]" value="" id="ssn_no" class="text"/>
</td>
</tr>
</table>
<ul class="clearfix">
<li><button type="button" class="next right login_btn">Proceed »</button></li>
</ul>
</form>
</div><!--step1-->
<!-- ********************************* EMERGENCY CONTACT ******************************** -->
<div class="page">
<h2>
<strong>Step 2: Contact details</strong>
<em>Please enter employee contact information: </em>
</h2>
<form id="emergency_contact" name="emergency_contact" method="post" action="javascript:void(0);">
<table>
<tr>
<td>
<b>Address: </b>
</td>
<td>
<textarea name="employee[address]" id="address" class="text" rows="5"></textarea>
</td>
</tr>
<tr>
<td>
<b>Country: </b>
</td>
<td>
<select name="employee[country]" onchange="showStateCity(this,'state','city','1');" id="country">
<option value="">-- Select --</option>
{html_options options=$sm.country selected=''}
</select>
</td>
</tr>
<tr>
<td>
<b>State: </b>
</td>
<td>
<select name="employee[state]" id="state" onchange="showStateCity(this,'city','','2');" >
<option value="">-- Select --</option>
{html_options options=$sm.state selected=''}
</select>
</td>
</tr>
<tr>
<td>
<b>City: </b>
</td>
<td>
<select name="employee[city]" id="city" onchange="putCityValue(this);">
<option value="">-- Select --</option>
{html_options options=$sm.city selected=''}
</select>
</td>
</tr>
<tr>
<td>
<b>Work phone: </b>
</td>
<td>
<input type="text" name="employee[work_phone]" value="" id="work_phone" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Mobile phone: </b>
</td>
<td>
<input type="text" name="employee[mobile_phone]" value="" id="mobile_phone" class="text"/>
</td>
</tr>
<tr>
<td>
<b>Work e-mail: </b>
</td>
<td>
<input type="text" name="employee[work_email]" value="" id="work_email" class="text" onblur="return checkEmail();"/>
<label class="error" generated="true" for="work_email"></label>
<span id="msg_work_email" class="error"></span>
</td>
</tr>
<tr>
<td>
<b>Other e-mail: </b>
</td>
<td>
<input type="text" name="employee[other_email]" value="" id="other_email" class="text"/>
</td>
</tr>
</table>
<ul>
<li class="clearfix">
<button type="button" class="prev login_btn" style="float:left">« Back</button>
<button type="button" class="next right login_btn">Proceed »</button>
</li>
</ul>
</form>
</div><!--step2-->
<!-- ************************************ JOB ************************************** -->
<div class="page">
<h2>
<strong>Step 3: Job details</strong>
<em>Please enter employee job details: </em>
</h2>
<form id="job_info" name="job_info" method="post" action="javascript:void(0);">
<table>
<tr>
<td>
<b>Division: </b>
</td>
<td>
<select name="employee[division]" id="division" onchange="showCascade(this,'department','team','job_title','1');" >
<option value="">-- Select --</option>
{html_options options=$sm.division selected=''}
</select>
</td>
</tr>
<tr>
<td>
<b>Department: </b>
</td>
<td>
<select name="employee[department]" onchange="showCascade(this,'team','job_title','','2');" id="department">
<option value="">-- Select --</option>
{html_options options=$sm.department selected='' }
</select>
</td>
</tr>
<tr>
<td>
<b>Team: </b>
</td>
<td>
<select name="employee[team]" onchange="showCascade(this,'job_title','','','3');" id="team">
<option value="">-- Select --</option>
{html_options options=$sm.team selected='' }
</select>
</td>
</tr>
<tr>
<td>
<b>Job title: </b>
</td>
<td>
<select name="employee[job_title]" id="job_title" >
<option value="">-- Select --</option>
{html_options options=$sm.job_title selected=''}
</select>
</td>
</tr>
<tr>
<td>
<b>Employment status: </b>
</td>
<td>
<select name="employee[emp_status]" id="emp_status" >
{html_options options=$emp_sts selected=''}
</select>
</td>
</tr>
<tr>
<td>
<b>Date of joining: </b>
</td>
<td>
<input type="text" name="joined_date" value="" id="joined_date" class="text" onchange="rem_msg();">
</td>
</tr>
<tr>
<td>
<b>Salary: </b>
</td>
<td>
<input type="text" name="employee[salary]" value="" id="salary" class="text"> 
<select name="employee[currency]" id="currency" style="width:32%;">
{html_options options=$currency selected=''}
</select>
<label class="error" generated="true" for="salary"></label>
</td>
</tr>
<tr>
<td>
<b>Pay frequency: </b>
</td>
<td>
<select name="employee[pay_frequency]" id="pay_frequency" style="width:32%;">
{html_options options=$pay_frequency selected=''}
</select>
</td>
</tr>
</table>
<ul>
<li class="clearfix">
<button type="button" class="prev login_btn" style="float:left">« Back</button>
<button type="button" class="next right login_btn">Save »</button>
</li>
</ul>
</form>
</div><!--step3-->
</div>
</div>
</div>
</div>
{literal}
<script type="text/javascript">
forminfo("#personal_info,#emergency_contact,#job_info");
$(document).ready(function(){
$('#dob').datepicker({dateFormat:'dd-mm-yy',changeMonth:true,changeYear:true,yearRange:"1911:2011"});
$('#joined_date').datepicker({dateFormat:'dd-mm-yy',changeMonth:true,changeYear:true,yearRange:"-100:+40"});
});
/* for scrollig style */
$(function() {
var root = $("#wizard").scrollable();
// some variables that we need
var api = root.scrollable();
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function(event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i) {
/* Start of validation */
var step=parseInt($.trim($("#step").val()));
if(step == 1){
var res = personalInfo();
if(res){
$("#step").val(2);
}else{
return false;
}
}else if(step == 2){
var res = emergencyContact();
if(res){
var chk=checkEmail();
if(chk){
$("#step").val(3);
}else{
return false;
}
}else{
return false;
}
}else if(step == 3){
var res = jobInfo();
if(res){
cShowActivity('2');
var data1=$("#personal_info").serialize();
var data2=$("#emergency_contact").serialize();
var data3=$("#job_info").serialize();
var url="##LBL_SITE_URL##index.php/employee/insertEmployee?"+data1+"&"+data2+"&"+data3;
$.post(url,{ce:0},function (res){
var flg="{/literal}{$sm.flg}{literal}";
if(flg!='dash'){
var url="##LBL_SITE_URL##index.php/page-employee-choice-employeeList-ce-0-chk-1-msg-"+res;
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, false);
httpRequest.send();
if (httpRequest.status == 200) {
var z=httpRequest.responseText;
$("#employee_employeeList").html(z);
$.fancybox.close();
cHideActivity();
}
}else{
location.reload(true);
callmsg(res);
}
});
}else
return false;
}
/* End */
}else{
step=parseInt($.trim($("#step").val()));
$("#step").val(step-1);
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
return false;
}
});
});
/* Scrolling style End */
function showStateCity(obj,id1,id2,lvl){
var id = obj.value;
var url = "##LBL_SITE_URL##index.php/";
$.post(url,{page:"employee",choice:"showStateCity",ce:0,id:id,flg:id1},function(res){
$('#'+id1).html(res);
if(lvl==1){
$('#'+id2).html('<option value="">-- Select --</option>');
}
});
var x=obj.selectedIndex;
if(x!=0){
obj.options[x].value=obj.options[x].text;
}
}
function putCityValue(obj){
var x=obj.selectedIndex;
if(x!=0){
obj.options[x].value=obj.options[x].text;
}
}
function showCascade(obj,id1,id2,id3,lvl){
var id = obj.value;
var url = "##LBL_SITE_URL##index.php/";
$.post(url,{page:"employee",choice:"showDepartmentTeamJob",ce:0,id:id,flg:id1},function(res){
$('#'+id1).html(res);
if(lvl==1){
$('#'+id2).html('<option value="">-- Select --</option>');
$('#'+id3).html('<option value="">-- Select --</option>');
}else if(lvl==2){
$('#'+id3).html('<option value="">-- Select --</option>');
}
});
}
function checkEmail(){
var emp_email=$.trim($('#work_email').val());
if(emp_email==''){
$("#msg_work_email").html('');
return 1;
}
var url="##LBL_SITE_URL##index.php/employee/checkEmail/ce-0-emp_email-"+emp_email;
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, false);
httpRequest.send();
if (httpRequest.status == 200) {
var z=httpRequest.responseText;
if(check_JSsession(z,0)) {
if(z!=''){
if(z==0){
$("#msg_work_email").html('');
return 1;
}else{
$("#msg_work_email").html('This email id already exists.');
return 0;
}
}
}
}
}
function rem_msg(){
if ( $("#joined_date").val() != '' ) {
$('#job_info').find('label[for="joined_date"]').html('');
}
}
function personalInfo(){
var validator_pers_info=$("#personal_info").validate({
rules: {
"employee[firstname]": {
required:true
}
},
messages: {
"employee[firstname]":{
required:'This field is required.'
}
}
});
return validator_pers_info.form();
}
function emergencyContact(){
validator_emer_cont=$("#emergency_contact").validate({
rules: {
"employee[work_email]": {
required:true,
email:true
},
"employee[other_email]": {
email:true
}
},
messages: {
"employee[work_email]":{
required:'This field is required.',
email:'Please enter a valid email address.'
},
"employee[other_email]":{
email:'Please enter a valid email address.'
}
}
});
return validator_emer_cont.form();
}
function jobInfo(){
validator_job_info=$("#job_info").validate({
rules: {
"employee[division]": {
required:true
},
"employee[department]": {
required:true
},
"employee[emp_status]": {
required:true
},
"joined_date": {
required:true
},
"employee[salary]": {
required:true,
number:true
}
},
messages: {
"employee[division]":{
required:' This field is required.'
},
"employee[department]":{
required:' This field is required.'
},
"employee[emp_status]": {
required:'This field is required.'
},
"joined_date": {
required:' This field is required.'
},
"employee[salary]": {
required:'<br>This field is required.',
number:'<br>Please give a valid salary'
}
}
});
return validator_job_info.form();
}
</script>
<style type="text/css">
select,option { text-transform : capitalize ;}
span.error {
color:#FF0000;
font-size:12px;
}
</style>
{/literal}