مشكلة في جلب البيانات من القاعدة باستخدام ajax و laravel

اريد جلب جميع ال subcategory  المتعلقة ب category  محدد ولكن هذا لم ينجح 

استخدم هذا الكود في صفحة الانشاء 

@extends('theme.default')

@section('content')
<div class="container">
    <h2>Add Transaction</h2>
    <form action="{{ route('admin.transactions.store') }}" method="POST">
        @csrf
        <!-- Category Dropdown -->
        <div class="mb-3">
            <label for="category" class="form-label">Select Category</label>
            <select id="category" name="category_id" class="form-select" required>
                <option value="" disabled selected>Select a category</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Subcategory Dropdown -->
        <div class="mb-3">
            <label for="subcategory" class="form-label">Select Subcategory</label>
            <select id="subcategory" name="subcategory_id" class="form-select" required disabled>
                <option value="" disabled selected>Select a subcategory</option>
            </select>
        </div>

        <!-- Date Field -->
        <div class="mb-3">
            <label for="date" class="form-label">Transaction Date</label>
            <input type="date" id="date" name="date" class="form-control" value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>
        </div>

        <!-- Name and Price -->
        <div class="mb-3">
            <label for="name" class="form-label">Subcategory Name</label>
            <input type="text" id="name" name="name" class="form-control" readonly>
        </div>

        <div class="mb-3">
            <label for="price" class="form-label">Price</label>
            <input type="text" id="price" name="price" class="form-control" readonly>
        </div>

        <button type="submit" class="btn btn-primary">Add Transaction</button>
    </form>
</div>

<script>
    // عند اختيار category، سيتم تحميل الـ subcategories
    document.getElementById('category').addEventListener('change', function() {
        const categoryId = this.value;
        const subcategorySelect = document.getElementById('subcategory');
        
        // تعطيل زر الـ subcategory أثناء تحميل البيانات
        subcategorySelect.disabled = true;
        subcategorySelect.innerHTML = '<option value="" disabled selected>Loading...</option>';

        fetch(`/admin/subcategories/${categoryId}`)
            .then(response => response.json())
            .then(data => {
                subcategorySelect.innerHTML = '<option value="" disabled selected>Select a subcategory</option>';
                
                // إعادة تمكين الـ subcategory واستخدام البيانات التي تم تحميلها
                data.subcategories.forEach(subcategory => {
                    const option = document.createElement('option');
                    option.value = subcategory.id;
                    option.setAttribute('data-name', subcategory.name);
                    option.setAttribute('data-price', subcategory.price);
                    option.textContent = `${subcategory.name} - $${subcategory.price}`;
                    subcategorySelect.appendChild(option);
                });

                subcategorySelect.disabled = false;
            })
            .catch(error => console.error('Error loading subcategories:', error));
    });

    // عند اختيار subcategory، سيتم ملء الـ name و price تلقائيًا
    document.getElementById('subcategory').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const name = selectedOption.getAttribute('data-name');
        const price = selectedOption.getAttribute('data-price');

        // تحديث الحقول الخاصة بالاسم والسعر
        document.getElementById('name').value = name;
        document.getElementById('price').value = '$' + price;
    });
</script>
@endsection

وهذا في ال controller 

    public function create()
    {
        $categories = Category::all();
        return view('admin.transactions.create', compact('categories'));
    }
    
    /**
     * Store a newly created transaction in storage.
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'amount' => 'required|numeric',
            'category_id' => 'required',
            'date' => 'required|date',
        ]);
    
        $transaction = new Transaction;
    
        $transaction->name = $request->name;
        $transaction->amount = $request->amount;
        $transaction->category_id = $request->category_id;
        $transaction->date = $request->date;
    
        // حفظ الـ transaction
        $transaction->save();
    
        // إعادة التوجيه مع رسالة نجاح
        return redirect()->route('transactions.index')->with('success', 'Transaction added successfully!');
    }
    

وهذا في ملف ال web 

//accounting

// ضمن المجموعة الخاصة بالـ Admin
Route::prefix('admin')->name('admin.')->group(function() {
    // مسار لعرض جميع المعاملات
    Route::get('transactions', [TransactionController::class, 'index'])->name('transactions.index');
    
    // مسار لعرض صفحة إضافة معاملة جديدة
    Route::get('transactions/create', [TransactionController::class, 'create'])->name('transactions.create');
    
    // مسار لحفظ المعاملة الجديدة
    Route::post('transactions', [TransactionController::class, 'store'])->name('transactions.store');
    
    // مسار لجلب الأصناف الفرعية بناءً على الـ category
    Route::get('subcategories/{category_id}', function ($category_id) {
        $subcategories = SubCategory::where('category_id', $category_id)->get();

        return response()->json(['subcategories' => $subcategories]);
    });
    
});

مع العلم ان العلاقات بين الجاول مربوطة بطريقة صحيحة وكل شيء على ما يرام 

وللاضافة يظهر هذا الخطأ في الكونسول 

create:258 Error loading subcategories: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

ما الحل في هذه الحالة ؟؟؟ وهل هناك اصلا طريقة اسهل ممكن ان احصل بها على ذات النتيجة ؟؟؟؟

عند اختيار ال category  تصبح القائمة الخاصة بال subcategory  هكذا مكتوب عليها loading