<section style="padding-bottom:2rem;">
	<div class="container">
		<div class="card bg-light-transparent">
			<div class="card-body">
				<div class="card no-shadow" >
					<div class="card-body">
						<div class="row">
							<div class="col">
								<h3>Workflow</h3>
							</div>
						</div>
						<div class="row">
							<div class="col-12 col-lg-10">
								<select class="form-control" id="workflowSelect" onchange="actionType()">
									<?php foreach ($workflows as $key => $work): ?>
										<option value="<?php echo $work->id; ?>" data-workflow="<?php echo base64_encode($work->workflow); ?>" ><?php echo $work->name; ?></option>
									<?php endforeach ?>
								</select>
							</div>
							<div class="col-12 col-lg-2 text-center" >
								<div class="btn-group">
									<button class="btn btn-warning text-white" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Edit Workflow">
										<i class="fas fa-folder"></i>
									</button>
									<button class="btn btn-danger text-white" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove Workflow" onclick="removeWorkflow();">
										<i class="fas fa-folder-minus"></i>
									</button>
								</div>
								<a href="<?php echo base_url('/hr/StaffProfile/add_workflow'); ?>" class="btn btn-primary text-white" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add New Workflow">
									<i class="fas fa-folder-plus"></i>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section style="padding-bottom: 2rem;">
	<!-- form start here -->
	<form action="<?php echo base_url('hr/api/staffprofiling/create_action_type'); ?>" id="action_type_form">
		<div class="row">
			<div class="col-lg-3 col-12">
				<div class="card bg-light-transparent">
					<div class="card-body">
						<div class="card no-shadow" >
							<div class="card-body">
								<h4 class="card-title">
									Info Type
								</h4>
								<br>
								<table class="table-bordered" width="100%">
									<thead>
										<tr>
											<th>Info Type</th>
											<th class="text-center p-1">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="All forms">
													<input type="checkbox" data-form="all" onclick="allType(this)" id="all-checkbox" name="all_checkbox">
													<span class="slider round"></span>
												</label>
											</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td class="p-1"><b><a href="#sect-joining-header">Joining group</a></b></td>
											<td class="text-center p-1">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Joining group form">
													<input type="checkbox" data-form="sect-joining" id="join-group-checkbox" onclick="infoType(this)" name="join_group_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-1"><b><a href="#sect-address-header">Address</a></b></td>
											<td class="text-center p-1">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Address form">
													<input type="checkbox" data-form="sect-address" id="address-checkbox" onclick="infoType(this)" name="address_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-family-info-header">Family Info</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Family information form">
													<input type="checkbox" data-form="sect-family-info" id="family-info-checkbox" onclick="infoType(this)" name="family_info_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-academic-qualification-header">Academic Qualification</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Academic qualification form">
													<input type="checkbox" data-form="sect-academic-qualification" id="academic-qualification-checkbox" onclick="infoType(this)" name="academic_qualification_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-personal-data-header">Additional Personal Data</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Additional personal data form">
													<input type="checkbox" data-form="sect-personal-data" id="additional-personal-data-checkbox" onclick="infoType(this)" name="additional_personal_data_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-employment-detail-header">Previous Employment Detail</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Previous employment form">
													<input type="checkbox" data-form="sect-employment-detail" id="employment-detail-checkbox" onclick="infoType(this)" name="employment_detail_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-professional-membership-header">Professional Memberships</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Professional membership form">
													<input type="checkbox" data-form="sect-professional-membership" id="professional-membership-checkbox" onclick="infoType(this)" name="professional_membership_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-professional-licenses-header">Professional Licenses</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Professional Licenses form">
													<input type="checkbox" data-form="sect-professional-licenses" id="professional-licenses-checkbox" onclick="infoType(this)" name="professional_licenses_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-recognition-header">Recognition</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Recognition form">
													<input type="checkbox" data-form="sect-recognition" id="recognition-checkbox" onclick="infoType(this)" name="recognition_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-contract-element-header">Contract Element</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Contract element form">
													<input type="checkbox" data-form="sect-contract-element" id="contract-element-checkbox" onclick="infoType(this)" name="contract_element_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-basic-pay-header">Basic Pay</a></b></td>
											<td class="text-center p-2" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Basic pay form">
												<label class="switch">
													<input type="checkbox" data-form="sect-basic-pay" id="basic-pay-checkbox" onclick="infoType(this)" name="basic_pay_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-bank-detail-header">Bank Details</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Bank detail form">
													<input type="checkbox" data-form="sect-bank-detail" id="bank-detail-checkbox" onclick="infoType(this)" name="bank_detail_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-statutory-detail-header">Statutory Details</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Statutory detail form">
													<input type="checkbox" data-form="sect-statutory-detail" id="statutory-detail-checkbox" onclick="infoType(this)" name="statutory_detail_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-recurring-pay-header">Recurring Pay / Deduct</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Recurring pay and deduct form">
													<input type="checkbox" data-form="sect-recurring-pay" id="recurring-pay-checkbox" onclick="infoType(this)" name="recurring_pay_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<tr>
											<td class="p-2"><b><a href="#sect-third-party-payment-header">Third Party Payment</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Third party payment form">
													<input type="checkbox" data-form="sect-third-party-payment" id="third-party-checkbox" onclick="infoType(this)" name="third_party_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr>

										<!-- <tr>
											<td class="p-2"><b><a href="#sect-pcb-header">PCB Consideration</a></b></td>
											<td class="text-center p-2">
												<label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Pcb consideration form">
													<input type="checkbox" data-form="sect-pcb" id="pcb-checkbox" onclick="infoType(this)" name="pcb_checkbox">
													<span class="slider round"></span>
												</label>
											</td>
										</tr> -->
										
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-9 col-12">
				<div class="card bg-light-transparent">
					<div class="card-body">
						<div class="card no-shadow" >
							<div class="card-body">
								<h4 class="card-title">
									<i class="fas fa-users-cog"></i> <?php echo($page_setup)?$page_setup['page_title']:''; ?>
								</h4>
								<hr>
								<div class="row">
									<div class="col-lg-6 col-12">
										<label><b>Staff Id</b></label>
										<input type="hidden" class="form-control" name="user_id" value="<?php echo $staff['id']?>">
										<input type="text" class="form-control" name="staff_id" value="<?php echo $staff['staff_id']?>">
									</div>
									<div class="col-lg-6 col-12">
										<label><b>Name</b></label>
										<input type="text" class="form-control" name="staff_name" value="<?php echo $staff['name']; ?>" disabled>
									</div>
								</div>

								<div class="row">
									<div class="col">

										<label><b>Action Type</b></label>

										<select class="form-control" name="action_type" id="action-type" onchange="actionType()">
											<?php if($action_types) foreach ($action_types as $key => $at): ?>
												<option value="<?php echo $at->id; ?>"><?php echo $at->type; ?></option>
											<?php endforeach ?>
										</select>
									</div>
									<div class="col">
										<label><b>Action efective date</b></label>
										<input type="text" class="form-control datepicker" value="<?php echo date('d-m-Y'); ?>" name="efective_date">
									</div>
								</div>


								<!-- joining group[done] -->
								<section id="sect-joining" class="border p-3 d-none">

									<div class="row">
										<div class="col-12">
											<h3 id="sect-joining-header">Joining Group</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Date Join</b></label>
											<input type="text" class="datepicker form-control" name="join_group_date_join">
										</div>

										<div class="col-12 col-lg-6">
											<label><b>Date To</b></label>
											<input type="text" class="datepicker form-control" name="join_group_date_to">
										</div>
									</div>



									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Reason for Hiring</b></label>
											<select class="form-control" name="join_group_reason_hiring" data-join="group" onChange="enableOther(this)">
												<?php foreach ($hiringReasons as $key => $reason): ?>
													<option value="<?php echo $reason->id?>"><?php echo $reason->type; ?></option>
												<?php endforeach ?>
											</select>
											<br>
											<input type="text" id="join-group-other-reason" class="form-control d-none" placeholder="Other reson for hiring" name="join_group_other_reason" disabled>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Position</b></label>
											<select class="form-control" name="join_group_position" data-join="position" onChange="enableOther(this)">
												<?php foreach ($jobPositions as $key => $post): ?>
													<option value="<?php echo $post->id; ?>"><?php echo $post->position; ?></option>
												<?php endforeach ?>
												<!-- hide this for this moment -->
												<option value="-1" class="d-none">Others</option>
											</select>
											<br>
											<input type="text" id="join-group-other-position" class="form-control d-none" placeholder="Other position" name="join_group_other_position" disabled>
										</div>
									</div>

									<div class="row">
										<div class="col">
											<label><b>Reporting to</b></label>
											<select class="select form-control" name="join_group_reporting_to">
												<?php foreach ($allStaff as $key => $row){ ?>
													<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
												<?php } ?>
											</select>
										</div>
									</div>
										
									<div class="row">
										<div class="col">
											<label><b>Branch</b></label>
											<select class="form-control" name="join_group_branch">
												<?php foreach ($branches as $key => $branch): ?>
													<option value="<?php echo $branch['id']; ?>"><?php echo $branch['name'];?></option>
												<?php endforeach ?>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Personnel Area</b></label>
											<select class="form-control" name="join_group_personnel_area">
												<?php foreach ($divisions as $key => $division): ?>
													<option value="<?php echo $division->id; ?>"><?php echo $division->name; ?></option>
												<?php endforeach ?>
												<option value="0">other</option>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Personal subarea</b></label>
											<select class="form-control" name="join_group_personal_subarea">
												<?php foreach ($departments as $key => $dept): ?>
													<option value="<?php echo $dept['id'];?>"><?php echo $dept['name'].' - '.$dept['branch_name']; ?></option>
												<?php endforeach ?>
												<option value="0">other</option>
											</select>
										</div>
									</div>


									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Employee group</b></label>
											<select class="form-control" name="join_group_employee_group">
												<?php foreach ($employee_groups as $key => $group): ?>
													<option value="<?php echo $group->id; ?>"><?php echo $group->type; ?></option>
												<?php endforeach ?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Contract Element</b></label>
											<select class="form-control" name="join_group_contract_element">
												<?php foreach ($contractTypes as $key => $contract): ?>
													<option value="<?php echo $contract->id; ?>"><?php echo $contract->type; ?></option>
												<?php endforeach ?>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Employee Subgroup</b></label>
											<select class="form-control" name="join_group_employee_subgroup">
												<?php foreach ($salaryScales as $key => $scale): ?>
													<option value="<?php echo $scale->id; ?>"><?php echo $scale->indicator.' - '.$scale->designation; ?></option>
												<?php endforeach ?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Employment Status</b></label>
											<select class="form-control" name="join_group_employment_status">
												<option value="1">Active</option>
												<option value="2">Inactive</option>
											</select>
										</div>
									</div>
								</section>
								<!-- joining group --> 
								
								<!-- address group -->
								<section id="sect-address" class="border p-3  d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-address-header">Address</h3>
										</div>
									</div>

									<div class="row">
										<div class="col">
											<label><b>Type</b></label>
											<select class="form-control" name="address_type">
												<?php foreach ($residenceType as $key => $type): ?>
													<option value="<?php echo $type->id; ?>"><?php echo $type->type; ?></option>
												<?php endforeach ?>	
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col">
											<label><b>Address</b></label>
											<textarea class="form-control" rows="5" name="address_place" autocomplete="off"></textarea>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Postcode</b></label>
											<input type="text" class="form-control" name="address_postcode" autocomplete="off">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>City</b></label>	
											<input type="text" class="form-control" autocomplete="off" name="address_city">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>State</b></label>
											<select class="select form-control" name="address_state">
												<?php if($states) foreach ($states as $key => $state): ?>
				                                	<option value="<?php echo $state->id; ?>"><?php echo $state->state; ?></option>
				                                <?php endforeach ?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Country</b></label>
											<select class="select form-control" name="address_country">
												<?php foreach ($countries as $key => $country): ?>
													<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
												<?php endforeach ?>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Contact Number</b></label>
											<div class="input-group mb-3">
											  <div class="input-group-prepend">
											    <select class="form-control" name="address_contact_header">
											    	<option>+60</option>
											    	<option>+65</option>
											    </select>
											  </div>
											  <input type="text" class="form-control" name="address_contact_number">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-12 col-lg-2 mb-3 ml-auto">
											<button type="button" class="btn btn-primary btn-block" onclick="addAddress()" data-tooltip="tooltip" title="" data-original-title="Add new address to this form"><i class="fas fa-plus"></i></button>
										</div>
									</div>
									<div class="row">
										<div class="col">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-address">
													<thead>
														<tr>
															<th>Type</th>
															<th>Address</th>
															<th>Postcode</th>
															<th>City</th>
															<th>State</th>
															<th>Country</th>
															<th>Contact No</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- address group -->

								<!-- family info -->
								<section id="sect-family-info" class="border p-3 d-none">
									<div class="row">
										<div class="col">
											<h3 id="sect-family-info-header">Family Info</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Name</b></label>
											<input type="text" class="form-control" name="family_name">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>NRIC No / passport </b></label>
											<input type="text" class="form-control" name="family_nric">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Relations</b></label>
											<select class="form-control" name="family_relation">
												<?php foreach ($relations as $key => $relation): ?>
													<option value="<?php echo $relation->id; ?>"><?php echo $relation->relations; ?></option>
												<?php endforeach ?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Birthdate</b></label>
											<input type="text" class="datepicker form-control" name="family_birthdate">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Contact Number</b></label>
											<div class="input-group mb-3">
											  <div class="input-group-prepend">
											    <select class="form-control" name="family_contact_header">
											    	<option value="+60">+60</option>
											    	<option value="+65">+65</option>
											    </select>
											  </div>
											  <input type="text" class="form-control" name="family_contact">
											</div>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Email</b></label>
											<input type="email" class="form-control" name="family_email">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Address</b></label>
											<textarea class="form-control" rows="5" name="family_address"></textarea>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>OKU Status</b></label>
											<select class="form-control" name="family_dissability">
												<option value="0">Yes</option>
												<option value="1">No</option>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Student Status</b></label>
											<select class="form-control" name="family_student" onchange="isFamilyStudent();">
												<option value="0">Yes</option>
												<option value="1">No</option>
											</select>
											
										</div>
									</div>

									<div id="sect-family-occupation" class="row">
										<div class="col-12">
											<label><b>Occupation</b></label>
											<input type="text" class="form-control" name="family_occupation">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Highest academic level</b></label>
											<select class="form-control"name="family_academic">
												<?php foreach ($qualifications as $key => $qualification): ?>
													<option value="<?php echo $qualification->id; ?>"><?php echo $qualification->level; ?></option>
												<?php endforeach ?>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>University / Institution</b></label>
											<input type="text" class="form-control" name="family_institution">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addFamilyInfo()" data-tooltip="tooltip" title="" data-original-title="Add new family information"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-familyInfo">
													<thead>
														<tr>
															<th>Name</th>
															<th>Relations</th>
															<th>Birthdate</th>
															<th>Occupation</th>
															<th>OKU Status</th>
															<th>Student Status</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
										</div>
									</div>

									<!-- pcb setting -->
									<div class="row">
										<div class="col-12">
											<h3 id="sect-pcb-header">PCB Consideration</h3>
										</div>
									</div>

									<div class="row">
										
										<div class="col-12">
											<label><b>Name</b></label>
											<select class="form-control" id="pcb_name" name="pcb_name"></select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Responsibility</b></label>
											<select class="form-control" name="pcb_responsibility">
												<option value="0">Employee</option>
												<option value="1">Spouse</option>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 mb-3 ml-auto">
											<button type="button" class="btn btn-primary btn-block" onclick="addPCB()"  data-tooltip="tooltip" title="" data-original-title="add PCB Consideration">
												<i class="fas fa-plus"></i>
											</button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-pcb">
													<thead>
														<tr>
															<th>Name</th>
															<th>Nric no</th>
															<th>Responsibility</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody></tbody>
												</table>
											</div>
										</div>
									</div>
									<!-- pcb setting -->
								</section>
								<!-- family info -->

								<!-- academic qualification -->
								<section id="sect-academic-qualification" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-academic-qualification-header">Academic Qualifications</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Level</b></label>
											<select class="form-control" name="academic_qualification">
												<?php foreach ($qualifications as $key => $qualification): ?>
													<option value="<?php echo $qualification->id; ?>"><?php echo $qualification->level; ?></option>
												<?php endforeach ?>
											</select>
										</div>

										<div class="col-12 col-lg-6">
											<label><b>Year Graduated</b></label>
											<input type="text" class="form-control datepicker-yyyy" name="academic_year_grad">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>University / Institution</b></label>
											<input type="text" class="form-control" name="academic_university">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Program</b></label>
											<input type="text" class="form-control" name="academic_program">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Attachment</b></label>
											<input type="file" class="form-control" name="academic_attachment">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addQualification()" data-tooltip="tooltip" title="" data-original-title="Add new academic qualification to this form"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-academicQualification">
													<thead>
														<tr>
															<th>Level</th>
															<th>Program</th>
															<th>University / Institution</th>
															<th>Year Graduated</th>
															<th>Attachment</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
														
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- academic qualification -->

								<!-- additional personal data -->
									<section id="sect-personal-data" class="border p-3 d-none">
										<div class="row">
											<div class="col">
												<h3 id="sect-personal-data-header">Additional Personal Data</h3>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<label><b>Details</b></label>
												<input type="text" class="form-control" name="personal_details">
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<label><b>Description</b></label>
												<textarea class="form-control" rows="5" name="personal_description"></textarea>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<label><b>Attachment</b></label>
												<input type="file" class="form-control" name="personal_attachment">
											</div>
										</div>

										<div class="row">
											<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
												<button type="button" class="btn btn-primary btn-block" onclick="addPersonalData()"><i class="fas fa-plus"></i></button>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<div class="table-responsive">
													<table class="table table-bordered" id="tbl-personalData">
														<thead>
															<tr>
																<th>Detail</th>
																<th>Description</th>
																<th>Attachment</th>
																<th>Action</th>
															</tr>
														</thead>
														<tbody>
															
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</section>
								<!-- additional personal data -->
								
								<!-- previous employment detail -->
								<section id="sect-employment-detail" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-employment-detail-header">Previous Employment Detail</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Date Join</b></label>
											<input type="text" class="form-control datepicker" name="employment_date_join">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Date to</b></label>
											<input type="text" class="form-control datepicker" name="employment_date_to">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Employer Name</b></label>
											<input type="text" class="form-control" name="employment_employer_name">
										</div>
										<div class="col-12">
											<label><b>Employer Address</b></label>
											<textarea class="form-control" rows="5" name="employment_employer_address"></textarea>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Position</b></label>
											<input type="text" class="form-control" name="employment_position">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Length of services</b></label>
											<div class="input-group">
											  <input type="number" class="form-control" name="employment_length_of_service">
											  <div class="input-group-append">
											    <select class="form-control" name="employment_length_of_service_type">
											    	<option value="days">Days</option>
											    	<option value="weeks">Weeeks</option>
											    	<option value="months">Months</option>
											    	<option value="years">Years</option>
											    </select>
											  </div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Description</b></label>
											<textarea class="form-control" rows="5" name="employment_description"></textarea>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block ml-auto mt-3 mb-3" onclick="addPreviousEmployent()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add previous employment history"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-previousEmployment">
													<thead>
														<tr>
															<th>Employer Name</th>
															<th>Employer Address</th>
															<th>Position</th>
															<th>Length of Service</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- previous employment detail -->

								<!-- professional memberships -->
								<section id="sect-professional-membership" class="border p-3 d-none">
									<div class="row">
										<div class="col">
											<h3 id="sect-professional-membership-header">Professional Memberships</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Professional Bodies</b></label>
											<input type="text"class="form-control" name="professional_bodies">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Professional Certificate</b></label>
											<input type="text" class="form-control" name="professional_certificate">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Membership</b></label>
											<input type="text" class="form-control" name="professional_membership">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Membership Number<b></label>
											<input type="text" class="form-control" name="professional_membership_number">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Year</b></label>
											<input type="text" class="form-control datepicker-yyyy" name="professional_year">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Attachment</b></label>
											<input type="file" class="form-control" name="professional_attachment">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addProfessionalMembership()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add professional membership"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-professionalMembership">
													<thead>
														<tr>
															<th>Professional Bodies</th>
															<th>Professional Certificate</th>
															<th>Membership</th>
															<th>Membership Number</th>
															<th>Year</th>
															<th>Attachment</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- professional memberships -->
								
								<!-- professional licenses -->
								<section id="sect-professional-licenses" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-professional-licenses-header">Professional Licenses</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Profession</b></label>
											<input type="text" class="form-control" name="license_profession">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>License No</b></label>
											<input type="text" class="form-control" name="license_no">
										</div>	
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Inital Registration Date</b></label>
											<input type="text" class="form-control datepicker" name="license_date_init">
										</div>

										<div class="col-12 col-lg-6">
											<label><b>Latest Renewal Valid</b></label>
											<input type="text" class="form-control datepicker" name="license_date_renewal">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Attachment</b></label>
											<input type="file" class="form-control" name="license_attachment">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addProfessionalLicense()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add License"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-professionalLicense">
													<thead>
														<tr>
															<th>Profession</th>
															<th>License No</th>
															<th>Inital Registration Date</th>
															<th>Latest Renewal Valid</th>
															<th>Attachment</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
														
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- professional licenses -->
								
								<!-- recognition -->
								<section id="sect-recognition" class="border p-3 d-none">
									<div class="row">
										<div class="col">
											<h3 id="sect-recognition-header">Recognition</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Achievement</b></label>
											<input type="text" class="form-control" name="recognition_achievement">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Award</b></label>
											<input type="text" class="form-control" name="recognition_award">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Year</b></label>
											<input type="text" class="form-control datepicker-yyyy" name="recognition_year">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Attachment</b></label>
											<input type="file" class="form-control" name="recognition_attachment">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addRecognition()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add recognition"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-recognition">
													<thead>
														<tr>
															<th>Achievement</th>
															<th>Award</th>
															<th>Year</th>
															<th>Attachment</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
														
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- recognition -->

								<!-- contract element -->
								<section id="sect-contract-element" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-contract-element-header">Contract Element</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Contract Type</b></label>
											<select class="form-control" name="contract_type">
												<?php foreach ($hiringTypes as $key => $hiring): ?>
													<option value="<?php echo $hiring->id; ?>"><?php echo $hiring->type; ?></option>
												<?php endforeach ?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Confirmation</b></label>
											<select class="form-control" name="contract_confirmation">
												<?php foreach ($contractConfirmations as $key => $confirm): ?>
													<option value="<?php echo $confirm->id; ?>"><?php echo $confirm->type; ?></option>
												<?php endforeach ?>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Confirmation Date</b></label>
											<input type="text" class="form-control datepicker" name="contract_confirmation_date">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Probationary Period</b></label>
											<div class="input-group">
											  <input type="number" class="form-control" name="contract_probationary_period">
											  <div class="input-group-append">
											    <select class="form-control" name="contract_probationary_period_type">
											    	<option value="0">Days</option>
											    	<option value="1">Weeks</option>
											    	<option value="2">Months</option>
											    	<option value="3">Year</option>
											    </select>
											  </div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Employer Notice Period</b></label>
											<div class="input-group">
											  <input type="number" class="form-control" name="contract_employer_notice_period">
											  <div class="input-group-append">
											    <select class="form-control" name="contract_employer_notice_type">
											    	<option value="0">Days</option>
											    	<option value="1">Weeks</option>
											    	<option value="2">Months</option>
											    	<option value="3">Year</option>
											    </select>
											  </div>
											</div>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Employee Notice Period</b></label>
											<div class="input-group">
											  <input type="number" class="form-control" name="contract_employee_notice_period">
											  <div class="input-group-append">
											    <select class="form-control" name="contract_employee_notice_type">
											    	<option value="0">Days</option>
											    	<option value="1">Weeks</option>
											    	<option value="2">Months</option>
											    	<option value="3">Year</option>
											    </select>
											  </div>
											</div>
										</div>
									</div>

								</section>
								<!-- contract element -->

								<!-- basic pay -->
								<section id="sect-basic-pay" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-basic-pay-header">Basic Pay</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Pay Scale Group</b></label>
											<select class="form-control" name="basic_pay_scale_group">
												<?php
													for ($i=1; $i <= 24; $i++) { 
												?>
													<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
												<?php
													}
												?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Basic Pay Amount</b></label>
											<div class="input-group">
											  <div class="input-group-prepend">
											    <span class="input-group-text">RM</span>
											  </div>
											  <input type="number" class="form-control" name="basic_pay_amount">
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Start Date</b></label>
											<input type="text" class="form-control datepicker" name="basic_pay_date_start">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>End Date</b></label>
											<input type="text" class="form-control datepicker" name="basic_pay_date_end">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Reason</b></label>
											<textarea class="form-control" rows="5" name="basic_pay_reason"></textarea>
										</div>
									</div>

								</section>
								<!-- basic pay -->

								<!-- bank details -->
								<section id="sect-bank-detail" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-bank-detail-header">Bank Details</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Bank Name</b></label>
											<select class="form-control" name="bank_name">
												<?php foreach ($banks as $key => $bank): ?>
													<option value="<?php echo $bank->id; ?>"><?php echo $bank->name; ?></option>
												<?php endforeach ?>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Branch</b></label>
											<input type="text" class="form-control" name="bank_branch">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Account Number</b></label>
											<input type="text" class="form-control" name="bank_account_no">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Status</b></label>
											<input type="text" class="form-control" name="bank_status">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Attachment</b></label>
											<input type="file" class="form-control" name="bank_attachment">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addBankDetails()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add bank details"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-bankDetail">
													<thead>
														<tr>
															<th>Bank Name</th>
															<th>Branch</th>
															<th>Account Number</th>
															<th>Status</th>
															<th>Attachment</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- bank details -->

								<!-- statutory details -->
								<section id="sect-statutory-detail" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-statutory-detail-header">Statutory Details</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 ">
											<label><b>Employee EPF Number</b></label>
											<input type="text" class="form-control" name="statutory_epf_no">	
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Employer Rate</b></label>
											<div class="row">
												<div class="col-12 col-lg-4">
													<div class="row">
														<div class="col-4">
															<input type="radio" class="form-control" name="statutory_er_rate" value="0">
														</div>
														<div class="col">
															Statutory Rate
														</div>
													</div>
												</div>
												<div class="col-12 col-lg-4">
													<div class="row">
														<div class="col-4">
															<input type="radio" class="form-control" name="statutory_er_rate" value="1">
														</div>
														<div class="col">
															company Rate
														</div>
													</div>
												</div>
												<div class="col-12 col-lg-4">
													<div class="row">
														<div class="col-4">
															<input type="radio" class="form-control" name="statutory_er_rate" value="2">
														</div>
														<div class="col">
															Personal Rate
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Amount Percentage</b></label>
											<div class="input-group mb-3">
											  <input type="number" class="form-control" name="statutory_er_percent">
											  <div class="input-group-append">
											     <span class="input-group-text">%</span>
											  </div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Employee Rate</b></label>
											<div class="row">
												<div class="col-12 col-lg-4">
													<div class="row">
														<div class="col-4">
															<input type="radio" class="form-control" name="statutory_ee_rate" value="0">
														</div>
														<div class="col">
															Statutory Rate
														</div>
													</div>
												</div>
												<div class="col-12 col-lg-4">
													<div class="row">
														<div class="col-4">
															<input type="radio" class="form-control" name="statutory_ee_rate" value="1">
														</div>
														<div class="col">
															company Rate
														</div>
													</div>
												</div>
												<div class="col-12 col-lg-4">
													<div class="row">
														<div class="col-4">
															<input type="radio" class="form-control" name="statutory_ee_rate" value="2">
														</div>
														<div class="col">
															Personal Rate
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Amount Percentage</b></label>
											<div class="input-group mb-3">
											  <input type="number" class="form-control" name="statutory_ee_percent">
											  <div class="input-group-append">
											     <span class="input-group-text">%</span>
											  </div>
											</div>
										</div>
									</div>


									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Employee SOCSO No</b></label>
											<input type="text" class="form-control" name="statutory_socso">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Income Tax No</b></label>
											<input type="text" class="form-control" name="statutory_income_tax">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>PCB Deduction Amount</b></label>
											<input type="text" class="form-control" name="statutory_pcb_deduction">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Zakat Deduction Amount</b></label>
											<input type="text" class="form-control" name="statutory_zakat_deduction">
										</div>
									</div>

								</section>
								<!-- statutory details -->

								<!-- recurring pay  -->
								<section id="sect-recurring-pay" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-recurring-pay-header">Recurring Pay / Deduct</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Date From</b></label>
											<input type="text" class="form-control datepicker" name="recurring_date_from">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Date To</b></label>
											<input type="text" class="form-control datepicker" name="recurring_date_to">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Recurring</b></label>
											<select class="form-control" name="recurring_item_recurr">
												<option value="0">Payment</option>
												<option value="1">Deduction</option>
											</select>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Type</b></label>
											<input type="text" class="form-control" name="recurring_type">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Amount</b></label>
											<div class="input-group mb-3">
											  <div class="input-group-prepend">
											    <span class="input-group-text">RM</span>
											  </div>
											  <input type="text" class="form-control" name="recurring_amount">
											</div>
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Status</b></label>
											<select class="form-control" name="recurring_status">
												<option value="0">Ongoing</option>
												<option value="1">End</option>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto my-3">
											<button type="button" class="btn btn-primary btn-block" onclick="addRecuring()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Add recurring payment / deduction"><i class="fas fa-plus"></i></button>
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-recurring">
													<thead>
														<tr>
															<th>Recurring</th>
															<th>Type</th>
															<th>Start Date</th>
															<th>End Date</th>
															<th>Status</th>
															<th>Action</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
									</div>
								</section>
								<!-- recurring pay -->

								<!-- third party payment -->
								<section id="sect-third-party-payment" class="border p-3 d-none">
									<div class="row">
										<div class="col-12">
											<h3 id="sect-third-party-payment-header">Third party payment</h3>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Date From</b></label>
											<input type="text" class="form-control datepicker" name="third_party_date_from">
										</div>
										<div class="col-12 col-lg-6">
											<label><b>Date To</b></label>
											<input type="text" class="form-control datepicker" name="third_party_date_to">
										</div>
									</div>

									<div class="row">
										<div class="col-12">
											<label><b>Third Party Institution / Organisation</b></label>
											<input type="text" class="form-control" name="third_party_institute">
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-6">
											<label><b>Amount</b></label>
											<div class="input-group mb-3">
											  <div class="input-group-prepend">
											    <span class="input-group-text">RM</span>
											  </div>
											  <input type="text" class="form-control" name="third_party_amount">
											</div>

										</div>
										<div class="col-12 col-lg-6">
											<label><b>Status</b></label>
											<select class="form-control" name="third_party_status">
												<option value="0">Ongoing</option>
												<option value="1">End</option>
											</select>
										</div>
									</div>

									<div class="row">
										<div class="col-12 col-lg-2 ml-auto">
											<button type="button" class="btn btn-primary btn-block" onclick="addThirdParty()" data-tooltip="tooltip" title="" data-original-title="Add third party payment"><i class="fas fa-plus"></i></button>
										</div>
									</div>
									<br>

									<div class="row">
										<div class="col-12">
											<div class="table-responsive">
												<table class="table table-bordered" id="tbl-thirdParty">
													<thead>
														<tr>
															<th>Date From</th>
															<th>Date To</th>
															<th>Third Party Institution / Organisation</th>
															<th>Status</th>
															<th>Amount(RM)</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody></tbody>
												</table>
											</div>
										</div>
									</div>
								</section>
								<br>
								<div class="row">
									<div class="col-12 col-lg-4 ml-auto">
										<button type="submit" class="btn btn-success btn-block"><i class="fas fa-save"></i>Save</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<!-- form end here -->

</section>

<script type="text/javascript">
	/* table data */
	var addressList 				= [];
	var familyList 					= []; 
	var academicList 				= [];
	var additionalPersonalList 		= [];
	var prevEmpList 				= [];
	var proMembershipList 			= [];
	var proLicenseList 				= [];
	var recognitionList 			= [];
	var bankList 					= [];
	var recurList 					= [];
	var thirdPartyList 				= [];
	var pcbList						= [];
	
$(document).ready(function(){
	actionType(); //init action type based on infotype
	isFamilyStudent(); //init form occupation based on student status

});

$('#action_type_form').on('submit', function(e){
	e.preventDefault();

	var serialize = formDataCleanUp(formIdToInputObject('#action_type_form'));
	var data = {
		token:'<?php echo $_SESSION['token'];?>',
		form:serialize,
	}

	ajxRequest('<?php echo base_url('hr/api/staffprofiling/registerProfile'); ?>', 'POST',data, '<?php echo base_url('hr/StaffProfile/StaffDetail/').$staff['id']; ?>');

});


function infoType(elem) {
	var forms = $(elem).data('form');
	var is_check = $(elem).prop('checked');

	if(is_check){
		$('#'+forms).removeClass('d-none');
	}else{
		$('#'+forms).addClass('d-none');
	}
}

function formDataCleanUp(obj){

	var container = [];

	var main_form = {
		info_type : -1,
		user_id : obj.user_id,
		staff_id : obj.staff_id,
		action_type : obj.action_type,
		efective_date : obj.efective_date,
	}

	container.push(main_form);

	/*  ------------------check if join group checked--  */
	if(obj.join_group_checkbox){
		var join_group = {
			info_type:0,
			info_type_name: 'join_group',
			value : true,
			date_join : obj.join_group_date_join,
			date_to : obj.join_group_date_to,
			hiring_reason: obj.join_group_reason_hiring,
			hiring_position : obj.join_group_position,
			reporting_to : obj.join_group_reporting_to,
			branch:obj.join_group_branch,
			personnel_area  : obj.join_group_personnel_area,
			personal_subarea: obj.join_group_personal_subarea,
			emp_group:obj.join_group_employee_subgroup,
			contract_type:obj.join_group_contract_element,
			emp_subgroup:obj.join_group_employee_subgroup,
			status:obj.join_group_employment_status
		}
		container.push(join_group);
	}

	/* --------check if address is checked-------------- */
	if(obj.address_checkbox){
		var address = {
			info_type:1,
			info_type_name:'address',
			value: true,
			list: addressList,
		}
		container.push(address);
	}

	/* ----------check if family info is checked-------- */
	if (obj.family_info_checkbox) {
		var family_info = {
			info_type:2,
			info_type_name:'family info',
			value: true,
			list:familyList,
		}
		container.push(family_info);
	};

	/* -----check if academic qualification is checked-- */
	if (obj.academic_qualification_checkbox) {
		var academic = {
			info_type:3,
			info_type_name:'academic qualification',
			value:true,
			list:academicList,
		}
		container.push(academic);
	};

	/* ---check if additional personal data is checked-- */
	if (obj.additional_personal_data_checkbox) {
		var personal_data = {
			info_type:4,
			info_type_name:'additional personal data',
			value:true,
			list:additionalPersonalList,
		}
		container.push(personal_data);
	};

	/* -check if employment detail is checked----------- */
	if(obj.employment_detail_checkbox){
		var prev_emp = {
			info_type:5,
			info_type_name:'previous employment detail',
			value:true,
			list:prevEmpList
		}
		container.push(prev_emp)
	}
	
	/* ---check if professional membership is checked--- */
	if(obj.professional_membership_checkbox){
		var pro_membership = {
			info_type:6,
			info_type_name:'professional membership',
			value:true,
			list:proMembershipList
		}
		container.push(pro_membership);
	}

	/* --check if professional licenses is checked----- */
	if(obj.professional_licenses_checkbox){
		var pro_license = {
			info_type:7,
			info_type_name:'professional licenses',
			value:true,
			list:proLicenseList
		}
		container.push(pro_license);
	}

	/* -----check if recognition is checked----------- */
	if(obj.recognition_checkbox){
		var pro_license = {
			info_type:8,
			info_type_name:'recognition',
			value:true,
			list:recognitionList
		}
		container.push(pro_license);
	}

	/*-------------------------------------------------*/
	if(obj.contract_element_checkbox){
		var contract = {
			info_type:9,
			info_type_name:'contract element',
			value:true,
			user_id:obj.user_id,
			contract_type:obj.contract_type,
			confirmation:obj.contract_confirmation,
			confirmation_date:obj.contract_confirmation_date,
			probationary_period:obj.contract_probationary_period,
			probationary_period_type:obj.contract_probationary_period_type,
			employer_notice_period:obj.contract_employer_notice_period,
			employer_notice_period_type:obj.contract_employer_notice_type,
			employee_notice_period:obj.contract_employee_notice_period,
			employee_notice_period_type:obj.contract_employee_notice_type,
		}
		container.push(contract);
	}

	/*-------------------------------------------------*/
	if(obj.basic_pay_checkbox){
		var basic_pay = {
			info_type:10,
			info_type_name:'basic pay',
			value:true,
			user_id:obj.user_id,
			scale_group:obj.basic_pay_scale_group,
			amount:obj.basic_pay_amount,
			start_date:obj.basic_pay_date_start,
			end_date:obj.basic_pay_date_end,
			reason:obj.basic_pay_reason
		}
		container.push(basic_pay);
	}

	/*------------------------------------------------*/
	if(obj.bank_detail_checkbox){
		var bank = {
			info_type:11,
			info_type_name:'bank details',
			value:true,
			list:bankList,
		}

		container.push(bank);
	}

	/*----------------------------------------------*/
	if(obj.statutory_detail_checkbox){
		var statutory = {
			info_type:12,
			info_type_name:'statutory details',
			value:true,
			user_id:obj.user_id,
			employee_epf_no:obj.statutory_epf_no,
			employee_rate:obj.statutory_ee_rate,
			employee_amount_percent:obj.statutory_ee_percent,
			employer_rate:obj.statutory_er_rate,
			employer_amount_percent:obj.statutory_er_percent,
			employee_socso_no:obj.statutory_socso,
			employee_income_tax_no:obj.statutory_income_tax,
			employee_pcb_deduction:obj.statutory_pcb_deduction,
			employee_zakat_deduction:obj.statutory_zakat_deduction
		}

		container.push(statutory);
	}

	/*----------------------------------------------*/
	if(obj.recurring_pay_checkbox){
		var recurring = {
			info_type:13,
			info_type_name:'recurring pay / deduction',
			value:true,
			list:recurList,
		}

		container.push(recurring);
	}

	/*----------------------------------------------*/
	if(obj.third_party_checkbox){
		var third_party = {
			info_type:14,
			info_type_name:'third party payment',
			value:true,
			list:thirdPartyList,
		}
		container.push(third_party);
	}

	/*---------------------------------------------*/
	if(obj.pcb_checkbox){
		var pcb = {
			info_type:15,
			info_type_name:'pcb consideration',
			value:true,
			list:pcbList
		}

		container.push(pcb);
	}

	return container;
}

function allType() {
	var all_info = $('#all-checkbox').prop('checked');
 	$.each($('input[type="checkbox"]'),function(index,value){
 		if(all_info != $(value).prop('checked')){
 			$(value).trigger('click');
 		}
 	});
}

function actionType(){
	var action_type 	= $('#action-type').val();	
	var workflowB64 	= $('#workflowSelect').find(':selected').data('workflow');
	var workflowJSON  	= JSON.parse(atob(workflowB64));

	$(workflowJSON).each(function(index,row){
	

		if(action_type == index){
			
				if(row.joining_group != $('input[name="join_group_checkbox"]').prop('checked').toString()){
					$('input[name="join_group_checkbox"]').trigger('click');
				}

				if(row.address != $('input[name="address_checkbox"]').prop('checked').toString()){
					$('input[name="address_checkbox"]').trigger('click');
				}

				if(row.family_info != $('input[name="family_info_checkbox"]').prop('checked').toString()){
					$('input[name="family_info_checkbox"]').trigger('click');
				}

				if(row.academic_qualification != $('input[name="academic_qualification_checkbox"]').prop('checked').toString()){
					$('input[name="academic_qualification_checkbox"]').trigger('click');
				}	
		
				if(row.additional_personal_data != $('input[name="additional_personal_data_checkbox"]').prop('checked').toString()){
					$('input[name="additional_personal_data_checkbox"]').trigger('click');
				}

				if(row.previous_employment_detail != $('input[name="employment_detail_checkbox"]').prop('checked').toString()){
					$('input[name="employment_detail_checkbox"]').trigger('click');
				}

				if(row.professional_membership != $('input[name="professional_membership_checkbox"]').prop('checked').toString()){
					$('input[name="professional_membership_checkbox"]').trigger('click');
				}

				if(row.professional_license != $('input[name="professional_licenses_checkbox"]').prop('checked').toString()){
					$('input[name="professional_licenses_checkbox"]').trigger('click');
				}

				if(row.recognition != $('input[name="recognition_checkbox"]').prop('checked').toString()){
					$('input[name="recognition_checkbox"]').trigger('click');
				}

				if(row.contract_element != $('input[name="contract_element_checkbox"]').prop('checked').toString()){
					$('input[name="contract_element_checkbox"]').trigger('click');
				}

				if(row.basic_pay != $('input[name="basic_pay_checkbox"]').prop('checked').toString()){
					$('input[name="basic_pay_checkbox"]').trigger('click');
				}

				if(row.bank_detail != $('input[name="bank_detail_checkbox"]').prop('checked').toString()){
					$('input[name="bank_detail_checkbox"]').trigger('click');
				}

				if(row.statutory_detail != $('input[name="statutory_detail_checkbox"]').prop('checked').toString()){
					$('input[name="statutory_detail_checkbox"]').trigger('click');
				}

				if(row.recurring != $('input[name="recurring_pay_checkbox"]').prop('checked').toString()){
					$('input[name="recurring_pay_checkbox"]').trigger('click');
				}

				if(row.third_party != $('input[name="third_party_checkbox"]').prop('checked').toString()){
					$('input[name="third_party_checkbox"]').trigger('click');
				}

				// if(row.pcb_consideration != $('input[name="pcb_checkbox"]').prop('checked').toString()){
				// 	$('input[name="pcb_checkbox"]').trigger('click');
				// }
		}
	});
	
}

function removeWorkflow() {
	toastConfirm('Are you sure you want to remove this workflow ?', function(){
		var id = $('#workflowSelect').val();
		var data = {
			token:'<?php echo $_SESSION['token']; ?>',
			work_id:id,
		};
		ajxRequest('<?php echo base_url('hr/api/staffprofiling/remove_workflow'); ?>', 'POST', data, '<?php echo current_url(''); ?>');
	});	
}

function enableOther(elem){
	var value = $(elem).val();
	var data = $(elem).data('join');

	/* others */
	if(value == -1){
		if(data == 'group'){
			$('#join-group-other-reason').removeClass('d-none');
			$('#join-group-other-reason').removeAttr('disabled');

		}

		if(data == 'position'){
			$('#join-group-other-position').removeClass('d-none');
			$('#join-group-other-position').removeAttr('disabled');

		}
	}else{
		if(data == 'group'){
			$('#join-group-other-reason').addClass('d-none');
			$('#join-group-other-reason').attr('disabled','disabled');

		}

		if(data == 'position'){
			$('#join-group-other-position').addClass('d-none');
			$('#join-group-other-position').attr('disabled','disabled');

		}
	}
}

function isFamilyStudent() {
	var status = $('select[name="family_student"]').val();
	$('input[name="family_occupation"]').val('');
	if(status == 0){
		$('#sect-family-occupation').addClass('d-none');
	}else{
		$('#sect-family-occupation').removeClass('d-none');
	}
}

function removeItem(elem) {
	var i 		= $(elem).find('i').first();
	var pos 	= i.data('index');
	var table   = i.data('table');

	if(table == '#tbl-address'){
		addressList.splice(pos,1);
	}

	if(table == '#tbl-familyInfo'){
		familyList.splice(pos,1);
	}

	if (table == '#tbl-academicQualification'){
		academicList.splice(pos,1);
	}

	if (table == '#tbl-personalData'){
		additionalPersonalList.splice(pos,1);
	}

	if (table == '#tbl-previousEmployment'){
		prevEmpList.splice(pos,1);
	}
	

	if (table == '#tbl-professionalMembership'){
		proMembershipList.splice(pos,1);
	}

	if (table == '#tbl-professionalLicense'){
		proLicenseList.splice(pos,1);
	}

	if (table == '#tbl-recognition'){
		recognitionList.splice(pos,1);
	}

	if (table == '#tbl-bankDetail'){
		bankList.splice(pos,1);
	}

	if (table == '#tbl-recurring'){
		recurList.splice(pos,1);
	}

	if (table == '#tbl-thirdParty'){
		thirdPartyList.splice(pos,1);
	}

	createtable(table);
}

/* this function can be improved with passing param(array) for table */

function createtable(tableid) {
	var table = $(tableid).DataTable();
	table.clear().draw();

	/* create table for address*/
	if(tableid == '#tbl-address'){
		$.each(addressList, function(key,value){
			var type = '',state = '', country = '';
			<?php foreach ($residenceType as $key => $type): ?>
				if(value.type == '<?php echo $type->id?>'){
					type = '<?php echo $type->type;?>';
				}
			<?php endforeach ?>	
			<?php if($states) foreach ($states as $key => $state): ?>
				if(value.state == '<?php echo $state->id;?>'){
					state = '<?php echo $state->state;?>';
				}
			<?php endforeach ?>
			<?php foreach ($countries as $key => $country): ?>
				if(value.country == '<?php echo $country->id; ?>'){
					country = '<?php echo $country->country; ?>';
				}
			<?php endforeach ?>
			table.row.add([
				type,
				value.address,
				value.postcode,
				value.city,
				state,
				country,
				value.contact_header+value.contact_number,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" type="button" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove address from this form" onclick="removeItem(this)" >\
						<i data-index="'+key+'" data-table="#tbl-address" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);
		});
	}/* end create table for address*/

	$('#pcb_name').empty('');
	/* create table for family info*/
	if (tableid == '#tbl-familyInfo') {

		var pcb_table = $('#tbl-pcb').DataTable();
		pcb_table.clear().draw();

		$.each(familyList, function(key,value){

			console.log(value);
			var relation = '',oku_status = '',student_status = '';

			<?php foreach ($relations as $key => $relation): ?>
				if(value.relation == '<?php echo $relation->id; ?>'){
					relation = '<?php echo $relation->relations; ?>';
				}
			<?php endforeach ?>

			if (value.oku_status == 0){ 
				oku_status = 'Yes';
			}else{
				oku_status = 'No';
			}

			if (value.student_status == 0) {
				student_status = 'Yes';
			}else{
				student_status = 'No';
			}

			table.row.add([
				value.name,
				relation,
				value.birthdate,
				value.occupation,
				oku_status,
				student_status,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove family info from this form" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-familyInfo" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);

			if(value.relation == 2){
				$('#pcb_name').append('<option value="'+key+'">'+value.name+'</option>');
			}


			//create table for pcb ....
			if(value.pcb_consideration){
				console.log('the value for the pcb respo is : ');
				console.log(value.responsibility);

				var responsibility = '';
				if(value.responsibility == '0'){
					responsibility = 'Employee';
				}else{
					responsibility = 'Spouse';
				}

				pcb_table.row.add([
					value.name,
					value.ic_no,
					responsibility,
					'<div class="btn-group">\
						<button class="btn btn-danger btn-sm"><i class="fa fa-trash-alt"></i></button>\
					</div>'
				]).draw(true);
			}

		});
		
	};/* end create table for family info*/

	/* create table for academic qualification*/
	if (tableid == '#tbl-academicQualification'){
		$.each(academicList,function(key,value){
			var level = '';
			<?php foreach ($qualifications as $key => $qualification): ?>
				if (value.level_id == '<?php echo $qualification->id; ?>') {
					level = '<?php echo $qualification->level; ?>';
				};
			<?php endforeach ?>
			let attachment = JSON.parse(value.table);
			var filename = '';
			if(!attachment.error){
				filename = attachment.orig_name;
			}
			table.row.add([
				level,
				value.program,
				value.institution,
				value.year,
				filename,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove academic qualification" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-academicQualification" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);
		});

	};/*end create table for academic qualification*/

	/* create table for personal data*/
	if (tableid == '#tbl-personalData') {
		$.each(additionalPersonalList, function(key,value){
			let attachment = JSON.parse(value.table);
			var filename = '';
			if(!attachment.error){
				filename = attachment.orig_name;
			}
			table.row.add([
				value.detail,
				value.description,
				filename,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove additional personal list" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-personalData" ></i>\
						<i class="fas fa-trash-alt" type="button"></i>\
					</button>\
				</div>'
			]).draw(true);

		});
	};
	/* end: create table for personal data*/

	/* create previous employment history */
	if(tableid == '#tbl-previousEmployment'){
		$.each(prevEmpList, function(key,value){

			table.row.add([
				value.employer_name,
				value.employer_address,
				value.position,
				value.length_of_service,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove previous employment detail" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-previousEmployment" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);
		});
	}
	/* end : create previous employment history */

	/* create table for professional memberships */
	if (tableid == '#tbl-professionalMembership') {
		$.each(proMembershipList, function(key,value){
			let attachment = JSON.parse(value.table);
			var filename = '';
			if (!attachment.error) {
				filename = attachment.orig_name;
			}
			table.row.add([
				value.professional_body,
				value.certificate,
				value.membership,
				value.membership_no,
				value.year,
				filename,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove professional membership" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-professionalMembership" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);
		});
	};
	/* end : create table for professional memberships*/

	/* create table for professional license */
	if(tableid == '#tbl-professionalLicense'){
		$.each(proLicenseList,function(key,value){
			let attachment = JSON.parse(value.table);
			var filename = '';
			if(!attachment.error){
				filename = attachment.orig_name;
			}

			table.row.add([
				value.profession,
				value.license_no,
				value.register_date,
				value.renewal_date,
				filename,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove License" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-professionalLicense" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);

		});
	}
	/* end : create table for professional license*/

	/* create table for recognition */
	if(tableid == '#tbl-recognition'){
		$.each(recognitionList,function(key,value){
			let attachment = JSON.parse(value.table);
			var filename = '';
			if(!attachment.error){
				filename = attachment.orig_name;
			}

			table.row.add([
				value.achievement,
				value.award,
				value.year,
				filename,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove recognition" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-recognition" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(false);
		});
	}
	/* end: create table for recognition */

	/* create table bank details */
	if (tableid == '#tbl-bankDetail') {
		$.each(bankList,function(key,value){
				let attachment = JSON.parse(value.table);
				var filename = '';
				if(!attachment.error){
					filename = attachment.orig_name;
				}

				var bank_name = '';
				<?php foreach ($banks as $key => $bank): ?>
					if(value.bank_id == '<?php echo $bank->id; ?>'){
						bank_name = '<?php echo $bank->name; ?>';
					}
				<?php endforeach ?>
				table.row.add([
					bank_name,
					value.branch,
					value.acc_no,
					value.status,
					filename,
					'<div class="btn-group">\
						<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove bank details" type="button" onclick="removeItem(this)">\
							<i data-index="'+key+'" data-table="#tbl-bankDetail" ></i>\
							<i class="fas fa-trash-alt"></i>\
						</button>\
					</div>'
				]).draw(true);
		});
	};
	/* end : create table bank details */

	/* create table for recurrig pay and deduction */
	if (tableid == '#tbl-recurring') {
		$.each(recurList,function(key,value){
			var recurring = ''; var status = '';

			if(value.recurring == 0){
				recurring = 'Payment';
			}else{
				recurring = 'Deduction';
			}

			if(value.status == 0){
				status = 'Ongoing'
			}else{
				status = 'End';
			}
			table.row.add([
				recurring,
				value.type,
				value.date_from,
				value.date_to,
				status,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove recurring item" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-recurring" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(false);
		});
	};  
	/* end: create table for recurring pay and deduction*/
	
	/* create third party payment */
	if(tableid == '#tbl-thirdParty'){
		$.each(thirdPartyList, function(key,value){
			var status = '';
			if(value.status == 0){
				status = 'Ongoing';
			}else{
				status = 'End';
			}
			table.row.add([
				value.date_start,
				value.date_end,
				value.type,
				status,
				value.amount,
				'<div class="btn-group">\
					<button class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Remove third party" type="button" onclick="removeItem(this)">\
						<i data-index="'+key+'" data-table="#tbl-thirdParty" ></i>\
						<i class="fas fa-trash-alt"></i>\
					</button>\
				</div>'
			]).draw(true);
		});
	}
	/* end : create third party payments */
}


function uploadAttachment(infotype,attachment_id,func) {

	formData = new FormData();
    formData.append('token','<?php echo $_SESSION['token']; ?>');
    formData.append('infotype',infotype);
    formData.append('staff_id','<?php echo $staff['id']; ?>'); //fake it
    formData.append('attachment',$(attachment_id).prop('files')[0]);

	$.ajax({
		url: '<?php echo base_url('hr/api/staffprofiling/uploadAttachment'); ?>',
		type: "POST",             
        data: formData, 
        contentType:false,       
        cache: false,             
        processData:false,  
		success: function(data){
			func(data);
		},
		error: function(){
			iziToast.error({
				position: 'bottomRight',
				title: 'Failed',
				message: 'Uploading attachments failed'
			});
		}
	});

}

/*------------ INFOTYPE FUNCTIONALITIES  -------------------*/
function addAddress() {
	var form = formIdToInputObject('#action_type_form');
	var list = {
		user_id:form.user_id,
		type:form.address_type,
		address:form.address_place,
		postcode:form.address_postcode,
		city:form.address_city,
		state:form.address_state,
		country:form.address_country,
		contact_header:form.address_contact_header,
		contact_number:form.address_contact_number
	};
	addressList.push(list);
	$('textarea[name="address_place"]').val('');
	$('input[name="address_postcode"]').val('');
	$('input[name="address_city"]').val('');
	$('input[name="address_contact_number"]').val('');
	createtable('#tbl-address');
}

function addFamilyInfo() {
	var form = formIdToInputObject('#action_type_form');
	var list = {
		user_id:form.user_id,
		ic_no:form.family_nric,
		address:form.family_address,
		birthdate:form.family_birthdate,
		contact_header:form.family_contact_header,
		contact_no:form.family_contact,
		email:form.family_email,
		academic_level:form.family_academic,
		academic_institution:form.family_institution,
		name: form.family_name,
		relation: form.family_relation,
		occupation:form.family_occupation,
		oku_status:form.family_dissability,
		student_status:form.family_student,
	};
	familyList.push(list);

	$('input[name="family_name"]').val('');
	$('input[name="family_nric"]').val('');
	$('input[name="family_birthdate"]').val('');
	$('input[name="family_contact"]').val('');
	$('input[name="family_email"]').val('');
	$('textarea[name="family_address"]').val('');
	$('input[name="family_occupation"]').val('');
	$('input[name="family_institution"]').val('');

	createtable('#tbl-familyInfo');
}

function addQualification() {
	var form = formIdToInputObject('#action_type_form');
	let infotype = 3;

	uploadAttachment(infotype,'input[name="academic_attachment"]',function (elem) {
		
		var list = {
			user_id:form.user_id,
			level_id:form.academic_qualification,
			program:form.academic_program,
			institution:form.academic_university,
			year:form.academic_year_grad,
			table:elem,
		};	
		academicList.push(list);
		createtable('#tbl-academicQualification');
	});
	$('input[name="academic_year_grad"]').val('');
	$('input[name="academic_university"]').val('');
	$('input[name="academic_program"]').val('');
}

function addPersonalData() {
	var form = formIdToInputObject('#action_type_form');
	let infotype = 4; 
	uploadAttachment(infotype,'input[name="personal_attachment"]',function(elem){
		var list = {
			user_id:form.user_id,
			detail:form.personal_details,
			description:form.personal_description,
			table:elem,
		};
		additionalPersonalList.push(list);
		createtable('#tbl-personalData');
	});
	$('input[name="personal_details"]').val('');
	$('textarea[name="personal_description"]').val('');
}

function addPreviousEmployent() {
	var form = formIdToInputObject('#action_type_form');
	var list = {
		user_id: form.user_id,
		employer_name : form.employment_employer_name,
		employer_address:form.employment_employer_address,
		position:form.employment_position,
		date_enter:form.employment_date_join,
		date_exit:form.employment_date_to,
		length_of_service:form.employment_length_of_service+' '+form.employment_length_of_service_type,
		description:form.employment_description,
	};
	prevEmpList.push(list);

	$('input[name="employment_date_join"]').val('');
	$('input[name="employment_date_to"]').val('');
	$('input[name="employment_employer_name"]').val('');
	$('textarea[name="employment_employer_address"]').val('');
	$('input[name="employment_position"]').val('');
	$('input[name="employment_length_of_service"]').val('');
	$('textarea[name="employment_description"]').val('');

	createtable('#tbl-previousEmployment');
}

function addProfessionalMembership() {
	var form = formIdToInputObject('#action_type_form');
	let infotype = 6; 
	uploadAttachment(infotype,'input[name="professional_attachment"]',function(elem){
		var list = {
			user_id:form.user_id,
			professional_body:form.professional_bodies,
			certificate:form.professional_certificate,
			membership:form.professional_membership,
			membership_no:form.professional_membership_number,
			year:form.professional_year,
			table:elem,
		};
		proMembershipList.push(list);
		createtable('#tbl-professionalMembership');
	});
	$('input[name="professional_bodies"]').val('');
	$('input[name="professional_certificate"]').val('');
	$('input[name="professional_membership"]').val('');
	$('input[name="professional_membership_number"]').val('');
	$('input[name="professional_year"]').val('');
}

function addProfessionalLicense(){
	var form = formIdToInputObject('#action_type_form');
	let infotype = 7;
	uploadAttachment(infotype,'input[name="license_attachment"]',function(elem){
		var list = {
			user_id: form.user_id,
			profession:form.license_profession,
			license_no:form.license_no,
			register_date:form.license_date_init,
			renewal_date:form.license_date_renewal,
			table:elem,
		};
		proLicenseList.push(list);
		createtable('#tbl-professionalLicense');
	});
	$('input[name="license_profession"]').val('');
	$('input[name="license_no"]').val('');
	$('input[name="license_date_init"]').val('');
	$('input[name="license_date_renewal"]').val('');
}

function addRecognition(){
	var form = formIdToInputObject('#action_type_form');
	let infotype = 8; 
	uploadAttachment(infotype,'input[name="recognition_attachment"]',function(elem){
		var list = {
			user_id:form.user_id,
			achievement:form.recognition_achievement,
			award:form.recognition_award,
			year:form.recognition_year,
			table:elem,
		};
		recognitionList.push(list);
		createtable('#tbl-recognition');
	});
	$('input[name="recognition_achievement"]').val('');
	$('input[name="recognition_award"]').val('');
	$('input[name="recognition_year"]').val('');
}

function addBankDetails() {
	var form = formIdToInputObject('#action_type_form');
	let infotype = 11;
	uploadAttachment(infotype,'input[name="bank_attachment"]',function(elem){
		var list = {
			user_id:form.user_id,
			bank_id:form.bank_name,
			branch:form.bank_branch,
			acc_no:form.bank_account_no,
			status:form.bank_status,
			table:elem,
		};
		bankList.push(list);
		createtable('#tbl-bankDetail');
	});
	$('input[name="bank_branch"]').val('');
	$('input[name="bank_account_no"]').val('');
	$('input[name="bank_status"]').val('');
}

function addRecuring() {
	var form = formIdToInputObject('#action_type_form');

	var list = {
		user_id:form.user_id,
		date_from:form.recurring_date_from,
		date_to:form.recurring_date_to,
		recurring:form.recurring_item_recurr,
		type:form.recurring_type,
		amount:form.recurring_amount,
		status:form.recurring_status,
	};
	recurList.push(list);

	$('input[name="recurring_date_from"]').val('');
	$('input[name="recurring_date_to"]').val('');
	$('input[name="recurring_type"]').val('');
	$('input[name="recurring_amount"]').val('');
	
	createtable('#tbl-recurring');
}

function addThirdParty() {
	var form = formIdToInputObject('#action_type_form');

	var list = {
		user_id:form.user_id,
		date_start:form.third_party_date_from,
		date_end:form.third_party_date_to,
		type:form.third_party_institute,
		amount:form.third_party_amount,
		status:form.third_party_status,
	};
	thirdPartyList.push(list);

	$('input[name="third_party_date_from"]').val('');
	$('input[name="third_party_date_to"]').val('');
	$('input[name="third_party_institute"]').val('');
	$('input[name="third_party_amount"]').val('');

	createtable('#tbl-thirdParty');
}

function addPCB(){
	var form = formIdToInputObject('#action_type_form');
	var family_index = form.pcb_name;
	var responsibility = form.pcb_responsibility;

	familyList[family_index].pcb_consideration = true;
	familyList[family_index].responsibility = responsibility;

	createtable('#tbl-familyInfo');
	
}
/*------------ END :INFOTYPE FUNCTIONALITIES  -------------------*/
</script>