@include ('layouts.header')

<div class="container-fluid">
    <div class="section-title">Leave By Month</div>
        <div class="col-12">
            <a href="{{ url('leave') }}" class="cancel">Back</a>
         <label for="year">Filter By Year</label>
            <select name="year" id="year" class="form-select year-dropdown">
                <option value="">All</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
            </select>

            <label for="month">By Month</label>
            <select name="month" id="month" class="form-select month-dropdown">
                <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="card">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Employee Code</th>
                    <th>Month</th>
                    <th>Year</th>
                    <th>Leave Count</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($lmonth as $index => $leave)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $leave->EmployeeCode }}</td>
                        <td>{{ $leave->Month }}</td>
                        <td>{{ $leave->Year }}</td>
                        <td>{{ $leave->TotalLeaveCount }}</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 type="text/javascript">
    $(document).ready(function() {
        var dataTable = $(".table").DataTable({
           /* "columnDefs": [
                {
                    "targets": 0,
                    "visible": false
                }
            ]*/
        });

        // Month filter
        $('.month-dropdown').on('change', function() {
            var month = $(this).val();
            dataTable.column(2).search(month).draw();
        });

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