Function in controller does not receive data from ajax on button [SOLVED]

Question

I found a problem where when I press the filter button, the data from the ajax on the button is not read in the getValue function. So the data from the ajax does not appear in the table but when I hardcode $year and $principal, the data will appear.

Here is the getValue() function:

public function getValue(){
    $years = $this->input->post('years'); 
    $principal = $this->input->post('principal');

    $query = "SELECT 
        t1.kota, 
        SUM(t1.size) AS total_size,
        ROUND((SUM(t2.sum_share) / SUM(t1.size) * 100), 2) AS avg_share, 
        SUM(t2.sum_share) AS sum_share
    FROM market_size AS t1
    JOIN (
        SELECT t1.kota, t1.principal, t1.percentage, 
            SUM(t1.cust) AS sum_share 
        FROM market_share AS t1
        WHERE t1.years = '$years'
        AND t1.principal = '$principal'
        GROUP BY t1.kota, t1.principal, t1.percentage
    ) AS t2 ON t2.kota = t1.kota AND t2.principal = t1.principal
    WHERE t1.years = '$years'
    AND t1.principal = '$principal'
    GROUP BY t1.kota;";
    
    $data = $this->db->query($query)->result();
    
    return $data;
}

and this code below is the ajax :

$("#button-refresh").on("click", function(){
    let years = $("#years").val();
    let principal = $("#principal").val();

    if (years == "") {
        alert('Please Input Starting Year');
    } else if (principal == "") {
        alert('Please Input Principal');
    } else {
        $.ajax({
            url: "<?= base_url('Market/filter') ?>",
            data: {
                years:years,
                principal:principal,
            },
            type: "POST",
            dataType: "json",
            async: false,
            success: function(data) {
                console.log(data);
                const fixedCities = ['Balikpapan', 'Bekasi', 'Makassar', 'Semarang', 'Sumatra', 'Surabaya']; 
                fixedCities.forEach(city => {
                    const cityData = data.find(item => item.kota === city);
                    if (cityData) { 
                        $(`#${city}`).html(`
                            <div class="tooltipDetail" style="width:210px;">
                                <div class="box">
                                    <h3 style="font-size:18px; font-weight:bold;"><strong>RSO ${city}</strong></h3>
                                    <div class="pie" style="--p:${cityData.avg_share}!important">${cityData.avg_share}%</div>
                                    <div>
                                        <div>
                                            <span><strong>Market Size: ${cityData.total_size} cust </strong></span>
                                        </div>
                                        <div>
                                            <span><strong>Market Share: ${Math.round(cityData.sum_share)} cust</strong></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `);
                    } else {
                        $(`#${city}`).html(`
                            <div class="tooltipDetail" style="width:210px;">
                                <div class="box">
                                    <h3 style="font-size:18px; font-weight:bold;"><strong>RSO ${city}</strong></h3>
                                    <div class="pie" style="--p:0!important">0%</div>
                                    <div>
                                        <div>
                                            <span><strong>Market Size: 0 cust </strong></span>
                                        </div>
                                        <div>
                                            <span><strong>Market Share: 0 cust</strong></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `);
                    }
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log("error")
            }
        })
    }
})

can anyone help me to solve the problem ?