<app-main-header></app-main-header>
<div class="mytraining">
  <div class="training_in">
    <div class="training_left" [style.width.%]="user_role==15?'100':'calc(100% - 380px)'">
      <ul class="nav nav-pills mt-3 mb-3" id="pills-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link" [ngClass]="{'active':selected_type=='1'}" (click)="setIndex(0)" role="tab">Sales</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [ngClass]="{'active':selected_type=='2'}" role="tab" (click)="setIndex(1)">Assesment</a>
        </li>
        <div id="demo1">
          <div class="box_right">
            <img src="assets/img/arrow_blue_left.png " class="arw left" (click)="decreasFilter()" />
            <p class="month-fil">{{filter_date}}</p>
            <img *ngIf="filter_date==date_now" [ngClass]="filter_date!=date_now?'':'disable_arrow'" class="disable_img arw right" src="assets/img/arrow_blue_right.png"
            />
            <img *ngIf="filter_date!=date_now" class="arw right" src="assets/img/arrow_blue_right.png" (click)="increasFilter()" />
          </div>
        </div>

      </ul>
      <div *ngIf="is_team">
        <div class="wid100">
          <div class="user_manage">
            <ul>
              <li [ngClass]="{'user_manage_active':selectTabId=='5'}" *ngIf="user_role==3" (click)="setTab('5')">Trainer</li>
              <li [ngClass]="{'user_manage_active':selectTabId=='1'}" *ngIf="user_role==3" (click)="setTab('1')">ZM</li>
              <li [ngClass]="{'user_manage_active':selectTabId=='2'}" *ngIf="user_role<6" (click)="setTab('2')">RM</li>
              <li [ngClass]="{'user_manage_active':selectTabId=='3'}" *ngIf="user_role<7" (click)="setTab('3')">AM</li>
              <li [ngClass]="{'user_manage_active':selectTabId=='4'}" *ngIf="user_role<7" (click)="setTab('4')">DSE</li>
            </ul>
          </div>
        </div>
        <div class="main_dropdown" *ngIf="selectTabId=='4' && 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>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" *ngIf="is_team">
            <a class="nav-link active">RANKING</a>
          </li>
          <li class="nav-item" *ngIf="!is_team">
            <a class="nav-link active">MY RANKING</a>
          </li>

          <!-- <li class="nav-item" *ngFor="let list of leader_type;let i=index">
                    <a class="nav-link" [ngClass]="{'active': i==0}" ng id="home-tab" data-toggle="tab" href="#{{i}}" (click)="selectTopic(list.id)"
                      role="tab" aria-controls="home" aria-selected="true">{{list.title}}</a>
                  </li> -->
          <!-- <div class="box_right" *ngIf="is_filter">
                    <img src="assets/img/arrow_blue_left.png " (click)="decreasFilter()" />
                    <p>{{filter_date}}</p>
                    <img *ngIf="filter_date==date_now" class="disable_img" src="assets/img/arrow_blue_right.png" />
                    <img *ngIf="filter_date!=date_now" src="assets/img/arrow_blue_right.png" (click)="increasFilter()" />
                  </div> -->
          <!-- <div class="box_right" *ngIf="!is_filter">
                    <select class="form-control" [(ngModel)]="rolewise" (ngModelChange)='changeRole($event)'>
                        <option  value="area" selected>Area</option>
                        <option  value="region">Region</option>
                        <option  value="zone">Zone</option>
                         <option  value="panindia"  >National</option>
                      </select>
                  </div>
                  <div class="box_right" *ngIf="is_filter">
                      <select class="form-control" [(ngModel)]="rolewise" (ngModelChange)='changeRoleSales($event)'>
                          <option  value="area" selected>Area</option>
                          <option  value="region">Region</option>
                          <option  value="zone">Zone</option>
                           <option  value="panindia"  >National</option>
                        </select>
                    </div> -->
        </ul>
      </div>
      <div class="left_card">
        <div class="inner_load" *ngIf="loader">
          <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 class="tab-content" id="myTabContent" *ngIf="!loader">
          <div class="tab-pane fade show" [ngClass]="{'active':selected_type==1}" id="0" role="tabpanel">
            <div class="row title" *ngIf="!is_team">
              <div class="col-sm-6">YOUR POSITION</div>
              <div class="col-sm-6 text-right">{{user_data.rank}} OUT OF {{total_count}}</div>
            </div>
            <div class="card box border" *ngIf="!is_team">
              <div class="list_div">
                <div class="card_img">
                  <img src="{{user_data.profile_photo}}" />
                </div>
                <div class="card_cont">
                  <h6>{{user_data.fname}}</h6>
                  <p *ngIf="selectedRole=='DSE'">{{user_data.dealer.dealer_code}} - {{user_data.dealer.dealer_name}}, {{user_data.dealer.city}}</p>
                </div>
                <div class="card_duration" *ngIf="!is_filter&&user_data.total_time!=undefined">
                  <p>Time Duration: {{formatMin(user_data.total_time)}}</p>
                  <!-- <p>Completed on: {{user_data.last_time | date: 'dd-MMM-yyy'}} </p> -->
                  <p>Completed on: {{user_data.last_time}} </p>
                </div>
                <div class="trophy border">
                  <div class="trof">
                    <img src="assets/img/trophy.png">
                    <div class="count">{{user_data.rank}}</div>
                  </div>
                  <p>{{user_data.percentage}}
                    <span *ngIf="user_data.percentage!='-'">%</span>
                  </p>
                </div>
              </div>
            </div>
            <div>
              <div class="row title" *ngIf="leader_deatail.length>0">
                <div class="col-sm-6">TOP {{leader_deatail.length}}</div>
                <!-- <div class="col-sm-6 text-right">OUT OF 20</div> -->
              </div>
              <div *ngIf="leader_deatail.length>0">
                <div class="card box" *ngFor="let list of leader_deatail">
                  <div class="list_div">
                    <div class="card_img">
                      <img src="{{list.user.profile_photo}}" />
                    </div>
                    <div class="card_cont">
                      <h6>{{list.user.fname}}</h6>
                      <p *ngIf="selectedRole=='DSE'">{{list.user.dealer.dealer_code}} - {{list.user.dealer.dealer_name}}, {{list.user.dealer.city}}</p>
                    </div>
                    <div class="card_duration" *ngIf="!is_filter">
                      <p>Time Duration:{{formatMin(list.total_time)}}</p>
                      <p>Completed on: {{list.last_time}} </p>
                      <!-- <p>Completed on: {{list.last_time | date: 'dd-MMM-yyy'}} </p> -->
                    </div>
                    <div class="trophy border">
                      <div class="trof">
                        <img src="assets/img/trophy.png">
                        <div class="count">{{list.rank}}</div>
                      </div>
                      <p>{{list.percentage}}
                        <span *ngIf="list.percentage!='-'">%</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div *ngIf="leader_deatail==0">
                <p class="text-center">No data found</p>
              </div>
            </div>
          </div>
          <div class="tab-pane fade show" id="1" [ngClass]="{'active':selected_type==2}" role="tabpanel">
            <div class="row title" *ngIf="!is_team">
              <div class="col-sm-6">YOUR POSITION</div>
              <div class="col-sm-6 text-right">{{user_data_assessment.rank}} OUT OF {{total_count}}</div>
            </div>
            <div class="card box border" *ngIf="!is_team">
              <div class="list_div">
                <div class="card_img">
                  <img src="{{user_data_assessment.profile_photo}}" />
                </div>
                <div class="card_cont">
                  <h6>{{user_data_assessment.fname}}</h6>
                  <p *ngIf="selectedRole=='DSE'">{{user_data_assessment.dealer.dealer_code}} - {{user_data_assessment.dealer.dealer_name}}, {{user_data_assessment.dealer.city}}</p>
                </div>
                <div class="card_duration" *ngIf="!is_filter&&user_data_assessment.total_time!=undefined">
                  <p>Time Duration: {{formatMin(user_data_assessment.total_time)}}</p>
                  <!-- <p>Completed on: {{user_data.last_time | date: 'dd-MMM-yyy'}} </p> -->
                  <p>Completed on: {{user_data_assessment.last_time }} </p>
                </div>
                <div class="trophy border">
                  <div class="trof">
                    <img src="assets/img/trophy.png">
                    <div class="count">{{user_data_assessment.rank}}</div>
                  </div>
                  <p>{{user_data_assessment.percentage}}
                    <span *ngIf="user_data_assessment.percentage!='-'">%</span>
                  </p>
                </div>
              </div>
            </div>
            <div>
              <div class="row title" *ngIf="leader_assessment.length>0">
                <div class="col-sm-6">TOP {{leader_assessment.length}}</div>
                <!-- <div class="col-sm-6 text-right">OUT OF 20</div> -->
              </div>
              <div *ngIf="leader_assessment.length>0">
                <div class="card box" *ngFor="let list of leader_assessment">
                  <div class="list_div">
                    <div class="card_img">
                      <img src="{{list.user.profile_photo}}" />
                    </div>
                    <div class="card_cont">
                      <h6>{{list.user.fname}}</h6>
                      <p *ngIf="selectedRole=='DSE'">{{list.user.dealer.dealer_code}} - {{list.user.dealer.dealer_name}}, {{list.user.dealer.city}}</p>
                    </div>
                    <div class="card_duration" *ngIf="!is_filter">
                      <p>Time Duration:{{formatMin(list.total_time)}}</p>
                      <p>Completed on: {{list.last_time}} </p>
                      <!-- <p>Completed on: {{list.last_time | date: 'dd-MMM-yyy'}} </p> -->
                    </div>
                    <div class="trophy border">
                      <div class="trof">
                        <img src="assets/img/trophy.png">
                        <div class="count">{{list.rank}}</div>
                      </div>
                      <p>{{list.percentage}}
                        <span *ngIf="list.percentage!='-'">%</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div *ngIf="leader_assessment==0">
                <p class="text-center">No data found</p>
              </div>
            </div>
          </div>
        </div>
      </div>




    </div>

    <div class="training_right" *ngIf="user_role!=15">

      <h5>FILTER</h5>
      <ul class="training-ul">
        <li>
          <button data-toggle="collapse" data-target="#demo" class="right-tit">Category</button>
          <div id="demo" class="collapse cnt-box">
            <button class="cnt-btn" [ngClass]="(is_selected[0]=='selected') ? 'active':''" (click)="setIndex(0)">Sales {{selectedIndex}}</button>
            <button class="cnt-btn" [ngClass]="(is_selected[1]=='selected') ? 'active':''" (click)="setIndex(1)">Assesment</button>
          </div>
        </li>
        <li>
          <button data-toggle="collapse" data-target="#demo1" class="right-tit">Month</button>
          <div id="demo1" class="collapse cnt-box">
            <div class="box_right">
              <img src="assets/img/arrow_blue_left.png " class="arw left" (click)="decreasFilter()" />
              <p class="month-fil">{{filter_date}}</p>
              <img *ngIf="filter_date==date_now" class="disable_img arw right" src="assets/img/arrow_blue_right.png" />
              <img *ngIf="filter_date!=date_now" class="arw right" src="assets/img/arrow_blue_right.png" (click)="increasFilter()" />
            </div>
          </div>
        </li>
        <li *ngIf="is_team">
          <button data-toggle="collapse" data-target="#demo2" class="right-tit">Role</button>
          <div id="demo2" class="collapse cnt-box">
            <!-- <button class="cnt-btn" *ngFor="let role of role_arr;let k=index" [ngClass]="(is_selected_role[k]=='selected') ? 'active':''" (click)="setIndexRole(k)">
                  {{role.title}}</button> -->
            <select class="form-control" (change)='setIndexRole($event.target.value)'>
              <option *ngFor="let role of role_arr;let j=index" value={{role.id}}>{{role.title}}</option>
            </select>
          </div>
        </li>
        <li>
          <button data-toggle="collapse" data-target="#demo3" class="right-tit">Location Wise</button>
          <div id="demo3" class="collapse cnt-box">
            <!-- <button class="cnt-btn" *ngFor="let loc of location_arr;let j=index" [ngClass]="(is_selected_loc[j]=='selected') ? 'active':''" (click)="setIndexLocRank(j)"> {{loc.title}}</button> -->
            <select class="form-control" (change)='setIndexLocRank($event.target.value)'>
              <option *ngFor="let loc of location_arr;let j=index" value={{loc.id}}>{{loc.title}}</option>
            </select>
          </div>
        </li>
      </ul>
      <div class="bottom-fix">
        <button class="apply-btn" (click)="getLeaderDetails()">Apply</button>
      </div>
    </div>

  </div>