<app-confirm-popup></app-confirm-popup>
<section>
    <div class="modal_bg" *ngIf="is_modal_visible">
        <div class="overlay"></div>
        <div class="modal-dialog-box" >
            <div class="modal-content"> 
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="onCloseModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="sales" *ngIf="type==1">
                    <h5>MY PERFORMANCE</h5>
                    
                    <p class="achived" *ngIf="sales!=undefined&&sales.length>0">Achieved Sales</p>
                    <p class="achived" style='left:0;right:auto;' *ngIf="sales!=undefined&&sales.length>0">Data as on: {{content_data.data_as_on | date: 'dd-MMM-yyy'}}</p>
                    <div class="text-center" *ngIf="sales!=undefined&&sales.length==0"> <p>No data found</p></div>
                    <div class="card_section" *ngIf="sales!=undefined&&sales.length>0"> 
                        <div class="box assessment_box" *ngFor="let list of sales;let i=index">
                            <div>
                                <div class="card_img">
                                    <img src="{{list.model_image_url}}"/>
                                </div>
                                <div class="card_cont">
                                    <h3>{{list.model_name}}</h3>
                                </div>
                                <div class="card_icon">
                                    <h1>{{list.achieved}}/{{list.target}}</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="learning_path" *ngIf="type==2">
                    <h5>MY LEARNING PATH</h5>
                    <div class="text-center" *ngIf="learnpath!=undefined&&learnpath.length==0"> <p>No data found</p></div>
                    <div class="card_section" *ngIf="learnpath!=undefined&&learnpath.length>0"> 
                        <div class="learning_list_head">
                            <div class="left_cont">
                                Certification
                            </div>
                            <div class="cont_score">
                                Score
                            </div>
                        </div>
                        <div class="learning_list" *ngFor="let list of learnpath;let i=index">
                            <div class="left_img">
                                <div class="path">
                                    <div *ngIf="list.lvl_id==1 || list.lvl_id==2" class="pointer" [ngClass]="{'fullred': list.lvl_status==2,'orange':list.lvl_status==3, 'grey':list.lvl_status==0 || list.lvl_status==7 || list.lvl_status==4 || list.lvl_status==1 || list.lvl_status==6}">
                                        <div class="poly">
                                        <p class="types">B</p>
                                        <svg>
                                            <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
                                            <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
                                        </svg>
                                        </div>
                                    </div>
                                    <div *ngIf="list.lvl_id==3" class="pointer" [ngClass]="{'grey' : list.lvl_status==0 || list.lvl_status==1,'greenred': list.lvl_status==2, 'orange':list.lvl_status==3,'redgrey':list.lvl_status==6,'greengrey': list.lvl_status==7 || list.lvl_status==4}">
                                        <div class="poly">
                                            <p class="types">S</p>
                                            <svg>
                                                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
                                                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
                                            </svg>
                                        </div>
                                     </div>
                                    <div *ngIf="list.lvl_id==4" class="pointer" [ngClass]="{'grey' : list.lvl_status==0 || list.lvl_status==1,'greenred': list.lvl_status==2, 'orange':list.lvl_status==3,'redgrey':list.lvl_status==6,'greengrey': list.lvl_status==7 || list.lvl_status==4}">
                                        <div class="poly">
                                            <p class="types">G</p>
                                            <svg>
                                            <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
                                            <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="learning_cont">
                                <h3>{{list.assessmentname}}</h3>
                                <p>{{list.examtime}}</p>
                            </div>
                            <div class="card_icon">
                                <h3>{{list.highscore}}%</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="earned_points" *ngIf="type==3">
                        
                    <div class="earn_head"  >
                        <div class="reward_point_left">
                            <img src="assets/img/star.png"/>
                            <p>{{rewardpoints_pts.current_point}}</p>
                        </div>
                        <div class="reward_point_right">
                            <p>Points Available</p>
                            <!-- <div class="info" (click)="showInfo()" #suggestbox>
                                    <img src="assets/img/info.png" />
                                    <div class="info_box box_table" *ngIf="show_info">
                                        <p>
                                            <b>Points Rate</b>
                                        </p>
                                          <table>
                                                <tr>
                                                    <th>Level</th>  
                                                    <th>Point</th>  
                                                    <th>Rate</th>  
                                                </tr>
                                                <tbody>
                                                    <tr *ngFor="let item of points_level">
                                                            <td>{{item.lvl_name}}</td>  
                                                            <td>1</td>  
                                                            <td>{{item.lvl_points}}</td>  
                                                    </tr>
                                                </tbody>
                                            </table>
                                    </div>
                                </div> -->
                            <p *ngIf="select_tab==1">Total Points Earned {{rewardpoints_pts.total_point}} </p>
                            <p *ngIf="select_tab==2">Total Points Redeemed {{rewardpoints_pts.total_point}} </p>
                            <button class="btn primary" type="submit" style="width: auto;font-size: 16px;margin-top: 5px;" (click)="onClickRedeem()" *ngIf="rewardpoints_pts.is_redeem_point!=undefined && rewardpoints_pts.is_redeem_point==1">TRANSFER TO WALLET  </button>
                            <button class="btn primary" type="submit" style="width: auto;opacity:0.5;cursor:not-allowed;font-size: 16px;margin-top: 5px;" *ngIf="rewardpoints_pts.is_redeem_point!=undefined &&  rewardpoints_pts.is_redeem_point==0">TRANSFER TO WALLET  </button>
                            <p class="minimum"> Your passport to competitive learning  <img src="assets/img/info.png" class="info_icon" (click)="showInfo();$event.stopPropagation();"/> </p>
                            <!-- Minimum {{rewardpoints_pts.min_redeem_point}} points required for redemption -->
                        </div>
                        <div class="info_box box_table pull-right" *ngIf="show_info">
                            <!-- <p>
                                <b>Points Rate</b>
                            </p> -->
                            <table style="font-size: 12px;">
                                <tr>
                                    <th>TRAINING STATUS</th>  
                                    <th>% REDEMPTION</th>  
                                </tr>
                                <tbody>
                                    <tr *ngFor="let item of new_redemption_details">
                                        <td>{{item.name}}</td>  
                                        <td>{{item.name1}}</td>  
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                     
                    <div class="earn_body">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" (click)="rewardpoints(1)">
                                <a class="nav-link active" id="earned-tab" data-toggle="tab" href="#earned" role="tab" aria-controls="home" aria-selected="true">EARNED HISTORY</a>
                            </li>
                            <li class="nav-item" (click)="rewardpoints(2)">
                                <a class="nav-link" id="redeem-tab" data-toggle="tab" href="#redeem" role="tab" aria-controls="profile" aria-selected="false">REDEEM HISTORY</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="earned" role="tabpanel" aria-labelledby="earned-tab"  > 
                                <div *ngIf="rewardpoints_data!=undefined&&rewardpoints_data.length>0">
                                        <div class="box assessment_box point_list" *ngFor="let list of rewardpoints_data;let i=index" > 
                                                <div class="point_cont"> 
                                                    <h3>{{list.description}}</h3>
                                                    <p>Earned On: {{list.created_on | date: 'dd-MMM-yyy'}}</p> 
                                                </div>
                                                <div class="point_score"> 
                                                    <p>Earned</p>
                                                    <h1>{{list.points}} <span>Points</span></h1>
                                                </div>
                                            </div>
                                </div>
                                <div  *ngIf="rewardpoints_data!=undefined&&rewardpoints_data.length==0"> <p>No data found for earned history</p></div>
                            </div>
                            <div class="tab-pane fade show" id="redeem" role="tabpanel" aria-labelledby="redeem-tab"  > 
                                <div *ngIf="redeempoints_data!=undefined&&redeempoints_data.length>0">
                                        <div class="box assessment_box point_list" *ngFor="let list of redeempoints_data;let i=index" > 
                                                <div class="point_cont"> 
                                                    <h3>{{list.description}}</h3>
                                                    <p>Redeemed On: {{list.created_on | date: 'dd-MMM-yyy'}}</p> 
                                                </div>
                                                <div class="point_score"> 
                                                        <p>Redeemed</p>
                                                    <h1>{{list.points}} <span>Points</span></h1>
                                                </div>
                                            </div>
                                </div>
                                <div  *ngIf="redeempoints_data!=undefined&&redeempoints_data.length==0"> <p>No data found for redeem history</p></div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>