Select2 Independ Search Without Ajax

    $('employee_id').select2();

    // PHP-generated employee data
    const employees = {!! $employeeDataJson !!};

    // Function to filter and populate employee dropdown
    function filterEmployees() {
        const type = $('#emp_type').val();
        const department = $('#department').val();

        let filteredEmployees = employees;

        if(type){
            filteredEmployees = filteredEmployees.filter(employee => employee.employee_type === type);
        }

        if(department){
            filteredEmployees = filteredEmployees.filter(employee => employee.department_type === department);
        }

        // Clear current options
        $('#employee_id').empty().append('<option value="">Select Employee</option>');

        // Add filtered options
        filteredEmployees.forEach(employee => {
            // $('#employee_id').append(new Option(employee.name, employee.id));
            var newOption = $('<option>');
            newOption.attr('value', employee.id); // Set the value attribute
            newOption.text(employee.name); // Set the text content
            newOption.attr('data-department_type', employee.department_type);
            newOption.attr('data-employee_type', employee.employee_type);
            newOption.attr('data-shift_start', employee.shift_start);
            newOption.attr('data-shift_end', employee.shift_end);
            $('#employee_id').append(newOption);
        });

        // Refresh Select2
        $('#employee_id').trigger('change');
    }

    // Event listeners
    $('#emp_type, #department').on('change', filterEmployees);

    // Initial population
    filterEmployees();