@include ('layouts.header')

<div class="container-fluid">
    <div class="section-title">Leave Record Respect to Manager </div>
  
    <div class="col-12">
    <a href="{{ url('leaveoverall') }}" target="_self" class="cancel">Back</a>
           <span for="month">Filter By Month</span>
            <select class="custom-control month-dropdown" name="month" id="month">
                <option value="">All</option>
                <option value="January">January</option>
                <option value="February">February</option>
                <option value="March">March</option>
                <option value="April">April</option>
                <option value="May">May</option>
                <option value="June">June</option>
                <option value="July">July</option>
                <option value="August">August</option>
                <option value="September">September</option>
                <option value="October">October</option>
                <option value="November">November</option>
                <option value="December">December</option>
            </select>
    </div>
    <div class="clearfix"></div>
    <div class="card">
    <table class="table table-striped" id="lcode">
            <thead>
                <tr>
                    <th>Employee code</th>
                    <th>Employee Name</th>
                    <th>MONTH</th>
                    <th>StartDate</th>
                    <th>EndDate</th>
                    <th>LeaveCount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($leaves as $leave)
                <tr>
                     <td>{{ $leave->EmployeeCode }}</td>
                    <td>{{ $leave->ename }}</td>
                    <td>{{ date('F', strtotime($leave->StartDate)) }}</td>
                    <td>{{ date('d-M-Y', strtotime($leave->StartDate)) }}</td>
                    <td>{{ date('d-M-Y', strtotime($leave->EndDate)) }}</td>
                    <td>{{ $leave->LeaveCount }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</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 = $('#lcode').DataTable({

});
 });

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