<div id="main" *ngIf="afterSelect; else selectedAfter">

  <div class="main-conainer">
    <div class="skill-collection">
      <ul class="nav skill-name">
        <li *ngIf="selectedSkill.length > 0">
          <div (click)="goToPrevPage()" class="add-skill">
            <i class=" glyphicon glyphicon-plus"></i>
          </div>
        </li>
        <li class="skill-details" *ngFor="let skillData of selectedSkill">
          {{skillData?.skillTrackName}}
          <img class="remove-icon" src="{{imageUrl}}/assets/img/employee/shared/close_circle.png" (click)="deleteCourse(skillData)" alt="close_circle">
        </li>
      </ul>
    </div>
    <div *ngIf="loader; else notLoader">
      <img class="loading-img" src="{{img_path + 'Blocks.gif'}}">
    </div>
    <ng-template #notLoader>
      <div id="ct-tabs-header">
        <div id="tab-container">
          <ul class="nav">
            <li *ngFor="let data of tabDetails; let i = index" [ngClass]="{'active': selectedTab === i}" (click)="toggleActive(i)">
              <a (click)="smoothScroll(documentDetails.getElementById(data.className))">{{data?.containerText}}&nbsp;[{{data?.count}}]</a>
            </li>
            <li>
              <div class="row padding-top-n-btm-20">
                <div class="searchIcon">
                  <input type="search" placeholder="Search for Courses" (keyup)="SearchforCourses($event)" autofocus/>

                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div *ngIf="(allCourses.length > 0 || primaryAssessment.length > 0 || technicalAssessment.length > 0 || businessAssessment.length > 0); else showNoData">

        <div class="second" id="first" *ngIf="allCourses">
          <!--{{coursesLists | json}}-->
          <div class="capability-transformation-slider">
            <h2>Courses</h2>

            <app-slider [valueStep]='300'>
              <app-bny-employee-course-card [hideDuration]="'hide-footer'" [viewDetailsBtn]="true" class="course-selection" [class.selected]="course.selected" [showGoto]="course.selected" [shoCount]="shoCount"
                                            [course]="course" [role]="'course'" (selectCourseEvent)="selectCourse(course, 'course')" *ngFor="let course of allCourses">
              </app-bny-employee-course-card>
            </app-slider>
          </div>
        </div>
        <div class="second" id="second" *ngIf="primaryAssessment">
          <div class="capability-transformation-slider">
            <h2>Primary Assessment</h2>

            <app-slider [valueStep]='300'>
              <app-bny-employee-course-card class="course-selection" [course]="course" [class.selected]="course.selected" [role]="'assessment'"
                                            (selectCourseEvent)="selectCourse(course,'Primary')" *ngFor="let course of primaryAssessment">
              </app-bny-employee-course-card>
            </app-slider>
          </div>
        </div>
        <div class="second" id="third" *ngIf="technicalAssessment">
          <div class="capability-transformation-slider">
            <h2>Technical Usecase Assessment</h2>

            <app-slider [valueStep]='300'>
              <app-bny-employee-course-card class="course-selection" [course]="course" [role]="'assessment'" [class.selected]="course.selected"
                                            (selectCourseEvent)="selectCourse(course, 'Technical')" *ngFor="let course of technicalAssessment">
              </app-bny-employee-course-card>
            </app-slider>
          </div>
        </div>
        <div class="second" id="fourth" *ngIf="businessAssessment">
          <div class="capability-transformation-slider">
            <h2>Business Usecase Assessment</h2>

            <app-slider [valueStep]='300'>
              <app-bny-employee-course-card class="course-selection" [course]="course" [role]="'assessment'" [class.selected]="course.selected"
                                            (selectCourseEvent)="selectCourse(course, 'Business')" *ngFor="let course of businessAssessment">
              </app-bny-employee-course-card>
            </app-slider>
          </div>
        </div>
        <div class="cust-tab-last-info">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="selCatsList" *ngIf="showcatdispDiv">
              <ul class="nav seleted-count">
                <li *ngIf="allSelectedCourses?.length > 0"><span class="course-count">0{{allSelectedCourses.length}}</span> <span class="course-name">Courses</span></li>
                <li *ngIf="primarySelectedAssessment?.length > 0"><span class="course-count">0{{primarySelectedAssessment.length}}</span> <span class="course-name">Primary Assessment</span></li>
                <li *ngIf="technicalSelectedAssessment?.length > 0"><span class="course-count">0{{technicalSelectedAssessment.length}}</span> <span class="course-name">Technical Usecase Assessment</span></li>
                <li *ngIf="businessSelectedAssessment?.length > 0"><span class="course-count">0{{businessSelectedAssessment.length}}</span> <span class="course-name">Business Usecase Assessment</span></li>
              </ul>
            </div>
          </div>
          <div class="row footer-row">
            <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12 footer-box">

              <div *ngIf="(allSelectedCourses?.length > 0) || (primarySelectedAssessment?.length > 0) || (technicalSelectedAssessment?.length > 0) || (businessSelectedAssessment?.length > 0)">
                <div class="pull-left selected-cat-numbers">
                  <!--<span>{{selectedCategoriesArr.length}}</span>-->
                </div>
                <div class="pull-left selected-cat-show" (click)="displaySelectedCats()">
                  <span class="selected-circle" *ngIf="selectedCourses.length > 0">{{allSelectedCourses.length+primarySelectedAssessment.length+technicalSelectedAssessment.length+businessSelectedAssessment.length}}</span>&nbsp;Selected
                  &nbsp;
                  <i *ngIf="showcatdispDiv;else downArrow" class="fa fa-chevron-down up-down-arrow"></i>
                  <ng-template #downArrow>
                    <i class="fa fa-chevron-up up-down-arrow"></i>
                  </ng-template>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 footer-box">
              <button (click)='goToPrevPage()' class="btn btn-default footer-btn">Back</button>
              <button class="btn btn-primary footer-btn" [disabled]="!(allSelectedCourses.length > 0 || primarySelectedAssessment.length > 0 || technicalSelectedAssessment.length > 0 || businessSelectedAssessment.length > 0)"
                      (click)="selectedCourseAssessment()">Next</button>
            </div>
          </div>
        </div>
      </div>

      <ng-template #showNoData>
        <div class="no-data-view">
          <img class="remove-icon" src="{{imageUrl}}/assets/img/employee/noresult_animated_icon.svg" alt="close_circle">
          <p class="not-found-text">
            Sorry! No Result Found
          </p>
          <p class="not-fount-details-text">
            Please modify your search criteria and you will find results matching your needs.
          </p>
          <button [routerLink]='["../../employee/first-time"]' class="btn btn-default mody-search-btn">Modify Search</button>
        </div>
      </ng-template>
    </ng-template>
  </div>
</div>
<ng-template #selectedAfter>
<div class="container-fuild">
  <div class="row">
  <div [class]="UperBeforSelectCls">
    <div class="row">
      <div class="col-lg-3">
      <div>
        <h2 class="summaryText">Summary</h2>
      </div>
      <div>
        <h3 class="text1">Please set due date before assigning employees</h3>
      </div>
      </div>
      <div class="col-lg-3">
      </div>
      <div class="col-lg-3">

      </div>
    </div>
  </div>
  <div [class]="UperAfterSelectCls">
    <div class="row">
      <div class="addDiv" (click)='goToPrevPage()'>
        <div class="addOval">
          <img src="{{imageUrl}}/assets/img/pgflow/bnym/plus.png">
        </div>
        <h4 class="addMore">Add More</h4>
      </div>
    </div>


  </div>
  </div>
  <div class="row">
    <div [class]="BeforeSelectCls">
    <div class="assessmentsDiv">
      <h4 class="selectedText">Selected Course</h4>
      <app-slider [valueStep]='300'>
        <app-bny-employee-course-card [hideDuration]="'hide-footer footer-img-selectCourse'" [heightCard]="'heightCard'"  [viewDetailsBtn]="true" class="course-selection heightCard" [class.selected]="course.selected" [showGoto]="course.selected" [shoCount]="shoCount"
                                      [course]="course" [role]="'course'" (selectCourseEvent)="setDueDate(course, 'course')" *ngFor="let course of allSelectedCourses">
        </app-bny-employee-course-card>
      </app-slider>
    </div>
    <div class="assessmentsDiv">
      <h4 class="selectedText">Selected Primary Assessment</h4>
      <app-slider [valueStep]='300'>
        <app-bny-employee-course-card class="course-selection"  [selectedItem]= "true" (deleteItem)="deleteItems($event,'primary')" [selectedIndex]="rowCount" [course]="course" [class.selected]="course.selected" [role]="'assessment'"
                                       *ngFor="let course of primarySelectedAssessment; let rowCount = index">
        </app-bny-employee-course-card>
      </app-slider>
    </div>
      <div class="assessmentsDiv">
      <h4 class="selectedText">Selected Technical Assessment</h4>
        <app-slider [valueStep]='300'>
          <app-bny-employee-course-card class="course-selection" [selectedItem]= "true" (deleteItem)="deleteItems($event,'technical')" [selectedIndex]="rowCount"  [classForParentBox]="'main-box'"  [toChangeCursor]="'cursor-default'" [course]="course" [role]="'assessment'" [class.selected]="course.selected"
                                         *ngFor="let course of technicalSelectedAssessment; let rowCount = index" >
          </app-bny-employee-course-card>
        </app-slider>
    </div>
    <div class="assessmentsDiv">
      <h4 class="selectedText">Selected Business Assessment</h4>
      <app-slider [valueStep]='300'>
        <app-bny-employee-course-card class="course-selection" [selectedItem]= "true" (deleteItem)="deleteItems($event,'business')" [selectedIndex]="rowCount" [course]="course" [role]="'assessment'" [class.selected]="course.selected"
                                       *ngFor="let course of businessSelectedAssessment; let rowCount = index">
        </app-bny-employee-course-card>
      </app-slider>
    </div>
    </div>
    <div [class]="AfterSelectCls">
      <div *ngIf="!courseAssigned && !assessmentAssigned ">
      <div *ngIf="employeeListContainer">
        <div class="epmlistDiv">
        <div  class="empSearchBox ">
          <input  placeholder="Search by Employee Name" (click)="empAssignClick('search')" type="search">
        </div>
        <div> <h2 class="orDiv">OR</h2>
        </div>
        <div>
          <div class="empUploadBtnDiv" (click)="empAssignClick('upload')">
            <h3>Upload Employees list</h3></div>
        </div>
        </div>
      </div>
      <div *ngIf="searchContainer">
      <div  class="employeeSearchIcon ">
        <input  placeholder="Search by Employee Name" #empSrc (keyup)="keySearch(empSrc.value)" type="search">
      </div>

      <div>

        <div  class="" *ngFor="let emp of empLists1">
          <div  class="searchEmp">
            <div  class="row empContainerDiv">
              <div  class="col-lg-12">
                  <div class="row">
                    <div class="col-lg-2">
                      <a  class="IMG">
                        {{ Initials(emp.fullName) }}
                      </a>
                    </div>
                    <div class="col-lg-6">
                      <div  class="employeeDtls">
                        <h4 class="empName">
                          {{emp.fullName}}
                        </h4>
                        <h5 class="empAdId">
                          {{emp.adId}}
                        </h5>
                        <h5 class="empPos" *ngIf="emp.pgExperienceLevel">
                          {{emp.pgExperienceLevel}}
                        </h5>
                        <h5 class="empEmail">
                          {{emp.mailId}}
                        </h5>

                      </div>
                    </div>
                    <div class="col-lg-4">
                      <input  name="radiogroup" class="empCheck" type="checkbox" #empSelect
                              [value]="emp.userInfoMstrId"
                              (change)="onSelectionChange(emp,empSelect.value,$event)">

                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div *ngIf="uploadContainer">
        <div *ngIf="!uploadedEmployeeList" class="buMaindiv">
          <div draggable="true" ngClass="{{dragAreaClass}}">
            <div class="row">
              <div class="col-md-12 text-center">
                <img src="{{img_path + 'upload_icon.png'}}" alt="" />

                <div class="drgText">Drag &amp; Drop</div>
                <div class="otherText">
                  <span class="pull-left"> Your file(s), or &nbsp;</span>
                  <a href="javascript:void(0)" (click)="file.click()" class="pull-left">
                    Browse
                  </a>
                  <br /> <br />

                </div>
                <i>You can upload Word Document, Excel and PDF files</i><br />
                <i> (Upto 100 files, max 10 MB each)</i>
                <input type="file" #file [multiple]="(maxFiles > 1)" (change)="onFileChange($event)" style="display:none" />
              </div>
            </div>

          </div>

        </div>
        <div *ngIf="uploadedEmployeeList">
          <div  class="" *ngFor="let emp of empLists1">
            <div  class="searchEmp">
              <div  class="row empContainerDiv">
                <div  class="col-lg-12">
                  <div class="row">
                    <div class="col-lg-2">
                      <a  class="IMG">
                        {{ Initials(emp.fullName) }}
                      </a>
                    </div>
                    <div class="col-lg-6">
                      <div  class="employeeDtls">
                        <h4 class="empName">
                          {{emp.fullName}}
                        </h4>
                        <h5 class="empAdId">
                          {{emp.adId}}
                        </h5>
                        <h5 class="empPos" *ngIf="emp.pgExperienceLevel">
                          {{emp.pgExperienceLevel}}
                        </h5>
                        <h5 class="empEmail">
                          {{emp.mailId}}
                        </h5>

                      </div>
                    </div>
                    <div class="col-lg-4">
                      <input  name="radiogroup" class="empCheck" type="checkbox" #empSelect
                              [value]="emp.userInfoMstrId"
                              (change)="onSelectionChange(emp,empSelect.value,$event)">

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div *ngIf="courseAssigned || assessmentAssigned ">
        <div>
          <img class="img-score" src="{{imageUrl}}/assets/img/employee/dashboard/assessment/success_icon%20_right.png">

        </div>
        <div>
          <h2 class="awesome">Awesome,</h2>
        </div>
        <div>
          <h2 class="you-have-successfull">You have successfully assigned Courses and Assessment</h2>
        </div>
        <div>
          <a class="go-to-dashboard" (click)="goToDashboard()">Goto DashBoard</a>
        </div>
      </div>
      </div>
    <div *ngIf="confirmationContainer">

      <div class="confirmDiv">
        <div class="cancelDiv">
          <div class="confirm_cancelBtn" (click)="goToDashboard()">
            <h2>Cancel</h2>
          </div>
        </div>
        <div class="assignDiv">
          <div class="confirm_assignBtn" (click)="submitCourseAssessment()">
            <h2>Assign</h2>
          </div>
        </div>
      </div>

    </div>

  </div>
  <div class="row">
    <div class="col-lg-12">
    <div class="assessmentsDiv" *ngIf="dueDateContainer">
      <div class="cust-tab-last-info">

        <div class="row footer-row">
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 footer-box">
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 footer-box">
            <div class="datePick">
            <my-date-picker  [placeholder]="placeholder"  [(ngModel)]="model"  name="mydaterange" [options]="myDatePickerOptions"
                             (dateChanged)="onDateChanged($event)" required></my-date-picker>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 footer-box">
            <button (click)='goToPrevPage()' class="btn btn-default footer-btn">Back</button>
            <button class="btn btn-primary footer-btn" [disabled]="!(allSelectedCourses.length > 0 || primarySelectedAssessment.length > 0 || technicalSelectedAssessment.length > 0 || businessSelectedAssessment.length > 0)"
                    (click)="assignCourseAssessment()">Next</button>
          </div>
        </div>
      </div>
  </div>
  </div>
  </div>

</div>

</ng-template>
