<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>
            <ul class="nav nav-tabs" id="myTabJust" role="tablist">
                <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">Target Report</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">Cumulative Report</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 class="row top_box" *ngIf="setMenuId=='1'">
          <div class="left_box">
            <div class="box_right">
              <img src="assets/img/arrow_blue_left.png " (click)="decreasMonth()" />
              <p>{{date_now}}</p>
              <img [ngClass]="date_now!=sales_date?'':'disable_arrow'" src="assets/img/arrow_blue_right.png"
              (click)="increasMonth()" />
            </div>
            <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="right_box1 expo" *ngIf="setMenuId=='2'">
          <button class="btn export" (click)="clickExcelDownload()">
            <img src="assets/img/excel.png" />
            <p>EXPORT REPORT</p>
          </button>
        </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" *ngIf="setMenuId=='1'">
              <table class="table table-bordered table-hover table-condensed" id="accordion">
                <thead>
                  <tr>
                    <th>Zone</th>
                    <th>RM Name</th>
                    <th>AM Name</th>
                    <th>Dealer Name</th>
                    <th>Dealer Code</th>
                    <th>Scooter DSE <br>(Count)</th>
                    <th>Motorcycle DSE <br>(Count)</th>
                    <th>Sales Target <br>set By Dealer (DSE Count)</th>
                    <th>Sales Target <br>Auto Set - Dealer (DSE Count)</th>
                    <th>Sales Target <br>Approved/ Modified by AM (DSE Count)</th>
                    <th>Sales Target <br>Auto Approved (AM) (DSE Count)</th>
                    <th>Scooter Target</th>
                    <th>Scooter Target <br>Achieved (MTD)</th>
                    <th>Motorcycle Target</th>
                    <th>Motorcycle Target <br>Achieved (MTD)</th>
                    <th>Total Target</th>
                    <th>Total Target <br>Achieved (MTD)</th>
                    <th>Total Target <br>Achieved % (MTD)</th>
                  </tr>
                </thead>
                <tbody *ngIf="user_info==null || user_info.length==0">
                  <tr>
                    <td colspan="10">No data found</td>
                  </tr>
                </tbody>
                <tbody [ngClass]="active_product==i?'highlight':''" *ngFor="let list of user_info | paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item };let i=index;">
                  <tr>
                    <td>{{list.zone}}</td>
                    <td>{{list.rm_name}}</td>
                    <td>{{list.am_name}}</td>
                    <td>{{list.dealer_name}}</td>
                    <td>{{list.dealer_code}}</td>
                    <td>{{list.scooter_dsecount}}</td>
                    <td>{{list.motorcycle_dsecount}}</td>
                    <td>{{list.dealerset_dsecount}}</td>
                    <td>{{list.autodealer_dsetcount}}</td>
                    <td>{{list.amset_dsecount}}</td>
                    <td>{{list.autoamset_dsecount}}</td>
                    <td>{{list.scooter_target}}</td>
                    <td>{{list.scooter_achieved}}</td>
                    <td>{{list.motorcycle_target}}</td>
                    <td>{{list.motorcycle_achieved}}</td>
                    <td>{{list.total_target}}</td>
                    <td>{{list.total_achieved}}</td>
                    <td>{{list.total_percent}}</td>
                  </tr>
                </tbody>
                <!-- <tbody>
                  <tr>
                    <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.dealer_name}}</td>
                            <td>{{list.dealer_code}}</td>
                            <td>{{list.scooter_dsecount}}</td>
                            <td>{{list.motorcycle_dsecount}}</td>
                            <td>{{list.dealerset_dsecount}}</td>
                            <td>{{list.autodealer_dsetcount}}</td>
                            <td>{{list.amset_dsecount}}</td>
                            <td>{{list.autoamset_dsecount}}</td>
                            <td>{{list.scooter_target}}</td>
                            <td>{{list.scooter_achieved}}</td>
                            <td>{{list.motorcycle_target}}</td>
                            <td>{{list.motorcycle_achieved}}</td>
                            <td>{{list.total_target}}</td>
                            <td>{{list.total_achieved}}</td>
                            <td>{{list.total_percent}}</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>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody> -->
              </table>
            </div>
            <div class="table-responsive" *ngIf="setMenuId=='2'">
                <table class="table table-bordered table-hover table-condensed" id="accordion">
                  <thead>
                    <tr>
                      <th>Zonal Manager</th>
                      <th>Regional Manager</th>
                      <th>Area Manager</th>
                      <th>Dealer Count</th>
                      <th>DSE Count</th>
                      <th>Target set By<br> Dealer (DSE Count)</th>
                      <th>Auto Sales<br> Dealer (DSE Count)</th>
                      <th>Approved/Modified by AM<br>(DSE Count)</th>
                      <th>Auto Approved (AM)<br>(DSE Count)</th>
                      <th>Target Set for<br>Scooter</th>
                      <th>Target Set for<br>Motorcycle</th>
                      <th>Total Target Set</th>
                      <th>Total Target <br>Achieved % (MTD)</th>
                    </tr>
                  </thead>
                  <tbody *ngIf="user_info_cumulative==null || user_info_cumulative.length==0">
                    <tr>
                      <td colspan="10">No data found</td>
                    </tr>
                  </tbody>
                  <tbody [ngClass]="active_product==i?'highlight':''" *ngFor="let list of user_info_cumulative;let i=index;">
                    <tr>
                      <td>{{list.zm_name}}</td>
                      <td>{{list.rm_name}}</td>
                      <td>{{list.am_name}}</td>
                      <td>{{list.dealer_count}}</td>
                      <td>{{list.dse_count}}</td>
                      <td>{{list.dealer_target_set_dse_count}}</td>
                      <td>{{list.dealer_autotarget_dse_count}}</td>
                      <td>{{list.am_target_set_dse_count}}</td>
                      <td>{{list.am_autotarget_dse_count}}</td>
                      <td>{{list.motorcycle_target}}</td>
                      <td>{{list.scooter_target}}</td>
                      <td>{{list.tot_target}}</td>
                      <td>{{list.total_percent}}</td>
                      <!-- <td>{{list.motorcycle_achieved}}</td>
                      <td>{{list.total_target}}</td>
                      <td>{{list.total_achieved}}</td>
                      <td>{{list.total_percent}}</td> -->
                    </tr>
                  </tbody>
                </table>
              </div>
          </div>
        </div>
        <pagination-controls *ngIf="setMenuId=='1' && 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>