<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">{{ title }} Vihaar</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <div>
    <h3 style="padding-bottom: 3px;">Sant name</h3>
    <p style="text-transform: capitalize; font-weight: bold;">{{ stateManagementService?.santDetails?.name }}</p>
    <h3>Vihaar details</h3>
    <p>
      1) Only <b>Daily Vihaar</b> entry allowed<br />
      2) Only <b>Two Vihaar entry per day</b> allowed<br />
      3) Vihaar can be added upto <b>15 days</b><br />
      4) Vihaar will be <b>applicable to all Thana's</b>
    </p>
    <form [formGroup]="viharInfoForm" novalidate class="global-form ion-padding-horizontal">
      <ng-container *ngTemplateOutlet="radioTemplate; context:{ addressType: 'from', value: fromAddressType }">
      </ng-container>

      <div class="mb-20" *ngIf="fromAddressType === 1">
        <label position="stacked" class="normal-label">From location<span class="required-label">*</span></label>
        <input type="text" keyboardFix formControlName="viharFromPlace" id="fromLocation" #fromLocation
          placeholder="..." maxlength="1000" class="location-input" (click)="initAutocompleteStartPlace()"
          (keyup)="removeLatAndLongStartPlace()">
        <ng-container *ngTemplateOutlet="requiredError; context: {
            control: viharInfoForm.controls.viharFromPlace,
            message: 'Vihaar from place is required.'
          }"> </ng-container>
      </div>

      <ng-container *ngTemplateOutlet="sanghSelect; context:{
        addressType: 'from',
        value: fromAddressType,
        control: viharInfoForm.controls.viharFromPlace }"> </ng-container>
      <ng-container *ngTemplateOutlet="radioTemplate; context:{ addressType: 'to', value: toAddressType }">
      </ng-container>

      <div class="mb-20" *ngIf="toAddressType === 1">
        <label position="stacked" class="normal-label">To location<span class="required-label">*</span></label>
        <input type="text" keyboardFix formControlName="viharToPlace" id="toLocation" #toLocation placeholder="..."
          label="Stacked label" labelPlacement="stacked" maxlength="1000" class="location-input"
          (click)="initAutocompleteEndPlace()" (keyup)="removeLatAndLongEndPlace()">
        <ng-container *ngTemplateOutlet="requiredError; context: {
            control: viharInfoForm.controls.viharToPlace,
            message: 'Vihaar to place is required.'
          }"> </ng-container>
      </div>

      <ng-container *ngTemplateOutlet="sanghSelect; context:{
          addressType: 'to',
          value: toAddressType,
          control: viharInfoForm.controls.viharToPlace }"> </ng-container>

      <div class="mb-20" button="true" id="start-date-model">
        <label position="stacked" class="normal-label">Start date<span class="required-label">*</span></label>
        <ion-input id="start-date-model" class="date-padding">{{startDateValue ? (startDateValue | date: 'dd-MM-yyyy') :
          'dd-mm-yyyy'}}</ion-input>
        <ion-modal trigger="start-date-model" showBackdrop="true" class="date-modal">
          <ng-template>
            <ion-datetime mode="ios" #startDate [max]="nextDate" [min]="currentDate" formControlName="startDate"
              presentation="date" [showDefaultButtons]="true" (ionChange)="startDateValue = formatDate(startDate.value)"
              appGjDatetime>
              <ion-buttons slot="buttons">
                <ion-button color="primary" (click)="utilityService.defaultButton('CANCEL', startDate)" mode="md">CANCEL
                </ion-button>
                <ion-button color="primary" (click)="utilityService.defaultButton('DONE', startDate)" mode="md">DONE
                </ion-button>
              </ion-buttons>
            </ion-datetime>
          </ng-template>
        </ion-modal>
        <ng-container *ngTemplateOutlet="requiredError; context: {
          control: viharInfoForm.controls.startDate,
          message: 'Start date is required.'
        }"> </ng-container>
      </div>

      <div class="mb-20" button="true" id="start-time-model">
        <label position="stacked" class="normal-label">Start time<span class="required-label">*</span></label>
        <ion-text> {{ startTime }}</ion-text>
        <ng-container *ngTemplateOutlet="requiredError; context: {
          control: viharInfoForm.controls.startTime,
          message: 'Start time is required.'
        }"> </ng-container>
        <ion-modal trigger="start-time-model" show-backdrop="true" class="date-modal">
          <ng-template>
            <ion-datetime mode="ios" #popoverStartTime presentation="time" hourCycle="12h" formControlName="startTime"
              (ngModelChange)="startTime = formatTime(popoverStartTime.value)" [showDefaultButtons]="true">
            </ion-datetime>
          </ng-template>
        </ion-modal>
      </div>
    </form>
  </div>
  <p class="agreed-content">
    <ion-checkbox slot="start" [(ngModel)]="firstConfirmationFlag" mode="md"></ion-checkbox>
    <label class="ml-8">I agree that vihaar information is accurate</label>
  </p>
  <p class="agreed-content">
    <ion-checkbox slot="start" [(ngModel)]="secondConfirmationFlag" mode="md"></ion-checkbox>
    <label class="ml-8">I agree that my cell number will be public for shravaks to connect with me for any
      clarifications or
      changes to vihar</label>
  </p>
</ion-content>
<ion-footer class="sant">
  <ion-button class="si" expand="block" (click)="submitData(viharInfoForm)"
    [disabled]="!(this.firstConfirmationFlag && this.secondConfirmationFlag)" mode="md">{{ title }} Vihaar</ion-button>
</ion-footer>

<ng-template #radioTemplate let-value="value" let-addressType="addressType" let-items="items">
  <ion-radio-group (ionChange)="updateAddressType($event, addressType)" [value]="value" mode="md" class="mb-5">
    <ng-container *ngFor="let item of [{ label: 'By Location', value: 1 }, { label: 'By Sangh', value: 2 }]">
      <ion-item>
        <ion-radio [value]="item.value" labelPlacement="end">{{ item.label }}</ion-radio>
      </ion-item>
    </ng-container>
  </ion-radio-group>
</ng-template>

<ng-template #sanghSelect let-value="value" let-addressType="addressType" let-control="control" class="global-form">

  <div class="mb-20 search" *ngIf="value === 2">
    <ion-label position="stacked" class="mb-3 normal-label">{{ addressType | titlecase }} sangh<span
        class="required-label">*</span></ion-label>
    <ionic-selectable class="ion-no-margin" [items]="sanghList" itemValueField="id" itemTextField="name"
      #sanghListComponent [canSearch]="true" [searchDebounce]="250" [canClear]="false" (onSearch)="searchSangh($event)"
      (onChange)="addSangh($event, addressType)" placeholder="Select sangh" searchPlaceholder="Search sangh"
      [ngModel]="addressType === 'from' ? fromSelectedSangh: toSelectedSangh" [hasInfiniteScroll]="true"
      (onInfiniteScroll)="getMoreSangh($event)">
      <ng-template ionicSelectableItemTemplate let-sangh="item">
        <div class="d-flex ion-align-items-center ion-margin-start">
          <ion-avatar slot="start" class="sangh-avatar">
            <img [src]="sangh.avatar" />
          </ion-avatar>
          <ion-label class="ion-text-wrap">
            <p>{{ sangh.name }}</p>
          </ion-label>
        </div>
      </ng-template>
    </ionic-selectable>
    <ng-container *ngTemplateOutlet="requiredError; context: {
      control: control,
      message: 'Vihaar '+addressType+' place is required.'
    }"> </ng-container>
  </div>
</ng-template>

<ng-template #requiredError let-control="control" let-message="message">
  <ng-container *ngIf="control.touched && control.errors?.required">
    <span class="error"> {{ message }} </span>
  </ng-container>
</ng-template>
