Interact with Laravel 8 resource controller using JQuery ajax

use test;
DROP TABLE IF EXISTS `test`.`roles`;
CREATE TABLE  `test`.`roles` (
  `id` int(10)PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL
) ENGINE=InnoDB;

DROP TABLE IF EXISTS `test`.`users`;
CREATE TABLE  `test`.`users` (
  `id` int(10)PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `username` varchar(50) DEFAULT NULL,
  `role_id` int(10) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `photo` varchar(50) DEFAULT NULL

) ENGINE=InnoDB;

Route::resource('users', UserController::class);

<?php

namespace AppHttpControllers;

use AppHttpControllersController;
use IlluminateHttpRequest;
use IlluminateSupportFacadesRedirect;
use IlluminateSupportFacadesDB;

class UserController extends Controller
{

    public function index(){
        $users = DB::select('select u.id,u.username,u.email,r.name role,u.photo from users u , roles r where r.id=u.role_id');
      
        return view("manage_users",["users"=>$users]);
    }
    public function create(){
        $roles = DB::select('select id,name from roles');       
        return view("pages.erp.user.create_user",["roles"=>$roles]);
    }

    public function store(Request $request){  

        $role_id= $request->input('cmbRole'); 
        $username = $request->input('txtUsername'); 
        $email=   $request->input('txtEmail');   
        $password=$request->input('txtPassword'); 
        $file=$request->file('filePhoto'); 

        $photo = $username.'.'.$file->getClientOriginalExtension();
        $path = public_path('/img');
        $file->move($path,$photo);

        
        DB::insert("insert into users(username,email,password,role_id,photo)values('$username','$email','$password','$role_id','$photo')");       
     
        //echo $name;

        //return Redirect::route('users.index');
       // return redirect()->route('users.create', ['error' =>"invalid email"]);
       return back()->with('success','Image Upload successfully');
      
    }

    public function show($id)
    {
        $user = DB::select("select u.id,u.username,u.email,r.name role,u.photo from users u , roles r where r.id=u.role_id and u.id='$id'");
       
        return view("details_user",["user"=>$user]);
    }

    public function edit($id){
        
       $roles = DB::select('select id,name from roles');

       //$user = DB::select("select id,username,email,role_id from users where id='$id'");
        $user= DB::table('users')->where('id', $id)->first();
        return view("edit_user",["user"=>$user,"roles"=>$roles]);
    }

    public function update($id,Request $request){
        $role_id= $request->input('cmbRole'); 
        $username = $request->input('txtUsername'); 
        $email=   $request->input('txtEmail');   
        $password=$request->input('txtPassword'); 

        $file=$request->file('filePhoto'); 

        $photo = $username.'.'.$file->getClientOriginalExtension();
        $path = public_path('/img');
        $file->move($path,$photo);

        DB::update("update users set photo='$photo', username='$username',email='$email',password='$password',role_id='$role_id' where id='$id'");       
        

        //return Redirect::route('users.index');
        return back()->with('success','Image Upload successfully');
    }

   public function destroy($id){      
        DB::delete("delete from users where id={$id}");       
        return "Success";
    }

}

@extends('layout.erp.home')
@section('page')
<h1>Manage User</h1>
<a href="{{route('users.create')}}">Create</a>
<table>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Role</th>
    <th>Action</th>
</tr>

@forelse ($users as $user)
   <tr>
    <td> {{ $user->username }}</td>
    <td> {{ $user->email }}</td>
    <td> {{ $user->role }}</td>
    <td>
        <div style="display:flex">
            <a style="flex:1 1 0" href="{{route('users.edit',$user->id)}}">Edit<a>  
            <a style="flex:1 1 0" href="{{route('users.show',$user->id)}}">Details<a> 
            <form style="flex:1 1 0" action="{{route('users.destroy',$user->id)}}"  method="post" style='float:left'>
                @csrf
                @method("DELETE")       

                <input type="submit" name="btnDelete" class="btnDelete" data-id="{{$user->id}}"  value="Delete" />
            </form>
      </div>      

    </td>
   </tr>
@empty
    <tr><td colspan="3">No users</td></tr>
@endforelse
</table>

<script>    

   $(function(){      

        $(".btnDelete").on("click",function(e){
            e.preventDefault();
            var token = $("input[name='_token']").val();
            var method = $("input[name='_method']").val();

            var id=$(this).data("id");
            //alert(id);
            
            var url = "{{route('users.destroy', ":id")}}";
            url = url.replace(':id',id);
            $.ajax({
                    url:url,
                    type:'POST',
                    data: {_token:token,_method:method},
                    success: function(data) {
                      // console.log(data);
                      window.location="users";
                    }
                });

        });      

   });   
</script>

@endsection

@extends('layout.erp.home')
@section('page')
<!-- <form action="{{url('user/save')}}" method="post"> -->
 <?php
   //echo isset($_GET["error"])?$_GET["error"]:"";
  
 ?>
 <a href="{{url('/users')}}">Manage</a>
<form action="{{route('users.store')}}" method="post" enctype="multipart/form-data">
    @csrf
    <div>Role<br>
       <select name="cmbRole">
          @foreach ($roles as $role)
               <option value="{{$role->id}}">{{$role->name}}</option>
          @endforeach
       </select>
    </div>
    <div>Username<br>
      <input type="text" name="txtUsername" />
    </div>
    <div>Email<br>
      <input type="text" name="txtEmail" />
    </div>
    <div>Password<br>
      <input type="text" name="txtPassword" />
    </div>
    <div>Photo<br>
      <input type="file" name="filePhoto" />
    </div>
    <div>
      <input type="submit" name="btnCreate" value="Create" />
   </div>
</form>

@endsection

@extends('layout.erp.home')
@section('page')
<?php
//print_r($user);
?>
<form action="{{route('users.update',$user->id)}}" method="post" enctype="multipart/form-data">
    @csrf
    @method("PUT")
    <input type="hidden" name="txtId" value="{{$user->id}}" />
    <div>
      Role<br>
      <select name="cmbRole">
          @foreach($roles as $role)
              
             @if($role->id==$user->role_id)
               <option value="{{$role->id}}" selected>{{$role->name}}</option>
             @else
              <option value="{{$role->id}}">{{$role->name}}</option>
             @endif

          @endforeach
      </select>
   </div>
    <div>
      Username<br><input type="text" name="txtUsername" value="{{$user->username}}" />
   </div>
   <div>
      Email<br><input type="text" name="txtEmail" value="{{$user->email}}" />
   </div>
   <div>Photo<br>
      <input type="file" name="filePhoto" />
    </div>
   <div>
    <input type="submit" name="btnSubmit" value="Update" />
   </div>
</form>
@endsection

@extends('layout.erp.home')
@section('page')
<table>
    <tr><th style="text-align:right">User ID </th><td>{{$user[0]->id}}</td></tr>
    <tr><th  style="text-align:right">Username </th><td>{{$user[0]->username}}</td></tr>
    <tr><th  style="text-align:right">Email </th><td>{{$user[0]->email}}</td></tr>
    <tr><th  style="text-align:right">Role </th><td>{{$user[0]->role}}</td></tr>
</table>
<!-- <div>Photo :<img src='img/{{$user[0]->photo}}' width='200' /></div> -->
@endsection