<app-generic-header showBack="true" [headerText]="'userProfile,title' | translate">
</app-generic-header>

<ion-content class="colorBG">
  <div class="header-background-style-card">
  </div>
  <div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;">
    <div class="user-info">
      <div class="user-image-container">
        <div class="user-image">
          <img [ngClass]="direction == 'ltr'? 'img':'img-ar' "
            [src]="personalInfo?.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
            alt="Team Member Image" />
        </div>
        <div [ngClass]=" direction == 'ltr' ?  'changeImgBtn' : 'changeImgBtn-ar'">
          <button ion-button icon-only menuToggle class="menubutton">
            <img class="changeIcon" src="../assets/imgs/edit_icon.png">
          </button>
        </div>
      </div>
      <div style="margin-top: 18px;">
        <h1>{{User_name_Emp}}</h1>
        <span>{{personalInfo?.EMPLOYEE_EMAIL_ADDRESS}}</span>
      </div>
      <div>
        <ion-row>
          <ion-col style="border-right: 1px solid rgb(221 221 221);">
            <p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
            <span class="Boldtext">{{personalInfo?.JOB_NAME}}</span>
          </ion-col>
          <ion-col>
            <p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
            <span class="Boldtext">{{personalInfo?.EMPLOYEE_NUMBER}}</span>
          </ion-col>
        </ion-row>
      </div>
    </div>
    <div class="user-actions">
      <ion-row class="ion-justify-content-center">
        <ion-col [size]="4" (click)="selectedSegment('personal')">
          <div class="action-button col-button">
            <img *ngIf="!personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info@2x.png">
            <img *ngIf="personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info-a@2x.png">
            <span style="font-size: 11px;">{{ts.trPK('general','personal-info')}}</span>
          </div>
        </ion-col>
        <ion-col [size]="4" (click)="selectedSegment('basic')">
          <div class="action-button col-button">
            <img *ngIf="!basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@2x.png">
            <img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
            <span style="font-size: 11px;">{{ts.trPK('general','basic-details')}}</span>
          </div>
        </ion-col>
        <ion-col [size]="4" (click)="selectedSegment('address')">
          <div class="action-button col-button">
            <img *ngIf="!addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main-address@2x.png">
            <img *ngIf="addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main address-a@2x.png">
            <span style="font-size: 11px;">{{ts.trPK('userProfile','address')}} </span>
          </div>
        </ion-col>
      </ion-row>
    </div>
    <ion-grid *ngIf="personalInfo" [ngClass]="direction === 'ltr'? 'grid-card':'grid-card-ar' ">
      <div [ngClass]=" direction == 'ltr' ?  'gridService-en' : 'gridService-ar'"
        style="background: #002948; border-radius: 0px 0px 10px 10px;">
        <ion-row>
          <ion-col>
            <label
              style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
              {{ 'general, appreciate-service' | translate}}
            </label>
          </ion-col>
        </ion-row>
        <ion-row [ngClass]=" direction == 'ltr' ?  'service-row-en' : 'service-row-ar'">
          <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
            <ion-grid>
              <ion-row>
                <ion-col class="text-years">
                  <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}
                    {{ts.trPK('userProfile','years')}}</label>
                  <!-- <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label> -->
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
            <ion-grid>
              <ion-row>
                <ion-col class="text-years">
                  <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}
                    {{ts.trPK('userProfile','months')}}</label>
                  <!-- <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>       -->
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
            <ion-grid>
              <ion-row>
                <ion-col class="text-years">
                  <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}
                    {{ts.trPK('absenceList','days')}}</label>
                  <!-- <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>       -->
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
        </ion-row>
      </div>
    </ion-grid>
  </div>

  <br>

  <ion-card *ngIf="personalInfoSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
    <ion-card-content>
      <ion-label>
        <h1 class="header-label-text-form">{{ts.trPK('userProfile','personal-informaion')}}</h1>
      </ion-label>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('userProfile','category')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">part-time</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('userProfile','address')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">DR.Sulaiman Alhabib Medical Group</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('userProfile','phone-no')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">0567845661</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('userProfile','busG')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">CORP Cloud Solutions</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('userProfile','payrol')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">Cloud Solutions Payroll</h3>
      <br>
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="basicDetailsSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
    <ion-card-content *ngIf="!editBasic">
      <ion-grid>
        <ion-row>
          <ion-col size="10">
            <ion-label>
              <h1 class="header-label-text-form">{{ts.trPK('general','basic-details')}}</h1>
            </ion-label>
          </ion-col>

          <ion-col size="2">
            <img style="width: 70%;" src="../assets/imgs/profile-icons/editing@2x.png"
              (click)="allowEdit(1)">
          </ion-col>
        </ion-row>
      </ion-grid>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','full-name')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">ENAD HILAL NASSER MOHAMMED</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','marital-status')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">Married</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','birth_date')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">01-FEB-1991</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','civil-identity-number')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">2093486013</h3>
      <br>
    </ion-card-content>

    <ion-card-content *ngIf="editBasic" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
      <ion-label>
        <h1 class="header-label-text-form">{{ts.trPK('general','basic-details')}}</h1>
      </ion-label>

      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','effective-date')}}</h3>
      </ion-label>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>MMMM</ion-label>
        <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','title')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="mr">Mr</ion-select-option>
          <ion-select-option value="ms">Miss</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','family-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 >
            {{ts.trPK('userProfile','preferred-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','previous-family-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','father-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','grand-father-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" required type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','arabic-first-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','arabic-father-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','arabic-grand-father-name')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
    </ion-card-content>
  </ion-card>

  <ion-card [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
    <ion-card-content *ngIf="editBasic">
      <ion-label>
        <h1 class="header-label-text-form">{{ts.trPK('general','other')}}</h1>
      </ion-label>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','gender')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="m">Male</ion-select-option>
          <ion-select-option value="f">Female</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','marital-status')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="s">Singal</ion-select-option>
          <ion-select-option value="m">Married</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','nationality')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="mr">Mr</ion-select-option>
          <ion-select-option value="ms">Miss</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','religion')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="i">Islam</ion-select-option>
          <ion-select-option value="o">Other</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','education-level')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="u">University</ion-select-option>
          <ion-select-option value="o">other</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
    <ion-card-content *ngIf="!editAddress">
      <ion-grid>
        <ion-row>
          <ion-col size="10">
            <ion-label>
              <h1 class="header-label-text-form">{{ts.trPK('general','main-address')}}</h1>
            </ion-label>
          </ion-col>

          <ion-col size="2">
            <img style="width: 70%;" src="../assets/imgs/profile-icons/editing@2x.png"
              (click)="allowEdit(2)">
          </ion-col>
        </ion-row>
      </ion-grid>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','address')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">Riyadh</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','street')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">-</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','area')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">-</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','p-o-box')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">22617</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','city')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">Riyadh</h3>
      <br>
      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','postal-code')}}</h3>
      </ion-label>
      <h3 class="result-label-text-form">11416</h3>
      <br>
    </ion-card-content>

    <ion-card-content *ngIf="editAddress">
      <ion-label>
        <h1 class="header-label-text-form">{{ts.trPK('general','address')}}</h1>
      </ion-label>

      <ion-label>
        <h3 class="type-label-text-form">{{ts.trPK('general','effective-date')}}</h3>
      </ion-label>
      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>MMMM</ion-label>
        <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label>
          <h3 class="type-label-text-form">
            {{ts.trPK('general','nationality')}}
          </h3>
        </ion-label>
        <ion-select placeholder="Select One">
          <ion-select-option value="mr">Mr</ion-select-option>
          <ion-select-option value="ms">Miss</ion-select-option>
        </ion-select>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','address')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','street')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','area')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','p-o-box')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','city')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
      <br>

      <ion-item lines="none" class="item-input-login" style="--background: white">
        <ion-label position="floating">
          <h3 class="type-label-text-form">
            {{ts.trPK('userProfile','postal-code')}}
          </h3>
        </ion-label>
        <ion-input class="login-input" type="text"></ion-input>
      </ion-item>
    </ion-card-content>
  </ion-card>


  <!-- <div class="header-div">
    <div>
      <div class="centerDiv homeBox">
          <img class="profileImg" [src]="user_image">
         </div>
      <div *ngIf="personalInfo">
        <p class="empName">{{User_name_Emp}}</p>
            <p class="empJob"> {{User_Job_name}}</p>
      </div>
    </div>
  </div>    

  <ion-grid *ngIf="personalInfo" style="position: relative; display: block; z-index: 5;">
    <div [ngClass]=" direction == 'ltr' ?  'gridService-en' : 'gridService-ar'" style="background: #0B4775; border-radius: 20px;">
      <ion-row>
        <ion-col>
          <label style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
            {{ 'general, appreciate-service' | translate}}
          </label>
        </ion-col>
      </ion-row>
      <ion-row [ngClass]=" direction == 'ltr' ?  'service-row-en' : 'service-row-ar'">
        <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
          <ion-grid>
            <ion-row style="text-align:center">
              <ion-col>
                <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-col>
        <ion-col>
          <div class="verticalLine"></div>
        </ion-col>
        <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
          <ion-grid>
            <ion-row style="text-align:center">
              <ion-col>
                <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>      
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-col>
        <ion-col>
          <div class="verticalLine"></div>
        </ion-col>
        <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
          <ion-grid>
            <ion-row style="text-align:center">
              <ion-col>
                <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
              </ion-col>
              <ion-col>
                <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>      
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>


<div class="list">
  <ion-list class="list-ios">
    <div class="p">
      <p>{{ts.trPK('userProfile','Years of Services')}}</p>
    </div>

    <ion-item class="itemline" (click)="openEditprofile()">
      <ion-thumbnail slot="start" class="menu-thumb">
        <img style= "height: 22px !important;"  src="../assets/imgs/profile_icon.png" item-left>
      </ion-thumbnail>
 
      <ion-label class="profile">
        {{ts.trPK('userProfile','edit-profile')}}
      </ion-label>
      <ion-icon [ngClass]=" direction == 'ltr' ?  'arrow' : 'arrow-ar'" name="arrow-forward"  item-right></ion-icon>
    </ion-item>

    <ion-item class="itemlins" (click)="openPerormance()">
      <ion-thumbnail slot="start" class="menu-thumb">
        <ion-icon style= "width: 23px; height: 24px !important;"  name="speedometer" item-left></ion-icon>
    
      </ion-thumbnail>
      <ion-label class="profile">
        {{ts.trPK('userProfile','performance-evaluation')}}
      </ion-label>
      <ion-icon [ngClass]=" direction == 'ltr' ?  'arrow' : 'arrow-ar'" name="arrow-forward"  item-right></ion-icon>
    </ion-item>

  </ion-list>
</div> -->


  <ion-footer *ngIf="editBasic||editAddress">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-button style="--background: #CB3332; background: white; width: 100%;" (click)="disableEdit(1)">Cancel
          </ion-button>
        </ion-col>
        <ion-col>
          <ion-button style="--background: #20A169; background: white; width: 100%;" (click)="presentModal()">Update</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-footer>

</ion-content>