Dev

app/Http/Controllers/UserController.php

@@ -24,6 +24,7 @@ public function update()
             'privacy' => 'required',
             'receive_emails' => 'required',
             'country_iso' => 'nullable|exists:countries,iso',
+            'city_id' => 'nullable|exists:cities,id',
             'twitter' => 'nullable',
             'website' => 'nullable',
             'bio' => 'nullable',

app/Providers/AppServiceProvider.php

@@ -49,12 +49,23 @@ function ($view) {
                     return $theme;
                 });
 
+                $activeCountries = \App\Country::withEvents();
+
                 $view->with('audiences', $audiences);
                 $view->with('activity_types', \App\ActivityType::list());
                 $view->with('countries', \App\Country::translated());
                 $view->with('languages', Arr::sort(Lang::get('base.languages')));
-                $view->with('active_countries', \App\Country::withEvents());
+                $view->with('active_countries', $activeCountries);
                 $view->with('themes', $themes);
+
+                $cities = \App\City::query()
+                    ->whereIn('country_iso', $activeCountries->pluck('iso'))
+                    ->select(['id', 'city', 'country_iso'])
+                    ->orderBy('country_iso')
+                    ->orderBy('city')
+                    ->get();
+
+                $view->with('cities', $cities);
             }
         );
 

public/js/ext/functions.js

@@ -2131,6 +2131,46 @@ var SEMICOLON = SEMICOLON || {};
             }
         },
 
+        cityFilter: function () {
+            var $country = $('#id_country');
+            var $city = $('#id_city');
+            if (!$country.length || !$city.length) return;
+
+            // cache once per current DOM
+            if (!$city.data('originalOptions')) {
+              $city.data('originalOptions', $city.find('option').clone());
+              $city.data('emptyOption', $city.find('option').first().clone());
+            }
+
+            function applyCityFilter() {
+              var iso = $country.val() || '';
+              var prev = $city.val();
+              var $original = $city.data('originalOptions');
+              var $empty = $city.data('emptyOption').clone();
+
+              var $next = [$empty.get(0)];
+              if (iso) {
+                $original.each(function (i, opt) {
+                  if (i === 0) return; // keep first for empty
+                  var $opt = $(opt);
+                  if ($opt.attr('data-country') === iso) $next.push(opt);
+                });
+              }
+              $city.empty().append($next);
+
+              // restore previous if still valid
+              if ($next.some(function(o){ return o.value === prev; })) {
+                $city.val(prev);
+              } else {
+                $city.val('');
+              }
+            }
+
+            // bind once per render
+            $country.off('change.cityfilter').on('change.cityfilter', applyCityFilter);
+            applyCityFilter();
+        },
+
         masonryThumbs: function(){
             var $masonryThumbsEl = $('.masonry-thumbs');
             if( $masonryThumbsEl.length > 0 ){
@@ -2574,6 +2614,7 @@ var SEMICOLON = SEMICOLON || {};
             SEMICOLON.slider.owlCaptionInit();
             SEMICOLON.header.topsocial();
             SEMICOLON.header.responsiveMenuClass();
+            SEMICOLON.widget.cityFilter();
         }
 
     };

resources/views/profile.blade.php

@@ -175,6 +175,27 @@ class="border-2 border-solid border-dark-blue-200 w-full rounded-full h-12 px-4
                         </div>
                     </div>
 
+                    <div class="mb-1">
+                        <div>
+                            <label class="block text-xl text-slate-500 mb-2" for="id_city">City</label>
+                            <select id="id_city"
+                                    name="city_id"
+                                    class="border-2 border-solid border-dark-blue-200 w-full rounded-full h-12 px-4 appearance-none text-slate-600 mb-3">
+                                <option value=""></option>
+                                @foreach ($cities as $city)
+                                    <option value="{{ $city->id }}"
+                                            data-country="{{ $city->country_iso }}"
+                                            {{ optional($profileUser->city)->id === $city->id ? 'selected' : '' }}>
+                                        {{ $city->city }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <div class="errors">
+                            @component('components.validation-errors', ['field'=>'city_id'])@endcomponent
+                        </div>
+                    </div>
+
                     <div class="mb-1">
                         <div>
                             <label class="block text-xl text-slate-500 mb-2" for="id_bio">@lang('base.biography')</label>