From e913026f53873f175e1104bc1a497c5fe850f3e1 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 23 Jul 2025 10:58:34 -0500
Subject: [PATCH] changes to mobile version

---
 .../search-modal/search-modal.component.html  | 412 +++---------------
 .../search-modal/search-modal.component.ts    |   8 +-
 2 files changed, 69 insertions(+), 351 deletions(-)

diff --git a/bizmatch/src/app/components/search-modal/search-modal.component.html b/bizmatch/src/app/components/search-modal/search-modal.component.html
index a142c91..1332ffc 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.html
@@ -25,9 +25,7 @@
             <div class="tooltip-arrow" data-popper-arrow></div>
           </div>
         </div>
-        @if(criteria){
         <div class="space-y-6">
-          @if(criteria.criteriaType==='businessListings') {
           <div class="grid grid-cols-1 gap-6">
             <div class="space-y-4">
               <div>
@@ -68,9 +66,9 @@
               <div>
                 <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
                 <div class="flex items-center space-x-2">
-                  <app-validated-price name="price-from" [(ngModel)]="criteria.minPrice" (ngModelChange)="onCriteriaChange()" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+                  <app-validated-price name="price-from" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                   <span>-</span>
-                  <app-validated-price name="price-to" [(ngModel)]="criteria.maxPrice" (ngModelChange)="onCriteriaChange()" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+                  <app-validated-price name="price-to" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                 </div>
               </div>
               <div>
@@ -78,21 +76,21 @@
                 <div class="flex items-center space-x-2">
                   <app-validated-price
                     name="salesRevenue-from"
+                    (ngModelChange)="debouncedSearch()"
                     [(ngModel)]="criteria.minRevenue"
-                    (ngModelChange)="onCriteriaChange()"
                     placeholder="From"
                     inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
                   ></app-validated-price>
                   <span>-</span>
-                  <app-validated-price name="salesRevenue-to" [(ngModel)]="criteria.maxRevenue" (ngModelChange)="onCriteriaChange()" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+                  <app-validated-price name="salesRevenue-to" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.maxRevenue" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                 </div>
               </div>
               <div>
                 <label for="cashflow" class="block mb-2 text-sm font-medium text-gray-900">Cashflow</label>
                 <div class="flex items-center space-x-2">
-                  <app-validated-price name="cashflow-from" [(ngModel)]="criteria.minCashFlow" (ngModelChange)="onCriteriaChange()" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+                  <app-validated-price name="cashflow-from" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.minCashFlow" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                   <span>-</span>
-                  <app-validated-price name="cashflow-to" [(ngModel)]="criteria.maxCashFlow" (ngModelChange)="onCriteriaChange()" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+                  <app-validated-price name="cashflow-to" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                 </div>
               </div>
               <div>
@@ -101,63 +99,36 @@
                   type="text"
                   id="title"
                   [(ngModel)]="criteria.title"
-                  (ngModelChange)="onCriteriaChange()"
+                  (ngModelChange)="debouncedSearch()"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                   placeholder="e.g. Restaurant"
                 />
               </div>
               <div>
                 <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
-                <div class="grid grid-cols-2 gap-2">
-                  @for(tob of selectOptions.typesOfBusiness; track tob) {
-                  <div class="flex items-center">
-                    <input
-                      type="checkbox"
-                      id="automotive"
-                      [ngModel]="isTypeOfBusinessClicked(tob)"
-                      (ngModelChange)="categoryClicked($event, tob.value)"
-                      value="{{ tob.value }}"
-                      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-                    />
-                    <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
-                  </div>
-                  }
-                </div>
+                <ng-select
+                  class="custom"
+                  [items]="selectOptions.typesOfBusiness"
+                  bindLabel="name"
+                  bindValue="value"
+                  [ngModel]="criteria.types"
+                  (ngModelChange)="onCategoryChange($event)"
+                  [multiple]="true"
+                  [closeOnSelect]="true"
+                  placeholder="Select categories"
+                ></ng-select>
               </div>
               <div>
                 <label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
-                <div class="space-y-2">
-                  <div class="flex items-center">
-                    <input
-                      [(ngModel)]="criteria.realEstateChecked"
-                      (ngModelChange)="onCheckboxChange('realEstateChecked', $event)"
-                      type="checkbox"
-                      name="realEstateChecked"
-                      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-                    />
-                    <label for="realEstateChecked" class="ml-2 text-sm font-medium text-gray-900">Real Estate</label>
-                  </div>
-                  <div class="flex items-center">
-                    <input
-                      [(ngModel)]="criteria.leasedLocation"
-                      (ngModelChange)="onCheckboxChange('leasedLocation', $event)"
-                      type="checkbox"
-                      name="leasedLocation"
-                      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-                    />
-                    <label for="leasedLocation" class="ml-2 text-sm font-medium text-gray-900">Leased Location</label>
-                  </div>
-                  <div class="flex items-center">
-                    <input
-                      [(ngModel)]="criteria.franchiseResale"
-                      (ngModelChange)="onCheckboxChange('franchiseResale', $event)"
-                      type="checkbox"
-                      name="franchiseResale"
-                      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-                    />
-                    <label for="franchiseResale" class="ml-2 text-sm font-medium text-gray-900">Franchise</label>
-                  </div>
-                </div>
+                <ng-select
+                  class="custom"
+                  [items]="propertyTypeOptions"
+                  bindLabel="name"
+                  bindValue="value"
+                  [ngModel]="selectedPropertyType"
+                  (ngModelChange)="onPropertyTypeChange($event)"
+                  placeholder="Select property type"
+                ></ng-select>
               </div>
               <div>
                 <label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
@@ -166,7 +137,7 @@
                     type="number"
                     id="numberEmployees-from"
                     [(ngModel)]="criteria.minNumberEmployees"
-                    (ngModelChange)="onCriteriaChange()"
+                    (ngModelChange)="debouncedSearch()"
                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                     placeholder="From"
                   />
@@ -175,7 +146,7 @@
                     type="number"
                     id="numberEmployees-to"
                     [(ngModel)]="criteria.maxNumberEmployees"
-                    (ngModelChange)="onCriteriaChange()"
+                    (ngModelChange)="debouncedSearch()"
                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                     placeholder="To"
                   />
@@ -188,7 +159,7 @@
                     type="number"
                     id="establishedSince-From"
                     [(ngModel)]="criteria.establishedSince"
-                    (ngModelChange)="onCriteriaChange()"
+                    (ngModelChange)="debouncedSearch()"
                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                     placeholder="YYYY"
                   />
@@ -197,7 +168,7 @@
                     type="number"
                     id="establishedSince-To"
                     [(ngModel)]="criteria.establishedUntil"
-                    (ngModelChange)="onCriteriaChange()"
+                    (ngModelChange)="debouncedSearch()"
                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                     placeholder="YYYY"
                   />
@@ -209,165 +180,50 @@
                   type="text"
                   id="brokername"
                   [(ngModel)]="criteria.brokerName"
-                  (ngModelChange)="onCriteriaChange()"
+                  (ngModelChange)="debouncedSearch()"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                   placeholder="e.g. Brokers Invest"
                 />
               </div>
             </div>
           </div>
-          <!-- } @if(criteria.criteriaType==='commercialPropertyListings') { -->
-          <!--           <div class="grid grid-cols-1 gap-6">
-            <div class="space-y-4">
-              <div>
-                <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
-                <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-              </div>
-              <div>
-                <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
-              </div>
-              <div *ngIf="criteria.city">
-                <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
-                <div class="flex items-center space-x-4">
-                  <label class="inline-flex items-center">
-                    <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
-                    <span class="ml-2">Exact City</span>
-                  </label>
-                  <label class="inline-flex items-center">
-                    <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
-                    <span class="ml-2">Radius Search</span>
-                  </label>
-                </div>
-              </div>
-              <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-                <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
-                <div class="flex flex-wrap">
-                  @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-                  <button
-                    type="button"
-                    class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
-                    [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
-                    (click)="criteria.radius = radius"
-                  >
-                    {{ radius }}
-                  </button>
-                  }
-                </div>
-              </div>
-              <div>
-                <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
-                <div class="flex items-center space-x-2">
-                  <app-validated-price name="price-from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
-                  <span>-</span>
-                  <app-validated-price name="price-to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
-                </div>
-              </div>
-              <div>
-                <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
-                <input
-                  type="text"
-                  id="title"
-                  [(ngModel)]="criteria.title"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                  placeholder="e.g. Restaurant"
-                />
-              </div>
-              <div>
-                <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
-                <div class="grid grid-cols-2 gap-2">
-                  @for(tob of selectOptions.typesOfCommercialProperty; track tob) {
-                  <div class="flex items-center">
-                    <input
-                      type="checkbox"
-                      id="automotive"
-                      [ngModel]="isTypeOfBusinessClicked(tob)"
-                      (ngModelChange)="categoryClicked($event, tob.value)"
-                      value="{{ tob.value }}"
-                      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-                    />
-                    <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
-                  </div>
-                  }
-                </div>
-              </div>
-            </div>
-          </div> -->
-          <!-- } @if(criteria.criteriaType==='brokerListings') { -->
-          <!--           <div class="grid grid-cols-1 gap-6">
-            <div class="space-y-4">
-              <div>
-                <label for="states" class="block mb-2 text-sm font-medium text-gray-900">Locations served - States</label>
-                <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" [multiple]="false"></ng-select>
-              </div>
-              <div>
-                <label for="counties" class="block mb-2 text-sm font-medium text-gray-900">Locations served - Counties</label>
-                <ng-select
-                  [items]="counties$ | async"
-                  bindLabel="name"
-                  class="custom"
-                  [multiple]="true"
-                  [hideSelected]="true"
-                  [trackByFn]="trackByFn"
-                  [minTermLength]="2"
-                  [loading]="countyLoading"
-                  typeToSearchText="Please enter 2 or more characters"
-                  [typeahead]="countyInput$"
-                  [(ngModel)]="criteria.counties"
-                ></ng-select>
-              </div>
-              <div>
-                <app-validated-city
-                  label="Company Location - City"
-                  name="city"
-                  [ngModel]="criteria.city"
-                  (ngModelChange)="setCity($event)"
-                  labelClasses="text-gray-900 font-medium"
-                  [state]="criteria.state"
-                ></app-validated-city>
-              </div>
-              <div *ngIf="criteria.city">
-                <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
-                <div class="flex items-center space-x-4">
-                  <label class="inline-flex items-center">
-                    <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
-                    <span class="ml-2">Exact City</span>
-                  </label>
-                  <label class="inline-flex items-center">
-                    <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
-                    <span class="ml-2">Radius Search</span>
-                  </label>
-                </div>
-              </div>
-              <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-                <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
-                <div class="flex flex-wrap">
-                  @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-                  <button
-                    type="button"
-                    class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
-                    [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
-                    (click)="criteria.radius = radius"
-                  >
-                    {{ radius }}
-                  </button>
-                  }
-                </div>
-              </div>
-              <div>
-                <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Name of Professional</label>
-                <input
-                  type="text"
-                  id="brokername"
-                  [(ngModel)]="criteria.brokerName"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                />
-              </div>
-            </div>
-          </div> -->
-          }
+          <!-- Removed other criteria types as per request -->
+        </div>
+        <!-- Display active filters as tags -->
+        <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
+          <span *ngIf="criteria.state" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.types.length" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="selectedPropertyType" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.establishedSince || criteria.establishedUntil" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Established: {{ criteria.establishedSince || 'Any' }} - {{ criteria.establishedUntil || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
+          <span *ngIf="criteria.brokerName" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+          </span>
         </div>
-        }
       </div>
+
       <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
         <button type="button" (click)="modalService.accept()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
           Search ({{ numberOfResults$ | async }})
@@ -401,7 +257,7 @@
       State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      City: {{ criteria.city }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
       Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
@@ -582,137 +438,5 @@
       />
     </div>
   </div>
-  <!-- } @if(criteria.criteriaType==='commercialPropertyListings') { -->
-  <!--   <div class="space-y-4">
-    <div>
-      <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
-      <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-    </div>
-    <div>
-      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
-    </div>
-    <div *ngIf="criteria.city">
-      <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
-      <div class="flex items-center space-x-4">
-        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
-          <span class="ml-2">Exact City</span>
-        </label>
-        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
-          <span class="ml-2">Radius Search</span>
-        </label>
-      </div>
-    </div>
-    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-      <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
-      <div class="flex flex-wrap">
-        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-        <button
-          type="button"
-          class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
-          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
-          (click)="criteria.radius = radius"
-        >
-          {{ radius }}
-        </button>
-        }
-      </div>
-    </div>
-    <div>
-      <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
-      <div class="flex items-center space-x-2">
-        <app-validated-price name="price-from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
-        <span>-</span>
-        <app-validated-price name="price-to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
-      </div>
-    </div>
-    <div>
-      <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
-      <input
-        type="text"
-        id="title"
-        [(ngModel)]="criteria.title"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-        placeholder="e.g. Restaurant"
-      />
-    </div>
-    <div>
-      <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
-      <div class="grid grid-cols-2 gap-2">
-        @for(tob of selectOptions.typesOfCommercialProperty; track tob) {
-        <div class="flex items-center">
-          <input
-            type="checkbox"
-            id="automotive"
-            [ngModel]="isTypeOfBusinessClicked(tob)"
-            (ngModelChange)="categoryClicked($event, tob.value)"
-            value="{{ tob.value }}"
-            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-          />
-          <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
-        </div>
-        }
-      </div>
-    </div>
-  </div> -->
-  <!-- } @if(criteria.criteriaType==='brokerListings') { -->
-  <!--   <div class="space-y-4">
-    <div>
-      <label for="states" class="block mb-2 text-sm font-medium text-gray-900">Locations served - States</label>
-      <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" [multiple]="false"></ng-select>
-    </div>
-    <div>
-      <label for="counties" class="block mb-2 text-sm font-medium text-gray-900">Locations served - Counties</label>
-      <ng-select
-        [items]="counties$ | async"
-        bindLabel="name"
-        class="custom"
-        [multiple]="true"
-        [hideSelected]="true"
-        [trackByFn]="trackByFn"
-        [minTermLength]="2"
-        [loading]="countyLoading"
-        typeToSearchText="Please enter 2 or more characters"
-        [typeahead]="countyInput$"
-        [(ngModel)]="criteria.counties"
-      ></ng-select>
-    </div>
-    <div>
-      <app-validated-city label="Company Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
-    </div>
-    <div *ngIf="criteria.city">
-      <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
-      <div class="flex items-center space-x-4">
-        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
-          <span class="ml-2">Exact City</span>
-        </label>
-        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
-          <span class="ml-2">Radius Search</span>
-        </label>
-      </div>
-    </div>
-    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-      <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
-      <div class="flex flex-wrap">
-        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-        <button
-          type="button"
-          class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
-          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
-          (click)="criteria.radius = radius"
-        >
-          {{ radius }}
-        </button>
-        }
-      </div>
-    </div>
-    <div>
-      <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Name of Professional</label>
-      <input type="text" id="brokername" [(ngModel)]="criteria.brokerName" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-    </div>
-  </div> -->
   }
 </div>
diff --git a/bizmatch/src/app/components/search-modal/search-modal.component.ts b/bizmatch/src/app/components/search-modal/search-modal.component.ts
index 2b36b78..d421da1 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.ts
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.ts
@@ -260,20 +260,14 @@ export class SearchModalComponent {
     }
   }
   clearFilter() {
-    //if (this.criteria.criteriaType === 'businessListings') {
     resetBusinessListingCriteria(this.criteria);
-    /* } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
-      resetCommercialPropertyListingCriteria(this.criteria);
-    } else {
-      resetUserListingCriteria(this.criteria);
-    } */
+
     this.searchService.search(this.criteria);
   }
   close() {
     this.modalService.reject(this.backupCriteria);
   }
   onCheckboxChange(checkbox: string, value: boolean) {
-    // Deaktivieren Sie alle Checkboxes
     (<BusinessListingCriteria>this.criteria).realEstateChecked = false;
     (<BusinessListingCriteria>this.criteria).leasedLocation = false;
     (<BusinessListingCriteria>this.criteria).franchiseResale = false;