<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 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="box_right">
              <img src="assets/img/arrow_blue_left.png " (click)="decreasMonth()" />
              <p>{{sales_date}}</p>
              <img [ngClass]="sales_date!=date_now?'':'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 class="input-group mb-3" style="width:196px;" *ngIf="user_role==7 && dealer_list.length!=0">
              <div class="input-group-prepend dealer_drop">
                <h6> Dealer:</h6>
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" style="width:auto;padding: 8px 20px 10px 10px">
                  <p>{{selected_title_dealer}}</p>
                </button>
                <div class="dropdown-menu" *ngIf="dealer_list.length>1">
                  <div class="drop-inn">
                      <a class="dropdown-item" *ngFor="let list of dealer_list;let i=index;">
                          <img src="assets/img/checked.png" *ngIf="list.is_selected==1" />
                          <p (click)="radioSelectDealer(i)">{{list.title}}</p>
                        </a>
                  </div>
                </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> -->
            <!-- <button class="btn export" (click)="clickSampleExcelDownload()">
                <img src="assets/img/excel.png" />
                <p>GET SAMPLE REPORT</p>
              </button> -->
            <!-- <button class="btn export" (click)="importData()">
              <img src="assets/img/excel.png" />
              <p>IMPORT DATA</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>
                  <tr>
                    <th>Status</th>
                    <th>DSE Name</th>
                    <th>Dealer Name</th>
                    <th>Location</th>
                    <th>Target</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>
                    <td colspan="8" 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;"> -->
                        <table [ngClass]="active_product==i?'highlight':''"
                        *ngFor="let list of user_info;let i=index;">
                        <thead>
                          <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          <!-- <tr [ngClass]="list.user_info == null ? 'yellow1-bg' : ''"> -->
                          <tr>
                            <td>
                              <p class="status-circle"
                                [ngClass]="list.sale_status=='0'?'grey-bg':list.sale_status=='1'?'blue-bg':list.sale_status=='2'?'green-bg':list.sale_status=='3'?'yellow-bg':''"
                                title={{list.sale_status_str}}></p>
                            </td>
                            <td>{{list.fname}} {{list.lname}}</td>
                            <td>{{list.dealer_name}}</td>
                            <td>{{list.city}}</td>
                            <td>
                              <div class="sales_target" (click)="showDetails(i,list)">
                                <p>{{list.salestarget}}</p>
                              </div>
                            </td>
                            <td>{{list.am_name}}</td>
                            <td>{{list.rm_name}}</td>
                            <td>{{list.zm_name}}</td>
                          </tr>
                          <tr *ngIf="list.userid == null" class="yellow1-bg yellow_arrow">
                            <td colspan="8" class="desc_col hiddenRow">
                              <div class="arrow"></div>
                              This DSE is not registered on STAR App, please get him registered immediately.
                            </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_bike" *ngFor="let p of user_info[i].model;let model_index=index;">
                                  <div class="card_img"><img src="{{p.model_image_url}}"></div>
                                  <div class="card_title">{{p.model_name}}</div>
                                  <div class="card_content" *ngIf="(user_role==7 || user_role==14) && list.is_edit==1">
                                    <div class="card_left" id="myBtn" *ngIf="lessthan(p.target,p.min_target)"
                                      (click)="targetMinus(p,model_index,list)"><img src="assets/img/minus.png"></div>
                                    <div class="card_left" id="myBtn" *ngIf="equalto(p.target,p.min_target)"><img
                                        src="assets/img/minus.png" style="opacity:0.4;pointer-events: none;"></div>
                                    <div class="card_center"><input type="text" (input)="salesUpdate(p,list)"
                                        disabled="true" class="target"
                                        onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
                                        [(ngModel)]="p.target"></div>
                                    <div class="card_right" (click)="targetPlus(p,model_index,list)"><img
                                        src="assets/img/plus.png"></div>
                                        <!-- <div class="card_left" id="myBtn" *ngIf="list.is_edit!=1"><img
                                          src="assets/img/plus.png" style="opacity:0.4"></div> -->
                                  </div>
                                  <div class="card_contentcenter"
                                    *ngIf="(user_role==7 || user_role==14) && list.is_edit==0">
                                    {{p.target}}
                                  </div>
                                  <!-- <div class="card_contentcenter" *ngIf="user_role!=7 && user_role!=14">
                                   {{p.target}}
                                </div> -->
                                </div>
                                <div class="btn btn_sub btn-primary" id="myBtn_1" *ngIf="list.is_edit!=0"
                                  (click)="salesUpdate(model_index,list)"> Submit</div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>

                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="bottom_title"> </div>
        <div class="mt">
          <span class="dot"></span> <span class="font_span">Modified</span>
          <span class="dot1"></span> <span class="font_span">Approved</span>
          <span class="dot2"></span> <span class="font_span">Waiting for AM approval</span>
          <span class="dot3"></span> <span class="font_span">No Action</span>
        </div>

        <!-- <div class="btn btn_sub btn-primary btn_save" id="myBtn_1" (click)="salesUpdate()"> Save</div> -->
        <!-- <div class="btn btn_sub btn-primary" id="myBtn_1" (click)="salesUpdate()"> Submit</div> -->
        <!-- <pagination-controls *ngIf="user_info!=''" class="pagination pac_pagenation" (pageChange)="page = getServerData($event)"></pagination-controls> -->
        <div *ngIf="excel_load">
          <iframe width="0" height="0" [src]="excelExport()"></iframe>
        </div>
        <div *ngIf="excel_load">
          <iframe width="0" height="0" [src]="excelSampleExport()"></iframe>
        </div>
      </div>
    </div>
    
    <div class="disclaimer">
        <h5>DISCLAIMER: 
            <span class="dot"></span> <span class="font_span">
            Sale target of individual Scooter model cannot be less than 5.</span>
            <span class="dot"></span> <span class="font_span">
            Sales target of Gixxer 250 to be set only for Premium Dealerships.</span>
        </h5>
      </div>
  </div>
  <!-- import data -->
  <div class="modal fade" id="import_data" tabindex="-1" role="dialog" aria-labelledby="import_data" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h5 class="modal-title text-center" id="import_data">
            Import Data</h5>

        </div>
        <div class="modal-body ">
          <div class="form-horizontal  request">
            <div class="row align-items-center form-row">
              <p>Download sample report fill the data and upload the corresponding file to import data.</p>
              <div class="col-sm-12 center-text">
                <img src="assets/img/excel.png" style="width:50px;cursor:pointer"
                  (click)="clickSampleExcelDownload()" />
                <p>GET SAMPLE REPORT</p>
              </div>
              <div class="col-sm-6">
                <div class="form-group col-sm-12">
                  <label class="float-left" for="designation" class="label_style">Upload File : (format : .xlsx)</label>
                  <input type="file" accept=".xls,.csv,.xlsx" id='csv_file' (change)="onFileUpload($event)" #csv_file>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn primary fixed float-right" data-toggle="modal"
            (click)="uploadData()">Submit</button>
          <button type="button" class="btn primary fixed float-right" data-dismiss="modal"
            (click)="cancelEdit($event)">Cancel</button>

        </div>

      </div>
    </div>
  </div>
  <!-- Modal -->
  <div id="myModal" class="modal_1">

    <!-- Modal content -->
    <div class="modal-content_1">
      <!-- <span class="close">&times;</span> -->
      <p class="btn_p text-center" *ngIf="!error_msg">{{data_error}}</p>
      <p class="btn_p text-center" *ngIf="error_msg">{{single_data_error}}</p>
      <p class="btn_p text-center" style="text-align: center"
        *ngIf="data_error=='Target Setting of less than 18 Vehicles per month not allowed…!!!'">Revise your Target</p>
      <button type="button" class="btn primary fixed abc" (click)="close($event)" dismiss="modal">ok</button>
    </div>

  </div>
