<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">Edit profile</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form [formGroup]="basicInfoForm" novalidate *ngIf="basicInfoForm" class="global-form shravak-edit-profile-form">
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Name<span class="required-label">*</span></ion-label>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-input placeholder="Name" formControlName="name" class="name"></ion-input>
      </ion-card-content>
    </ion-card>
    <div class="error"
      *ngIf="basicInfoForm.controls.name?.invalid && (basicInfoForm.controls.name?.dirty || basicInfoForm.controls.name?.touched)">
      <span *ngIf="basicInfoForm.controls.name?.errors?.required" class="error">
        Name is required.
      </span>
    </div>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <label>Dharm<span class="required-label">*</span></label>
          <ion-select mode="ios" interface="action-sheet" formControlName="dharma_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-select mode="ios" interface="action-sheet" formControlName="dharma" placeholder="Select"
          class="custom-arrow custom-select" [value]="userProfileData?.dharma_id">
          <ion-select-option [value]="dharma.id"
            *ngFor="let dharma of dharmaDetails">{{dharma.name}}</ion-select-option>
        </ion-select>
      </ion-card-content>
    </ion-card>
    <div class="error"
      *ngIf="basicInfoForm.controls.dharma?.invalid && (basicInfoForm.controls.dharma?.dirty || basicInfoForm.controls.dharma?.touched)">
      <span *ngIf="basicInfoForm.controls.dharma?.errors?.required" class="error">
        Dharm is required.
      </span>
    </div>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Jaati</ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="jati_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ionic-selectable [items]="jaatiDetails" itemValueField="id" itemTextField="name" [canSearch]="true"
          [canClear]="true" formControlName="jati" placeholder="Select">
        </ionic-selectable>
      </ion-card-content>
    </ion-card>
    <p (click)="jaatiRequest()">Jaati Missing? please write to us <span>Here</span></p>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Gender<span class="required-label">*</span></ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="gender_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-radio-group allow-empty-selection formControlName="gender">
          <ion-item>
            <ion-radio labelPlacement="start" color="primary" value="1">Male</ion-radio>
          </ion-item>
          <ion-item>
            <ion-radio labelPlacement="start" color="primary" value="2">Female</ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-card-content>
    </ion-card>
    <div class="error"
      *ngIf="basicInfoForm.controls.gender?.invalid && (basicInfoForm.controls.gender?.dirty || basicInfoForm.controls.gender?.touched)">
      <span *ngIf="basicInfoForm.controls.gender?.errors?.required" class="error">
        Gender is required.
      </span>
    </div>
    <ion-card class="calendar">
      <ion-card-header>
        <ion-card-title>
          <ion-label>Birthday<span class="required-label">*</span></ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="birth_date_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-input id="user-birth-date-model" class="date-padding">{{userBirthDateValue ? (userBirthDateValue | date:
          'dd-MM-yyyy') : 'dd-mm-yyyy'}}</ion-input>
        <ion-modal trigger="user-birth-date-model" showBackdrop="true" class="date-modal">
          <ng-template>
            <ion-datetime mode="ios" #userBirthDate [max]="maxDate" formControlName="birth_date" presentation="date"
              [showDefaultButtons]="true" (ionChange)="userBirthDateValue = formatDate(userBirthDate.value)"
              appGjDatetime>
              <ion-buttons slot="buttons">
                <ion-button color="primary" (click)="utilityService.defaultButton('CANCEL', userBirthDate)"
                  mode="md">CANCEL
                </ion-button>
                <ion-button color="primary" (click)="utilityService.defaultButton('DONE', userBirthDate)" mode="md">DONE
                </ion-button>
              </ion-buttons>
            </ion-datetime>
          </ng-template>
        </ion-modal>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Mother tongue</ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="mother_tongue_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-select mode="ios" interface="action-sheet" formControlName="mother_tongue" placeholder="Select"
          class="custom-select custom-arrow" [value]="userProfileData?.mother_tongue_id">
          <ion-select-option [value]="motherTongue.id"
            *ngFor="let motherTongue of motherTongueDetails">{{motherTongue.name}}</ion-select-option>
        </ion-select>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Blood Group</ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="blood_group_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-select mode="ios" interface="action-sheet" formControlName="blood_group" placeholder="Select"
          class="custom-select custom-arrow" [value]="userProfileData?.blood_group_id">
          <ion-select-option [value]="bloodGroup.id"
            *ngFor="let bloodGroup of bloodGroupDetails">{{bloodGroup.name}}</ion-select-option>
        </ion-select>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Marital status</ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="marital_status_privacy" placeholder="Privacy"
            class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-radio-group allow-empty-selection formControlName="marital_status">
          <ion-item>
            <ion-radio labelPlacement="start" color="primary" value="Single">Single</ion-radio>
          </ion-item>
          <ion-item>
            <ion-radio labelPlacement="start" color="primary" value="Married">Married</ion-radio>
          </ion-item>
          <ion-item>
            <ion-radio labelPlacement="start" color="primary" value="Separated">Separated</ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-card-content>
    </ion-card>
    <ion-card class="calendar" *ngIf="basicInfoForm.controls.marital_status.value === 'Married'">
      <ion-card-header>
        <ion-card-title>
          <ion-label>Marriage anniversary</ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="marriage_anniversary_privacy"
            placeholder="Privacy" class="privacy-label custom-select custom-arrow">
            <ion-select-option [value]="privacy.value"
              *ngFor="let privacy of privacyList">{{privacy.name}}</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-input id="marriage-date-model" class="date-padding">{{marriageDateValue ? (marriageDateValue | date:
          'dd-MM-yyyy') : 'dd-mm-yyyy'}}</ion-input>
        <ion-modal trigger="marriage-date-model" showBackdrop="true" class="date-modal">
          <ng-template>
            <ion-datetime mode="ios" #marriageDate [max]="currentDate" formControlName="marriage_anniversary"
              presentation="date" [showDefaultButtons]="true"
              (ionChange)="marriageDateValue = formatDate(marriageDate.value)" appGjDatetime>
              <ion-buttons slot="buttons">
                <ion-button color="primary" (click)="utilityService.defaultButton('CANCEL', marriageDate)"
                  mode="md">CANCEL
                </ion-button>
                <ion-button color="primary" (click)="utilityService.defaultButton('DONE', marriageDate)" mode="md">DONE
                </ion-button>
              </ion-buttons>
            </ion-datetime>
          </ng-template>
        </ion-modal>
      </ion-card-content>
    </ion-card>
  </form>
</ion-content>
<ion-footer>
  <ion-button class="si" expand="block" (click)="onSubmit(basicInfoForm)" mode="md">Save</ion-button>
</ion-footer>