@include ('layouts.header')

<div class="container-fluid">
    <div class="row">
          <span for="year">Filter By Year</span>
            <select class="custom-control year-dropdown" name="year" id="year">
                <option value="">All</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
            </select>
    </div>
    <div class="card">
        <div class="section-title">Overall Leave </div>
        <table class="table table-striped" id="lyear">
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Employee Code</th>
                    <th>Employee Name</th>
                     <th>Total LeaveCount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($results as $res)
                <tr>
                <td><a href="{{ url('leavebycode/' . $res->leave_year . '/' . $res->EmployeeCode) }}" target="_self" style="color:blue">{{ $res->leave_year }}</a></td>
                    <td>{{ $res->EmployeeCode }}</td>
                     <td>{{ $res->ename }}</td>
                     <td>{{ $res->total_leave_count }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.css" rel="stylesheet"> 
 <script src="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.js"></script>

<script>
     $(document).ready(function() {
dataTable = $('#lyear').DataTable({

});

    
 $('.year-dropdown').on('change', function(e){
      var year = $(this).val();
         $('.year-dropdown').val(year)
       dataTable.column(0).search(year).draw();
    });
});
    </script>
    @include('layouts.footer')