nhance/app/Views/employee_list.php

<style>
.table th,
.table td {
    padding: 8px;
}

table.dataTable tbody td {
    padding: 4px 4px !important;
}
</style>

<div class="row">
    <div class="col-xl-12">
        <div id="accordion" class="mb-3">
            <div class="card mb-1">
                <h5 class="m-1">
                    <a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
                        aria-expanded="true">
                        <i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
                    </a>
                </h5>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <!-- <div class="text-center"> -->
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label>Client</label> <br />
                                <select class="form-control" id="clients">
                                    <option value="0">Select</option>
                                </select>
                            </div>
                            
                            <div class="form-group col-md-4">
                                <label>Policy</label> <br />
                                <select class="form-control" id="policies">
                                    <option value="0">Select</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4">
                                <label>Status</label> <br />
                                <select class="form-control" id="status2">
                                    <option value="0">Select</option>
                                    <?php foreach($status as $key => $value) { ?>
                                    <option value="<?= $key ?>"
                                        <?= (isset($getData) && $getData['status'] == $key) ? 'selected' : '' ?>>
                                        <?= $value ?>
                                    </option>
                                    <?php } ?>
                                </select>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-12" style="text-align: right;">
                                <a href="<?= base_url("employee/list"); ?>"
                                    class="btn btn-primary waves-effect waves-light" id="get-emp-list"
                                    onclick="fetchEmpolyeeList(event);">Submit</a>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<?php include('employee_data_list.php');?>


<!-- end row -->
<div id="loader" class="loader" style="display:none;">SPINNER</div>

<script>

$(document).ready(function() {
    // Initialize select2
    $("#clients").select2();
    $("#policies").select2();

    // if ($('.select2-selection__arrow').length > 0) {
    //     $('.select2-selection__arrow').removeClass('select2-selection__arrow').addClass('fa fa-chevron-down');
    // }
});

// Declare a global variable to store API response data
var clientPolicies = [];
var client_id = '<?= isset($getData) ? $getData['client_id'] : '0' ?>';


$(document).ready(function() {
    console.log("document loaded");
    //fetchClientPolicies();

});

$(window).on("load", function() {
    console.log("window loaded");
    fetchClientPolicies();
});


function fetchClientPolicies() {
    $('#loader').show();
    var apiURL = '<?php echo base_url();?>' + 'util/clients-with-policies';
    console.log('fetchClientPolicies');
    console.log(apiURL);
    $.ajax({
        url: apiURL,
        method: 'GET',
        headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest"
        },
        success: function(response) {
            // console.log(response.code);
            // console.log(response.dataStatus);
            // console.log(response.data);
            if (response.code === 200 && response.dataStatus === true && response.data !== "") {
                try {
                    clientPolicies = (response.data);
                    console.log('1',clientPolicies);
                    appendClients(clientPolicies);
                    
                    //this function for reselect the policy
                    setTimeout(function() {
                        if (client_id != 0 ) {
                            var foundPolicies = clientPolicies.find(function(item) {
                                console.log(typeof item.id)
                                return item.id == client_id;
                            });
                            appendPolicies(foundPolicies.policies);
                        }
                    }, 500);
                    //end

                } catch (error) {
                    console.error('Error parsing API response data:', error);
                }
            } else if (response.code === 404 && response.dataStatus === false) {
                console.error('no data found', response);
            } else {
                console.error('Something went wrong!');
            }
        },
        error: function(xhr, status, error) {
            console.error('Error fetching data from API:', error);
        }
    });

    $('#loader').hide();
}


function appendClients(data) {
    var clientID = <?= isset($getData) ? $getData['client_id'] : '0' ?>;
    $.each(data, function(index, item) {
        var option = $('<option>', {
            value: item.id,
            text: item.client_name
        });
        if (clientID == item.id) {
            option.attr('selected', true);
        }
        $('#clients').append(option);
    });
}


function appendPolicies(data) {

    $('#policies').empty();
    $('#policies').append($('<option>', {
        value: '0',
        text: 'Select'
    }));

    var PolicyID = <?= isset($getData) ? $getData['policy_id'] : '0'?>;
    console.log(PolicyID)
    $.each(data, function(index, item) {
        var option = $('<option>', {
            value: item.id,
            text: item.name
        });
        if (PolicyID == item.id) {
            option.attr('selected', true);
        }
        $('#policies').append(option);
    });
}

$(document).ready(function() {
    $('#clients').on('change', function() {
        var selectedClient = $(this).val();
        console.log('selectedClient', selectedClient);
        // $('#selectedOptionInfo').text('Selected option: ' + selectedOption);

        // Check if the selected option exists in apiData
        var foundPolicies = clientPolicies.find(function(item) {
            return item.id === selectedClient;
        });
        console.log(foundPolicies.policies);
        appendPolicies(foundPolicies.policies);
    });
});


// Function to convert object to query parameters
function objectToQueryString(obj) {
    return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
}


function fetchEmpolyeeList(event) {
    event.preventDefault(); // Prevent default action

    var client_id = $('#clients').val();
    var policy_id = $('#policies').val();
    var status = $('#status2').val();

    console.log(client_id + '-' + policy_id);
    if (client_id == '0' || policy_id == '0') {
        alert('Please select values in both dropdowns.');
        return;
    }

    var queryParams = {

        client_id: client_id,
        policy_id: policy_id,
        status   : status,
    };

    const queryString = objectToQueryString(queryParams);
    const apiURL = $('#get-emp-list').attr('href') + "?" + queryString;
    console.log(apiURL);
    window.location.href = apiURL;


    // var apiURL2 = $('#get-emp-list').attr('href'); // Get href attribute value
    // console.log(apiURL);
    // $.ajax({
    //     url: apiURL,
    //     method: 'GET',
    //     data: queryParams,
    //     success: function(response) {
    //         // Assuming response is a JSON array
    //        // displayDataTables(response);
    //         console.log(response);
    //     },
    //     error: function(xhr, status, error) {
    //         console.error('Error:', error);
    //     }
    // });
}


document.getElementById('toggleIcon').addEventListener('click', function() {
    var icon = document.getElementById('icon');
    icon.classList.toggle('mdi-chevron-down');
    icon.classList.toggle('mdi-chevron-up');
});



</script>