<div class="row text-center">
  <ul class="report-tab">
    <li [ngClass]="{'active': allCandidatesBlock == true}" (click)="viewchange('allCandidatesBlock')">ALL
      CANDIDATES</li>
    <li [ngClass]="{'active': checkInCandidatesBlock == true}" (click)="viewchange('checkInCandidatesBlock')">CHECKED-IN
      CANDIDATES</li>
    <li [ngClass]="{'active': feedbackBlock == true}" (click)="viewchange('feedbackBlock')">FEEDBACK</li>
    <li [ngClass]="{'active': reportTemplate == true}" (click)="viewchange('reportTemplate')">REPORT TEMPLATE</li>
  </ul>
</div>

<div class="container-fuild" *ngIf="allCandidatesBlock">
  <div class="row">
    <div class="col-md-12">
      <div class="toolbar">
        <div class="row">
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Job Requirement Name" [(ngModel)]="jobName"
              multiple=true #jobNames (change)="jobFilter(jobNames.value)" required>
              <mat-option *ngFor="let rept of jobAssessments" [value]="rept.jobTitle">
                {{rept.jobTitle}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Location" multiple=true [(ngModel)]="location"
              #city (change)="locationFilter(city.value)">
              <mat-option class="location-name" *ngFor="let rept of locations" [value]="rept.city">
                {{getLw(rept.city)}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Status" multiple=true [(ngModel)]="status" #stss
              (change)="statusFilter(stss.value)">
              <mat-option *ngFor="let rept of allStatus" [value]="rept.value" required>
                {{rept.name}}
              </mat-option>
            </mat-select>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Levels" multiple=true [(ngModel)]="level" #sts
              (change)="levelFilter(sts.value)" required>
              <mat-option *ngFor="let rept of reportLevels" [value]="rept.value">
                {{rept.name}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4 date-picker-div">
            <my-date-range-picker class="report-dataPicker" name="mydaterange" [options]="myDateRangePickerOptions"
              [(ngModel)]="model" (dateRangeChanged)="getDateFormat($event, 1)" required></my-date-range-picker>
          </div>
          <div class="col-md-4">
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
            <div class="row">
              <div class="col-md-4">
                <div class="cancel-div" (click)="clearFilter()">
                  <p>CLEAR</p>
                </div>
              </div>
              <div class="col-md-8">
                <div class="report-btn-div" (click)="loadData()">
                  <i class="material-icons">description</i>
                  <p>GENERATE REPORT</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-container" *ngIf="userList.length !== 0">
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-6">
          <p class="date-range">Date Range :</p>
        </div>
        <div class="col-md-6">
          <p class="date-range-name">{{model.beginDate.day + '-' + model.beginDate.month + '-' + model.beginDate.year +
            ' / ' +model.endDate.day + '-' + model.endDate.month+ '-' + model.endDate.year}}</p>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="row">
        <div class="col-md-6">
          <p class="result-name"><b>{{userList.length}}</b> Candidate found </p>
        </div>
        <div class="col-md-6">
          <p></p>
        </div>
      </div>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-4">
      <div class="export-btn-div" (click)="exports()">
        <i class="material-icons">description</i>
        <p>Download Report</p>
      </div>
    </div>
  </div>

  <div class="row ">
    <div class="report" *ngIf="noRecord">
      <div class="col-md-6">
        <div class="circle1">
          <i class="material-icons">description</i>
        </div>
      </div>
      <div class="col-md-6">
        <p>Generated report will appear here in a list</p>
        <h2>You can download it in xlsx format</h2>
      </div>
    </div>
    <div class="report-data" *ngIf="!noRecord">
      <app-candidate-report-table [list]="userList"></app-candidate-report-table>
    </div>
  </div>
</div>
<div class="container-fuild" *ngIf="checkInCandidatesBlock">
  <div class="row">
    <div class="col-md-12">
      <div class="toolbar">
        <div class="row">
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Position" [(ngModel)]="checkInPosition" multiple=true
              #checkedIdJobName (change)="checkedInJobfilter(checkedIdJobName.value)" required>
              <mat-option *ngFor="let rept of jobAssessments" [value]="rept.jobTitle">
                {{rept.jobTitle}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Location" multiple=true [(ngModel)]="checkInLocation"
              #checkedIncity (change)="checkedInCandidatesLocationfilter(checkedIncity.value)">
              <mat-option class="location-name" *ngFor="let rept of locations" [value]="rept.city">
                {{getLw(rept.city)}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4 date-picker-div">
            <my-date-range-picker class="report-dataPicker" name="mydaterange" [options]="myDateRangePickerOptions"
              [(ngModel)]="checkedInCandidatesDateModel" (dateRangeChanged)="getDateFormat($event, 2)" required></my-date-range-picker>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 pull-left">
            <div class="report-btn-div report-btn" (click)="loadcheckedInCandidatesData()">
              <i class="material-icons">description</i>
              <p>GENERATE REPORT</p>
            </div>
            <div class="cancel-div report-btn" (click)="clearChekedInData()">
              <p>CLEAR</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-container" *ngIf="checkedInCandidatesList.length !== 0">
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-6">
          <p class="date-range">Date Range :</p>
        </div>
        <div class="col-md-6">
          <p class="date-range-name">{{checkedInCandidatesDateModel.beginDate.day + '-' +
            checkedInCandidatesDateModel.beginDate.month + '-' + checkedInCandidatesDateModel.beginDate.year +
            ' / ' +checkedInCandidatesDateModel.endDate.day + '-' + checkedInCandidatesDateModel.endDate.month+ '-' +
            checkedInCandidatesDateModel.endDate.year}}</p>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="row">
        <div class="col-md-6">
          <p class="result-name"><b>{{checkedInCandidatesList.length}}</b> Candidate found </p>
        </div>
        <div class="col-md-6">
          <p></p>
        </div>
      </div>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-4">
      <div class="export-btn-div" (click)="exportCandidateCheckedInReport()">
        <i class="material-icons">description</i>
        <p>Download Report</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="report" *ngIf="noCheckedInRecored">
      <div class="col-md-6">
        <div class="circle1">
          <i class="material-icons">description</i>
        </div>
      </div>
      <div class="col-md-6">
        <p>Generated report will appear here in a list</p>
        <h2>You can download it in xlsx format</h2>
      </div>
    </div>
    <div class="report-data" *ngIf="!noCheckedInRecored">
      <app-checkin-candidates-report-table [list]="checkedInCandidatesList"></app-checkin-candidates-report-table>
    </div>
  </div>
</div>
<div class="container-fuild" *ngIf="feedbackBlock">
  <div class="row">
    <div class="col-md-12">
      <div class="toolbar">
        <div class="row">
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Position" [(ngModel)]="feedPosition" multiple=true
              #jobPositionNames (change)="feedbackJobfilter(jobPositionNames.value)" required>
              <mat-option *ngFor="let rept of jobAssessments" [value]="rept.jobTitle">
                {{rept.jobTitle}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4">
            <mat-select class="mat-report-select" placeholder="Select Location" multiple=true [(ngModel)]="feedLocation"
              #cityLocation (change)="feedbackLocationfilter(cityLocation.value)">
              <mat-option class="location-name" *ngFor="let rept of locations" [value]="rept.city">
                {{getLw(rept.city)}}
              </mat-option>
            </mat-select>
          </div>
          <div class="col-md-4 date-picker-div">
            <my-date-range-picker class="report-dataPicker" name="mydaterange" [options]="myDateRangePickerOptions"
              [(ngModel)]="feedbackDateModel" (dateRangeChanged)="getDateFormat($event, 3)" required></my-date-range-picker>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 pull-left">
            <div class="report-btn-div report-btn" (click)="loadFeedbackData()">
              <i class="material-icons">description</i>
              <p>GENERATE REPORT</p>
            </div>
            <div class="cancel-div report-btn" (click)="clearFeedbackData()">
              <p>CLEAR</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-container" *ngIf="feedbackUserList.length !== 0">
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-6">
          <p class="date-range">Date Range :</p>
        </div>
        <div class="col-md-6">
          <p class="date-range-name">{{feedbackDateModel.beginDate.day + '-' + feedbackDateModel.beginDate.month + '-'
            + feedbackDateModel.beginDate.year +
            ' / ' +feedbackDateModel.endDate.day + '-' + feedbackDateModel.endDate.month+ '-' +
            feedbackDateModel.endDate.year}}</p>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="row">
        <div class="col-md-6">
          <p class="result-name"><b>{{feedbackUserList.length}}</b> Candidate found </p>
        </div>
        <div class="col-md-6">
          <p></p>
        </div>
      </div>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-4">
      <div class="export-btn-div" (click)="exportFeedbackData()">
        <i class="material-icons">description</i>
        <p>Download Report</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="report" *ngIf="nofeedbackRecord">
      <div class="col-md-6">
        <div class="circle1">
          <i class="material-icons">description</i>
        </div>
      </div>
      <div class="col-md-6">
        <p>Generated report will appear here in a list</p>
        <h2>You can download it in xlsx format</h2>
      </div>
    </div>
    <div class="report-data" *ngIf="!nofeedbackRecord">
      <app-feedback-report-table [list]="feedbackUserList"></app-feedback-report-table>
    </div>
  </div>
</div>
<div class="container-fuild" *ngIf="reportTemplate">
  <div class="row">
    <div class="col-md-12">
      <div class="toolbar">
        <div class="row upFile">
          <div class="col-md-3"></div>
          <div class="col-md-3">
            <div class="chooseFile" *ngIf="!selectedFile">
              <a href="javascript:void(0)"  (click)="file.click()" class="pull-left">
                Choose File
              </a>
              <br /> <br />

            <input type="file" #file  (change)="onFileChange($event)" style="display:none" />

            </div>
            <div class="selectedFile" *ngIf="selectedFile">
              <h2 class="supportText">{{selectedFile[0].name}}    ({{(selectedFile[0].size / 100000).toFixed(2)}} MB)</h2>
            </div>
            <p class="supportText">Supported formats: .xls & .xlsx</p>

          </div>
          <div class="col-md-3">
            <div class="report-btn-div" (click)="uploadTemplate()">
              <i class="material-icons">file_upload</i>
              <p>UPLOAD TEMPLATE</p>
            </div>
          </div>
          <div class="col-md-3"></div>
        </div>
      </div>
      <div class="row row-container">
          <div class="report-data">
            <app-report-template-table [list]="reportTemplateList">  </app-report-template-table>
          </div>
      </div>
    </div>
  </div>
</div>
