Datatable on change ajax on checkbox not working, I have a data table and i am trying to update the value of active in the table into 1 if the checkbox is clicked, and 0 if clicked again. It is not even displaying the console log that i have inserted, I do not where to start. Thank you in advance for any help

ShopsController:

public function activeswitch(){
   DB::table('shops')
   ->update(['active'=>1]);
   
 }

blade.php:

 <script>
        $(document).ready(function () {

            table = $('#shops_table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{url('api/admin/shops/get-shops')}}",
                rowId: "id",
                stateSave: true,
                dom: 'Bfrtip',
                "buttons": [
                    'excelHtml5',
                    'pdf',
                    'print'
                ],
                "order": [[ 0, "desc" ]],
                columns: [
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'image', render: function(data){
                        return "<img src='/storage/uploads/logo/" + data + "' width=auto height='50' />"
                        }},
                    {data: 'color'},
                    {data: 'switch', render: function(data){

                            return '<label class="switch">' +                                   
                                ' <input type="checkbox" class="checkbox">' +
                                '<span class="slider round" data-active-value=0>' +
                                '  </span>' +
                                ' </label>';
                           
                        }},
                    {data: 'id', 'width' : '10%', render: function(data){
                            return '<div class="action-buttons">' +
                                '<a href="shops/'+data+'/" class="btn btn-xs btn-rounded btn-default m-r-xs"><i class="fa fa-eye"></i></a>' +
                                '<a href="shops/'+data+'/edit" class="btn btn-xs btn-rounded btn-default m-r-xs"><i class="fa fa-pencil"></i></a>' +
                                '                                        <form action="shops/'+data+'" method="POST" style="display: inline-block;">' +
                                '<input type="hidden" name="_method" value="DELETE" />' +
                                '                                            @csrf' +
                                '<button class="btn btn-xs btn-rounded btn-danger" type="submit"><i class="fa fa-trash"></i></button>' +
                                '                                        </form>' +
                                '</div>';
                        }}
                ],
            });
        });





    $( document ).ready(function() {
    $(".checkbox").change(function(e){
        console.log('hi')
e.preventDefault();

var selct_ = $(this) //declare this
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

    $.ajax({
    url: "{{ route('active.switch') }}", 
    
    data:{
    'active':$(this).data('active-value')
  
    }, 
    type: "get",
    success: function(result){
        console.log('hi')

    }
  });
});
});
</script>

Source: Laravel