filter thana and branch in expert browser

Author: itsemon245

app/Http/Controllers/ExpertController.php

@@ -40,6 +40,7 @@ public function browse(Request $request) {
             $posts = $request->query('posts');
             $district = $request->query('district');
             $thana = $request->query('thana');
+            $dist_only = $request->query('dist_only') == 'false';
             $expTo = $request->query('experience_to');
             $expFrom = $request->query('experience_from');
             if ($posts) {
@@ -48,7 +49,7 @@ public function browse(Request $request) {
             if ($district) {
                 $q->where('district', $district);
             }
-            if ($thana) {
+            if ($thana && $dist_only) {
                 $q->where('thana', $thana);
             }
             if ($expTo) {

resources/views/components/backend/form/select-input.blade.php

@@ -15,7 +15,7 @@
         </label>
     @endif
     <select {{ $attributes->merge(['class' => 'form-select text-capitalize px-3 py-2'])->merge() }}>
-        <option disabled selected>{{ $placeholder }}</option>
+        <option disabled selected value="">{{ $placeholder }}</option>
         {{ $slot }}
     </select>
     @error($name)

resources/views/frontend/pages/expert/browse.blade.php

@@ -27,8 +27,9 @@ class="btn btn-secondary text-dark rounded-1 d-lg-none mb-3 fw-medium waves-effe
                     </button>
                 </div>
                 <div id="filter-menu" class="col-6 col-sm-6 col-md-4 col-lg-3 d-none d-lg-block">
-                    <form hx-get="{{ route('expert.browse') }}" hx-target="#hx-filtered-experts" hx-swap="outerHTML"
-                        hx-select="#hx-filtered-experts" hx-push-url="true" method="get">
+                    <form hx-get="{{ route('expert.browse') }}" hx-trigger="change from:.hx-input"
+                        hx-target="#hx-filtered-experts" hx-swap="outerHTML" hx-select="#hx-filtered-experts"
+                        hx-push-url="true" method="get">
                         <div class="filter-menu p-3 shadow bg-light rounded-2 ">
                             <div class="filters">
                                 <x-range-slider class="" tooltips="false" name="experience" id="experience"
@@ -42,26 +43,27 @@ class="btn btn-secondary text-dark rounded-1 d-lg-none mb-3 fw-medium waves-effe
                                             <span class="mdi mdi-chevron-down"></span>
                                         </div>
                                     </div>
-                                    <div class="card-body">
+                                    <div class="card-body" hx-target="hx-form-body">
                                         @php
                                             $selectedDistrict = request()->query('district');
                                             $selectedThana = request()->query('thana');
                                             $selectedBranch = request()->query('branch');
                                         @endphp
-                                        <x-form.selectize class="mb-2" id="district" name="district" label="District"
-                                            placeholder="District">
+                                        <x-backend.form.select-input class="mb-2 hx-input" id="district" name="district"
+                                            label="District" placeholder="District">
                                             @foreach ($districts as $district)
                                                 <option value="{{ $district }}" @selected($district === $selectedDistrict)>
                                                     {{ $district }}</option>
                                             @endforeach
-                                        </x-form.selectize>
-                                        <x-form.selectize class="mb-2" id="thana" name="thana" label="Thana"
-                                            placeholder="Thana">
+                                        </x-backend.form.select-input>
+                                        <input id="dist_only" name="dist_only" value="true" class="d-none" />
+                                        <x-backend.form.select-input class="mb-2 hx-input" id="thana" name="thana"
+                                            label="Thana" placeholder="Thana">
                                             @foreach ($thanas as $thana)
                                                 <option value="{{ $thana }}" @selected($thana === $selectedThana)>
                                                     {{ $thana }}</option>
                                             @endforeach
-                                        </x-form.selectize>
+                                        </x-backend.form.select-input>
                                     </div>
                                 </div>
                                 <div class="card">
@@ -200,6 +202,16 @@ class="btn btn-outline-primary fw-medium w-100 mb-2">Profile</a>
 
 @push('customJs')
     <script>
+        document.querySelectorAll('.hx-input').forEach(input => {
+            input.addEventListener('input', (e) => {
+                let thana = $("[name='thana']")
+                let district = $("[name='district']")
+                if (e.target.id == 'thana') {
+                    let dist_only = $("[name='dist_only']")
+                    dist_only.val('false')
+                }
+            });
+        });
         const filter = {
             toggle: {
                 btnIcon: function(jQBtn) {