<app-feedback-popup></app-feedback-popup>
<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>COURSE COMPLETION REPORTS</h5> -->
      <div class="container-fluid table_area">
        <div class="main_dropdown" *ngIf="user_role<7">
          <div class="zmdropdown" *ngIf="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="row top_box">
          <div class="left_box">
            <div class="input-group mb-3">
              <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 class="input-group mb-4">
                <div class="input-group-prepend ">
                  <h6>Select Feedback:</h6>
                  <!-- <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <p *ngIf="row_selected.length==0">Select</p>
                    <p *ngIf="row_selected.length==1">{{selected_feedback}}</p>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" *ngFor="let feedback of feedbackList;let i=index;">
                      <img src="assets/img/checked.png" *ngIf="feedback.is_selected==1" />
                      <p (click)="dropSelect(i)">{{feedback.assessmentname}}</p>
                    </a>
                  </div> -->
                  <select [(ngModel)]="mymodel" (ngModelChange)='dropSelect($event)'>
                    <option *ngFor="let feedback of feedbackList" [ngValue]="feedback">{{feedback.assessmentname}}</option>
                  </select> 
                </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)]="searchText"
                  name="Search" placeholder="Search" autocomplete="off" required>
              </div>
            </form>
          </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 bottom_box" *ngIf="!loader">
          <div class="col-sm-12 table_box">
            <div class="table-responsive">
              <table class="table table-bordered table-hover table-condensed" id="accordion">
                <thead>
                  <tr>
                    <th>DSE Name</th>
                    <th>Dealer Name</th>
                    <th>Location</th>
                    <th>AM</th>
                    <th>RM</th>
                    <th>ZM</th>
                  </tr>
                </thead>
                <tbody *ngIf="user_info==null || user_info.length==0">
                  <tr>
                      <td colspan="10">No data found</td>
                    </tr>
              </tbody>
                <tbody>  
                       <tr [ngClass]="active_product==i?'highlight':''" *ngFor="let list of user_info | paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item };let i=index;" (click)="showDetails(i,list)" class="ptr">
                            <td>{{list.fname}} {{list.lname}}</td>
                            <td>{{list.dealer_name}}</td>
                            <td>{{list.city}}</td>
                            <td>{{list.am_name}}</td>
                            <td>{{list.rm_name}}</td>
                            <td>{{list.zm_name}}</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>



