404 (Not Found) in using ajax

I need some help here, I'm creating a dropdown list with districts and schools. it's like a simple hierarchy dependent dropdown list when I click a certain district there will be another category of schools shows up under the selected district. However when i use ajax it has an error 404 (Not Found). Can i solve the problem.

here is my code below Route

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::post('user/logout', 'Auth\LoginController@userLogout')->name('user.logout');



Route::prefix('admin')->group(function(){
Route::get('/login', 'Auth\AdminLoginController@showLoginForm')->name('admin.login');
Route::post('/login', 'Auth\AdminLoginController@Login')->name('admin.login.submit');
Route::get('/', 'AdminController@index')->name('admin.dashboard');
Route::post('/logout', 'Auth\AdminLoginController@logout')->name('admin.logout');

Route::get('/getSchools/{id}', "DetailController@getSchools"); //my ajax route
Route::resource('/details', 'DetailController');

});

Controller

<?php

namespace App\Http\Controllers;

use App\Detail;
use App\District;
use App\Salary;
use App\Position;
use App\School;
use App\User;
use App\Employee;
use App\Department;
use Illuminate\Http\Request;

class DetailController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

   public function __construct()
    {
        $this->middleware('auth:admin');
    }
    


    public function index()
    {
        $details = Detail::all();
        return view('admin.details.index', compact('details', $details));
    }

    public function getSchools($id){
        $schools = School::where('d_id', $id)->pluck('school', 'id');
        return json_encode($schools);

    }

Ajax and blade

                                <div class="input-group row">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-Home"></i>District Warm</span>
                                    <select id="district" class="form-control input-sm" name="district" required>
                                        @foreach ($districts as $d)
                                        <option value="{{$d->id}}">{{$d->districtname}}</option>
                                        @endforeach 
                                    </select>

                                    <span class="input-group-addon"><i class="glyphicon glyphicon-Home"></i>Department</span>
                                </div>
<div class="input-group row">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-Home"></i>School Assignment</span>
                                    <select id="school" class="form-control input-sm" name="school" required>
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function(){
                                $('select[name="district"]').on('change', function(){
                                    var district_id = $(this).val();
                                    if (district_id){
                                        $.ajax({
                                            url: '/getSchools/'+district_id,
                                            type: 'GET',
                                            dataType: "json",
                                            sucess: function(data){
                                                console.log(data);
                                            }
                                        });
                                    }
                                });
                            });
                        </script>

hope you will help me. thanks