<ion-header>
  <ion-toolbar class="header-toolbar-new">
      <ion-buttons slot="start">
        <nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
      </ion-buttons>
      <ion-title>EMPLOYEE DETAIL</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="contentBg">
    <div class="result-graph" style="padding-top: 12px;">
        <div class="user-info">
          <div class="user-image-container">
            <div class="user-image">
              <img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
            </div>
          </div>
          <h1>{{employee.EMPLOYEE_NAME}}</h1>
          <span>{{employee.JOB_NAME}}</span>
        </div>
        <div class="user-actions">
            <ion-row class="ion-justify-content-center">
                    <ion-col [size]="4">
                        <div class="action-button col-button">
                            <a class="action-button-icon" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
                              <img src="../assets/imgs/call_icon.png">
                            </a>
                            <span>Call</span>
                        </div>
                    </ion-col>
                    <ion-col [size]="4" (click)="getMenuEntries(employee)">
                      <div class="action-button col-button">
                          <span class="action-button-icon">
                            <img src="../assets/imgs/create_request_icon.png">
                          </span>
                          <span>Create Request</span>
                      </div>
                    </ion-col>
                    <ion-col [size]="4" style="opacity:0.3;">
                      <div class="action-button col-button">
                          <span class="action-button-icon">
                            <img src="../assets/imgs/message_icon.png">
                          </span>
                          <span>Message</span>
                      </div>
                    </ion-col>
            </ion-row>
        </div>
    </div>

    <div class="segments-container">
      <ion-segment
          (ionChange)="segmentChanged($event)"
          [value]="activeSegment">
          <ion-segment-button
              value="Attendance"
              [ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
              <ion-label>Attendance</ion-label>
          </ion-segment-button>
          <ion-segment-button
              value="Team Members"
              [ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
              <ion-label>Team Members</ion-label>
          </ion-segment-button>
          <ion-segment-button
              value="About"
              [ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
              <ion-label>About</ion-label>
          </ion-segment-button>
      </ion-segment>
    </div>

    <div *ngIf="activeSegment === 'Attendance'">
      <div>
        <p style="margin-bottom: 1px;">
          {{ts.trPK('myTeam','todayAttendance')}}
        </p>
        <ion-row style="margin: 0 -5px;">
          <ion-col [size]="4">
            <div class="attendance-information">
              <span>{{ts.trPK('myTeam','checkIn')}}</span>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
            </div>
          </ion-col>
          <ion-col [size]="4">
            <div class="attendance-information">
              <span>{{ts.trPK('myTeam','checkOut')}}</span>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
              <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
            </div>
          </ion-col>
          <ion-col [size]="4">
            <div class="attendance-information">
              <span>{{ts.trPK('myTeam','late')}}</span> 
              <h2>{{attendanceTrackingList.P_LATE_IN_HOURS | slice:0:-3}} </h2>
            </div>
          </ion-col>
        </ion-row>
      </div>

      <div class="header">
        <div>
          <ion-row>
            <ion-col [size]="2" style="text-align: left;">
              <ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
            </ion-col>
            <ion-col [size]="8" style="text-align: center;">
                <span class="month-year-span">{{month}} {{year}}</span>
            </ion-col>
            <ion-col [size]="2" style="text-align: right;">
              <ion-icon [ngClass]=" currentMonthName === month ?  'disabledArrow' : 'activeArrow'"  ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
            </ion-col>
          </ion-row>
        </div>
      </div>
      
      <div class="result-graph">
        <div class="request-heading">
          <span>{{ts.trPK('myTeam','attendance-statistics')}}</span>
        </div>
        <div style="position: relative;">
          <div class="label-container">
            <div class="green-label-container">
              <span class="span-one">{{ts.trPK('attendance','present')}}</span>
              <span class="span-two">{{attendedDays}}</span>
            </div>
            <div class="blue-label-container">
              <span class="span-one">{{ts.trPK('attendance','absent')}}</span>
              <span class="span-two">{{absentDays}}</span>
            </div>
          </div>
          <div class="graph-container">
            <div class="result-text-container">
                <h2>{{totalAttendancePrecentage}}</h2>
                <span>{{ts.trPK('absenceList','days')}}</span>
            </div>
            <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
          </div>
        </div>
      </div>

      <ion-row class="attendance-summary">
        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','schedule')}}</span>
            <h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
          </div>
        </ion-col>

        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','off-days')}}</span>
            <h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
          </div>
        </ion-col>

        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
            <h2>{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
          </div>
        </ion-col>

        <ion-col [size]="3">
          <div class="attendance-information">
            <span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
            <h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
          </div>
        </ion-col>
      </ion-row>

      <div *ngIf="showData" class="calendar-container">
        <span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
        <app-circle-calendar
          [eventsdateAttend]='arrDaysAttendance'
          [eventsdateAbsent]='arrDaysAbsent'
          [eventsdateDayOff]='arrDaysOff'
          [currentDateParent]="currentDate"
          [dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
          [normalDays]="normalDays"
          (monthTitle)='changeMonthTitle($event)'
          (currentYear)=changeYear($event)>
        </app-circle-calendar>
      </div>

    </div>

    <div *ngIf="activeSegment === 'Team Members'">
      <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
        <ion-row no-padding>
          <ion-col [size]="3" class="search-dropdown" no-padding>
              <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
              [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)">
                <ion-select-option value="Name" selected="true">{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
                <ion-select-option value="User Name">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
                <ion-select-option value="Email">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
            </ion-select>
          </ion-col>
          <ion-col [size]="7" class="input-container" no-padding>
            <ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
            <ion-input *ngIf="showUserNameOrNameInput" placeholder="Search" [(ngModel)]="searchNameOrUserName"></ion-input>
          </ion-col>
          <ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployeeTwo()">
            <ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
          </ion-col>
        </ion-row>  
      </div>
  
      <div *ngIf="isSearch">
        <ion-row class="search-container">
          <ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
              <span style="margin-left: 5px;">Clear Search</span>
              <ion-icon name="close" ></ion-icon>
          </ion-col>
        </ion-row>
      </div>
      
      <ng-container *ngFor="let subordinate of empSubordinate;let i=index">
          <app-employee-information
            [name]="subordinate.EMPLOYEE_NAME"
            [title]="subordinate.POSITION_NAME"
            [employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
            [employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
            (click)="getDetails(i)">
          </app-employee-information>
      </ng-container>
  
      <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>

    <div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
      <ion-row>
        <ion-col [size]="6" style="border-right: 1px solid #ccc;">
            <h2>Employee ID</h2>
            <p>{{employee.EMPLOYEE_NUMBER}}</p>
        </ion-col>
        <ion-col [size]="6">
          <h2>Category</h2>
          <p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Address</h2>
          <p>{{employee.LOCATION_NAME}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Phone Number</h2>
          <p>{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Business Group</h2>
          <p>{{employee.ORGANIZATION_NAME}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Job</h2>
          <p>{{employee.JOB_NAME}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Payroll</h2>
          <p>{{employee.PAYROLL_NAME}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Organization Email Address</h2>
          <p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
        </ion-col>
        <ion-col [size]="12">
          <h2>Position</h2>
          <p>{{employee.POSITION_NAME}}</p>
        </ion-col>
        <ion-col [size]="12" style="border-bottom: none;">
          <h2>Grade</h2>
          <p>{{employee.GRADE_NAME}}</p>
        </ion-col>
      </ion-row>
    </div>

  </div>

</ion-content>