<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">{{santService.updateSant ? 'Edit Sant': 'Add Sant'}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <div class="top-line">
    <ion-chip class="orange-color">
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
    <ion-chip>
      <ion-label></ion-label>
    </ion-chip>
  </div>
  <h2>Sant information</h2>
  <form [formGroup]="santInformationForm" novalidate class="global-form ion-padding-horizontal">

    <div class="mb-20">
      <label position="stacked" class="normal-label">Dharm<span class="required-label">*</span></label>
      <ion-select mode="ios" interface="action-sheet" formControlName="dharma_id" placeholder="Select"
        class="custom-select custom-arrow" area-label="Dharm" (ionChange)="onDharmChange()"
        [attr.disabled]="!santService?.reviewed_fields?.dharma && santService?.updateSant">
        <ion-select-option [value]="dharma?.id" *ngFor="let dharma of dharmaDetails">{{dharma.name}}</ion-select-option>
      </ion-select>
      <div
        *ngIf="santInformationForm.controls.dharma_id?.invalid && (santInformationForm.controls.dharma_id?.dirty || santInformationForm.controls.dharma_id?.touched)">
        <span *ngIf="santInformationForm.controls.dharma_id?.errors?.required" class="error">
          Dharm is required.
        </span>
      </div>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label"
        [ngClass]="{'disable-label': !santInformationForm?.controls?.dharma_id?.value || (!santService?.reviewed_fields?.sampraday && santService?.updateSant)}">Sampraday<span
          class="required-label">*</span></label>
      <ionic-selectable [items]="sampradayDetails" itemValueField="id" itemTextField="name" [canSearch]="true"
        formControlName="sampraday_id" [canClear]="true" placeholder="Select" [isMultiple]="false"
        [ngClass]="{'disable-select': !santInformationForm?.controls?.dharma_id?.value || (!santService?.reviewed_fields?.sampraday && santService?.updateSant)}">
      </ionic-selectable>
      <div
        *ngIf="santInformationForm.controls.sampraday_id?.invalid && (santInformationForm.controls.sampraday_id?.dirty || santInformationForm.controls.sampraday_id?.touched) && !(!santInformationForm?.controls?.dharma_id?.value || (!santService?.reviewed_fields?.sampraday && santService?.updateSant))">
        <span *ngIf="santInformationForm.controls.sampraday_id?.errors?.required" class="error">
          Sampraday is required.
        </span>
      </div>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label">Sant full name<span class="required-label">*</span></label>
      <ion-input placeholder="Full Name" formControlName="name"
        [attr.disabled]="!santInformationForm?.controls?.sampraday_id?.value || (!santService?.reviewed_fields?.name && santService?.updateSant)"
        (ionInput)="getSantList($event.target)"></ion-input>
      <div
        *ngIf="santInformationForm.controls.name?.invalid && (santInformationForm.controls.name?.dirty || santInformationForm.controls.name?.touched) && !(!santInformationForm?.controls?.sampraday_id?.value || (!santService?.reviewed_fields?.name && santService?.updateSant))">
        <span *ngIf="santInformationForm.controls.name?.errors?.required" class="error">
          Full name is required.
        </span>
      </div>
      <div class="search-data" *ngIf="santList.length !== 0">
        <ion-list>
          <ion-item *ngFor="let guru of santList">
            <ion-avatar slot="start">
              <img [src]="guru.avatar" />
            </ion-avatar>
            <ion-label>
              <h2>{{ guru.name }}</h2>
            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <div class="mb-20" style="position: relative;">
      <label position="stacked" class="normal-label">Honors</label>
      <ion-input placeholder="Honors" [(ngModel)]="honor" [ngModelOptions]="{standalone: true}"></ion-input>
      <ion-button (click)="addHonor(honor)" mode="md"><ion-icon name="add-circle"></ion-icon></ion-button>
    </div>

    <div class="honors-chip">
      <ion-chip *ngFor="let honor of santInformationForm?.controls?.honor?.value; let i = index">
        <ion-label>{{honor | titlecase}}</ion-label>
        <ion-icon name="close-circle" (click)="removeHonor(i)"></ion-icon>
      </ion-chip>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label">Birth date</label>
      <ion-input id="sant-birth-date-model" class="date-padding"
        [attr.disabled]="!santService?.reviewed_fields?.birth_date && santService?.updateSant">{{santBirthDate ?
        (santBirthDate | date: 'dd-MM-yyyy') : 'dd-mm-yyyy'}}</ion-input>
      <ion-modal trigger="sant-birth-date-model" showBackdrop="true" class="date-modal">
        <ng-template>
          <ion-datetime mode="ios" #santBirthDateValue [max]="currentDate" formControlName="birth_date"
            presentation="date" [showDefaultButtons]="true"
            (ionChange)="santBirthDate = formatDate(santBirthDateValue.value)" appGjDatetime>
            <ion-buttons slot="buttons">
              <ion-button color="primary" (click)="utilityService.defaultButton('CANCEL', santBirthDateValue)"
                mode="md">CANCEL
              </ion-button>
              <ion-button color="primary" (click)="utilityService.defaultButton('DONE', santBirthDateValue)"
                mode="md">DONE
              </ion-button>
            </ion-buttons>
          </ion-datetime>
        </ng-template>
      </ion-modal>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label">Gender<span class="required-label">*</span></label>
      <ion-select mode="ios" interface="action-sheet" formControlName="gender" placeholder="Select" area-label="Gender"
        class="custom-select custom-arrow"
        [attr.disabled]="!santService?.reviewed_fields?.gender && santService?.updateSant">
        <ion-select-option [value]="1">Maharaj Saheb</ion-select-option>
        <ion-select-option [value]="2">Mahasati Ji</ion-select-option>
      </ion-select>
      <div
        *ngIf="santInformationForm.controls.gender?.invalid && (santInformationForm.controls.gender?.dirty || santInformationForm.controls.gender?.touched)">
        <span *ngIf="santInformationForm.controls.gender?.errors?.required" class="error">
          Gender is required.
        </span>
      </div>
    </div>
  </form>
</ion-content>
<ion-footer class="sant">
  <ion-button class="si" expand="block" (click)="moveToNext(santInformationForm)" mode="md">Next</ion-button>
</ion-footer>