<!-- previous employment detail -->
<section id="sect-employment-detail" class="border p-3 d-none">
	<div class="row title-row" data-toggle="collapse" href="#collapsePrevEmpDetail" role="button" aria-expanded="false">
		<div class="col-12">
			<h3 id="sect-employment-detail-header">Previous Employment Detail</h3>
		</div>
	</div>
	<div id="collapsePrevEmpDetail">
			<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>
					<input class="form-control" rows="5" name="employment_employer_address">
				</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>
					<input class="form-control" rows="5" name="employment_description">
				</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> -->
								<tr>
									<th>Detail</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
	</div>
</section>
<!-- previous employment detail -->