<app-main-header *ngIf="type!='mobile'"></app-main-header>
<div class="sales_report" [ngClass]="type=='mobile'?'fullwidth':''">
  <div class="sales_report_in">
    <div class="sales_card">
      <h5 *ngIf="type=='web'">DSE</h5>
      <div class="container-fluid table_area">
          
        <div *ngIf="user_role<7">
           <div>
              <ul class="nav nav-tabs" id="myTabJust" role="tablist">
                  <li class="nav-item" *ngIf="user_role<4" [ngClass]="{'active':setMenuId=='5'}">
                      <a class="nav-link"  id="ZM-tab-just" data-toggle="tab" (click)='setTab("5")' role="tab" aria-controls="ZM-just"
                        aria-selected="false">Trainer</a>
                    </li>
                <li class="nav-item" *ngIf="user_role<4" [ngClass]="{'active':setMenuId=='1'}">
                  <a class="nav-link"  id="ZM-tab-just" data-toggle="tab" (click)='setTab("1")' role="tab" aria-controls="ZM-just"
                    aria-selected="false">ZM</a>
                </li> 
                  <li class="nav-item" *ngIf="user_role<6" [ngClass]="{'active':setMenuId=='2'}">
                    <a class="nav-link" id="RM-tab-just"  data-toggle="tab"  role="tab" (click)='setTab("2")' aria-controls="RM-just"
                      aria-selected="false">RM</a>
                  </li>
                  <li class="nav-item" *ngIf="user_role<7" [ngClass]="{'active':setMenuId=='3'}">
                    <a class="nav-link" id="IDSE-tab-just" data-toggle="tab"  (click)='setTab("3")' role="tab"
                      aria-controls="IDSE-just" aria-selected="false">AM</a>
                  </li>
                  <li class="nav-item" *ngIf="user_role<7" [ngClass]="{'active':setMenuId=='4'}">
                    <a class="nav-link " id="DSE-tab-just" data-toggle="tab"  (click)='setTab("4")' role="tab"
                      aria-controls="DSE-just" aria-selected="true">DSE</a>
                  </li>
                </ul>
           </div>
           <!-- <div  class="main_dropdown" *ngIf="setMenuId!='1' && setMenuId=='4'">
            <div class="zmdropdown" *ngIf="zoneactive && user_role<4">
              <label>Zonal Manager</label>
              <select [(ngModel)]="zm_email" (ngModelChange)='zmChange($event)'>
                <option value="all">All</option>
                <option *ngFor="let zm of zmuser_list" [ngValue]="zm">{{zm.name}}</option>
              </select>
            </div>
            <div class="rmdropdown" *ngIf="user_role<6 && !rmInactive">
              <label>Regional Manager</label>
              <select [(ngModel)]="rm_email" [ngClass]="rmInactive ?'disabled':''" (ngModelChange)='rmChange($event)'
                [disabled]="rmInactive">
                <option value="all">All</option>
                <option *ngFor="let rm of rmuser_list" [ngValue]="rm.email">{{rm.name}}</option>
              </select>
            </div>
            <div class="amdropdown" *ngIf="user_role<7 && !amInactive">
              <label>Area Manager</label>
              <select [(ngModel)]="am_email" [ngClass]="amInactive ?'disabled':''" (ngModelChange)='amChange($event)'
                [disabled]="amInactive">
                <option value="all">All</option>
                <option *ngFor="let am of amuser_list" [ngValue]="am.email">{{am.name}}</option>
              </select>
            </div>
        </div> -->
        <div  class="main_dropdown" *ngIf="setMenuId!='1'">
          <div class="zmdropdown" *ngIf="user_role<4 && zoneactive">
            <label>Zonal Manager</label>
            <select [(ngModel)]="zm_email" (ngModelChange)='zmChange($event)'>
              <option value="all">All</option>
              <option *ngFor="let zm of zmuser_list" [ngValue]="zm">{{zm.name}}</option>
            </select>
          </div>
          <div class="rmdropdown" *ngIf="!rmInactive">
            <label>Regional Manager</label>
            <select [(ngModel)]="rm_email" [ngClass]="rmInactive ?'disabled':''" (ngModelChange)='rmChange($event)'
              [disabled]="rmInactive">
              <option value="all">All</option>
              <option *ngFor="let rm of rmuser_list" [ngValue]="rm.email">{{rm.name}}</option>
            </select>
          </div>
          <div class="amdropdown" *ngIf="!amInactive">
            <label>Area Manager</label>
            <select [(ngModel)]="am_email" [ngClass]="amInactive ?'disabled':''" (ngModelChange)='amChange($event)'
              [disabled]="amInactive">
              <option value="all">All</option>
              <option *ngFor="let am of amuser_list" [ngValue]="am.email">{{am.name}}</option>
            </select>
          </div>
      </div>
        
        </div>
       
        <!--        
        <div class="tab-content card pt-5" id="myTabContentJust">
          <div class="tab-pane fade show active" id="DSE-just" role="tabpanel" aria-labelledby="DSE-tab-just">

          </div>
          <!-- <div class="tab-pane fade" id="IDSE-just" role="tabpanel" aria-labelledby="IDSE-tab-just">
            <p>IDSE  </p>
          </div> -->
          <div class="tab-pane fade" id="RM-just" role="tabpanel" aria-labelledby="RM-tab-just">
            <p>RM
             </p>
          </div>
          <div class="tab-pane fade" id="ZM-just" role="tabpanel" aria-labelledby="ZM-tab-just">
            <p>ZM
             </p>
          </div>
        </div> -->
        <div class="left_card" *ngIf="loader">
            <div class="inner_load">
              <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                <path fill="#28a8e0"
                  d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                  <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50"
                    to="360 50 50" repeatCount="indefinite" />
                </path>
              </svg>
              <p>Just a moment...</p>
            </div>
          </div>
    
        <div class="row top_box">
          <div class="left_box">
            <div class="input-group mb-3">
              <!-- <div class="input-group-prepend" *ngIf="setMenuId=='4'">
                  <h6>Assesment Type:</h6>
                <select [(ngModel)]="defaultValue" (ngModelChange)='categoryChange($event)'>
                  <option *ngFor="let value of category" [ngValue]="value">{{value.title}}</option>
                </select>
              </div> -->
              <div class="input-group-prepend">
                  <h6>Assesment Name:</h6>
                <select [(ngModel)]="assessment_select" (ngModelChange)='assessmentChange($event)'>
                  <option *ngFor="let value of assessment_list" [ngValue]="value">{{value.assessmentname}}</option>
                </select>
              </div>
              <div *ngIf="user_info!=''" style="padding: 10px;"><p>Pass Score: {{total_score}}</p></div>
              <!-- <div class="input-group-prepend">
                <h6>Group by:</h6>
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <p *ngIf="location_selected.length==0">Select</p>
                  <p *ngIf="location_selected.length==1">{{selected_title}}</p>
                </button>
                <div class="dropdown-menu">
                  <a class="dropdown-item" *ngFor="let list of leader_type;let i=index;">
                    <img src="assets/img/checked.png" *ngIf="list.is_selected==1" />
                    <p (click)="radioSelect(i)">{{list.title}}</p>
                  </a>
                </div>
              </div> -->
            </div>
          </div>
          <div class="right_box expo">
            <button class="btn export" (click)="clickExcelDownload()">
              <img src="assets/img/excel.png" />
              <p>EXPORT REPORT</p>
            </button>
          </div>
          <div class="right_box sear">
            <form class="row form_2">
              <div class="form-group col-sm-12 disable">
                <!-- <ng2-completer class="form-control inputrow" [(ngModel)]="mymodel" [datasource]="dataService" [minSearchLength]="0" (keypress)="mymodel=$event.target.value" name="nsme" placeholder="" (ngModelChange)="valuechange($event)"></ng2-completer> -->
                <input type="search" (input)="onSearchChange($event.target.value)" id="mobileno" class="form-control"
                  [(ngModel)]="mymodel" name="Search" placeholder="Search" autocomplete="off" required>
              </div>
            </form>
          </div>
        </div>
       
        <div class="row bottom_box" *ngIf="!loader">
          <div class="col-sm-12 table_box">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" *ngIf="setMenuId!='4'">
                    <thead>
                      <tr>
                        <th>Username</th>
                        <th>Employee Code</th>
                        <th>Email ID</th>
                        <th>Score</th>
                        <th>Result</th>
                      </tr>
                    </thead>
                    <tbody *ngIf="user_info.length==0">
                      <tr>
                        <td colspan="10">No data found</td>
                      </tr>
                    </tbody>
                    <tbody>
                      <tr
                        *ngFor="let list of user_info | paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item };let i=index">
                        <td>{{list.fname}} {{list.lname}}</td>
                        <td>{{list.emp_code}}</td>
                        <td>{{list.emailid}}</td>
                        <td>{{list.highscore}}%</td>
                        <td><div class="color-fail" *ngIf="list.is_pass=='0'">Fail</div><div class="color-pass" *ngIf="list.is_pass=='1'">Pass</div></td>
                      </tr>
                    </tbody>
                  </table>
              <table class="table table-bordered table-hover" *ngIf="setMenuId=='4'">
                <thead>
                  <tr>
                    <th>DSE Name</th>
                    <th>Dealer Name</th>
                    <th>Location</th>
                    <th>Score</th>
                    <th>AM</th>
                    <th>RM</th>
                    <th>ZM</th>
                    <th>Result</th>
                  </tr>
                </thead>
                <tbody *ngIf="user_info.length==0">
                  <tr>
                    <td colspan="10">No data found</td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    *ngFor="let list of user_info | paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item };let i=index">
                    <td>{{list.fname}} {{list.lname}}</td>
                    <td>{{list.dealer_name}}</td>
                    <td>{{list.city}}</td>
                    <td>{{list.highscore}}%</td>
                    <td>{{list.am_name}}</td>
                    <td>{{list.rm_name}}</td>
                    <td>{{list.zm_name}}</td>
                    <td><div *ngIf="list.is_pass=='0'" class="color-fail">Fail</div><div *ngIf="list.is_pass=='1'" class="color-pass">Pass</div></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
     
        <pagination-controls *ngIf="user_info!=''" class="pagination pac_pagenation"
          [ngStyle]="{'margin-top': (user_role<7) ? '0px' :  '35px'}" (pageChange)="page = getServerData($event)">
        </pagination-controls>
        <div *ngIf="excel_load">
          <iframe width="0" height="0" [src]="excelExport()"></iframe>
        </div>
    </div>
    </div>
  </div>
</div>