@include ('layouts.header')

<div class="container-fluid">
    <div class="col-12">
            <a href="{{ url('leave') }}" class="cancel">Back</a>
            <b>Total Employee: {{ $totalEmployee }}</b>
            <h1>Vellore Employee Leave by Type</h1>

            <!-- Filters -->
            <b for="year">Filter By Year</b>
            <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>

            <b for="mm">By Month</b>
            <select name="mm" id="mm" class="form-select month-dropdown">
                <option value="">All</option>
                <option value="Jan">January</option>
                <option value="Feb">February</option>
                <option value="Mar">March</option>
                <option value="Apr">April</option>
                <option value="May">May</option>
                <option value="Jun">June</option>
                <option value="Jul">July</option>
                <option value="Aug">August</option>
                <option value="Sep">September</option>
                <option value="Oct">October</option>
                <option value="Nov">November</option>
                <option value="Dec">December</option>
            </select>
        </div>
 
    <div class="card">
        <table class="table table-striped" id="tleave">
            <thead>
                <tr>
                    <th>SI.NO</th>
                    <th>Employee Name</th>
                    <th>Month-Year</th>
                    <th>Casual</th>
                    <th>Paid</th>
                    <th>C/OFF</th>
                    <th>Maternity</th>
                    <th>Marriage</th>
                    <th>Paternity</th>
                    <th>Bereavement</th>
                    <th>LOP</th>
                    <th>Total Leaves</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($vl_leave as $index => $leave)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $leave->ename }} ({{ $leave->EmployeeCode }})</td>
                        <td>{{ $leave->mmyy }}</td>
                        <td>{{ $leave->CSL }}</td>
                        <td>{{ $leave->PL }}</td>
                        <td>{{ $leave->c_off }}</td>
                        <td>{{ $leave->ML }}</td>
                        <td>{{ $leave->MGL }}</td>
                        <td>{{ $leave->PT }}</td>
                        <td>{{ $leave->BL }}</td>
                        <td>{{ $leave->LOP }}</td>
                        <td>{{ $leave->Total }}</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() {
        var dataTable = $('#tleave').DataTable();

        // Custom filtering by Year
        $('#year').on('change', function() {
            var year = $(this).val();
            dataTable.columns(2).search(year).draw();
        });

        // Custom filtering by Month
        $('#mm').on('change', function() {
            var month = $(this).val();
            dataTable.columns(2).search(month).draw();
        });
    });
</script>
@include('layouts.footer')