@include('layouts.header')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

    <div class="container-fluid">
        <div class="section-title">Employee Access Details</div>
        <div class="row">
            <div class="col-12">
                <p>Location</p>
                <select id="empCodeFilter" class="custom-select">
                    <option value=''>ALL</option>
                    <option value="AMSC">CHENNAI</option>
                    <option value="AMSV">VELLORE</option>
                </select>
          
              
                <p class="mb-2">Department</p>
                <select id="dept" class="custom-select">
                    <option value="">ALL</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->dept_name }}">{{ $dept->dept_name }}</option>
                    @endforeach
                </select>

                <p class="mb-2">Designation</p>
                <select id="designation" class="custom-select">
                    <option value="">ALL</option>
                    @foreach($designations as $desg)
                        <option value="{{ $desg->name }}">{{ $desg->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
       
        
        <table class="table table-bordered" id="tblFruits">
        <thead>
              <tr>
                <th>#</th>
                <th>Emp. Code</th>
                <th>Name</th>
                <th>Department</th>
                <th>Designation</th>
                <th>DOJ</th>
                <th>Reporting Manager</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
       @foreach ($employees as $emp)
        <tr>
            <td>
            <!-- Checkbox only for selection -->
             <input type="checkbox" name="student_id[]" class="chkbk" value="{{ $emp->EmployeeCode }}" />
            </td>
            <td>{{ $emp->EmployeeCode }}</td>
            <td>{{ $emp->EmployeeName }}</td>
            <td>{{ $emp->department->dept_name }}</td>
            <td>{{ $emp->Designation }}</td>
            <td>{{ \Carbon\Carbon::parse($emp->DateOfJoining)->format('d-M-Y') }}</td>
            <td>{{ $emp->ManagerName }}</td>
            <td>
             <!-- Submit button for viewing details -->
              <button type="submit" name="view" class="btn btn-link" id="viewDetailsBtn">
                    <i class="fas fa-eye center"></i>
             </button>
            </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() {

    // Initialize DataTable
        var dataTable = $('#tblFruits').DataTable();


        $('#empCodeFilter').on('change', function() {
            var empCode = $(this).val();
            if (empCode) {
                dataTable.column(1).search(empCode).draw();
            } else {
                dataTable.column(1).search('').draw();
            }
        });

        $('#designation').on('change', function() {
            var designation = $(this).val();
            dataTable.column(4).search(designation).draw();
        });

        $('#dept').on('change', function() {
            var dept = $(this).val();
            dataTable.column(3).search(dept).draw();
        });
  
           // Allow only one checkbox to be selected at a time
           $('input[type="checkbox"]').on('change', function() {
            $('input[type="checkbox"]').not(this).prop('checked', false); // Uncheck other checkboxes
        });

    // Handle the button click
        $(document).on('click', '#viewDetailsBtn', function() {
         // Initialize an array to store selected employee codes
            var selectedEmpCodes = [];
            console.log(selectedEmpCodes); 
            // Loop through all checked checkboxes and add their values (employee codes) to the array
            $('input[type="checkbox"]:checked').each(function() {
                selectedEmpCodes.push($(this).val());
            });

            // Check if at least one checkbox is selected
            if (selectedEmpCodes.length === 0) {
                alert('Please select at least one employee.');
                return;
            }

            // Perform AJAX request to send the selected employee codes
            $.ajax({
                url: "{{ url('details') }}",  // Your server URL (e.g., /details)
                method: "GET",
                data: {
                    empcode: selectedEmpCodes  // Send the array of selected employee codes
                },
                success: function(response) {
                    // On success, you can either:
                    // - Redirect to another page with the selected employee codes
                    // - Or display the data directly on the page
                    if (response.error) {
                        alert(response.error);  // Show error if no employee found
                    } else {
                        // Redirect to a new page with the selected employee codes
                        window.location.href = "{{ url('details') }}?empcode=" + selectedEmpCodes.join(',');
                    }
                },
                error: function(xhr, status, error) {
                    // Handle errors
                    console.error('Error: ' + error);
                    alert('There was an error while fetching the employee details.');
                }
            });

        });
     });
</script>
  @include('layouts.footer')