<style type="text/css">
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

h5.wiggle {
  display: inline-block;
  animation: wiggle 1.5s infinite;
}

h5.wiggle:hover {
  animation: none;
}
</style>

<div class="container-fluid" style="">
	<div class="jumbotron">
		<div class="row">
			<div class="col-md-4 text-center align-self-center">
				<img class="image-responsive" src="<?php echo base_url($company['file_location'].$company['file_name']); ?>" style="max-height: 15rem; max-width: 15rem;">
			</div>
			<div class="col-md-8">
				<!-- <h1 class="display-4" id="cardName"><?php echo $company['name']; ?></h1> -->
				<img class="image-responsive" src="<?php echo base_url($company['file_location'].'salihin-logo.png'); ?>" style="max-height: 15rem; max-width: 15rem;">
				<p class="lead" id="cardProfile"><?php echo $company['profile']; ?></p>
				<hr class="my-4">
				<p id="cardPhone"><?php echo $company['phone']; ?></p>
				<p><a id="cardWebsite" target="_blank" href="<?php echo 'http://'.$company['website']; ?>"><?php echo $company['website']; ?></a></p>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-12 col-sm-4 mb-1">
			<button onclick="staffList();" type="button" class="btn btn-dark btn-round btn-sm pull-right btn-block" style="height:100px;">
				<h5 class="card-title"><i class="fas fa-list"></i> List of Staff</h5>
				<p class="card-text">List of Staff</p>
			</button>
		</div>
		<div class="col-12 col-sm-4 mb-1">
			<button type="button" class="btn btn-secondary btn-round btn-sm pull-right btn-block" style="height:100px;">
				<h5 class="card-title wiggle"><i class="fas fa-smile"></i> Complete List <span class="badge badge-danger"><?php echo $total_complete['total']; ?></span></h5>
				<p class="card-text">Complete List</p>
			</button>
		</div>
		<div class="col-12 col-sm-4 mb-1">
			<button onclick="incompleteList();" type="button" class="btn btn-dark btn-round btn-sm pull-right btn-block" style="height:100px;">
				<h5 class="card-title"><i class="fas fa-sad-tear"></i> Incomplete List <span class="badge badge-danger"><?php echo $total_incomplete['total']; ?></span></h5>
				<p class="card-text">Incomplete List</p>
			</button>
		</div>
	</div>

	<section style="padding-top: 2rem; padding-bottom: 2rem;">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">Complete Staff Details</h4>
				<hr>
				<b>Indicator</b>
				<div class="form-row">
					<table></table>
					<div class="col-12 col-sm-3">
						<small><b>PD</b> | Personal Details </small><br>
						<small><b>FI</b> | Family Info </small><br>
						<small><b>AQ</b> | Academic Qualification </small><br>
						<small><b>ED</b> | Employment Details </small><br>
					</div>
					<div class="col-12 col-sm-3">
						<small><b>PED</b> | Previous Employment Details </small><br>
						<small><b>CE</b> | Contract Element </small><br>
						<small><b>Rec</b> | Recognition </small><br>
						<small><b>PM</b> | Professional Memberships </small><br>
					</div>
					<div class="col-12 col-sm-3">
						<small><b>PL</b> | Professional Licenses </small><br>
						<small><b>BP</b> | Basic Pay </small><br>
						<small><b>BD</b> | Bank Detail </small><br>
						<small><b>STD</b> | Statutory Detail </small><br>
					</div>
					<div class="col-12 col-sm-3">
						<small><b>RPD</b> | Recurring Pay/Deduct </small><br>
						<small><b>TPP</b> | Third Party Payment </small><br>
						<small><b>PCBC</b> | PCB Consideration </small><br>
					</div>
				</div>
				<hr>
				<div class="table-responsive">
					<table id="table_user_complete" class="table table-hover table-bordered">
						<thead>
                            <tr>
                                <th rowspan="2">#</th>
                                <th rowspan="2">Staff Name</th>
                                <th colspan="3" class="text-center">Background Details</th>
                                <!-- <th>Adr</th> -->
								<th colspan="6" class="text-center">Professional Details</th>
								<th colspan="6" class="text-center">Financial Details</th>
                                <th rowspan="2">action</th>
                            </tr>
                            <tr>
                                <th>PD</th>
                                <!-- <th>Adr</th> -->
								<th>FI</th>
								<th>AQ</th>
								<th>ED</th>
								<th>PED</th>
								<th>CE</th>
								<th>Rec</th>
								<th>PM</th>
								<th>PL</th>
								<th>BP</th>
								<th>BD</th>
								<th>STD</th>
								<th>RPD</th>
								<th>TPP</th>
								<th>PCBC</th>
                            </tr>
                        </thead>
						
						<tbody>
							<?php 
								$i = 1;
								if($staff_detail) foreach($staff_detail as $row) { 
									if($row['profiling_status'] == 1) { ?>
										<tr>
											<td class="text-center"><?php echo $i++; ?></td>
											<td>
												<a href="<?php echo base_url('hr/StaffProfile/staffDetail/'.$row['user_id']); ?>" target="_blank"><?php echo $row['name']; ?></a>
											</td>
											<td class="text-center">
												<?php
													echo '<i class="fa fa-check" style="color: green;"></i>';
												?>
											</td>
											<!-- <td class="text-center"></td> -->
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center">
												<?php
												echo '<i class="fa fa-check" style="color: green;"></i>';
												?>
											</td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											<td class="text-center"><?php echo '<i class="fa fa-check" style="color: green;"></i>'; ?></td>
											
											<td class="text-center">
												<div class="btn-group">
													<button type="button" class="btn btn-danger btn-sm" data-trigger="hover" data-tooltip="tooltip" title="Set detail as incomplete" data-userid="<?php echo $row['user_id']; ?>" data-status="0" onclick="submit_profiling_status(this)"><i class="fa fa-times"></i></button>
												</div>
											</td>
										</tr>
									<?php } 
								} ?>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</section>
</div>

<script type="text/javascript">
	function submit_profiling_status(elem)
	{
		let status	= $(elem).data('status');
		let user_id = $(elem).data('userid');

		var postData = {
			'token'		: '<?php echo $_SESSION['token'];?>',
			'status' 	: status,
			'user_id' 	: user_id,
		}
		$.ajax({
			type: 'POST',
			url: '<?php echo base_url('hr/api/StaffProfiling/save_profiling_status'); ?>',
			data: postData,
			dataType: 'JSON',
			success: function(data) {
				if(data.status == 'success')
				{
					localStorage.setItem("status",data.status);
					localStorage.setItem("msg",data.msg);

					location.replace(data.redirect);
				}
			}
		});
	}

	function staffList()
	{
		window.open("<?php echo base_url().'hr/StaffProfile'?>", "_blank");
	}

	function completeList()
	{
		window.open("<?php echo base_url().'hr/StaffProfile/completeList'?>", "_blank");
	}

	function incompleteList()
	{
		window.open("<?php echo base_url().'hr/StaffProfile/incompleteList'?>", "_blank");
	}

</script>