<ion-header>
  <ion-toolbar mode="ios" class="sangh">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Add Sangh</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sangh">
  <div class="top-line">
    <div class="stepper">
      <div class="step sangh-stepper"></div>
      <div class="step"></div>
      <div class="step"></div>
      <div class="step"></div>
      <div class="step"></div>
    </div>
  </div>
  <h2>Sangh Information</h2>
  <form [formGroup]="sanghInformationForm" novalidate class="global-form ion-padding-horizontal">

    <div class="mb-20">
      <label position="stacked" class="normal-label  mb-3">Sangh Type <span class="required-label">*</span></label>
      <ion-select mode="ios" interface="action-sheet" formControlName="sangh_type" placeholder="Select"
        class="custom-select custom-arrow" (ionChange)="onSanghTypeChange()">
        <ion-select-option [value]="sangh.value" *ngFor="let sangh of sanghTypes">{{sangh.text}}</ion-select-option>
      </ion-select>
      <div
        *ngIf="sanghInformationForm.controls.sangh_type.invalid && (sanghInformationForm.controls.sangh_type.dirty || sanghInformationForm.controls.sangh_type.touched)">
        <span *ngIf="sanghInformationForm.controls.sangh_type.errors?.required" class="error">
          Sangh type is required.
        </span>
      </div>
    </div>

    <div class="mb-20" *ngIf="+santService.sanghInfoForm?.controls?.sangh_type.value === 2">
      <label position="stacked" class="normal-label  mb-3">Derasar Type<span class="required-label">*</span></label>
      <ion-select mode="ios" interface="action-sheet" formControlName="type_of_template" placeholder="Select"
        class="custom-select custom-arrow" (ionChange)="onSanghTypeChange()">
        <ion-select-option [value]="temple.id" *ngFor="let temple of templeType">{{temple.value}}</ion-select-option>
      </ion-select>
      <div
        *ngIf="sanghInformationForm.controls.type_of_template.invalid && (sanghInformationForm.controls.type_of_template.dirty || sanghInformationForm.controls.type_of_template.touched)">
        <span *ngIf="sanghInformationForm.controls.type_of_template.errors?.required" class="error">
          Derasar type is required.
        </span>
      </div>
    </div>

    <div class="reset-dharm" (click)="resetDharm(); $event.stopPropagation()"
      *ngIf="sanghInformationForm?.controls?.dharma_id?.value">Reset
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label  mb-3">Dharm</label>
      <ion-select mode="ios" interface="action-sheet" formControlName="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">
      <label position="stacked" [ngClass]="{'disable-label': !sanghInformationForm?.controls?.dharma_id?.value}"
        class="normal-label mb-3">
        Sampraday</label>
      <ionic-selectable [items]="sampradayDetails" itemValueField="id" itemTextField="name" [canSearch]="true"
        formControlName="sampraday_id" [ngClass]="{'disable-select': !sanghInformationForm?.controls?.dharma_id?.value}"
        [canClear]="true" placeholder="Select" [isMultiple]="false">
      </ionic-selectable>
    </div>





    <div class="mb-20" *ngIf="+santService.sanghInfoForm?.controls?.sangh_type.value === 2">
      <div class="mb-20">
        <label position="stacked" class="normal-label mb-3">
          Mulnayak Bhagwan Name <span class="required-label">*</span></label>
        <ionic-selectable [items]="mulnayakBhagwan" itemValueField="id" itemTextField="value" [canSearch]="true"
          formControlName="mulnayak_bhagwan_name" [canClear]="true" placeholder="Select" [isMultiple]="false">
        </ionic-selectable>
        <div
          *ngIf="sanghInformationForm.controls.mulnayak_bhagwan_name.invalid && (sanghInformationForm.controls.mulnayak_bhagwan_name.dirty || sanghInformationForm.controls.mulnayak_bhagwan_name.touched)">
          <span *ngIf="sanghInformationForm.controls.mulnayak_bhagwan_name.errors?.required" class="error">
            Mulnayak Bhagwan name is required.
          </span>
        </div>
      </div>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label  mb-3">Sangh name<span class="required-label">*</span></label>
      <ion-input placeholder="Sangh name" formControlName="name" (ionInput)="getSanghList($event.target)"></ion-input>
      <div
        *ngIf="sanghInformationForm.controls.name?.invalid && (sanghInformationForm.controls.name?.dirty || sanghInformationForm.controls.name?.touched)">
        <span *ngIf="sanghInformationForm.controls.name?.errors?.required" class="error">
          Sangh name is required.
        </span>
      </div>
      <div class="search-data" *ngIf="sanghList.length !== 0">
        <ion-list>
          <ion-item *ngFor="let sangh of sanghList">
            <ion-avatar slot="start">
              <img [src]="sangh.avatar" />
            </ion-avatar>
            <ion-label>
              <p>{{ sangh.name }}</p>
            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label  mb-3">Trust Registration number</label>
      <ion-input placeholder="Registration number" formControlName="reg_number"></ion-input>
    </div>

    <div class="mb-20">
      <label position="stacked" class="normal-label  mb-3">Trust Registration date</label>
      <ion-input id="reg-date-model" class="date-padding">{{sanghRegDate ? (sanghRegDate | date: 'dd-MM-yyyy') :
        'dd-mm-yyyy'}}</ion-input>
      <ion-modal trigger="reg-date-model" showBackdrop="true" class="date-modal">
        <ng-template>
          <ion-datetime mode="ios" #dateValue [max]="currentDate" formControlName="reg_date" presentation="date"
            [showDefaultButtons]="true" (ionChange)="sanghRegDate = formatDate(dateValue.value)" appGjDatetime>
            <ion-buttons slot="buttons">
              <ion-button mode="md" color="primary" (click)="utilityService.defaultButton('CANCEL', dateValue)">CANCEL
              </ion-button>
              <ion-button mode="md" color="primary" (click)="utilityService.defaultButton('DONE', dateValue)">DONE
              </ion-button>
            </ion-buttons>
          </ion-datetime>
        </ng-template>
      </ion-modal>
    </div>

  </form>
</ion-content>
<ion-footer class="sangh">
  <ion-button mode="md" class="si" expand="block" (click)="moveToNext(sanghInformationForm)">Next</ion-button>
</ion-footer>