<div class="collapse" id="collapseExperienceMgs">
	<div class="card card-body">
		<h4 class="card-title">Working Experience</h4>
		<hr>		
		<div class="container">
			<?php if ($role == 'admin'): ?>
			<div class="row ">
				<div class="col-sm-12 col-md-3">
					<div class="form-group form-inline">
						<label>Year: &nbsp;</label>
						<input type="number" value="" min="2002" max="2099" class="form-control col-sm-10" name="workExpFilterYear" id="workExpFilterYear">
					</div>
				</div> 
				<div class="col-sm-12 col-md-3">
					<div class="form-group form-inline">
						<label>Category: &nbsp;</label>
						<select id="workExpFilterIntExt" class="custom-select col-sm-8">
							<option value="-1" selected>All</option>
							<option value="0">External</option>
							<option value="1">Internal</option>
						</select>
					</div>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="form-group form-inline">
					<button type="button" class="btn btn-primary" onclick="filterWorkExpMgs()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filter" viewBox="0 0 16 16">
  <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
</svg>
                Filter
              </button>
					</div>
				</div> 
			</div>
			<?php endif ?>
		</div>
		<div class="table-responsive">
			<table id="table_experienceMgs" class="table table-hover table-bordered">
				<thead>
					<tr>
						<th>Customer Name</th>
						<th>Services</th>
						<th>Type of Job</th>
						<th>Category</th>
						<th>Year</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody id="workExpMgsTbody">
					<?php if(!empty($professional_experiencemgs)) foreach ($professional_experiencemgs as $key => $exp): ?>	
						<tr class="link-row">
							<td scope="row">
								<?php echo $exp['customerName']; ?>
							</td>
							<td>
								<?php echo $exp['service']; ?>
							</td>
							<td>
								<?php echo $exp['type_job']; ?>
							</td>
							<td>
								<?php echo ($exp['is_internal']==1)?'Internal':'External'; ?>
							</td>
							<td>
								<?php echo $exp['year_join']; ?>
							</td>
							<td style="white-space: pre-line">
								<?php echo $exp['description']; ?>
							</td>
						</tr>
					<?php endforeach ?>
				</tbody>
			</table>
		</div>
	</div><br>	 
</div>


<script type="text/javascript">

var ObjWorkExpMgs = <?php echo (empty($professional_experiencemgs))?"":json_encode($professional_experiencemgs); ?>;

function filterWorkExpMgs(){
	var tbody = document.getElementById("workExpMgsTbody");

	if (ObjWorkExpMgs!=''){
		$('#table_experienceMgs').DataTable().clear();
		$('#table_experienceMgs').DataTable().destroy();
		tbody.innerHTML='';
		var year = document.getElementById("workExpFilterYear").value.trim();
		var intExt = document.getElementById("workExpFilterIntExt").value;
		var len = ObjWorkExpMgs.length;
		var is_even=1;
		for (var i=0;i<len;i++){
			var item = ObjWorkExpMgs[i];
			if (year!=""){
				if (year!=item.year_join){
					continue;
				}
			}

			if (intExt!=-1){
				if (intExt!=item.is_internal){
					continue;
				}
			}
			var cls = "link-row odd";
			is_even = (is_even==1)?false:true;
			if (is_even){
				cls = "link-row even";
			}
			var tr = document.createElement("tr");
			tr.className = cls;
			
			var td1 = document.createElement("td");
			td1.setAttribute("scope","row");
			td1.innerHTML=item.customerName;
			tr.appendChild(td1);

			var td2 = document.createElement("td");
			td2.innerHTML=item.service;
			tr.appendChild(td2);

			var td3 = document.createElement("td");
			td3.innerHTML=item.type_job;
			tr.appendChild(td3);

			var td4 = document.createElement("td");
			td4.innerHTML=(item.is_internal==1)?'Internal':'External';
			tr.appendChild(td4);

			var td5 = document.createElement("td");
			td5.innerHTML=item.year_join;
			tr.appendChild(td5);

			var td6 = document.createElement("td");
			td6.setAttribute('style','white-space: pre-line');
			td6.innerHTML=item.description;
			tr.appendChild(td6);

			tbody.appendChild(tr);
		}

		$('#table_experienceMgs').DataTable().draw();
	}
}

</script>