@include('layouts.header')

<div class="container-fluid">    
    <div class="card">
        <a href="{{ url('export-list') }}" class="btn btn-primary">Download Excel</a>
             <b>Location</b>
                <select class="custom-select" id="empCodeFilter">
                    <option value="">ALL</option>
                    <option value="AMSC">CHENNAI</option>
                    <option value="AMSV">VELLORE</option>
                </select>
         <a href="{{ url('search') }}" class="cancel">Back</a>      
            <div class="section-title">Employee Confirmed List Total: {{ $cnt }}</div>
            
         <table class="table table-bordered" id="confirm">
            <thead>
                <tr>
                 <th>ID</th>
                 <th>EmployeeCode</th>
                 <th>Name of Employee</th>
                 <th>Joining Date</th>
                 <th>Confirmed Date</th>
            </tr>
            </thead>
            <tbody>
                @foreach($confirm as $cnf)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $cnf->Empcode }}</td>
                    <td>{{ $cnf->EmployeeName }}</td>
                    <td> {{ \Carbon\Carbon::parse($cnf->DateOfJoining)->format('d-M-Y') }}</td>
                    <td> {{ \Carbon\Carbon::parse($cnf->confirm_date)->format('d-M-Y') }}</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 = $("#confirm").DataTable({
    /*  "columnDefs": [
            {
                "targets": 0,
                "visible": false
            }
        ]*/
       });

       dataTable = $('#confirm').DataTable();
          $('#empCodeFilter').on('change', function() {
          var empCode = $(this).val();
          // If an employee code is selected, filter the DataTable
              if (empCode) {
                  dataTable.column(1).search(empCode).draw(); // Assuming EmployeeCode is in the second column (index 1)
              } else {
                  dataTable.column(1).search('').draw(); // Clear filter if 'ALL' is selected
              }
      });
 });
    </script>
  @include('layouts.footer')