<div class="container mt-lg-2 mb-lg-5">
	<div class="card bg-light-transparent mb-3">

		<div class="card-body">
			<div class="row">
				<div class="col" onclick="yearPayslip()">
					<div class="card text-white bg-dark">
						<div class="card-body">
							Total Uploaded Payslip
							<p class="card-text"><?php echo ($yearPayslips) ? number_format($yearPayslips).' ':'' ?><small>(<?php echo date('Y')?>)</small></p>
						</div>
					</div>
				</div>

				<div class="col" onclick="monthPayslip()">
					<div class="card text-white bg-dark">
						<div class="card-body">
							Month Uploaded Payslip
							<p class="card-text"><?php echo ($monthPayslips) ? number_format($monthPayslips).' ':'' ?><small>(<?php echo date('F')?>)</small></p>
						</div>
					</div>
				</div>
				
				<div class="col" onclick="monthPayslip()">
					<div class="card text-white bg-dark">
						<div class="card-body">
							Month Net Pay(RM)
							<p class="card-text"><?php echo ($monthNet) ? number_format($monthNet,2).' ':'' ?><small>(<?php echo date('F')?>)</small></p>
						</div>
					</div>
				</div>

				<div class="col" onclick="yearPayslip()">
					<div class="card text-white bg-dark">
						<div class="card-body">
							Total Net Pay (RM)
							<p class="card-text"><?php echo ($yearNet) ? number_format($yearNet,2).' ':'' ?><small>(<?php echo date('Y')?>)</small></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	
    <div class="card bg-light-transparent mb-3">
    	<div class="card-header bg-light">
			<h5 class="card-title">Uploaded Pay Slip List</h5>
				<div class="row">
					<div class="col-lg-3 d-print-none">
						<a href="<?php echo base_url('hr/payslip/viewuploadpayslip')?>" class="btn btn-outline-dark btn-block">
							<span class="fa fa-plus"></span> Upload New Pay Slip
						</a> 
					</div>
					<div class="col-lg-2 d-print-none">
						<a href="<?php echo base_url('hr/payslip/view3')?>" target="_blank" class="btn btn-outline-dark btn-block">
							<span class="fa fa-print"></span> Print
						</a>
					</div>
				</div>	
		</div>
        <div class="card-body">
            <div class="card no-shadow" >
				<div class="card card-body">
					<div class="container" align="left">	
						
						<div class="col-12 mt-3">
							<div class="container">
								<div class="row">
									<div class="col-12 col-md-3">
										<select class="form-control" placeholder="Company Name" id="company">
											<option value='-1'>All Company</option>
											<?php foreach ($companies as $company) {?>
												<option value="<?php echo $company->id;?>"><?php echo $company->name;?></option>
											<?php } ?>
										</select>
									</div>
									<div class="col-12 col-md-3">	
										<input type="text" placeholder="month" class="datepicker-mm form-control" id="salaryWage">
									</div>
									<div class="col-12 col-md-3">
										<input type="text" placeholder="year" class="datepicker-yyyy form-control" id="salaryYear">
									</div>
									<div class="col-12 col-md-3">
										<button class="btn btn-primary btn-block" id="searchBtn">search</button>
									</div>
								</div>
							</div>
						</div>		
						<div class="col-12 table-responsive " style="margin-top:2rem">
							<table class="table table-bordered" width="100%" border="1">
								<thead>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="#: activate to sort column ascending" style="width: 0px;">
										#
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
										Company No/ Cost Centre
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Name: activate to sort column ascending" style="width: 0px;">
										Company Name
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Salary/ Wage Month: activate to sort column ascending" style="width: 0px;">
										Salary/ Wage Month
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
										Total Employee Uploded
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Total Net Pay: activate to sort column ascending" style="width: 0px;">
										Total Net Pay(RM)
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Date/ Time Upload: activate to sort column ascending" style="width: 0px;">
										Time/ Date Upload
									</th>
									<th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 0px;">
										Action
									</th>
								</thead>
								<tbody>
									<?php if ($table) {
										foreach ($table as $key => $content) {
									?>
									<tr>
										<td><?php echo $key+1;?></td>
										<td><?php echo $content->roc_no;?></td>
										<td><?php echo $content->name;?></td>
										<td><?php echo date('M',mktime(0,0,0,$content->month,10)).' '.$content->year;?></td>
										<td class="text-center"><?php echo $content->total_record;?></td>
										<td class="text-right"><?php echo number_format($content->total_netpay,2);?></td>
										<td><?php echo $content->uploadedTS;?></td>
										<td class="text-center">
											<a href="<?php echo base_url('hr/payslip/viewuploadpayslip/'.$content->id); ?>" data-toggle="tooltip" data-placement="top" title="View">
												<i class="fas fa-eye" style="color: #343a40;"></i>
											</a>
											<a href="javascript:deleteAccountant(<?php echo $content->id;?>);" data-toggle="tooltip" data-placement="top" title="Delete">
												<i class="fas fa-trash-alt" style="color: #dc3545;"></i>
											</a>
										</td>
									</tr>
									<?php }} ?>
								</tbody>		
							</table>	
						</div>	
					</div>
				</div>
			</div>
		</div>
	</div>




	<script>
		$(document).ready(function(){
			$('.table').append('<caption class="caption" style="caption-side: top">Current Month Uploaded Payslip</caption>');
		});

		$('#searchBtn').click(function(event){
			var company = $('#company').val(); 
			var companyText = $('#company option:selected').text();
			var salaryWage = $('#salaryWage').val();
			var salaryYear = $('#salaryYear').val();

			$('.caption').text('Payslip for : '+companyText+' '+salaryWage+' '+salaryYear);

			filter(company,salaryWage,salaryYear);
		});

		
		function deleteAccountant (value) {
			iziToast.question({
			title: '',
			timeout:20000,
			close: false,
			toastOnce: true,
			message: 'Are you sure you want to remove this record? ',
			position:"center",
			buttons: [
				        ['<button><b>YES</b></button>', function (instance, toast) {
				 			
				        	$.ajax({
								url:"<?php echo base_url('/hr/payslip/ajxRemovePayslip'); ?>",
								type:'POST',
								dataType:'json', 
								data:{
									payslipid	: value
								},
								success:function(data){
									if (data.status_code != 200) {
										iziToast.error({
											title:'error',
											message:data.error_message
										});
										window.location.replace("<?php echo base_url('/hr/payslip/payslip_upload_list');?>");

									}else{
										iziToast.success({
											title:'success',
											message:'Payslip records have been removed'
										});
										window.location.replace("<?php echo base_url('/hr/payslip/payslip_upload_list');?>");
									}									
								},error:function(){
									iziToast.error({
											title:'error',
											message:'500 internal server error',
									});
								}});

				          	instance.hide(toast, {
								transitionOut: 'fadeOutUp'
							});
				        }],
				        ["<button>No</button>", function (instance, toast) {
							instance.hide(toast, {
								transitionOut: 'fadeOutUp'
							});

							iziToast.warning({
								position: 'bottomRight',
								message: 'Operation cancelled.'
							});
						},true]
					]
			});
		}

		function yearPayslip() {
			filter(-1,-1,(new Date()).getFullYear());
		}

		function monthPayslip() {
			filter(-1,(new Date()).getMonth()+1,(new Date()).getFullYear());
		}

		function  monthNet() {
			console.log('get cureent month net pay');
		}

		function yearNet() {
			console.log('get current year net pay');
		}

		function filter(companyId, month, year){
			$.ajax({
				url:"<?php echo base_url('/hr/payslip/ajxFilterPayslips'); ?>",
				type:'POST',
				dataType:'json', 
				data:{
					companyId : companyId,
					month: month,
					year: year
				},
				success:function(data){
					var table = $('.table').DataTable();
					table.clear().draw();

					if(data.table != false){
						for (var i = data.table.length - 1; i >= 0; i--) {
							var url = "<?php echo base_url('hr/payslip/viewuploadpayslip/');?>"+data.table[i].id;
							var action = '<a href="'+url+'" data-toggle="tooltip" data-placement="top" title="View">'
										+'<span class="fas fa-eye" style="color: #343a40;"></span>'
										+'</a>'
									+'<a href="javascript:deleteAccountant('+data.table[i].id+');" data-toggle="tooltip" data-placement="top" title="Delete">'
										+'<span class="fas fa-trash" style="color: #dc3545;"></span>'
									+'</a>';
							var month = new Array();
							month[1] = 'Jan';
							month[2] = 'Feb';
							month[3] = 'Mar';
							month[4] = 'Apr';
							month[5] = 'May';
							month[6] = 'June';
							month[7] = 'Jul';
							month[8] = 'Aug';
							month[9] = 'Sept';
							month[10] = 'Oct';
							month[11] = 'Nov';
							month[12] = 'Dec';
							table.row.add({
								0 	: i+1,
								1 	: data.table[i].roc_no,
								2 	: data.table[i].name,  
								3 	: month[data.table[i].month]+' '+data.table[i].year,
								4 	: data.table[i].total_record,
								// 5 	: new Intl.NumberFormat('en-IN',{maximumSignificantDigits:3}).format(data.table[i].total_netpay),
								5 	: accounting.formatMoney(data.table[i].total_netpay,' '),
								6	: data.table[i].uploadedTS,
								7	: action,
							}).draw();
						};
					}
				},error:function(){
					iziToast.error({
						title:'',
						message:'Unable to filter payslip'
					});
				}
			});
		}
	</script>
	<style media="print" type="text/css">
		body{
			background-color: #fff !important;
		}
	</style>
</div>