Laravel 6 AJAX live search on CRUD management table

Hello there. After a day of trying I hit a wall..basically I have the following problem:

I have a CRUD table that's holding records of vehicles that get retrieved from the MySQL database. I've been following a few tutorials and managed to set up AJAX live results search.

Now the problem comes from the fact that the logic is stored in a Controller. I can succesfully retrieve the details from the database using '-- foreach($data as $row) --' but I don't know how to retrieve the CRUD actions ( In this case Edit and Delete. The create method is separated from the table itself. I also can't succesfully retrieve the images)

I've tried putting the actions inside the td'. .'td. tags but I get Routing errors.

I also have a pagination which I don't know if it can work out with this AJAX live search? Any help is appreciated.

I have the code for the CRUD actions, images etc..inside "index.blade.php". They should be somehow implemented in the controller though.

VehiclesModel.php

class VehiclesModel extends Model
{
    
    protected $table = 'vehicles' ;
    protected $fillable = [
        
      'vehmod', 'vehmark', 'vehyear', 'vehengine', 'vehtrans', 'vehimage', 'vehgalimages' 
        
    ] ;

    
}

VehiclesController.php

use App\VehiclesModel ;
use DB ;


 public function store(Request $request)
    {
        
        $destinationPath = 'storage/veh-images' ;
        $vehgalimages = array() ;
        
        if($files=$request->file('vehgalimages')) {
            
        foreach($files as $file) {
            
            $filename = $file->getClientOriginalName() ;
            $file->move($destinationPath, $filename) ;
            $vehgalimages[] = $filename;
          }
        }
        //implode images with pipe symbol
        $vehallimages = implode("|",$vehgalimages) ;
        
        $vehiclesmodel = new VehiclesModel ;
        $vehiclesmodel->vehmod = $request->vehmod ;
        $vehiclesmodel->vehmark = $request->vehmark ;
        $vehiclesmodel->vehyear = $request->vehyear ;
        $vehiclesmodel->vehengine = $request->vehengine ;
        $vehiclesmodel->vehtrans = $request->vehtrans ;
        $vehiclesmodel->vehimage = $request->vehimage ;
        $vehiclesmodel->vehgalimages = $vehallimages ;
        
        $file = $vehiclesmodel->vehimage = $request->vehimage ;
        $filename = $file->getClientOriginalName() ;
        $destinationPath = 'storage/veh-images' ; 
        $vehiclesmodel->vehimage = $filename; 
        $uploadSuccess = $file->move($destinationPath, $filename);
        
        $vehiclesmodel->save() ;
        
        return redirect('management')->with('success', 'The record has been added succesfully!') ;
    }

function action(Request $request)
    {
     if($request->ajax())
     {
      $output = '' ;
      $query = $request->get('query') ;
      if($query != '')
      {

       $data = DB::table('vehicles')
         ->where('vehmod', 'like', '%'.$query.'%')
         ->orWhere('vehmark', 'like', '%'.$query.'%')
	 ->orWhere('vehyear', 'like', '%'.$query.'%')
	 ->orWhere('vehengine', 'like', '%'.$query.'%')
	 ->orWhere('vehtrans', 'like', '%'.$query.'%')
         ->orderBy('id', 'desc')
         ->get();
         
      }
      else
      {

       $data = DB::table('vehicles')
         ->orderBy('id', 'desc')
         ->get();
      }
      $total_row = $data->count();
      if($total_row > 0)
      {
       foreach($data as $row)
       {
        $output .= '
        
        <tr>
         <td>'.$row->vehmod.'</td>
         <td>'.$row->vehmark.'</td>
         <td>'.$row->vehyear.'</td>
         <td>'.$row->vehengine.'</td>
         <td>'.$row->vehtrans.'</td>
        </tr>
        // The CRUD actions should be implemented somehow here..
        ';
       }

      }
      else
      {
       $output = '
       <tr>
        <td align="center" colspan="5">No Data Found</td>
       </tr>
       ';
      }
      $data = array(
       'table_data'  => $output,
       'total_data'  => $total_row
      );

      echo json_encode($data);
     }
    }
    

index.blade.php (( Note: The CRUD actions and everything is here implemented succesfully. I however can't implement this in the controller ))

<?php use App\VehiclesModel ?>

<html lang="en">
 <head>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Fonts -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet"  crossorigin="anonymous">
    <link href="{{ asset('css/styler.css') }}" rel="stylesheet">   
    <link rel="shortcut icon" type="image/x-icon" href=""> 
     
    <!-- JavaScript -->
    <script src="{{ asset('js/custom.js') }}"> </script>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
     
     
</head>    
    
<table id="customers">
       
<tr>
    <th> № </th>
    <th> Model </th>
    <th> Mark </th>
    <th> Year </th>
    <th> Engine </th>
    <th> Transmission </th>
    <th> Main pic </th>
    <th> Gallery images </th>
    <th> Actions </th>
</tr>
       
<?php   
  
    foreach ($vehiclesmodel as $VehiclesModel) {
    $vehallimages = explode("|", $VehiclesModel->vehgalimages) ;    
?>    
    
<tr>
    
    <td> {{ $VehiclesModel-->id }} </td>
    <td> {{ $VehiclesModel-->vehmod }} </td>
    <td> {{ $VehiclesModel-->vehmark }} </td>
    <td> {{ $VehiclesModel-->vehyear }} </td>
    <td> {{ $VehiclesModel-->vehengine }} </td>
    <td> {{ $VehiclesModel-->vehtrans }} </td>
    
    <td> 
        <img src="storage/veh-images/{{ $VehiclesModel->vehimage }}" class="ama-anc-avc-maingal-images">
    </td>
    
    <td>
        <?php
        foreach($vehallimages as $vehgalimages) {
        ?>
        <img src="storage/veh-images/{{ $vehgalimages }}" class="ama-anc-avc-maingal-images">
        <?php } ?>
    </td>
    
    <td> <a href="{{ route('index.edit', $VehiclesModel->id) }}"> <button type="button" class="btn btn-primary"> EDIT </button> </a> 
        
         <form action="{{ route('index.destroy', $VehiclesModel->id) }}" method="post">
             @CSRF
             @method('DELETE')    

             <button type="submit" class="btn btn-danger" style="width:65%; padding-top:2%;" name="submit"> DELETE </button>
         </form> 
    </td> 
    
</tr>
       
<?php  }  

echo $vehiclesmodel->links() ;

?>   
         
<a href="{{ route('index.create') }}"> <button type="button" class="btn btn-primary"> Add a record </button> </a> <br><br>
    
   
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Search Customer Data" />
</div>

<h3 align="center">Total Data : <span id="total_records"></span></h3>

</table>

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

 fetch_customer_data();

 function fetch_customer_data(query = '')
 {
  $.ajax({
   url:"{{ route('management-ajax') }}",
   method:'GET',
   data:{query:query},
   dataType:'json',
   success:function(data)
   {
    $('#customers').html(data.table_data);
    $('#total_records').text(data.total_data);
   }
  })
 }

 $(document).on('keyup', '#search', function(){
  var query = $(this).val();
  fetch_customer_data(query);
 });
});
</script>

web.php

Route::get('index/action', 'VehiclesController@action')->name('management-ajax') ;

Route::resource('index', 'VehiclesController') ;