<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Global search</ion-title>
  </ion-toolbar>
  <ion-item class="search">
    <ion-input placeholder="Search" (ionInput)="searchName($event)" [debounce]="250" [(ngModel)]="searchValue"
      clearInput="true"></ion-input>
    <ion-icon name="options" id="trigger-button"></ion-icon>
  </ion-item>
</ion-header>
<ion-content>
  <div class="bg">
    <ion-segment [(ngModel)]="searchSegment" mode="md" (ionChange)="changeSegment($event)">
      <ion-segment-button value="sant">
        <ion-label>Sant</ion-label>
      </ion-segment-button>
      <ion-segment-button value="sangh">
        <ion-label>Sangh</ion-label>
      </ion-segment-button>
      <ion-segment-button value="shravak">
        <ion-label>Shravak</ion-label>
      </ion-segment-button>
    </ion-segment>
    <div class="bottom-bg-location" [ngSwitch]="searchSegment">
      <ng-container *ngSwitchCase="'shravak'">
        <div class="shravak">
          <ion-card *ngIf="!noDataFlagShravak" class="ion-text-center">
            <ion-spinner name="lines"></ion-spinner>
          </ion-card>
          <ion-card *ngIf="noDataFlagShravak && searchedShravakData?.length === 0">
            <h3 class="ion-text-center"><img src="/assets/images/no-data-found-image.svg">
              <p>No data found. Try again...</p>
            </h3>
          </ion-card>
          <ion-list>
            <ion-item *ngFor="let data of shravakAll" (click)="viewPublicProfile(data.id, 'user')">
              <ion-avatar slot="start">
                <div *ngIf="data?.avatar;else defaultImage">
                  <img [src]="data?.avatar" class="photo">
                </div>
                <ng-template #defaultImage>
                  <img src="/assets/images/shravak-profile.png" class="photo">
                </ng-template>
              </ion-avatar>
              <ion-label>
                <h2>{{data?.name}}<span>{{data?.dharma?.name}}</span></h2>
              </ion-label>
              <ion-chip class="friends" *ngIf="data.is_friends === 1"
                (click)="acceptDeclineRequest(data?.id, data, 2, 1); $event.stopPropagation()">
                <ion-label>
                  Connected
                </ion-label>
              </ion-chip>
              <ion-chip *ngIf="data.is_friends === 0"
                (click)="sendConnectionRequest(data?.id, data); $event.stopPropagation()">
                <ion-label>
                  Connect
                </ion-label>
              </ion-chip>
              <ion-chip class="requested" *ngIf="data.is_friends === 2"
                (click)="acceptDeclineRequest(data?.id, data, 2, 2); $event.stopPropagation()">
                <ion-label>
                  Requested
                </ion-label>
              </ion-chip>
              <ion-chip class="respond" *ngIf="data.is_friends === 3"
                (click)="acceptDeclineRequest(data?.id, data, 1); $event.stopPropagation()">
                <ion-label>
                  Respond
                </ion-label>
              </ion-chip>
            </ion-item>
          </ion-list>
          <div class="show-more" *ngIf="tabRecordCount > 0 && !seeMoreShravak && noDataFlagShravak"
            (click)="seeMoreShravak = true">Show more
            ({{ tabRecordCount }} results)</div>
          <ion-infinite-scroll threshold="250px" (ionInfinite)="loadShravakData($event)"
            *ngIf="searchedShravakData?.length !== totalCountShravak">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
            </ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'sangh'">
        <div class="sangh">
          <ion-card *ngIf="!noDataFlagSangh" class="ion-text-center">
            <ion-spinner name="lines"></ion-spinner>
          </ion-card>
          <ion-card *ngIf="noDataFlagSangh && searchedSanghData?.length === 0">
            <h3 class="ion-text-center"><img src="/assets/images/no-data-found-image.svg">
              <p>No data found. Try again...</p>
            </h3>
          </ion-card>
          <ion-list>
            <ion-item *ngFor="let data of sanghAll" (click)="viewPublicProfile(data.id, 'sangh')">
              <ion-avatar slot="start">
                <div *ngIf="data?.avatar;else defaultImage">
                  <img [src]="data?.avatar" class="photo">
                </div>
                <ng-template #defaultImage>
                  <img src="/assets/images/sangh-profile.png" class="photo">
                </ng-template>
              </ion-avatar>
              <ion-label>
                <h2>{{data?.name}}<span>{{data?.dharma?.name}}</span><span
                    *ngIf="data?.sampraday?.name">({{data?.sampraday?.name}})</span></h2>
              </ion-label>
              <ion-chip *ngIf="data.is_member" class="member">
                <ion-label>
                  Member
                </ion-label>
              </ion-chip>
              <app-join-sangh-button *ngIf="!data.is_member" [sangh]="data" [userData]="userData"
                page="global-search"></app-join-sangh-button>
              <ion-chip class="ml-2" (click)="acceptDecline(data); $event.stopPropagation()"
                *ngIf="data.sangh_member_status === 2">
                <ion-label>
                  Accept/Decline
                </ion-label>
              </ion-chip>
            </ion-item>
          </ion-list>
          <div class="show-more" *ngIf="tabRecordCount > 0 && !seeMoreSangh && noDataFlagSangh"
            (click)="seeMoreSangh = true">Show more
            ({{ tabRecordCount }} results)</div>
          <ion-infinite-scroll threshold="250px" (ionInfinite)="loadSanghData($event)"
            *ngIf="searchedSanghData?.length !== totalCountSangh">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
            </ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'sant'">
        <div class="sant">
          <ion-card *ngIf="!noDataFlagSant" class="ion-text-center">
            <ion-spinner name="lines"></ion-spinner>
          </ion-card>
          <span class="sant-available-count" *ngIf="noDataFlagSant && !searchValue">About {{ totalCountSant | number }}
            results</span>
          <ion-card *ngIf="noDataFlagSant && searchedSantData?.length === 0">
            <h3 class="ion-text-center"><img src="/assets/images/no-data-found-image.svg">
              <p>No data found. Try again...</p>
            </h3>
          </ion-card>
          <ion-list>
            <ion-item *ngFor="let data of santAll" (click)="viewPublicProfile(data.id, 'sant')">
              <ion-avatar slot="start">
                <app-avatar-percentage [url]="data?.avatar ?
                data.avatar : '/assets/images/sant-profile.png'"
                  [percentage]="+data?.profile_statistics.profile_completion_percentage" [width]="40" [height]="40"
                  type="sant"></app-avatar-percentage>
              </ion-avatar>
              <ion-label>
                <h2>{{data?.name}}<span>{{data?.dharm?.name}}</span><span
                    *ngIf="data?.sampraday?.name">({{data?.sampraday?.name}})</span></h2>
              </ion-label>
              <ion-chip (click)="followSant(data.id, data, $event); $event.stopPropagation()"
                [ngClass]="{'following' : data.is_user_following }">
                <ion-label>
                  {{ data.is_user_following ? 'Following' : 'Follow' }}
                </ion-label>
              </ion-chip>
            </ion-item>
          </ion-list>
          <div class="show-more" *ngIf="tabRecordCount > 0 && !seeMoreSant && noDataFlagSant"
            (click)="seeMoreSant = true">Show more
            ({{ tabRecordCount }} results)</div>
          <ion-infinite-scroll threshold="250px" (ionInfinite)="loadSantData($event)"
            *ngIf="searchedSantData?.length !== totalCountSant">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
            </ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </div>
      </ng-container>
    </div>
  </div>
</ion-content>
<ion-modal class="global-filter" [ngClass]="{'sant': searchSegment === 'sant'}" trigger="trigger-button">
  <ng-template>
    <ion-content [ngClass]="{'sant': searchSegment === 'sant', 'sangh': searchSegment === 'sangh'}"
      class="global-form ion-padding-horizontal">
      <h4 *ngIf="searchSegment === 'sant'">Sant Filter</h4>
      <h4 *ngIf="searchSegment === 'sangh'">Sangh Filter</h4>
      <h4 *ngIf="searchSegment === 'shravak'">Shravak Filter</h4>

      <div class="mb-20" *ngIf="['sant', 'shravak'].includes(searchSegment)">
        <label position="stacked" class="normal-label">Current Location</label>
        <input type="text" keyboardFix [(ngModel)]="current_location" id="currentLocation" #currentLocation
          placeholder="Current Location" maxlength="1000" class="location-input" (click)="initAutocompleteCurrent()">
      </div>

      <div class="mb-20" *ngIf="searchSegment === 'shravak'">
        <label position="stacked" class="normal-label">Native Location</label>
        <input type="text" keyboardFix [(ngModel)]="native_location" id="nativeLocation" #nativeLocation
          placeholder="Native Location" maxlength="1000" class="location-input" (click)="initAutocompleteNative()">
      </div>

      <div class="mb-20" *ngIf="searchSegment !== 'shravak'">
        <label position="stacked" class="normal-label">Dharm</label>
        <ion-select mode="ios" interface="action-sheet" [(ngModel)]="dharma_id" placeholder="Select"
          class="custom-select custom-arrow" (ionChange)="onDharmChange()">
          <ion-select-option [value]="dharma?.id" *ngFor="let dharma of dharmaDetails">{{dharma.name}}
          </ion-select-option>
        </ion-select>
      </div>

      <div class="mb-20" *ngIf="searchSegment !== 'shravak'">
        <label position="stacked" class="normal-label">Sampraday</label>
        <ionic-selectable [items]="sampradayDetails" itemValueField="id" itemTextField="name" [canSearch]="true"
          [(ngModel)]="sampraday_id" [disabled]="!dharma_id" [canClear]="true" placeholder="Select"
          (onChange)="onSampradayChange()" [isMultiple]="true">
        </ionic-selectable>
      </div>

      <div class="mb-20" *ngIf="searchSegment !== 'sangh' && searchSegment !== 'sant'">
        <label position="stacked" class="normal-label">Gender</label>
        <ion-select mode="ios" interface="action-sheet" [(ngModel)]="gender_id" placeholder="Select"
          class="custom-select custom-arrow">
          <ion-select-option [value]="1">Male</ion-select-option>
          <ion-select-option [value]="2">Female</ion-select-option>
        </ion-select>
      </div>

      <div class="mb-20" *ngIf="searchSegment !== 'sangh' && searchSegment !== 'shravak'">
        <label position="stacked" class="normal-label">Gender</label>
        <ion-select mode="ios" interface="action-sheet" [(ngModel)]="gender_id" placeholder="Select"
          class="custom-select custom-arrow">
          <ion-select-option [value]="1">Maharaj Saheb</ion-select-option>
          <ion-select-option [value]="2">Mahasati Ji</ion-select-option>
        </ion-select>
      </div>

      <div class="mb-20" *ngIf="searchSegment === 'sangh'">
        <label position="stacked" class="normal-label">Location</label>
        <input type="text" keyboardFix [(ngModel)]="location" id="personalLocation" #personalLocation
          placeholder="Location" maxlength="1000" class="location-input" (click)="initAutocomplete()">
      </div>

      <div class="filter-btn">
        <ion-button mode="md" class="si" expand="inline-block" (click)="advanceSearch()">Filter</ion-button>
        <ion-button mode="md" class="si" expand="inline-block" (click)="resetFilter()">Reset</ion-button>
      </div>
    </ion-content>
  </ng-template>
</ion-modal>
