<app-main-header *ngIf="type!='mobile'"></app-main-header>
<app-addparticipantpop></app-addparticipantpop>
<app-toaster-container></app-toaster-container>

<div class="trainer" [ngClass]="type=='mobile'?'fullwidth':''">
    <div class="trainer_in">
        <div class="trainer_left">
            <ul class="nav nav-tabs" id="myTab" role="tablist"  *ngIf="rolename!= 14 && rolename!= 4 && rolename!= 6 && rolename != 7">
                <li class="nav-item" *ngIf="rolename == 5">
                    <a class="nav-link active" data-toggle="tab" href="#calendar-tab" role="tab" aria-controls="home" aria-selected="true">Training Calendar</a>
                </li>
                <li class="nav-item" *ngIf="rolename == 10">
                    <a class="nav-link active" data-toggle="tab" href="#calendar-tab" role="tab" aria-controls="home" aria-selected="true">My Training Calendar</a>
                </li>
                <li class="nav-item" *ngIf="rolename == 5">
                    <a class="nav-link" data-toggle="tab" href="#feedback-tab" role="tab" aria-controls="profile" aria-selected="false">Training Feedback</a>
                </li>
                <li class="nav-item" *ngIf="rolename == 10">
                    <a class="nav-link" data-toggle="tab" href="#feedback-tab" role="tab" aria-controls="profile" aria-selected="false">My Training Feedback</a>
                </li>
                <li class="nav-item" *ngIf="rolename == 10">
                    <a class="nav-link" data-toggle="tab" href="#score-tab" role="tab" aria-controls="profile" aria-selected="false">My Score & Result</a>
                </li>
            </ul>

            <div class="tab-content main-tab">

                <div class="tab-pane fade show active" id="calendar-tab" role="tabpanel" >
                    <div *ngIf="rolename != 10">
                        <ul class="nav nav-tabs" id="myTabJust" role="tablist">                 
                                
                            <li class="nav-item active" >
                                <a class="nav-link active"  id="ZM-tab-just" data-toggle="tab" (click)='setTab("1")' role="tab" aria-controls="ZM-just"
                                aria-selected="false">Classroom Training</a>
                            </li>
                            <!-- <li class="nav-item" [ngClass]="{'active':setMenuId=='2'}">
                                <a class="nav-link"  id="ZM-tab-just" data-toggle="tab" (click)='setTab("2")' role="tab" aria-controls="ZM-just"
                                aria-selected="false">Batch</a>
                            </li> -->
                            <button class="btn primary fixed color add_trainer" *ngIf="setMenuId=='1' && rolename == 5" (click)="addtraining()">Create New</button>
                            <!-- <button class="btn primary fixed color add_batch" *ngIf="setMenuId=='2'" (click)="addbatch()">Create New</button> -->
                        </ul>
                  
                    </div>
        
                    <div class="left_card" *ngIf="setMenuId=='1'">
                        <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 *ngIf="!loader"> -->
                            <ejs-schedule #scheduleObj [eventSettings]="eventData" [selectedDate]="today" (popupOpen)="onPopupOpen($event)"
                            (eventRendered)="onEventRendered($event)" (actionComplete)='onActionComplete($event)' (actionBegin)="onActionBegin($event)"
                            [showQuickInfo]="showQuickInfo"  [readonly]="readonly" >
                                <e-views>
                                    <e-view option="Month"></e-view>
                                </e-views>
                            </ejs-schedule>
                        <!-- </div> -->
                        <div class="specify row">
                            <div class="col-sm-3 col-xs-12 one" *ngIf="rolename == 5">
                                <p><span></span><b>Training scheduled not published</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 two">
                                <p><span></span><b>Training scheduled</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 three">
                                <p><span></span><b>Training Confirmed</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 four">
                                <p><span></span><b>Training InProgress</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 five">
                                <p><span></span><b>Training Rescheduled</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 six">
                                <p><span></span><b>Training Completed</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 saveen">
                                <p><span></span><b>Training Closed</b></p>
                            </div>
                            <div class="col-sm-3 col-xs-12 eight">
                                <p><span></span><b>Training Cancelled</b></p>
                            </div>
                        </div>
                        <!-- <div class="specify row">
                            <div class="col-sm-3 col-xs-12" *ngFor="let color of colorcodes">
                                <p><span [ngStyle]="{'background-color': color.color_code}"></span><b>{{color.name}}</b></p>
                            </div>
                        </div> -->
                    </div>
                </div>

                <div class="tab-pane fade" id="feedback-tab" role="tabpanel">
                    <div class="left_card">
                        <div class="table_training table-responsive scroll_x">
                            <table class="table table-fixed">
                              <thead>
                                <tr>
                                    <th>Training ID</th>
                                    <th>Training Title</th>
                                    <th *ngIf="rolename == 10">Trainer Name</th>
                                    <th>Training Dates</th>
                                    <th *ngIf="rolename != 10">Total Participant</th>
                                    <th>Training Feedback</th>
                                    <th>Trainer Feedback</th>
                                    <th>Overall Feedback </th>
                                    <!-- <th *ngIf="rolename == 10">Action</th> -->
                                    <th>Action</th>
                                </tr>
                              </thead>
                              <tbody *ngIf="feedback_list.length != 0">
                                <tr *ngFor="let item of feedback_list;">
                                  <td>{{item.training_id}}</td>
                                  <td>{{item.title}}</td>
                                  <td *ngIf="rolename == 10">{{item.organizer_name}}</td>
                                  <td>{{item.start_date | date: 'dd/MM/yyyy'}} - {{item.end_date | date: 'dd/MM/yyyy'}}</td>
                                  <td *ngIf="rolename != 10">{{item.total_participants}}</td>
                                  <td>{{item.training_feedback}}</td>
                                  <td>{{item.trainer_feedback}}</td>
                                  <td>{{item.overall_feedback}}</td>
                                  <td *ngIf="item.is_completed == 0"><a class="btn primary" [routerLink]="['/trainingfeedback/'+item.assessmentid]">Give Feedback</a></td>
                                  <td *ngIf="item.is_completed == 1"><a class="btn primary" [routerLink]="['/trainingfeedback/'+item.assessmentid]">View Feedback</a></td>
                                  <td *ngIf="rolename != 10"><a class="btn primary" [ngClass]=" item.overall_feedback == 0 ? 'disappear' : ''" (click)="viewfeedback(item)">View Feedback</a></td>

                                  <!-- <td *ngIf="item.is_attended == 0 && item.is_expired == 1"><a class="btn primary unselectable" [routerLink]="['/trainingfeedback/'+item.assessmentid]" disabled>Give Feedback</a></td>
                                  <td *ngIf="item.is_attended == 1 && item.is_expired == 1"><a class="btn primary unselectable" [routerLink]="['/trainingfeedback/'+item.assessmentid]" disabled>View Feedback</a></td> -->
                                </tr>
                              </tbody>
                              <tbody *ngIf="feedback_list.length == 0">
                                <tr>
                                    <td colspan="9">Sorry, no data available</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="score-tab" role="tabpanel">
                    <div class="left_card">
                        <div class="table_training table-responsive scroll_x">
                            <table class="table table-fixed">
                              <thead>
                                <tr>
                                    <th>Training ID</th>
                                    <th>Training Title</th>
                                    <th>Training Dates</th>
                                    <!-- <th>Venue</th> -->
                                    <th>Pre Test</th>
                                    <th>Post Test</th>
                                    <th>Role Play / Demo</th>
                                    <th>Assignment</th>
                                    <th>Performance</th>
                                    <th>Overall Score </th>
                                    <th>Certification</th>
                                </tr>
                              </thead>
                              <tbody *ngIf="dsescorelist.length != 0">
                                <tr *ngFor="let item of dsescorelist;">
                                <td>{{item.training_id}}</td>
                                <td>{{item.title}}</td>
                                  <td>{{item.start_date | date: 'dd/MM/yyyy'}} - {{item.end_date | date: 'dd/MM/yyyy'}}</td>
                                  <!-- <td>{{item.venue_address}}</td> -->
                                  <td>{{item.pre_test_percentage}}%</td>
                                  <td>{{item.post_test_percentage}}%</td>
                                  <td *ngIf="item.roleplay_or_demo!='' && item.roleplay_or_demo !=undefined && item.roleplay_or_demo!=null">{{item.roleplay_or_demo}}%</td>
                                  <td *ngIf="item.roleplay_or_demo=='' || item.roleplay_or_demo ==undefined || item.roleplay_or_demo==null">-</td>
                                  <td *ngIf="item.assignment!='' && item.assignment !=undefined && item.assignment!=null">{{item.assignment}}%</td>
                                  <td *ngIf="item.assignment=='' || item.assignment ==undefined || item.assignment==null">-</td>
                                  <td *ngIf="item.performance!='' && item.performance !=undefined && item.performance!=null">{{item.performance}}%</td>
                                  <td *ngIf="item.performance=='' || item.performance ==undefined || item.performance==null">-</td>
                                  <td>{{item.overall}}%</td>
                                  <td *ngIf="item.certification == 1"><a class="btn primary success no_ptr">Certified</a></td>
                                  <td *ngIf="item.certification == 2"><a class="btn primary failure no_ptr">Failed</a></td>
                                  <td *ngIf="item.certification == 0"><a class="btn primary no_ptr">Certification</a></td>
                                </tr>
                              </tbody>
                              <tbody *ngIf="dsescorelist.length == 0">
                                <tr>
                                    <td colspan="11">Sorry, no data available</td>
                                </tr>
                                </tbody>
                            </table>
                          </div>
                    </div>
                </div>

            </div>

            

            <!-- <div class="box_right" *ngIf="is_filter && setMenuId=='1'">
                <img src="assets/img/arrow_blue_left.png " (click)="decreasFilter()" />
                <p>{{filter_date}}</p>
                <img [ngClass]="filter_date!=date_now?'':'disable_arrow'" src="assets/img/arrow_blue_right.png" (click)="increasFilter()" />
            </div> -->
            <!-- <div class="left_card" *ngIf="setMenuId=='1'">
                <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="color_error shake" *ngIf="trainer_error!=''">
                    <a class="text-left shake">
                        <img src="assets/img/error.png" />{{trainer_error}} </a>
                </div>
                <div class="trainer_welcome" *ngIf="trainer_welcomenote!=''">
                    <a class="text-left shake">
                        <img src="assets/img/my_assessment_gray.png" />  {{trainer_welcomenote}} </a>
                </div>

                <table class="table table-fixed trainer_welcome_table" *ngIf="trainer_welcomenote==''">
                    <thead>
                    <tr>
                        <th class="col-xs-4">Trainer Name</th>
                        <th class="col-xs-2">Training Type</th>
                        <th class="col-xs-1">Training Start Date</th>
                        <th class="col-xs-1">Training End Date</th>
                        <th class="col-xs-2">Evaluation Type</th>
                        <th class="col-xs-1">Training Status</th>
                        <th class="col-xs-1">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of itemdetail; let i=index">
                        <td class="col-xs-4">{{item.schedule_name}}</td>
                        <td class="col-xs-2">{{item.lvl_name}}</td>
                        <td class="col-xs-1">{{item.start_date}}</td>
                        <td class="col-xs-1">{{item.end_date}}</td>
                        <td class="col-xs-2">{{item.assessment_type_str}}</td>
                        <td class="col-xs-1" *ngIf="item.status==1">Inprogress</td>
                        <td class="col-xs-1" *ngIf="item.status==2">Completed</td>
                        <td class="col-xs-1">
                        <div class="clsicon icontraining ion-edit ptr" title="Take Training" (click)="takeTraining(item.schedule_id)" *ngIf="item.status==1"></div>
                        </td>
                    </tr>
                    
                    </tbody>
                </table>
            </div>
            <div class="left_card" *ngIf="setMenuId=='2'">
                <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="color_error shake" *ngIf="trainer_error!=''">
                    <a class="text-left shake">
                        <img src="assets/img/error.png" />{{trainer_error}} </a>
                </div>
                <div class="trainer_welcome" *ngIf="trainer_welcomenote!=''">
                    <a class="text-left shake">
                        <img src="assets/img/my_assessment_gray.png" />  {{trainer_welcomenote}} </a>
                </div>
    
                <table class="table table-fixed trainer_welcome_table" *ngIf="trainer_welcomenote==''">
                    <thead>
                        <tr>
                            <th class="col-xs-2">Trainer title</th>
                            <th class="col-xs-2">Trainer Description</th>
                            <th class="col-xs-2">Organiser Name</th>
                            <th class="col-xs-2">Channel</th>
                            <th class="col-xs-1">Training Start Date</th>
                            <th class="col-xs-1">Training End Date</th>
                            <th class="col-xs-1">Training Status</th>
                            <th class="col-xs-1">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of videoitemdetail; let i=index">
                            <td class="col-xs-2">{{item.title}}</td>
                            <td class="col-xs-2">{{item.description}}</td>
                            <td class="col-xs-2">{{item.organiser_name}}</td>
                            <td class="col-xs-2">{{item.channel}}</td>
                            <td class="col-xs-1">{{item.fromdate}}</td>
                            <td class="col-xs-1">{{item.todate}}</td>
                            <td class="col-xs-1" *ngIf="item.status==1">Inprogress</td>
                            <td class="col-xs-1" *ngIf="item.status==2">Completed</td>
                            <td class="col-xs-1">
                            <div class="clsicon icontrainingdel ion-trash-a ptr" title="Delete" (click)="deleteRow(item.id)"></div>
                            <div ng-if="item.is_edit!=1" class="clsicondis ion-edit" title="Edit"></div>
                            </td>
                        </tr>       
                    </tbody>
                </table>
            </div> -->
             <!-- <div class="left_card" *ngIf="setMenuId=='3'">
                <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="color_error shake" *ngIf="trainer_error!=''">
                    <a class="text-left shake">
                        <img src="assets/img/error.png" />{{trainer_error}} </a>
                </div>
                <div class="trainer_welcome" *ngIf="trainer_welcomenote!=''">
                    <a class="text-left shake">
                        <img src="assets/img/my_assessment_gray.png" />  {{trainer_welcomenote}} </a>
                </div>
    
                <table class="table table-fixed trainer_welcome_table" *ngIf="trainer_welcomenote==''">
                    <thead>
                        <tr>
                            <th class="col-xs-2">Trainer title</th>
                            <th class="col-xs-2">Trainer Description</th>
                            <th class="col-xs-2">Organiser Name</th>
                            <th class="col-xs-2">Channel</th>
                            <th class="col-xs-1">Training Start Date</th>
                            <th class="col-xs-1">Training End Date</th>
                            <th class="col-xs-1">Training Status</th>
                            <th class="col-xs-1">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of batchitemdetail; let i=index">
                            <td class="col-xs-2">{{item.title}}</td>
                            <td class="col-xs-2">{{item.description}}</td>
                            <td class="col-xs-2">{{item.organiser_name}}</td>
                            <td class="col-xs-2">{{item.channel}}</td>
                            <td class="col-xs-1">{{item.fromdate}}</td>
                            <td class="col-xs-1">{{item.todate}}</td>
                            <td class="col-xs-1" *ngIf="item.status==1">Inprogress</td>
                            <td class="col-xs-1" *ngIf="item.status==2">Completed</td>
                            <td class="col-xs-1">
                                <div class="clsicon icontraining ion-edit ptr" title="Take Training" (click)="takeTraining(item.id)" *ngIf="item.status==1"></div>
                            </td>
                        </tr>       
                    </tbody>
                </table>

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

