



<mat-horizontal-stepper  linear="true"  class="_matStepper" #stepper >



  <mat-step [stepControl]="firstFormGroup" *ngFor="let coreCCIndex of ccIndexCapabilites; let rowcount = index"  >



    <div class="col-sm-12 col-md-12 col-lg-12 core">
      <h3>{{coreCCIndex.parameter}}</h3>

      <div class="weightedScore">
        <h5>{{getInitial(coreCCIndex.parameter)}}-Rating</h5>

        <span *ngIf="coreCCIndex.totalRating">{{coreCCIndex.totalRating.toFixed()}}</span>
      </div>
    </div>


    <div  class=" col-sm-12 col-md-12 col-lg-12 padd_0 " *ngFor="let Index of coreCCIndex.commonCriteria; let commonIndex= index">

      <form [formGroup]="firstFormGroup">

        <div class="_score col-sm-6 col-md-6 col-lg-6 ">
          <h6>{{Index.capabilityAreas}}</h6>
          <mat-slider (change)="scoreBsn(mat.value,commentCoreTech.value,Index.eventCapabilityId)"
                      [class.rRed] = "Index.rating * 10  < 40"
                      [class.Bblue] = "Index.rating * 10  > 39 && Index.rating * 10  <60"
                      [class.Lgreen] = "Index.rating * 10  > 59 "
                      [disabled]="nowrite"
                      [invert]="invert"
                      [max]="max"
                      [min]="min"
                      [step]="step"
                      [thumb-label]="thumbLabel"

                      [value]="Index.rating * 10"
                      [vertical]="vertical" #mat>

          </mat-slider><br/>

          <span class="sliderRating">

        <span *ngFor="let score of scorecard"  ><h5 [class.active]="score == mat.value /10 "> {{score}} </h5></span>

      </span>

        </div>
        <div class=" col-sm-6 col-md-6 col-lg-6">
          <textarea rows="3" cols="26" formControlName="firstCtrl" placeholder="Comments..." #commentCoreTech [value]="Index.comment" [readonly]="nowrite" [(ngModel)]="Index.comment"  (keyup)="scoreBsn(mat.value,commentCoreTech.value,Index.eventCapabilityId)"> </textarea>
        </div>
      </form>


    </div>


    <div>



      <button mat-button matStepperPrevious class="_navigationButtons previous pull-left" *ngIf="rowcount > 0">Back</button>
      <button mat-button matStepperNext class="pull-right _navigationButtons next">Next</button>
    </div>


  </mat-step>

  <mat-step class="finalScreen"  >

    <div *ngIf="!successScreen">

      <app-scorecards [evaluation]="ccIndexCapabilites" (selectedCriteria)="resetStepper($event, stepper)" [edit]="!miniPgCoachApproved" ></app-scorecards>

      <div class = "scoreCardright">

        <app-scorering [score]="score"></app-scorering>

        <div *ngIf="!miniPgCoachApproved && eVent === 'technicalUseCase' && _candidateDashboard.infoDetails.userInfoMstr.status != 'MINI_PG_COACH_REJECTED' && _candidateDashboard.infoDetails.userInfoMstr.status != 'MINI_PG_COACH_APPROVED' ">

          <textarea rows="3" cols="26" class="finalComments" placeholder="Your feedback..." [(ngModel)]="comment"> </textarea>

          <div class="approveReject">

            <button class="_reject" data-toggle="modal" data-target="#candtrejectModal" (click)="approve('reject')">REJECT</button>
            <button class="_success" data-toggle="modal" data-target="#candtapproveModal" (click)="approve('approve')">APPROVE</button>

          </div>

        </div>

        <div *ngIf="!mainPgCoachReviewed && eVent == 'businessUseCase' && !mainPgCoachApproved && _candidateDashboard.infoDetails.userInfoMstr.status != 'MAIN_PG_MANAGER_REJECTED' && _candidateDashboard.infoDetails.userInfoMstr.status != 'MAIN_PG_MANAGER_APPROVED'  ">

          <div class="row">
          <textarea rows="3" cols="26" class="finalComments" placeholder="Your feedback..." [(ngModel)]="comment"> </textarea>
          </div>
        <div class="row">
          <div class="approveReject">

            <button class="_success" data-toggle="modal" data-target="#candtSubmitModal" (click)="approve('submit')">SUBMIT</button>

          </div>
        </div>
        </div>

        <div *ngIf="miniPgCoachApproved && eVent === 'technicalUseCase'">
          <mat-icon class="approvecheckmatIcon">check</mat-icon>
          <h3 class="blueapprove">Approved</h3>
        </div>

        <div *ngIf="mainPgCoachReviewed && eVent == 'businessUseCase' && _role == 'PGM' ">
          <div class="row">
          <textarea rows="3" cols="26" class="finalComments" placeholder="Your feedback..." #finalComments> </textarea>
          </div>
          <div class="row">
          <div class="approveReject">

            <button class="_reject"  (click)="lastApprove('MAIN_PG_MANAGER_REJECTED',finalComments.value)">REJECT</button>
            <button class="_success" (click)="lastApprove('MAIN_PG_MANAGER_APPROVED',finalComments.value)">APPROVE</button>

          </div>
          </div>
        </div>
        <div *ngIf="mainPgCoachReviewed && eVent == 'businessUseCase' && _role != 'PGM' ">

          <mat-icon class="approvecheckmatIcon">check</mat-icon>
          <h3 class="blueapprove">Reviewed</h3>
        </div>

        <div *ngIf="mainPgCoachApproved && eVent == 'businessUseCase' ">
          <mat-icon class="approvecheckmatIcon">check</mat-icon>
          <h3 class="blueapprove">Approved </h3>
        </div>
        <div *ngIf="mainPgCoachRejected && eVent == 'businessUseCase' ">
          <mat-icon class="rejectcheckmatIcon">close</mat-icon>
          <h3 class="bluerejected">Rejected </h3>
        </div>
        <div *ngIf="_candidateDashboard.infoDetails.userInfoMstr.status == 'MINI_PG_COACH_APPROVED' && eVent == 'technicalUseCase' ">
          <mat-icon class="approvecheckmatIcon">check</mat-icon>
          <h3 class="blueapprove">Approved </h3>
        </div>
        <div *ngIf="_candidateDashboard.infoDetails.userInfoMstr.status == 'MINI_PG_COACH_REJECTED' && eVent == 'technicalUseCase' ">
          <mat-icon class="rejectcheckmatIcon">close</mat-icon>
          <h3 class="bluerejected">Rejected </h3>
        </div>

      </div>
    </div>

    <app-success *ngIf="successScreen && eVent === 'technicalUseCase'" event="Technical Use Case evaluation" (finished)="_finished($event)"></app-success>
    <app-success *ngIf="successScreen && eVent === 'businessUseCase'" event="Business Use Case evaluation" (finished)="_finished($event)"></app-success>

  </mat-step>

</mat-horizontal-stepper>


