<section class="container" style="padding-bottom: 2rem;">
	<div class="card bg-light-transparent">
		<div class="card-header bg-white">
			<h5 class="card-title">OT Summary By Department</h5>
			 <a href="<?php echo base_url('hr/Overtime_report/otSummary_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print OT Summary By Department">
                <i class="fa fa-print"></i>Print
            </a>
            <button id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false">
                <i class="fas fa-filter"></i>Show Filters
            </button>
		</div>
		<div class="collapse" id="collapseFilter">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label for="filter_year" class="col-lg-3">
                                            Year
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select class="form-control" name="filter_year" id="filter_year">
											<?php if($yearList) foreach($yearList as $row){
												echo '<option value="'.$row->year.'">'.$row->year.'</option>'; 
											}?>
											<option value="-1">ALL</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="filter_month" class="col-lg-3">
                                            Month
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select name="filter_month" id="filter_month" class="form-control">
                                                <option value="-1">Select Month</option>
                                                    <?php if(!empty($month)) foreach ($month as $row): ?>
                                                        <option value="<?php echo $row->id;?>"><?php echo $row->month;?></option>
                                                    <?php endforeach ?> 
                                                        <option value="-1">ALL</option>   
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="filter_company" class="col-lg-3">
                                            Department
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select name="filter_company" id="filter_company" class="form-control">
				                                <option value="-1">Select Department</option>
				                                    <?php if(!empty($department)) foreach ($department as $row): ?>
				                                        <option value="<?php echo $row['id'];?>"><?php echo $row['name']; ?> [<?php echo $row['branch_name']; ?>]</option>
				                                    <?php endforeach ?> 
				                                        <option value="-1">ALL</option>   
				                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col d-print-none">
                                            <button class="btn btn-info" id="searchBtn">search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		<div class="card-body">
			<div class="card no-shadow" >
				<div class="card-body">
					<div class="table-responsive">
						<table id="table_companies" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th class="text-center">Year</th>
									<th class="text-center">Month</th>
									<th class="text-center">Department</th>
									<th class="text-center">Total Hour Applied</th>	
									<th class="text-center">Total Hour Approved</th>
									<th class="text-center">OT Status</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
	 $(document).ready(function(){

	    getData();

	    $('#searchBtn').click(function(){
	        getData();
	    });
	 });
	
	function getData() {
	    var table = $('.table').DataTable();
	        table.clear().draw();
	        var frmData = new FormData();

	        frmData.append('filter_year',$('#filter_year').val());
	        frmData.append('filter_month',$('#filter_month').val());
	        frmData.append('filter_company',$('#filter_company').val());

	        
	        $.ajax({
	            url:"<?php echo base_url('/hr/api/overtime/getOtSummaryByDepartment'); ?>",
	            type:'post',
	            dataType:'json',
	            data:frmData,
	            processData: false,
	            contentType: false,
	            success:function(data){

	                iziToast.success({
	                    position: 'bottomRight',
	                    message: 'filtering data',
	                });

	                if(data.table){
						var p = ''; 
						var a = '';
						var r = '';
	                    for (var i = 0; i < data.table.length; i++) {

							if(data.table[i].pending > 0)
								p = '<a href="<?php echo base_url('hr/overtime/adminOt/'); ?>'+data.table[i].deptidMain+'/'+data.table[i].yearMain+'/'+data.table[i].monthMain+'/0" class="badge badge-warning text-white p-1" title="Pending by HOD">'+data.table[i].pending+'</a>';
							else p = '<a href="#" class="badge badge-warning text-white p-1" title="Pending by HOD">' + data.table[i].pending + '</a>'; 

							if(data.table[i].approved > 0)
								a = '<a href="<?php echo base_url('hr/overtime/adminOt/'); ?>'+data.table[i].deptidMain+'/'+data.table[i].yearMain+'/'+data.table[i].monthMain+'/1" class="badge badge-success text-white p-1" title="Approved By HOD">'+data.table[i].approved+'</a>';
							else a = '<a href="#" class="badge badge-success text-white p-1" title="Approved by HOD">' + data.table[i].approved + '</a>';

							if(data.table[i].rejected > 0)
								r = '<a href="<?php echo base_url('hr/overtime/adminOt/'); ?>'+data.table[i].deptidMain+'/'+data.table[i].yearMain+'/'+data.table[i].monthMain+'/2" class="badge badge-danger text-white p-1" title="Rejected By HOD">'+data.table[i].rejected+'</a>';
							else r = '<a href="#" class="badge badge-danger text-white p-1" title="Rejected By HOD">' + data.table[i].rejected + '</a>'; 

	                        table.row.add({
	                            0   : i+1,
	                            1   : '<div class="text-center">'+data.table[i].yearMain+'</div>',
	                            2   : '<div class="text-center">'+moment().month(data.table[i].monthMain - 1).format("MMMM")+'</div>',
								3   : '<div class="text-center">'+data.table[i].department+' <small>('+data.table[i].branch+')</small></div>',
	                            4   : '<div class="text-center">'+data.table[i].totalHoursApplied+'</div>',
	                            5   : '<div class="text-center">'+data.table[i].totalHoursApproved+'</div>',
	                            6   : '<div class="text-center">'+ p +' '+ a +' '+ r +'</div>',
	                        }).draw();
	                    }
	                    
	                }
	                
	            },
	            error:function(){
	                 iziToast.warning({
	                    position: 'bottomRight',
	                    message: '500 Internal Server Error.'
	                });
	            }
	        });
	}
</script>