<div
  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'brokerListings'"
  class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
>
  <div class="relative w-full h-screen max-h-screen">
    <div class="relative bg-white rounded-lg shadow h-full">
      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
        <h3 class="text-xl font-semibold text-white p-2 rounded">Professional Search</h3>
        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-gray-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close Modal</span>
        </button>
      </div>
      <div class="p-6 space-y-6">
        <div class="flex space-x-4 mb-4">
          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
            Clear all Filter
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </div>
        <!-- Display active filters as tags -->
        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
          <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-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 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-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 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.types?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.companyName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.counties?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
        </div>
        @if(criteria.criteriaType==='brokerListings') {
        <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-neutral-900">Location - State</label>
              <ng-select id="state-select" aria-label="Location - State" 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-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
            </div>
            <div *ngIf="criteria.city">
              <label class="block mb-2 text-sm font-medium text-neutral-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" (ngModelChange)="updateCriteria({ searchType: $event })" 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" (ngModelChange)="updateCriteria({ searchType: $event })" 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-neutral-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-neutral-200 hover:bg-gray-500 hover:text-white"
                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
                  (click)="setRadius(radius)"
                >
                  {{ radius }}
                </button>
                }
              </div>
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
              <ng-select
                class="custom"
                [items]="selectOptions.customerSubTypes"
                bindLabel="name"
                bindValue="value"
                [ngModel]="criteria.types"
                (ngModelChange)="onCategoryChange($event)"
                [multiple]="true"
                [closeOnSelect]="true"
                placeholder="Select professional types"
              ></ng-select>
            </div>
            <div>
              <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
              <input
                type="text"
                id="brokerName"
                [ngModel]="criteria.brokerName"
                (ngModelChange)="updateCriteria({ brokerName: $event })"
                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. John Smith"
              />
            </div>
            <div>
              <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
              <input
                type="text"
                id="companyName"
                [ngModel]="criteria.companyName"
                (ngModelChange)="updateCriteria({ companyName: $event })"
                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. ABC Brokers"
              />
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
              <ng-select
                class="custom"
                [items]="counties$ | async"
                [multiple]="true"
                [loading]="countyLoading"
                [typeahead]="countyInput$"
                [ngModel]="criteria.counties"
                (ngModelChange)="onCountiesChange($event)"
                [closeOnSelect]="true"
                placeholder="Type to search counties"
              ></ng-select>
            </div>
          </div>
        </div>
        }
      </div>
    </div>
  </div>
</div>
<div *ngIf="!isModal" class="space-y-6 pb-10">
  <div class="flex space-x-4 mb-4">
    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
      Clear all Filter
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
  <!-- Display active filters as tags -->
  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
    <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-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 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-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 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.types?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.companyName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.counties?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
  </div>
  @if(criteria.criteriaType==='brokerListings') {
  <div class="space-y-4">
    <div>
      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
      <ng-select id="state-select" aria-label="Location - State" 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-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
    </div>
    <div *ngIf="criteria.city">
      <label class="block mb-2 text-sm font-medium text-neutral-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" (ngModelChange)="updateCriteria({ searchType: $event })" 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" (ngModelChange)="updateCriteria({ searchType: $event })" 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-neutral-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-neutral-200 hover:bg-gray-500 hover:text-white"
          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
          (click)="setRadius(radius)"
        >
          {{ radius }}
        </button>
        }
      </div>
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
      <ng-select
        class="custom"
        [items]="selectOptions.customerSubTypes"
        bindLabel="name"
        bindValue="value"
        [ngModel]="criteria.types"
        (ngModelChange)="onCategoryChange($event)"
        [multiple]="true"
        [closeOnSelect]="true"
        placeholder="Select professional types"
      ></ng-select>
    </div>
    <div>
      <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
      <input
        type="text"
        id="brokerName"
        [ngModel]="criteria.brokerName"
        (ngModelChange)="updateCriteria({ brokerName: $event })"
        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. John Smith"
      />
    </div>
    <div>
      <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
      <input
        type="text"
        id="companyName"
        [ngModel]="criteria.companyName"
        (ngModelChange)="updateCriteria({ companyName: $event })"
        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. ABC Brokers"
      />
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
      <ng-select
        class="custom"
        [items]="counties$ | async"
        [multiple]="true"
        [loading]="countyLoading"
        [typeahead]="countyInput$"
        [ngModel]="criteria.counties"
        (ngModelChange)="onCountiesChange($event)"
        [closeOnSelect]="true"
        placeholder="Type to search counties"
      ></ng-select>
    </div>
  </div>
  }
</div>
