fix: load cities dynamically based on selected province

app/Http/Controllers/LocationController.php

@@ -8,12 +8,14 @@ use Illuminate\Http\JsonResponse;
 
 class LocationController extends Controller
 {
-    public function getCities($provinceId): JsonResponse
+    public function getCities(int $provinceId): JsonResponse
     {
-        $cities = City::where('province_id', $provinceId)
-            ->orderBy('name')
+        $cities = City::query()
+            ->where('province_id', $provinceId)
+            ->orderBy('name', 'asc')
             ->get(['id', 'name']);
 
+
         return response()->json($cities);
     }
 }

app/Http/Requests/Auth/RegisterPostRequest.php

@@ -97,12 +97,12 @@ class RegisterPostRequest extends FormRequest
                 'alpha_num',
                 'confirmed'
             ],
-            'user_province' => [
+            'province_id' => [
                 'nullable',
                 'integer',
                 'exists:provinces,id'
             ],
-            'user_city' => [
+            'city_id' => [
                 'nullable',
                 'integer',
                 'exists:cities,id'

resources/views/auth/register.blade.php

@@ -271,37 +271,68 @@
         </div>
 
     </main>
-
+    @push('scripts')
         <script>
             $(document).ready(function () {
-            $('#province_id').on('change', function () {
-                let provinceId = $(this).val();
-                let citySelect = $('#city_id');
+                const provinceSelect = $('#province_id');
+                const citySelect = $('#city_id');
 
-                citySelect.prop('disabled', true);
 
+                const oldProvinceId = "{{ old('province_id') }}";
+                const oldCityId = "{{ old('city_id') }}";
+
+                function loadCities(provinceId, selectedCityId = null) {
                     if (!provinceId) {
                         citySelect.html('<option value="">ابتدا استان را انتخاب کنید</option>');
+                        citySelect.prop('disabled', true);
                         return;
                     }
 
-                citySelect.html('<option value="">در حال بارگذاری...</option>');
+                    citySelect.html('<option value="">در حال بارگذاری شهرها...</option>');
+                    citySelect.prop('disabled', true);
 
-                $.get('/get-cities/' + provinceId, function (data) {
-                    citySelect.html('<option value="">انتخاب شهر</option>');
+                    let url = "{{ route('locations.cities', ':provinceId') }}".replace(':provinceId', provinceId);
 
-                    $.each(data, function (key, city) {
+                    $.ajax({
+                        url: url,
+                        type: 'GET',
+                        dataType: 'json',
+                        success: function (cities) {
+                            citySelect.empty();
+                            citySelect.append('<option value="">انتخاب شهر</option>');
+
+                            $.each(cities, function (index, city) {
+                                let isSelected = (selectedCityId && selectedCityId == city.id) ? 'selected' : '';
                                 citySelect.append(
-                            '<option value="' + city.id + '">' + city.name + '</option>'
+                                    `<option value="${city.id}" ${isSelected}>${city.name}</option>`
                                 );
                             });
 
                             citySelect.prop('disabled', false);
-                }).fail(function () {
-                    citySelect.html('<option value="">خطا در دریافت شهرها</option>');
+                        },
+                        error: function (xhr) {
+                            console.error('Error:', xhr.responseText);
+                            citySelect.html('<option value="">خطا در دریافت لیست شهرها</option>');
+                        }
                     });
+                }
+
+
+                provinceSelect.on('change', function () {
+                    let provinceId = $(this).val();
+                    loadCities(provinceId);
                 });
+
+
+                if (oldProvinceId) {
+                    loadCities(oldProvinceId, oldCityId);
+                }
             });
         </script>
+    @endpush
+
+
+
+
 
 @endsection

routes/auth.php

@@ -3,9 +3,12 @@
 use App\Http\Controllers\Auth\LoginController;
 use App\Http\Controllers\Auth\LogoutController;
 use App\Http\Controllers\Auth\RegisterController;
+use App\Http\Controllers\LocationController;
 use Illuminate\Support\Facades\Route;
 
-Route::prefix('locations')->name('locations.')->controller(\App\Http\Controllers\LocationController::class)->group(function () {
+Route::prefix('locations')->name('locations.')
+    ->controller(LocationController::class)
+    ->group(function () {
         Route::get('/cities/{provinceId}', 'getCities')->name('cities');
     });