<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">{{workData ? 'Edit' : 'Add'}} work info</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form [formGroup]="workForm" novalidate *ngIf="workForm" class="global-form shravak-edit-work-form">
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <ion-label>Profession<span class="required-label">*</span></ion-label>
          <ion-select mode="ios" interface="action-sheet" formControlName="profession_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]="professionDetails" itemValueField="id" itemTextField="name" [canSearch]="true"
          [canClear]="true" formControlName="profession_id" placeholder="Select" (onChange)="changeProfession($event)">
        </ionic-selectable>
      </ion-card-content>
      <ion-card-content *ngIf="workForm.controls.profession_id.value?.name === 'Other'">
        <ion-input type="text" placeholder="Profession" formControlName="profession"
          area-label="Profession"></ion-input>
      </ion-card-content>
    </ion-card>
    <div class="error"
      *ngIf="workForm.controls.profession_id?.invalid && (workForm.controls.profession_id?.dirty || workForm.controls.profession_id?.touched)">
      <span *ngIf="workForm.controls.profession_id?.errors?.required" class="error">
        Profession is required.
      </span>
    </div>
    <ng-template [ngIf]="professionDetails?.length && workForm.controls.profession_id.value?.name !== 'Housewife'">
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>Company name<span class="required-label">*</span></ion-label>
            <ion-select mode="ios" interface="action-sheet" value="public" formControlName="company_name_privacy"
              class="custom-select custom-arrow privacy-label">
              <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 type="text" placeholder="Company name" formControlName="company_name"
            area-label="Company name"></ion-input>
        </ion-card-content>
      </ion-card>
      <div class="error"
        *ngIf="workForm.controls.company_name?.invalid && (workForm.controls.company_name?.dirty || workForm.controls.company_name?.touched)">
        <span *ngIf="workForm.controls.company_name?.errors?.required" class="error">
          Company name is required.
        </span>
      </div>
      <div class="error"
        *ngIf="!workForm.controls.profession_id?.invalid && workForm.controls.profession?.invalid && (workForm.controls.profession?.dirty || workForm.controls.profession?.touched)">
        <span *ngIf="workForm.controls.profession?.errors?.required" class="error">
          Profession is required.
        </span>
      </div>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>Speciality<span class="required-label">*</span></ion-label>
            <ion-select mode="ios" interface="action-sheet" formControlName="profession_speciality_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 type="text" placeholder="Speciality" formControlName="profession_speciality"
            area-label="Speciality"></ion-input>
        </ion-card-content>
      </ion-card>
      <div class="error"
        *ngIf="!workForm.controls.profession_speciality?.invalid && workForm.controls.profession_speciality?.invalid && (workForm.controls.profession_speciality?.dirty || workForm.controls.profession_speciality?.touched)">
        <span *ngIf="workForm.controls.profession_speciality?.errors?.required" class="error">
          Speciality is required.
        </span>
      </div>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>Position</ion-label>
            <ion-select mode="ios" interface="action-sheet" formControlName="position_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 type="text" placeholder="Position" formControlName="position" area-label="Position"></ion-input>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>Website</ion-label>
            <ion-select mode="ios" interface="action-sheet" value="public" formControlName="website_privacy"
              class="custom-select custom-arrow privacy-label">
              <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 type="text" placeholder="Website" formControlName="website" area-label="Website"></ion-input>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>City</ion-label>
            <ion-select mode="ios" interface="action-sheet" value="public" formControlName="city_privacy"
              class="custom-select custom-arrow privacy-label">
              <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 type="text" placeholder="City" formControlName="city" area-label="City"></ion-input>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>About</ion-label>
            <ion-select mode="ios" interface="action-sheet" value="public" formControlName="about_privacy"
              class="custom-select custom-arrow privacy-label">
              <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 type="text" placeholder="About" formControlName="about" area-label="About"></ion-input>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-content>
          <ion-item>
            <ion-checkbox color="primary" formControlName="is_working" area-label="Currently I work here"
              labelPlacement="start" slot="end" (ionChange)="onChange($event)">
              <label>Currently I work here</label>
            </ion-checkbox>
          </ion-item>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-label>Work Duration</ion-label>
            <ion-select mode="ios" interface="action-sheet" value="public" formControlName="work_duration_privacy"
              class="custom-select custom-arrow privacy-label">
              <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-item class="fromdate">
            <label class="normal-label" style="width: 75px;">From<span class="required-label">*</span></label>
            <ion-input id="start-year">{{startYearValue ? startYearValue : 'Select year'}}</ion-input>
          </ion-item>
        </ion-card-content>
      </ion-card>
      <ion-modal trigger="start-year" show-backdrop="true" class="date-modal">
        <ng-template>
          <ion-datetime mode="ios" #startYear presentation="year"
            (ionChange)="startYearValue = formatDate(startYear.value, 1)" formControlName="start_year"
            [showDefaultButtons]="true" [max]="endYearValue || undefined">
            <span slot="title">Select year</span>
          </ion-datetime>
        </ng-template>
      </ion-modal>
      <div class="error message"
        *ngIf="workForm.controls.start_year?.invalid && (workForm.controls.start_year?.dirty || workForm.controls.start_year?.touched)">
        <span *ngIf="workForm.controls.start_year?.errors?.required">
          * From year is required.
        </span>
      </div>
      <ion-card>
        <ion-card-content>
          <ion-item class="fromdate" *ngIf="!workForm.controls.is_working.value">
            <label class="normal-label" style="width: 75px;">To<span class="required-label">*</span></label>
            <ion-input id="end-year">{{endYearValue ? endYearValue : 'Select year'}}</ion-input>
          </ion-item>
        </ion-card-content>
      </ion-card>
      <ion-modal trigger="end-year" show-backdrop="true" class="date-modal" *ngIf="!workForm.controls.is_working.value">
        <ng-template>
          <ion-datetime mode="ios" #endYear presentation="year"
            (ionChange)="endYearValue = formatDate(endYear.value, 2)" formControlName="end_year"
            [showDefaultButtons]="true" [min]="startYearValue || undefined">
            <span slot="title">Select year</span>
          </ion-datetime>
        </ng-template>
      </ion-modal>
      <div class="error message"
        *ngIf="workForm.controls.end_year?.invalid && (workForm.controls.end_year?.dirty || workForm.controls.end_year?.touched)">
        <span *ngIf="workForm.controls.end_year?.errors?.required">
          * To year is required.
        </span>
      </div>
    </ng-template>
  </form>
</ion-content>
<ion-footer>
  <ion-button class="si" expand="block" (click)="onSubmit()" mode="md">Save</ion-button>
</ion-footer>