@include ('layouts.header')

<div class="container-fluid">
    
<div class="card">
    <p>Location</p>
            <select id="empCodeFilter" class="custom-select">
                <option value=''>ALL</option>
                <option value="AMSC">CHENNAI</option>
                <option value="AMSV">VELLORE</option>
            </select>
            <a href="{{ url('exit')}}" target="_self" class="cancel">Back</a>
  </div>
    
    <table class="table table-bordered" id="exit_employee">
         <thead>
            <tr>
                <th>#</th>
                <th>Emp code</th>
                <th>Emp Name</th>
                 <th>Department</th>
                 <th>Designation</th>
                 <th>Date Of Joining</th>
                 <th>Action</th>
            </tr>
        </thead>
        <tbody>
             @foreach($employees as $key => $employee)
             @php
              $dj = $employee->DateOfJoining;
              $currentDate = \Carbon\Carbon::now();
              $diff = $currentDate->diff(\Carbon\Carbon::parse($dj));
              $years = $diff->y;
              $months = $diff->m;
              $days = $diff->d;
              $DOJ = \Carbon\Carbon::parse($dj)->format('d-M-Y');
            @endphp
            <tr>
                <td>{{ $key + 1 }}</td>
                <td>{{ $employee->EmployeeCode }}</td>
                <td>{{ $employee->EmployeeName }}</td>
                <td>{{ $employee->dept_name }}</td>
                <td>{{ $employee->designation }}</td>
                <td>{{ $DOJ }}</td>
                <td><a href="{{ url('exit_form', ['exid' => $employee->EmployeeCode]) }}" class="btn btn-warning">Exit</a></td>
            </tr>
            @endforeach
        </tbody>
    </table>
 </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 = $('#exit_employee').DataTable({
         /* "columnDefs": [{
                "targets": 0,
                "visible": false
            }],*/
            "order": [[6, 'desc']] // Ensure date column is sorted correctly
        });
        
        $('#empCodeFilter').on('change', function() {
            var empCode = $(this).val();
            if (empCode) {
                dataTable.column(1).search(empCode).draw();
            } else {
                dataTable.column(1).search('').draw();
            }
        });

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