@extends('layouts.sidebar')

@section('title', 'Employee')
@section('content')
    @include('Admin.Employee.modal')

    <div class=" mx-auto">
        <div class="overflow-x-auto">
            <h2 class="mb-16 text-2xl font-bold">Pre-Employment Employees</h2>


            <table id="pre-employment-table" class=" min-w-full bg-white border border-gray-200 rounded shadow-md">
                <thead>
                    <tr class="text-sm leading-normal h-12 text-white uppercase bg-[#1d1d1d]">
                        <th class="px-6 py-1">ID</th>
                        <th class="px-6 py-1">Name</th>
                        <th class="px-6 py-1">Date of Birth</th>
                        <th class="px-6 py-1">Status</th>
                        <th class="px-6 py-1">Email</th>
                        <th class="px-6 py-1">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm font-light text-center text-gray-600">
                    <!-- Data will be populated here by DataTables -->
                </tbody>
            </table>
        </div>
    </div>






    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get the buttons
            const showEmployeeDetailsButton = document.getElementById('show-employee-details');
            const showTerminatedEmployeesButton = document.getElementById('show-terminated-employees');
            const showPreEmploymentButton = document.getElementById('show-pre-employment');

            // Get the content sections
            const employeeDetailsSection = document.getElementById('employee-details-section');
            const terminatedEmployeesSection = document.getElementById('terminated-employees-section');
            const preEmploymentSection = document.getElementById('pre-employment-section');

            // Show terminated employees section and hide others
            showTerminatedEmployeesButton.addEventListener('click', function() {
                terminatedEmployeesSection.classList.remove('hidden');
                employeeDetailsSection.classList.add('hidden');
                preEmploymentSection.classList.add('hidden');
            });

            // Show pre-employment section and hide others
            showPreEmploymentButton.addEventListener('click', function() {
                preEmploymentSection.classList.remove('hidden');
                employeeDetailsSection.classList.add('hidden');
                terminatedEmployeesSection.classList.add('hidden');
            });

            // Show employee details section and hide others
            showEmployeeDetailsButton.addEventListener('click', function() {
                employeeDetailsSection.classList.remove('hidden');
                terminatedEmployeesSection.classList.add('hidden');
                preEmploymentSection.classList.add('hidden');
            });

            // Dropdown toggle functionality
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize DataTable for Pre-Employment Employees
            var preEmploymentTable = $('#pre-employment-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('forapproval.index') }}",
                    data: function(d) {

                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'date_of_birth',
                        name: 'date_of_birth'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'user.email',
                        name: 'user.email'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ]
            });



        });
    </script>


@endsection