<!DOCTYPE html>
<html>
	<head>
		<!-- bootstrap 4 -->
		<link rel="stylesheet" href="http://salihin.noip.me/spserp.dev/assets/vendors/bootstrap/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

		<!-- DataTables -->
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>

		<!-- iziToast -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.2.0/css/iziToast.min.css" integrity="sha256-KRuAWYyML8ozSxElJG/l4ZIS83XnPbd9WwhZMD1vrDI=" crossorigin="anonymous" />

		<!-- Animate -->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/animate.css" />

		<!-- Datepicker -->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/datepicker/css/bootstrap-datepicker3.css" />

		<!-- durationpicker -->
		<!-- <link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/durationpicker/src/bootstrap-duration-picker.css" /> -->

		<!-- bootstrap-select -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

		<!-- fullcalendar -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/fullcalendar-3.9.0/fullcalendar-3.9.0/scheduler.min.css" />

		<!--Timepicker-->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/jquery-timepicker-master/jquery-timepicker-master/jquery.timepicker.css" />

		<!-- select2 -->
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
		<link  rel="stylesheet"type="text/css"  href="http://salihin.noip.me/spserp.dev/assets/vendors/select2-bootstrap4-theme-1.0.0/dist/select2-bootstrap4.css"/>

		<!-- datetimepicker -->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/datetimepicker/css/bootstrap-material-datetimepicker.css">

		<!-- datetimepicker bootstrap -->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/vendors/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">

		<!-- Bootstrap toggle-->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.css">

		<!-- <link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/themes/web/css/main.css" /> -->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/themes/web/css/bootstrap-extension.css" />

		<!-- font awesome v5.3.1 -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" >

		<!-- pure css switch button toggle -->
		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/themes/web/css/switch.css">

		<link rel="stylesheet" type="text/css" href="http://salihin.noip.me/spserp.dev/assets/themes/web/css/widget.css">
		<link rel="stylesheet" href="http://salihin.noip.me/spserp.dev/assets/vendors/selectric/selectric.css">

		<!-- JQuery -->
		<script
			src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
		</script>

		<!-- bootstrap 4 -->
		<script 
			src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
			integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
			crossorigin="anonymous"></script>
		<script 
			src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
			integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
			crossorigin="anonymous"></script>

		<!-- moment.js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/moment-business-days@1.0.6/index.min.js"></script>

		<!-- Datepicker -->
		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/datepicker/js/bootstrap-datepicker.js"></script>

		<!-- FontAwesome 5 -->
		<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" integrity="sha384-kW+oWsYx3YpxvjtZjFXqazFpA7UP/MbiY4jvs+RWZo2+N94PFZ36T6TFkc9O3qoB" crossorigin="anonymous"></script>

		<!-- Datatables -->
		<script 
			src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>

		<!-- datatable-moment plugin -->
		<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>

		<!-- iziToast -->
		<script 
			src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.2.0/js/iziToast.min.js" 
			integrity="sha256-uCdpRo51COIjZA47syx+kEsafS8SC+wleH4f/PvVnMU=" 
			crossorigin="anonymous"></script>

		<!-- parsley.js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.js"></script>

		<!-- bootstrap-select -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

		<!-- Timepicker--> 
		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/jquery-timepicker-master/jquery-timepicker-master/jquery.timepicker.js"></script>

		<!-- accounting js--> 
		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/accountingjs/accounting.min.js"></script>

		<!-- select2 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

		<!-- Bootstrap Select -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

		<!-- datetimepicker -->
		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/datetimepicker/js/bootstrap-material-datetimepicker.js"></script>

		<!-- datetimepicker bootrap -->
		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" ></script>
		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/datetimejs/datetimejs.js"></script>

		<!-- Bootstrap toggle-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.js"></script>
		<script src="http://salihin.noip.me/spserp.dev/assets/dist/js/jquery.mask.js"></script>
		<script src="http://salihin.noip.me/spserp.dev/assets/dist/js/jquery.qrcode.min.js"></script>

		<script src="http://salihin.noip.me/spserp.dev/assets/vendors/selectric/jquery.selectric.min.js"></script>

		<style type="text/css">
			* {
				font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
				font-size: 1em;
			}
			small {
				font-size: 0.8em;
			}
			a:link, a:visited {
				text-decoration: none;
			}
			header, footer, section {
				padding: 0 0 20px;
				z-index: 1;
				clear: both;
			}
			header .report-title {
				padding: 0 5px 0 0;
			}
			header .t-corp {
				width: 220px;
				text-align: center;
				padding: 20px 0 0 5px;
			}
			header .t-corp-name {
				width: inherit;
				margin: 0 auto;
				padding: 8px 0 0;
			}
			header .t-corp-logo {
				margin: 0 auto;
				text-align: center;
			}
			header .t-corp-logo img {
				width: 100%;
			}
			header .company {
				margin: 10px 0 0;
				width: 100%;
			}
			header .company span, header label {
				display: block;
			}
			header .company .divider {
				vertical-align: top;
				width: 35%;
				min-height: 100px;
			}
			header .company .details {
				width: 30%;
				text-align: center;
			}
			header .company .line {
				width: 100%;
				border-top: 4px solid #444;
				margin: 10px 0 0;
			}
			header .company > td {
				min-height: 100px;
			}
			nav {
				display: inline-block;
				float: right;
				width: auto;
				margin: 0 auto;
				padding: 5px 15px;
				z-index: 2;
				text-align: center;
				position: relative;
			}
			section pre b {
				font-family: Arial, sans-serif !important;
			}
			section pre {
				background: none;
				border: none;
				margin: 0;
				padding: 0;
				line-height: 2em;
			}
			section h5 {
				font-weight: 700;
			}
			section table td, section table th {
				padding: 10px 7px;
				vertical-align: top;
			}
			section table th {
				border-top: 3px solid #444;
				border-bottom: 3px solid #444;
			}
			section table tr:last-child td {
				border-bottom: 3px solid #444;
			}
			section table tbody tr {
				min-height: 100px !important;
			}
			section .item {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			section .item-title {
				font-weight: 700;
			}
			section table {
				margin: 10px 0 0;
			}
			section .grand-total {
				border: 4px solid #444;
				padding: 8px 10px 0;
				margin: 20px 0 0;
			}
			section .grand-total span {
				display: block;
			}
			.customer-panel {
				padding: 25px 0 10px;
			}
			.customer-panel .address {
				text-transform: capitalize !important;
			}
			.tar {
				text-align: right;
			}
			.tac {
				text-align: center;
			}
			.total-title {
				display: inline;
				padding: 7px 15px 0;
				text-align: left;
				color: #333;
				font-weight: 700;
				text-align: right;
			}
			.total-value {
				display: inline;
				padding: 7px 15px 0;
				text-align: left;
				color: #333;
			}
			.terms .title {
				font-weight: 700;
				text-decoration: underline;
			}
			.terms .space:first-of-type {
				padding: 0;
			}
			.terms .space {
				padding: 10px 0 0;
				line-height: 2em;
				text-align: justify;
			}
			.terms ol {
				padding: 0;
				margin: 0 0 0 10px;
			}
			.terms li {
				padding: 0 0 0 15px;
			}
			.terms .name {
				line-height: 1em;
				font-size: 12pt;
				font-weight: 700;
				display: block;
				text-transform: uppercase;
			}
			.terms .generated {
				width: 150px;
				padding: 3px 0;
				border-top: 1px dashed #444;
				margin: 100px 0 0;
				text-align: center;
			}
			.terms .generated:after {
				line-height: 1em;
				content: "TEKUN";
				position:absolute;
				top: 30px;
				left: 30px;
				z-index: 1;
				-webkit-transform: rotate(-25deg); /* Safari */
				-moz-transform: rotate(-25deg); /* Firefox */
				-ms-transform: rotate(-25deg); /* IE */
				-o-transform: rotate(-25deg); /* Opera */
				transform: rotate(-25deg);
				font-size: 18pt;
				color: #c00;
				background: #fff;
				border: solid 4px #c00;
				padding: 8px;
				border-radius: 5px;
				zoom: 1;
				filter: alpha(opacity=30);
				opacity: 0.3;
				-webkit-text-shadow: 0 0 2px #c00;
				text-shadow: 0 0 2px #c00;
				box-shadow: 0 0 2px #c00;
			}
			@page {
				size: auto;
				margin: 8mm 10mm;
			}
			@media print {
				header .company .divider { width: 25%; }
				header .company .details { width: 50%; }
				header .t-corp { width: 200px; }
				.btn-icon, nav { display:none; }
				.pagebreak { page-break-before: always; }
				table { page-break-inside:auto }
				tr    { page-break-inside:avoid; page-break-after:auto }
				thead { display:table-header-group }
				tfoot { display:table-footer-group }
			}
			@media screen and (max-width:360px) {
				header .t-corp {
					width: 180px;
				}
			}
			left {
				float:right;
				border-radius: 5px;
				padding: 20px; 
				width: 300px;
				height: 100px;    
			}
			#rounded {
				border-radius: 25px;
				border: 2px solid;
				padding: 20px; 
				width: 570px;
				height: 118px; 
			}
			div.ex1 {
	    	max-height: 50px;
	    	max-width: 30px;
			}
		</style>
	</head>
</html>

<body>
	<nav class="btn-panel" style="position: relative;">
		<div class="pull-right btn-group">
			<button type="button" class="btn btn-info" onclick="do_print()"><span class="fa fa-print"></span></button>
		</div>
	</nav>
	<header>
		<div class="row">
			<div class="col">
				<div class="t-corp float-left">
					<div class="t-corp-logo">
						<img src="<?php echo base_url().'assets/images/logo/salihin-logo.png'; ?>" alt="company logo" />
					</div>
					<div class="t-corp-name"><b>SPS</b> | HR SYSTEM</div>
				</div>
				<div class="report-title float-right" style="margin-top: 50px;">
					<h4>LEAVE INFOMATION AS AT <?php echo $date; ?></h4>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<table class="company">
					<tr>
						<td class="divider">
							<span class="line">&nbsp;</span>
						</td>
						<td class="details">
							<span><b>SALIHIN (AF 1426)</b></span>
							<span>555, Jalan Samudra Utara 1, Taman Samudra, Batu Caves,</span>
							<span>68100, Batu Caves, Selangor</span>
							<span>Phone: 03-6185 9970 &nbsp;&nbsp; Fax: 03-6185 9970</span>
							<span>Website: salihin.com.my</span>
						</td>
						<td class="divider">
							<span class="line">&nbsp;</span>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</header>

	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<div class="row">
					<div class="col-3">
						<b>STAFF ID</b>
					</div>
					<div class="col">
						<p> : <?php echo (!empty($rs_staff['staff_id']))?strtoupper($rs_staff['staff_id']):'N/A'; ?></p>
					</div>
				</div>
			</div> 
			<div class="col">
				<div class="row">
					<div class="col-3">
						<b>DATE JOINED</b>
					</div>
					<div class="col">
						<p> : <?php echo (!empty($rs_staff['date_joined']))?strtoupper($rs_staff['date_joined']):'N/A'; ?></p>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="row">
					<div class="col-3">
						<b>TITLE</b>
					</div>
					<div class="col">
						<p>: <?php echo (!empty($rs_staff['user_title']))?strtoupper($rs_staff['user_title']):'N/A'; ?></p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="row">
					<div class="col-3">
						<b>NAME</b>
					</div>
					<div class="col">
						<p>: <?php echo (!empty($rs_staff['name']))?strtoupper($rs_staff['name']):'N/A'; ?></p>
					</div>
				</div>
			</div>
		</div>
	</div>	
<?php 		

if(!empty($rs_year)) foreach($rs_year as $row_year){ ?>
	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<div class="row">
					<div class="col-2">
						<h4>YEAR</h4>
					</div>
					<div class="col">
						<h4><p>: <?php echo (!empty($row_year['year']))?strtoupper($row_year['year']):'N/A'; ?></p></h4>
					</div>
				</div>
			</div>
		</div>	
		<div class="row">
			<div class="col">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>LEAVE TYPE</th>
							<th>ENTITLEMENT</th>
							<th>FROM PREVIOUS YEAR</th>
							<th>LEAVE TAKEN</th>
							<th>BALANCE</th>
						</tr>
					</thead>
					<tbody>
						<?php if(!empty($rs_entitlement)) foreach($rs_entitlement as $row_entitlement){ 
						if($row_entitlement['year'] == $row_year['year'] && ($row_entitlement['leave_entitled'] > 0 || $row_entitlement['leave_taken'] > 0)) {?>
						<tr>
							<td><?php echo ($row_entitlement['type'])?strtoupper($row_entitlement['type']):'N/A'; ?></td>
							<td><?php echo ($row_entitlement['leave_entitled'])?($row_entitlement['leave_entitled']):'N/A'; ?></td>
							<td><?php echo ($row_entitlement['bring_forward_entitled'])?($row_entitlement['bring_forward_entitled']):'N/A'; ?></td>
							<td><?php echo ($row_entitlement['leave_taken'])?($row_entitlement['leave_taken']):'N/A'; ?></td>
							<td><?php echo ($row_entitlement['leave_balance'])?($row_entitlement['leave_balance']):'N/A'; ?></td>
						</tr>
						<?php } } ?>
					</tbody>
				</table>
			</div>
		</div>			
	</div>	
	<div class="container-fluid">
	Summary For The Year <?php echo $row_year['year']; ?>
		<div class="row">
			<div class="col">
<?php $data_from_db = $this->db->where('user_id',$user_id)
							->where('year',$row_year['year'])
							->order_by('type_id')
							->get(' view_leave_summary')
							->result_array(); 			
//var_dump($data_from_db); ?>
			</div>
		</div>

		<div class="row">
			<div class="col">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>LEAVE TYPE</th>
							<th>LAST YEAR BROUGHT FORWARD</th>
							<th>LAST YEAR ENTITLED</th>
							<th>LAST YEAR TAKEN BEFORE APR</th>
							<th>LAST YEAR TAKEN AFTER APR</th>
							<th>LAST YEAR BALANCE</th>
							<th>BRING FORWARD ENTITLED
								<small><i>*max 50% from entitlement</i></small>
							</th>
							<th>CURRENT YEAR ENTITLED</th>
							<th>CURRENT YEAR TAKEN BEFORE APR</th>
							<th>CURRENT YEAR TAKEN AFTER APR</th>
							<th>CURRENT YEAR BALANCE</th>
						</tr>
					</thead>
					<tbody>
						<?php $taken = 0; if(!empty($data_from_db)) foreach($data_from_db as $row){ 
							$taken += ($row['last_year_taken_b4_april']+$row['last_year_taken_after_april']+$row['leave_applied_before_april']+$row['leave_applied_after_april']);
						if($row['year'] == $row_year['year'] && ($row['leave_entitled'] > 0 || $taken > 0)) {?>
						<tr>
							<td><?php echo ($row['leave_type'])?strtoupper($row['leave_type']):'N/A'; ?></td>
							<td><?php echo ($row['last_year_brought_forward'])?($row['last_year_brought_forward']):'N/A'; ?></td>
							<td><?php echo ($row['last_year_entitled'])?($row['last_year_entitled']):'N/A'; ?></td>
							<td><?php echo ($row['last_year_taken_b4_april'])?($row['last_year_taken_b4_april']):'N/A'; ?></td>
							<td><?php echo ($row['last_year_taken_after_april'])?($row['last_year_taken_after_april']):'N/A'; ?></td>
							<td><?php echo ($row['last_year_balance'])?($row['last_year_balance']):'N/A'; ?></td>
							<td><?php echo ($row['bring_forward_entitled'])?($row['bring_forward_entitled']):'N/A'; ?></td>
							<td><?php echo ($row['leave_entitled'])?($row['leave_entitled']):'N/A'; ?></td>
							<td><?php echo ($row['leave_applied_before_april'])?($row['leave_applied_before_april']):'N/A'; ?></td>
							<td><?php echo ($row['leave_applied_after_april'])?($row['leave_applied_after_april']):'N/A'; ?></td>
							<td><?php echo ($row['current_balance'])?($row['current_balance']):'N/A'; ?></td>
						</tr>
						<?php } } ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		Leave Applied For The Year <?php echo $row_year['year']; ?>
		<div class="row">
			<div class="col">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>DATE</th>
							<th>NO OF DAYS</th>
							<th>LEAVE TYPE</th>
							<th>STATUS</th>
							<th>REASON</th>
							<th>REMARKS</th>
						</tr>
					</thead>
					<tbody>
<?php 
$rs = $this->db->query('select a.*, b.name as type from hr__leave_application a, hr__leave_type b where a.type_id = b.id and a.user_id='.$user_id.' and year(a.date_from)='.$row_year['year'])->result_array();
if(!empty($rs)) foreach($rs as $row){  ?>
						<tr>
							<td><?php echo ($row['date_from'])?($row['date_from']):'N/A'; ?></td>
							<td><?php echo ($row['days_applied'])?($row['days_applied']):'N/A'; ?></td>
							<td><?php echo ($row['type'])?strtoupper($row['type']):'N/A'; ?></td>
							<td>
							<?php if(($row['status']==1))
								echo 'PENDING';
							elseif($row['status']==2)
								echo 'APPROVED';
							elseif($row['status']==3)
								echo 'REJECTED';
							elseif($row['status']==4) 
								echo 'CANCELED';
							elseif($row['status']==5)
								echo 'CHANGED';
							else echo 'UNKNOWN';
							echo ($row['is_delete']==1 || $row['status']==4)?'<br><b class="text-danger">CANCELED</b>':''; ?>
							</td>
							<td><?php echo ($row['reason'])?($row['reason']):'N/A'; ?></td>
							<td><?php echo ($row['remarks'])?($row['remarks']):'N/A'; ?></td>
						</tr>
						<?php }  ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
<?php	}
/* 'leave_taken' => string '21.0' (length=4)
      'balance_entitled' => string '23.0' (length=4)
      'leave_balance' => string '5.5' (length=3)
      'bring_forward_entitled' => string '11.0' (length=4)
      'bring_forward' => string '0.0' (length=3)
      'leave_entitled' */

?>
	</div>
</body>
<script>
function do_print() {
			window.print();
		}</script>