{{ View::make('layout.header') }}

@php
    $user_join_year = date('Y', strtotime($userPay->date_commence));
    $yr = date('Y');
@endphp

<style>
.table thead th,
.table tbody td {
    padding-left:3px !important;
    padding-right:3px !important;
}

a.disabled{
    pointer-events:none;
    opacity:0.5;
    cursor:not-allowed;
}
</style>

<div class="app-content content ">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>

<div class="content-wrapper">

<div class="content-header row">
<div class="content-header-left col-md-9 col-12 mb-2">

<div class="row breadcrumbs-top">
<div class="col-12">

<div class="breadcrumb-wrapper">
<ol class="breadcrumb">
<li class="breadcrumb-item">HR</li>
<li class="breadcrumb-item">Reports</li>
<li class="breadcrumb-item active">Compensated Leave Report</li>
</ol>
</div>

</div>
</div>

</div>
</div>

<div class="content-body">

<section id="dashboard-ecommerce">

<div class="row match-height">

<div class="col-md-12">

<div class="card">

<div class="card-header">

<div class="btn-group">

<input type="text"
id="staff_name"
class="form-control"
placeholder="Staff name"
style="padding-left:10px;border-width:0 1px 0 0;border-radius:0px;">


<select class="form-control"
id="start_year"
style="border-width:0 1px 0 0;border-radius:0px;">

@php
$start_year = getSettingsValue("software_start_year");

for($i=$start_year;$i<=$yr;$i++)
{
@endphp

<option value="{{$i}}" {{$i==$yr?'selected':''}}>
{{$i}}
</option>

@php
}
@endphp

</select>


<select id="branch"
class="form-control"
style="border-width:0 1px 0 0;border-radius:0px;">

<option value="">Branch</option>

@foreach($branches as $branch)

<option value="{{$branch->id}}">
{{$branch->name}}
</option>

@endforeach

</select>


<select id="category"
class="form-control"
style="border-width:0 1px 0 0;border-radius:0px;">

<option value="">Category</option>

@foreach($categories as $category)

<option value="{{$category->id}}">
{{$category->name}}
</option>

@endforeach

</select>


<select id="department"
class="form-control" style="border-width: 0px;">

<option value="">Department</option>

@foreach($departments as $department)

<option value="{{$department->id}}">
{{$department->name}}
</option>

@endforeach

</select>

</div>


<div class="d-sm-flex justify-content-between align-items-center">

<div class="d-flex align-items-right">

<!-- <div class="btn-group btn-align-right MiniRightnav">


<a onclick="exportpdf()" class="text-danger">
<i class="fa fa-file-pdf-o report-download-btn" style="font-size:25px;"></i>
<span>Download PDF</span>
</a>


&nbsp;&nbsp;

<a onclick="exportexcel()" class="text-success">
<i class="fa fa-file-excel-o report-download-btn" style="font-size:25px;"></i>
<span>Download Excel</span>
</a>

</div> -->

</div>

</div>

</div>



<div class="card-body" style="padding-top:0px !important;">

<div class="table-responsive" style="overflow-x:unset !important;">

<table class="table table-striped"
id="compensatedreporttable"
style="font-size:12px;">

<thead>

<tr>

<th width="10%">Emp No.</th>

<th width="20%">Name</th>

<th width="15%">Date Commence</th>

<th width="10%" style="text-align:center">Granted</th>

<th width="10%" style="text-align:center">Taken</th>

<th width="10%" style="text-align:center">Balance</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</div>

</div>


{{ View::make('layout.footer') }}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">

$(document).ready(function(){


    var table = $('#compensatedreporttable').DataTable({

processing:true,
serverSide:true,

ajax:{
url:"{{ route('compensated.leave.report') }}",

data:function(d){

d.name = $('#staff_name').val();
d.branch = $('#branch').val();
d.category = $('#category').val();
d.department = $('#department').val();
d.year = $('#start_year').val();

}
},

columns:[

{data:'emp_no',name:'user_personal.employee_no'},

{data:'name',name:'user_personal.name'},

{data:'date_commence',name:'b.date_commence'},

{data:'granted',name:'granted',className:'text-center',searchable: false},

{data:'taken',name:'taken',className:'text-center',searchable: false},

{data:'balance',name:'balance',className:'text-center' ,searchable: false}

],
order:[[0,'desc']]

});

$('#staff_name,#branch,#category,#department,#start_year').on('change keyup',function(){

table.draw();

});

});


function exportpdf()
{
window.location.href = "{{url('reports/compensated/pdf')}}";
}



function exportexcel()
{
window.location.href = "{{url('reports/compensated/excel')}}";
}

</script>