<app-coursedetail-popup></app-coursedetail-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 *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="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>
        
        <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>
          <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="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 *ngIf="setMenuId == 4">
                  <tr>
                    <th>DSE Name</th>
                    <th>Dealer Name</th>
                    <th>Location</th>
                    <th>Overall Progress</th>
                    <th>AM</th>
                    <th>RM</th>
                    <th>ZM</th>
                  </tr>
                </thead>
                <thead *ngIf="setMenuId != 4">
                  <tr>
                    <th>Employee Code</th>
                    <th>Name</th>
                    <th>Mobile no.</th>
                    <th>Overall Progress</th>
                    <th>Email-Id</th>
                    <th>Total Content</th>
                    <th>Completed Content</th>
                  </tr>
                </thead>
                <tbody *ngIf="user_info==null || user_info.length==0">
                  <tr>
                    <td colspan="10">No data found</td>
                  </tr>
                </tbody>
                <tbody>
                  <tr *ngIf="setMenuId == 4">
                    <td colspan="7" class="sub_table">
                      <table [ngClass]="active_product==i?'highlight':''" *ngFor="let list of user_info | paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item };let i=index;">
                        <thead>
                          <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>{{list.fname}} {{list.lname}}</td>
                            <td>{{list.dealer_name}}</td>
                            <td>{{list.city}}</td>
                            <td>
                              <div class="progress_bg" (click)="showDetails(i,list)">
                                <p>0%</p>
                                <div class="progress">
                                  <div class="progress-bar" [ngClass]="{'green':list.percentage>=75, 'red': list.percentage<50,'orange': list.percentage>=50&&list.percentage<74}"
                                    role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="list.percentage">
                                    <p [ngClass]="{'text_color':list.percentage==0}">{{list.percentage}}%</p>
                                  </div>
                                </div>
                                <p>100%</p>
                              </div>
                            </td>
                            <td>{{list.am_name}}</td>
                            <td>{{list.rm_name}}</td>
                            <td>{{list.zm_name}}</td>
                          </tr>
                          <tr class="highlight_sub" *ngIf="active_product==i">
                            <td colspan="10" class="hiddenRow">
                              <div class="arrow"></div>
                              <div class="table_card">
                                <div class="card" *ngFor="let product of product_info">
                                  <div class="card_title">{{product.catename}}</div>
                                  <div class="card_content" *ngIf="product!=undefined">
                                      <div class="card_content" *ngIf="product.topic==undefined">
                                          <p>No data found</p>
                                        </div>
                                    <div class="card_list" *ngFor="let p of product.topic">
                                      <div class="card_left" (click)="topicDeatils(p)">{{p.topicname}}</div>
                                      <div class="card_right">
                                        <div class="progress_bg">
                                          <p>0%</p>
                                          <div class="progress">
                                            <div class="progress-bar" [ngClass]="{'green':p.percentage>=75, 'red': p.percentage<50,'orange': p.percentage>=50&&p.percentage<74}"
                                              role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="p.percentage">
                                              <p [ngClass]="{'text_color':p.percentage==0}">{{p.percentage}}%</p>
                                            </div>
                                          </div>
                                          <p>100%</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!-- <div class="card">
                                  <div class="card_title">Skills</div>
                                  <div class="card_content" *ngIf="product_info[1]!=undefined">
                                    <div class="card_list" *ngFor="let s of product_info[1].topic">
                                      <div class="card_left" (click)="topicDeatils(s)">{{s.topicname}}</div>
                                      <div class="card_right">
                                        <div class="progress_bg">
                                          <p>0%</p>
                                          <div class="progress">
                                            <div class="progress-bar green" [ngClass]="{'green':s.percentage>=75, 'red': s.percentage<50,'orange': s.percentage>=50&&s.percentage<74}" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="s.percentage">
                                                <p>{{s.percentage}}%</p>
                                            </div>
                                          </div>
                                          <p>100%</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="card">
                                  <div class="card_title">Theme of Month</div>
                                  <div class="card_content" *ngIf="product_info[2]!=undefined">
                                    <div class="card_list" *ngFor="let t of product_info[0].topic">
                                      <div class="card_left" (click)="topicDeatils(t)">{{t.topicname}}</div>
                                      <div class="card_right">
                                        <div class="progress_bg">
                                          <p>0%</p>
                                          <div class="progress">
                                            <div class="progress-bar green" [ngClass]="{'green':t.percentage>=75, 'red': t.percentage<50,'orange': t.percentage>=50&&t.percentage<74}" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="t.percentage">
                                                <p>{{t.percentage}}%</p>
                                            </div>
                                          </div>
                                          <p>100%</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div> -->

                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr *ngIf="setMenuId != 4">
                      <td colspan="7" class="sub_table">
                        <table [ngClass]="active_product==i?'highlight':''" *ngFor="let list of user_info | paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item };let i=index;">
                          <thead>
                            <tr>
                              <th></th>
                              <th></th>
                              <th></th>
                              <th></th>
                              <th></th>
                              <th></th>
                              <th></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>{{list.emp_code}}</td>
                              <td>{{list.fname}} {{list.lname}}</td>
                              <td *ngIf="list.mobileno!=null && list.mobileno!=undefined && list.mobileno!= ''">{{list.mobileno}}</td>
                              <td *ngIf="list.mobileno==null || list.mobileno==undefined || list.mobileno== ''" text-center>-</td>
                              <td>
                                <div class="progress_bg" (click)="showDetails(i,list)">
                                  <p>0%</p>
                                  <div class="progress">
                                    <div class="progress-bar" [ngClass]="{'green':list.percentage>=75, 'red': list.percentage<50,'orange': list.percentage>=50&&list.percentage<74}"
                                      role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="list.percentage">
                                      <p [ngClass]="{'text_color':list.percentage==0}">{{list.percentage}}%</p>
                                    </div>
                                  </div>
                                  <p>100%</p>
                                </div>
                              </td>
                              <td *ngIf="list.emailid!=null && list.emailid!=undefined && list.emailid!= ''">{{list.emailid}}</td>
                              <td *ngIf="list.emailid==null || list.emailid==undefined || list.emailid== ''" text-center>-</td>
                              <td>{{list.total_content}}</td>
                              <td>{{list.completed_content}}</td>
                            </tr>
                            <tr class="highlight_sub" *ngIf="active_product==i">
                              <td colspan="10" class="hiddenRow">
                                <div class="arrow"></div>
                                <div class="table_card">
                                  <div class="card" *ngFor="let product of product_info">
                                    <div class="card_title">{{product.catename}}</div>
                                    <div class="card_content" *ngIf="product!=undefined">
                                        <div class="card_content" *ngIf="product.topic==undefined">
                                            <p>No data found</p>
                                          </div>
                                      <div class="card_list" *ngFor="let p of product.topic">
                                        <div class="card_left" (click)="topicDeatils(p)">{{p.topicname}}</div>
                                        <div class="card_right">
                                          <div class="progress_bg">
                                            <p>0%</p>
                                            <div class="progress">
                                              <div class="progress-bar" [ngClass]="{'green':p.percentage>=75, 'red': p.percentage<50,'orange': p.percentage>=50&&p.percentage<74}"
                                                role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="p.percentage">
                                                <p [ngClass]="{'text_color':p.percentage==0}">{{p.percentage}}%</p>
                                              </div>
                                            </div>
                                            <p>100%</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- <div class="card">
                                    <div class="card_title">Skills</div>
                                    <div class="card_content" *ngIf="product_info[1]!=undefined">
                                      <div class="card_list" *ngFor="let s of product_info[1].topic">
                                        <div class="card_left" (click)="topicDeatils(s)">{{s.topicname}}</div>
                                        <div class="card_right">
                                          <div class="progress_bg">
                                            <p>0%</p>
                                            <div class="progress">
                                              <div class="progress-bar green" [ngClass]="{'green':s.percentage>=75, 'red': s.percentage<50,'orange': s.percentage>=50&&s.percentage<74}" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="s.percentage">
                                                  <p>{{s.percentage}}%</p>
                                              </div>
                                            </div>
                                            <p>100%</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="card">
                                    <div class="card_title">Theme of Month</div>
                                    <div class="card_content" *ngIf="product_info[2]!=undefined">
                                      <div class="card_list" *ngFor="let t of product_info[0].topic">
                                        <div class="card_left" (click)="topicDeatils(t)">{{t.topicname}}</div>
                                        <div class="card_right">
                                          <div class="progress_bg">
                                            <p>0%</p>
                                            <div class="progress">
                                              <div class="progress-bar green" [ngClass]="{'green':t.percentage>=75, 'red': t.percentage<50,'orange': t.percentage>=50&&t.percentage<74}" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" [style.width.%]="t.percentage">
                                                  <p>{{t.percentage}}%</p>
                                              </div>
                                            </div>
                                            <p>100%</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div> -->
  
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </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>