<app-addparticipantpop></app-addparticipantpop>
<app-confirmpop></app-confirmpop>
<app-toaster-container></app-toaster-container>
<app-main-header  *ngIf="type!='mobile'"></app-main-header>
<!-- <div class="trainercourse" style="display: none;" [ngClass]="type=='mobile'?'fullwidth':''">
    <div class="trainer_in">
        <div class="trainer_left">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active back_btn"  ng id="home-tab" data-toggle="tab"  (click)="backclicked()"
                    role="tab" aria-controls="home" aria-selected="true">back</a>
                </li>
            </ul>
            <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="trainingcontainer" *ngIf="training_detail!=''">
                    <div class="training_head">
                    <div class="cls_trainingheader">Training Details</div>
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training Name :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.schedule_name}}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training Duration :</div>
                                <div class="col-sm-6 clsleft">2 Days</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training Start Date :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.start_date}}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training End Date :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.end_date}}</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training Start Time :</div>
                                <div class="col-sm-6 clsleft">10</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training End Time :</div>
                                <div class="col-sm-6 clsleft">12</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Travel Information :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.travel_desc}}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training Venue :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.hotel_desc}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Training Submission Days :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.buffer_day}}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="row">
                                <div class="col-sm-6 clsright">Total Participants :</div>
                                <div class="col-sm-6 clsleft">{{training_detail.participant.length}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                    <div class="btnright">
                        <button class="clsbutton btn btn-elegant icon-left ion-plus"  (click)="addParticipant()"> Add Participant</button>
                    </div>

                    <div class="col-sm-6 tabletitle">Participant List</div>
                    <div class="table_training">
                    <table class="table table-fixed">
                        <thead>
                        <tr>
                            <th class="col-xs-2">SMPIN</th>
                            <th class="col-xs-2">Participant Name</th>
                            <th class="col-xs-3">Dealer Name</th>   
                            <th class="col-xs-1">Attendance</th>
                            <th class="col-xs-1">Role Play Score </th>
                            <th class="col-xs-2">Comments</th>
                            <th class="col-xs-1">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr *ngIf="is_addparticipant" >
                                <td colspan="3">
                                    <input type="text" class="form-control" [(ngModel)]="addparticipantsmpin" name="smpin" autocomplete="off" placeholder="Enter the SMPIN">
                                </td>
                                <td class="col-xs-1">
                                    <div class="clsicon iconcheck ion-edit" title="Save Participant" (click)="smpinvalidation()"></div>
                                    <div class="clsicon iconcancel ion-edit" title="Cancel Participant" (click)="closenewrow()"></div>
                                </td>
                                <td class="col-xs-1">
                                </td>
                                <td class="col-xs-2">
                                </td>
                                <td class="col-xs-1">
                                </td>
                            </tr>
                        <tr *ngFor="let item of training_detail.participant; let i=index">
                            <td class="col-xs-2">{{item.smpin}}</td>
                            <td class="col-xs-3">{{item.name}}</td>
                            <td class="col-xs-3">{{item.dealer_name}}</td>
                            <td class="col-xs-1">
                                <form>
                                    <div class="maxl"> 
                                        <input type="checkbox" [value]="item.userid" id="{{item.userid}}" name="{{item.userid}}" (change)="selectCheckbox(item,i)" [checked]="item.is_attendance==1" >
                                    </div>
                                </form>
                            </td>
                            <td class="col-xs-1">
                                <div class="maxl"> 
                                    <input type="text" class="form-control" [(ngModel)]="participant_data[i].score" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null" name="score" autocomplete="off" placeholder="Enter the Score">
                                </div>
                            </td>
                            <td class="col-xs-2">
                                <div class="maxl"> 
                                    <input type="text" class="form-control" [(ngModel)]="participant_data[i].remarks" name="remarks" autocomplete="off" placeholder="Enter the Remarks">
                                </div>
                            </td>
                            <td class="col-xs-1">
                                <div class="clsicon icontraining ion-edit" *ngIf="item.is_created==1" title="Remove Participant" (click)="removeParticipant(item)"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="btn_section">
                    <div class="btn_inner_box">
                        <button class="btn primary fixed float-right" (click)="onSave()">Save</button>
                        <button class="btn primary fixed float-right" (click)="onSubmit()">Finish</button>
                        <button class="btn primary fixed float-right" (click)="onCancel()">Cancel</button>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div> -->


<div class="trainercourse"  [ngClass]="type=='mobile'?'fullwidth':''">
    <div class="trainer_in">
        <div class="trainer_left">
            <div class="left_card">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active back_btn"  ng id="home-tab" data-toggle="tab"  (click)="backclicked()"
                        role="tab" aria-controls="home" aria-selected="true">back</a>
                    </li>
                </ul>
                <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>

                <!-- Trainer view -->
                <div class="trainingcontainer" *ngIf="(schedule_data!='' && !loader && role_num == 5)">
                    <div class="training_head">
                        <div class="cls_trainingheader">Training Details</div>
                        <div class="row">
                            <div class="col-sm-2 col-xs-12">
                                <button class="group-photo" (click)="attendance_status == 1 && clickprofile(1,'')" *ngIf="schedule_data.training_group_image ==''">
                                    <img src="/assets/img/camera_white.svg" alt="Upload" class="upload_img">
                                    <span *ngIf="attendance_status == 1">Upload Group Photo</span>
                                </button>

                                <div class="snapshot preview" *ngIf="schedule_data.training_group_image !=''">
                                    <img class="group_img old_group" src = "{{schedule_data.training_group_image}}"/>
                                    <img src="assets/img/edit.png" class="edit-icon" *ngIf="attendance_status == 1" alt="EDIT" (click)="attendance_status == 1 && clickprofile(1,'')">
                                </div>
                                <div class="snapshot preview">
                                    <img class="group_img">
                                    <img src="assets/img/edit.png" class="edit-icon" *ngIf="attendance_status == 1" alt="EDIT" (click)="attendance_status == 1 && clickprofile(1,'')">
                                </div>

                            </div>

                            <div class="col-sm-10 col-xs-12">
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training UID :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.training_id}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Name :</div>
                                            <div class="col-sm-7 clsleft" *ngIf="schedule_data.lvl_id == 7">{{schedule_data.title}} ({{schedule_data.training_other_title}})</div>
                                            <div class="col-sm-7 clsleft" *ngIf="schedule_data.lvl_id != 7">{{schedule_data.title}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Trainer Name :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.organizer_name}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Start Date :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.start_date | date: 'dd-MMM-yyyy'}}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Business Segment :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.segment_name}}</div> 
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training End Date :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.end_date | date: 'dd-MMM-yyyy'}}</div>
                                            
                                        </div>
                                    </div>
                                    <!-- <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Duration :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.training_days}} Days</div>
                                        </div>
                                    </div> -->
                                </div>
                                
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Total Participants :</div>
                                            <div class="col-sm-7 clsleft">{{participant_list.length}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-6 clsright">Training Submission Days :</div>
                                            <div class="col-sm-6 clsleft">{{schedule_data.current_day}}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row extra" *ngFor="let date_btn of add_date_buttons">
                                            <div class="col-sm-5 clsright">{{date_btn.day}}:</div>
                                            <div class="col-sm-7 clsleft">{{date_btn.date}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Venue :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.venue_address}}</div>
                                        </div>
                                        <div class="row" *ngIf="schedule_data.schedule_name!=''">
                                            <div class="col-sm-5 clsright">Training Information :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.schedule_name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <ul class="nav nav-tabs custom" id="checklist" role="tablist">
                        <li class="nav-item">
                           <a class="nav-link active" data-toggle="tab" href="#attendance" role="tab" aria-selected="true" (click)="tabclick('1')">Attendance Marking</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" data-toggle="tab" href="#comments" role="tab" aria-selected="false" (click)="tabclick('2')">Score & Comments</a>
                        </li>
                        <li class="nav-item" *ngIf="schedule_data.score_submit == 2">
                          <a class="nav-link" data-toggle="tab" href="#summary" role="tab" aria-selected="false"  (click)="tabclick('3')">Summary</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#feedback" role="tab" aria-selected="false"  (click)="tabclick('4')">Feedback</a>
                        </li> -->
                    </ul>

                    <div class="tab-content custom">
                        <div class="tab-pane fade show active" id="attendance" role="tabpanel">
                            <button class="btn primary day index_btn{{i}}" *ngFor = "let btn of add_buttons;let i= index" [ngClass]="active_btn == i ? 'active' : ''" (click)="clickdate(i)">{{btn}}</button>
                            <div class="table_training table-responsive">
                                <table class="table table-fixed" *ngIf="attendance_status == 1">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer/AM Name</th>   
                                            <th *ngIf="showabsentees">AM's Absentees Reason</th>
                                            <th>Present</th>   
                                            <th>Absent</th>   
                                            <th>Upload Photo</th>   
                                            <th>Manual Attendance</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of participant_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}<br><span class="am"> AM : {{item.am_name}}</span></td>
                                        <td *ngIf="(showabsentees && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name != '' && item.am_absence_reason_name != null) && item.am_absence_reason != 6)">{{item.am_absence_reason_name}}</td>
                                        <td *ngIf="(showabsentees && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name != '' && item.am_absence_reason_name != null) && item.am_absence_reason == 6)">{{item.am_absence_reason_name}} - {{item.am_absence_reason_desc}}</td>
                                        <td *ngIf="(showabsentees && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name == '' || item.am_absence_reason_name == null))">-</td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="btn btn-attend primary present{{item.userid}}"  (click)="codesend(item)" data-toggle="modal" data-target="#sendcodemodal">
                                                Present
                                            </button>
                                            <span class="has-error score_err attenderr{{item.userid}}">* Please give attendance</span>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined && item.attendance !=''))">
                                            <button class="btn btn-attend primary present{{item.userid}}"  [ngClass]="item.attendance.ispresent == 1 || item.attendance.ispresent == 0 ? 'active_cls active' : ''" (click)="item.attendance.ispresent == 2 && codesend(item);item.attendance.ispresent == 0 && codesend(item);">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" data-toggle="modal" data-target="#reasonmodal" (click)="reasonsend(item,1)">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance"  *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined && item.attendance !=''))">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" [ngClass]="item.attendance.ispresent == 2 ? 'active_cls active' : ''" (click)="item.attendance.ispresent == 2 && reasonsend(item,2);item.attendance.ispresent == 1 && reasonsend(item,1);item.attendance.ispresent == 0 && reasonsend(item,1);">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="upload-img load{{item.userid}}" (click)="clickprofile(2,item)">
                                                <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}">
                                                <span>Upload Photo</span>
                                            </button>
                                            <span class="has-error score_err userpic{{item.userid}}">* </span>
                                            <div class="snapshot preview image{{item.userid}}">
                                                <img class="preview_img{{item.userid}} single_img ptr"/>
                                            </div>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined))">
                                            <div class="snapshot preview" *ngIf="item.attendance.image!=null && item.attendance.image!=undefined && item.attendance.image!=''">
                                                <img class="preview_img{{item.userid}} single_img ptr" [src]="item.attendance.image" style="border: 1px solid #ddd;height:70px;" (click)="viewimage(item)"/>
                                            </div>
                                            <div *ngIf="item.attendance.image==null || item.attendance.image==undefined || item.attendance.image==''">
                                                <button class="upload-img load{{item.userid}}" (click)="clickprofile(2,item)">
                                                    <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}">
                                                    <span>Upload Photo</span>
                                                </button>
                                                <span class="has-error score_err userpic{{item.userid}}">* </span>
                                                <div class="snapshot preview image{{item.userid}}">
                                                    <img class="preview_img{{item.userid}} single_img ptr"/>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="comment" *ngIf="item.status == 1 || item.status == 0">
                                            <form *ngIf="item.attendance==null || item.attendance==undefined">
                                                <input type="checkbox" [value]="item.userid" id="{{item.userid}}" name="{{item.userid}}" (change)="clickCheckbox(item,i)" [checked]="item.is_attendance==1" class="check{{item.userid}}">
                                                <div [ngClass]="isDisabled ? 'no_drop' : ''">
                                                    <textarea class="form-control text{{item.userid}}" id = {{item.userid}} placeholder="Enter Reason"  disabled (change)="onentermanualreason($event,item)" required></textarea>
                                                </div>
                                            </form>
                                            <form *ngIf="item.attendance!=null && item.attendance!=undefined">
                                                <input type="checkbox" id="{{item.userid}" class="check{{item.userid}}" [attr.disabled] = "(item.attendance.manual_attendance_reason != '') ? true : false" [checked]="item.attendance.manual_attendance_reason != ''">
                                                <div>
                                                    <textarea class="form-control" placeholder="Enter Reason" [(ngModel)] = "item.attendance.manual_attendance_reason" [ngModelOptions]="{standalone: true}" [ngClass]="item.attendance.manual_attendance_reason == '' ? 'no_action' : ''" disabled></textarea>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <table class="table table-fixed 2" *ngIf="attendance_status == 0">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer/AM Name</th>   
                                            <th *ngIf="showabsentees">AM's Absentees Reason</th>
                                            <th>Present</th>   
                                            <th>Absent</th>   
                                            <th>Upload Photo</th>   
                                            <th>Manual Attendance</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of participant_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}<br><span class="am"> AM : {{item.am_name}}</span></td>
                                        <td *ngIf="(showabsentees && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name != '' && item.am_absence_reason_name != null) && item.am_absence_reason != 6)">{{item.am_absence_reason_name}}</td>
                                        <td *ngIf="(showabsentees && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name != '' && item.am_absence_reason_name != null) && item.am_absence_reason == 6)">{{item.am_absence_reason_name}} - {{item.am_absence_reason_desc}}</td>
                                        <td *ngIf="(showabsentees && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name == '' || item.am_absence_reason_name == null))">-</td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined))">
                                            <button class="btn btn-attend primary demo present{{item.userid}}" [ngClass]="item.attendance.ispresent == 1 || item.attendance.ispresent == 0 ? 'active_cls active' : 'disable_cls'">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined))">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" [ngClass]="item.attendance.ispresent == 2 ? 'active_cls active' : 'disable_cls'" (click)="item.attendance.ispresent == 2 && reasonsend(item,2);">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="btn btn-attend primary present{{item.userid}}">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="upload-img load{{item.userid}}" disabled>
                                                <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}" style="opacity: 0.75;">
                                                <span>Upload Photo</span>
                                            </button>
                                            <div class="snapshot preview image{{item.userid}}">
                                                <img class="preview_img{{item.userid}} single_img ptr"/>
                                            </div>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined))">
                                            <div class="snapshot preview" *ngIf="item.attendance.image!=null && item.attendance.image!=undefined && item.attendance.image!=''">
                                                <img class="preview_img{{item.userid}} single_img ptr" [src]="item.attendance.image" style="border: 1px solid #ddd;height:70px;" (click)="viewimage(item)"/>
                                            </div>
                                            <div *ngIf="item.attendance.image==null || item.attendance.image==undefined || item.attendance.image==''">
                                                <button class="upload-img load{{item.userid}}" disabled>
                                                    <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}" style="opacity: 0.75;">
                                                    <span>Upload Photo</span>
                                                </button>
                                                <div class="snapshot preview image{{item.userid}}">
                                                    <img class="preview_img{{item.userid}} single_img ptr"/>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="comment" *ngIf="item.status == 1 || item.status == 0">
                                            <form *ngIf="item.attendance==null || item.attendance==undefined">
                                                <input type="checkbox" [value]="item.userid" id="{{item.userid}}" name="{{item.userid}}" disabled [checked]="item.is_attendance==1" class="check{{item.userid}}">
                                                <div [ngClass]="isDisabled ? 'no_drop' : ''">
                                                    <textarea class="form-control text{{item.userid}}" id = {{item.userid}} placeholder="Enter Reason" disabled (change)="onentermanualreason($event,item)"></textarea>
                                                </div>
                                            </form>
                                            <form *ngIf="item.attendance!=null && item.attendance!=undefined">
                                                <input type="checkbox" id="{{item.userid}" class="check{{item.userid}}" [attr.disabled] = "(item.attendance.manual_attendance_reason != '') ? true : false" [checked]="item.attendance.manual_attendance_reason != ''">
                                                <div>
                                                    <textarea class="form-control" placeholder="Enter Reason" [(ngModel)] = "item.attendance.manual_attendance_reason" [ngModelOptions]="{standalone: true}" [ngClass]="item.attendance.manual_attendance_reason == '' ? 'no_action' : ''" disabled></textarea>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <!-- <table class="table table-fixed 2" *ngIf="!showeditattendance">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer Name</th>   
                                            <th>Present</th>   
                                            <th>Absent</th>   
                                            <th>Upload Photo</th>   
                                            <th>Manual Attendance</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of participant_list; let i=index">
                                        <td>{{item.smpin}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.dealer_name}}</td>
                                        <td class="attendance" *ngIf="item.attendance!=null && item.attendance!=undefined">
                                            <button class="btn btn-attend primary demo present{{item.userid}}" [ngClass]="item.attendance.ispresent == 1 ? 'active_cls active' : ''"  (click)="item.attendance.ispresent == 2 && codesend(item)">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="item.attendance!=null && item.attendance!=undefined">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" [ngClass]="item.attendance.ispresent == 2 ? 'active_cls active' : ''" (click)="item.attendance.ispresent == 2 && reasonsend(item,2);item.attendance.ispresent == 1 && reasonsend(item,1);">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="item.attendance==null || item.attendance==undefined">
                                            <button class="btn btn-attend primary present{{item.userid}}"  (click)="codesend(item)" data-toggle="modal" data-target="#sendcodemodal">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="item.attendance==null || item.attendance==undefined">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" data-toggle="modal" data-target="#reasonmodal" (click)="reasonsend(item,1)">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="item.attendance==null || item.attendance==undefined">
                                            <button class="upload-img load{{item.userid}}" (click)="clickprofile(2,item)" disabled>
                                                <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}" style="opacity: 0.75;">
                                                <span>Upload Photo</span>
                                            </button>
                                            <div class="snapshot preview image{{item.userid}}">
                                                <img class="preview_img{{item.userid}}"/>
                                            </div>
                                        </td>
                                        <td class="attendance" *ngIf="item.attendance!=null && item.attendance!=undefined">
                                            <div class="snapshot preview" *ngIf="item.attendance.image!=null && item.attendance.image!=undefined && item.attendance.image!=''">
                                                <img class="preview_img{{item.userid}}" [src]="item.attendance.image" style="border: 1px solid #ddd;"/>
                                            </div>
                                            <div *ngIf="item.attendance.image==null || item.attendance.image==undefined || item.attendance.image==''">
                                                <button class="upload-img load{{item.userid}}" (click)="clickprofile(2,item)" disabled>
                                                    <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}" style="opacity: 0.75;">
                                                    <span>Upload Photo</span>
                                                </button>
                                                <div class="snapshot preview image{{item.userid}}">
                                                    <img class="preview_img{{item.userid}}"/>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="comment">
                                            <form *ngIf="item.attendance==null || item.attendance==undefined">
                                                <input type="checkbox" [value]="item.userid" id="{{item.userid}}" name="{{item.userid}}" (change)="clickCheckbox(item,i)" [checked]="item.is_attendance==1" class="check{{item.userid}}">
                                                <div [ngClass]="isDisabled ? 'no_drop' : ''">
                                                    <textarea class="form-control text{{item.userid}}" id = {{item.userid}} placeholder="Enter Reason" [(ngModel)] = "manual_reason[item.userid]" [ngModelOptions]="{standalone: true}" disabled></textarea>
                                                </div>
                                            </form>
                                            <form *ngIf="item.attendance!=null && item.attendance!=undefined">
                                                <input type="checkbox" id="{{item.userid}" class="check{{item.userid}}" [attr.disabled] = "(item.attendance.ispresent == 0) ? true : false" [checked]="item.attendance.ispresent == 0">
                                                <div>
                                                    <textarea class="form-control" placeholder="Enter Reason" [(ngModel)] = "item.attendance.manual_attendance_reason" [ngModelOptions]="{standalone: true}" disabled [ngClass]="item.attendance.ispresent != 0 ? 'no_action' : ''"></textarea>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table> -->
                            </div>
                        </div>
                        <div class="tab-pane fade body_check" id="comments" role="tabpanel" >
                            <div class="table_training table-responsive scroll_x">
                                <table class="table table-fixed 1" id="score_table" *ngIf="attendance_status == 1">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer/AM Name</th>
                                            <th *ngIf="showpre">Pre-Test Score</th>
                                            <th *ngIf="showpost">Post-Test Score</th>
                                            <th *ngIf="showrole">Role Play/Demo</th>
                                            <th *ngIf="showassign">Assignment</th>
                                            <th *ngIf="showperform">Performance</th>
                                            <th>Total Score</th>
                                            <th *ngIf="showcertified">Certification</th>   
                                            <th>Remarks</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <!-- <tr *ngFor="let item of participant_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}</td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showpre)">
                                            <input type="text" placeholder="Enter Score" class="form-control pretest{{item.userid}}" [(ngModel)]="item.pre_test" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0 )&& showpost)">
                                            <input type="text" placeholder="Enter Score" class="form-control posttest{{item.userid}}" [(ngModel)]="item.post_test" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" (change)="onenterscroe($event,item,'role')">
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'role')" *ngIf="am_acknow == 0">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1">
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0)&& showassign && (item.assignment ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" (change)="onenterscroe($event,item,'assign')">
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'assign')" *ngIf="am_acknow == 0">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1">
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" (change)="onenterscroe($event,item,'perform')">
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'perform')" *ngIf="am_acknow == 0">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1">
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall ==''))">
                                            <input type="text" class="form-control overall{{item.userid}}" name="score"  placeholder="Enter Score" readonly>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall !=''))">
                                            <input type="text" class="form-control overall{{item.userid}}" name="score"  placeholder="Enter Score"  [(ngModel)] = "item.overall" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification ==0))" class="1">
                                            <button class="btn primary cert certification{{item.userid}}">{{name_Of_certification}}</button>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification !=0))" class="2">
                                            <button class="btn primary cert success certification{{item.userid}}" *ngIf="item.certification == 1">Certified</button>
                                            <button class="btn primary cert failure certification{{item.userid}}" *ngIf="item.certification == 2">Failed</button>
                                        </td>

                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks ==''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "comments[item.userid]" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')"  minlength="10"></textarea>
                                                <span class="has-error score_err remarkerror{{item.userid}}">* Please enter min 60 characters</span>
                                            </form>
                                        </td>
                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks !=''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')" *ngIf="am_acknow == 0"></textarea>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1"></textarea>
                                            </form>
                                        </td>
                                    </tr> -->
                                    <tr *ngFor="let item of attendances_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}<br><span class="am"> AM : {{item.am_name}}</span></td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showpre)">
                                            <input type="text" placeholder="Score" class="form-control pretest{{item.userid}} pre_post" [(ngModel)]="item.pre_test_percentage" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0 )&& showpost)">
                                            <input type="text" placeholder="Score" class="form-control posttest{{item.userid}} pre_post" [(ngModel)]="item.post_test_percentage" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" (change)="onenterscroe($event,item,'role')" pattern="[0-9]*" maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'role')" maxlength="3" (keypress)="restrictAlphabets($event)">

                                            <!-- <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1"> -->
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0)&& showassign && (item.assignment ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" (change)="onenterscroe($event,item,'assign')" pattern="[0-9]*" maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'assign')" maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <!-- <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1"> -->
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" (change)="onenterscroe($event,item,'perform')" maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'perform')" maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <!-- <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1"> -->
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall ==''))">
                                            <input type="text" class="form-control overall{{item.userid}} pre_post" name="score"  placeholder="Score" readonly>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall !=''))">
                                            <input type="text" class="form-control overall{{item.userid}} pre_post" name="score"  placeholder="Score"  [(ngModel)] = "item.overall" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification ==0))" class="1">
                                            <button class="btn primary cert certification{{item.userid}}">{{name_Of_certification}}</button>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification !=0))" class="2">
                                            <button class="btn primary cert success certification{{item.userid}}" *ngIf="item.certification == 1">Certified</button>
                                            <button class="btn primary cert failure certification{{item.userid}}" *ngIf="item.certification == 2">Failed</button>
                                        </td>

                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks ==''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "comments[item.userid]" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')"  minlength="10"></textarea>
                                                <span class="has-error score_err remarkerror{{item.userid}}">* Please enter min 60 characters</span>
                                                <span class="has-error score_err remarkreqerror{{item.userid}}">* </span>
                                            </form>
                                        </td>
                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks !=''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')"></textarea>
                                                <!-- <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" readonly *ngIf="am_acknow == 1"></textarea> -->
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                    <!-- <tbody *ngIf="attendances_list.length == 0">
                                        <tr>
                                            <td colspan="7">Sorry, no data available</td>
                                        </tr>
                                    </tbody> -->
                                </table>
                                <table class="table table-fixed 2" *ngIf="attendance_status == 0">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer/AM Name</th>
                                            <th *ngIf="showpre">Pre-Test Score</th>
                                            <th *ngIf="showpost">Post-Test Score</th>
                                            <th *ngIf="showrole">Role Play/Demo</th>
                                            <th *ngIf="showassign">Assignment</th>
                                            <th *ngIf="showperform">Performance</th>
                                            <th>Total Score</th>
                                            <th *ngIf="showcertified">Certification</th>   
                                            <th>Remarks</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <!-- <tr *ngFor="let item of participant_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}</td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showpre)">
                                            <input type="text" placeholder="Enter Score" class="form-control pretest{{item.userid}}" [(ngModel)]="item.pre_test" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showpost)">
                                            <input type="text" placeholder="Enter Score" class="form-control posttest{{item.userid}}" [(ngModel)]="item.post_test" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" (change)="onenterscroe($event,item,'role')" readonly>
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'role')" readonly>
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" (change)="onenterscroe($event,item,'assign')" readonly>
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'assign')" readonly>
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" (change)="onenterscroe($event,item,'perform')" readonly>
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'perform')" readonly>
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall ==''))">
                                            <input type="text" class="form-control overall{{item.userid}}" name="score"  placeholder="Enter Score" readonly>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall !=''))">
                                            <input type="text" class="form-control overall{{item.userid}}" name="score"  placeholder="Enter Score"  [(ngModel)] = "item.overall" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification ==0))" class="1">
                                            <button class="btn primary cert certification{{item.userid}}">{{name_Of_certification}}</button>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification !=0))" class="2">
                                            <button class="btn primary cert success certification{{item.userid}}" *ngIf="item.certification == 1">Certified</button>
                                            <button class="btn primary cert failure certification{{item.userid}}" *ngIf="item.certification == 2">Failed</button>
                                        </td>

                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks ==''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "comments[item.userid]" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')" readonly></textarea>
                                            </form>
                                        </td>
                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks !=''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')" readonly></textarea>
                                            </form>
                                        </td>
                                    </tr> -->
                                    <tr *ngFor="let item of attendances_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}<br><span class="am"> AM : {{item.am_name}}</span></td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showpre)">
                                            <input type="text" placeholder="Score" class="form-control pretest{{item.userid}} pre_post" [(ngModel)]="item.pre_test_percentage" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showpost)">
                                            <input type="text" placeholder="Score" class="form-control posttest{{item.userid}} pre_post" [(ngModel)]="item.post_test_percentage" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" (change)="onenterscroe($event,item,'role')"  maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'role')"  maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>

                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" (change)="onenterscroe($event,item,'assign')"  maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'assign')"  maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance ==''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" (change)="onenterscroe($event,item,'perform')"  maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="score-role" *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance !=''))">
                                            <input type="text" placeholder="Enter Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'perform')"  maxlength="3" (keypress)="restrictAlphabets($event)">
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall ==''))">
                                            <input type="text" class="form-control overall{{item.userid}} pre_post" name="score"  placeholder="Score" readonly>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall !=''))">
                                            <input type="text" class="form-control overall{{item.userid}} pre_post" name="score"  placeholder="Score"  [(ngModel)] = "item.overall" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification ==0))" class="1">
                                            <button class="btn primary cert certification{{item.userid}}">{{name_Of_certification}}</button>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification !=0))" class="2">
                                            <button class="btn primary cert success certification{{item.userid}}" *ngIf="item.certification == 1">Certified</button>
                                            <button class="btn primary cert failure certification{{item.userid}}" *ngIf="item.certification == 2">Failed</button>
                                        </td>

                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks ==''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "comments[item.userid]" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')"></textarea>
                                                <span class="has-error score_err remarkerror{{item.userid}}">* Please enter min 60 characters</span>
                                                <span class="has-error score_err remarkreqerror{{item.userid}}">* </span>
                                            </form>
                                        </td>
                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks !=''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" (change)="onenterscroe($event,item,'remark')"></textarea>
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="summary" role="tabpanel">
                            <div class="col-sm-12">
                                <div class="summary-inn" *ngIf="summary_details!='' && summary_details!= undefined && summary_details!=null">
                                    <div class="row" *ngIf="summary_attendance!=''">
                                        <div class="table-responsive col-sm-9">
                                            <table class="table table-fixed">
                                                <thead>
                                                    <tr>
                                                        <th>Days</th>
                                                        <th>Total Planned Participant</th>
                                                        <th>Total Participant Attended</th>
                                                        <th>No of Absents</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let btn of summary_attendance;let i= index">
                                                        <td>Day {{btn.day}}</td>
                                                        <td>{{btn.total_planned_participant}}</td>
                                                        <td>{{btn.total_participant_appeared}}</td>
                                                        <td>{{btn.no_of_absents}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <p><span>Total Planned Participants:</span>{{summary_details.total_planned_participant}}</p>
                                    <p><span>Total Participant Attended:</span>{{summary_details.total_participant_appeared}}</p>
                                    <p><span>No of DSE Certified:</span>{{summary_details.no_of_dse_certified}}</p>
                                    <p><span>No of DSE Failed:</span>{{summary_details.no_of_dse_failed}}</p>
                                    <p><span>Batch through %:</span>{{summary_details.batch_through}}%</p>
                                    <p><span>Average Batch score:</span>{{summary_details.average_batch_score}}%</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="btn_section">
                        <div class="btn_inner_box">
                            <!-- <span class="note" *ngIf="tab_clicked == 1 && trainingcurrent_day == 1">Note: On clicking Save button, Pre-Assesment will be triggered to all participants who are marked present.</span><br>
                            <span class="note" *ngIf="tab_clicked == 1 && schedule_data.submit_enable == 1">Note: On clicking Submit button, Post-Assesment will be triggered to all participants who are marked present.</span><br> -->
                            <span class="note" *ngIf="tab_clicked == 1" [innerHTML]="schedule_data.notes"></span>
                            <span class="note" *ngIf="tab_clicked == 2">Note: Trainer can't finish the training until AM give the reason for absents.</span><br>
                            <span class="has-error score_err submitatt">* Please give attendance</span>
                            <span class="has-error score_err remark_emptyerr">* Please Give Remark</span>
                            <span class="has-error score_err submitatt_manual">* Please give Manual attendance Reason</span>
                            <span class="has-error score_err imageerr">* Please Upload Photo for Presentees</span>
                            <!-- <button class="btn primary fixed float-right btn-resize finish_btn" [ngStyle]="{'cursor': schedule_data.am_acknowledgement == 1 ? 'pointer' : 'no-drop' }" *ngIf="tab_clicked == 2 && schedule_data.submit_enable == 1 &&schedule_data.score_submit == 1" [disabled] = "schedule_data.am_acknowledgement != 1" (click)="onfinishtraining()">Finish Training</button> -->

                            <button class="btn primary fixed float-right btn-resize finish_btn" [ngStyle]="{'cursor': schedule_data.current_am_acknowledgement_status == 1 ? 'pointer' : 'no-drop' }" *ngIf="tab_clicked == 2 && schedule_data.submit_enable == 1 &&schedule_data.score_submit == 1" [disabled] = "schedule_data.current_am_acknowledgement_status != 1" (click)="onfinishtraining()">Finish Training</button>

                            <!-- <button class="btn primary fixed float-right btn-resize" [ngStyle]="{'cursor': !notfiled ? 'pointer' : 'no-drop' }" *ngIf="tab_clicked == 1 && schedule_data.submit_enable == 1 && schedule_data.attendance_submit == 0" (click)="onSubmitattendance()" [disabled] = "notfiled">Submit</button> -->

                            <button class="btn primary fixed float-right btn-resize" *ngIf="tab_clicked == 1  && schedule_data.current_attendance_submit_status == 0" [disabled] = "notfiled" (click)="onSubmitattendance()" [ngStyle]="{'cursor': notfiled ? 'no-drop' : 'pointer' }">Submit</button>

                            <button class="btn primary fixed float-right btn-resize"  [ngStyle]="{'cursor': !scoresubmitdisable ? 'pointer' : 'no-drop' }"  *ngIf="tab_clicked == 2 && schedule_data.submit_enable == 1 && schedule_data.score_submit == 0 && attendances_list.length!=0" (click)="onSubmitscore('1')" [disabled] = "scoresubmitdisable">Submit Score</button>
                            
                            <button class="btn primary fixed float-right btn-resize" *ngIf="tab_clicked == 1 || tab_clicked == 2" (click)="onCancel()">Cancel</button>

                            <button class="btn primary fixed float-right btn-resize" (click)="onSaveattendance()" *ngIf="(tab_clicked == 1 && attendance_status == 1 && schedule_data.current_attendance_submit_status == 0)" [disabled] = "attendanceuserlist.length== 0" [ngClass]="schedule_data.training_completed ? 'btn_disable' : ''" [ngStyle]="{'cursor': attendanceuserlist.length== 0 ? 'no-drop' : 'pointer' }">Save</button>
                            
                            <!-- <button class="btn primary fixed float-right btn-resize" [ngClass]="schedule_data.training_completed ? 'btn_disable' : ''" [disabled] = "!showeditattendance || scoreuserlist.length== 0" (click)="onSavescore()" *ngIf="(tab_clicked == 2 && attendance_status == 1 && schedule_data.score_submit == 0 && attendances_list.length!=0)">Save</button> -->
                            <button class="btn primary fixed float-right btn-resize" [ngClass]="schedule_data.training_completed ? 'btn_disable' : ''" [disabled] = "scoreuserlist.length== 0" (click)="onSavescore()" *ngIf="(tab_clicked == 2 && schedule_data.score_submit == 0 && attendances_list.length!=0)" [ngStyle]="{'cursor': scoreuserlist.length== 0 ? 'no-drop' : 'pointer' }">Save</button>
                        </div>
                    </div>
                </div>

                <!-- RM/AM/ZM/Dealer/Ho view -->
                <div class="trainingcontainer" *ngIf="(schedule_data!='' && !loader && (role_num == 6 ||role_num == 7 || role_num == 4 || role_num == 14 || role_num == 3))">
                    <div class="training_head">
                        <div class="cls_trainingheader">Training Details</div>
                        <div class="row">
                            <div class="col-sm-2 col-xs-12">
                                <button class="group-photo cur_auto" *ngIf="schedule_data.training_group_image ==''">
                                    <img src="/assets/img/camera_white.svg" alt="Upload" class="upload_img">
                                </button>
                                <div class="snapshot preview" *ngIf="schedule_data.training_group_image !=''">
                                    <img class="group_img old_group" src = "{{schedule_data.training_group_image}}"/>
                                </div>
                            </div>

                            <div class="col-sm-10 col-xs-12">
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training UID :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.training_id}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Name :</div>
                                            <div class="col-sm-7 clsleft" *ngIf="schedule_data.lvl_id == 7">{{schedule_data.title}} ({{schedule_data.training_other_title}})</div>
                                            <div class="col-sm-7 clsleft" *ngIf="schedule_data.lvl_id != 7">{{schedule_data.title}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Trainer Name :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.organizer_name}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Start Date :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.start_date | date: 'dd-MMM-yyyy'}}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Business Segment :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.segment_name}}</div> 
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training End Date :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.end_date | date: 'dd-MMM-yyyy'}}</div>     
                                        </div>
                                    </div>
                                    <!-- <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Duration :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.training_days}} Days</div>
                                        </div>
                                    </div> -->
                                </div>
                                
                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Total Participants :</div>
                                            <div class="col-sm-7 clsleft">{{participant_list.length}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-6 clsright">Training Submission Days :</div>
                                            <div class="col-sm-6 clsleft">{{schedule_data.current_day}}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row extra" *ngFor="let date_btn of add_date_buttons">
                                            <div class="col-sm-5 clsright">{{date_btn.day}}:</div>
                                            <div class="col-sm-7 clsleft">{{date_btn.date}}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="row">
                                            <div class="col-sm-5 clsright">Training Venue :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.venue_address}}</div>
                                        </div>
                                        <div class="row" *ngIf="schedule_data.schedule_name!=''">
                                            <div class="col-sm-5 clsright">Training Information :</div>
                                            <div class="col-sm-7 clsleft">{{schedule_data.schedule_name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <ul class="nav nav-tabs custom" id="checklist" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#attendance" role="tab" aria-selected="true" (click)="tabclick('1')">Attendance Marking</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#comments" role="tab" aria-selected="false" (click)="tabclick('2')">Score & Comments</a>
                        </li>
                        <li class="nav-item" *ngIf="role_num != 14 && schedule_data.score_submit == 2">
                            <a class="nav-link" data-toggle="tab" href="#summary" role="tab" aria-selected="false" (click)="tabclick('3')">Summary</a>
                        </li>
                    </ul>

                    <div class="tab-content custom">
                        <div class="tab-pane fade show active" id="attendance" role="tabpanel">
                            <button class="btn primary day index_btn{{i}}" *ngFor = "let btn of add_buttons;let i= index" [ngClass]="active_btn == i ? 'active' : ''" (click)="clickdate(i)">{{btn}}</button>
                            <div class="table_training table-responsive">
                                <table class="table table-fixed">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer/AM Name</th>  
                                            <th>Present</th>   
                                            <th>Absent</th>   
                                            <th>Upload Photo</th>  
                                            <th *ngIf="showabsentees_trainer">Trainer's Absentees<br> Reason</th>  
                                            <th *ngIf="showabsentees && (role_num == 14 || role_num == 6) ">AM's Absentees<br> Reason</th>  
                                            <th>Manual Attendance</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of participant_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}<br><span class="am"> AM : {{item.am_name}}</span></td>
                                        <td class="attendance cur" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="btn btn-attend primary present{{item.userid}} cur_auto">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined && item.attendance !=''))">
                                            <button class="btn btn-attend primary present{{item.userid}} cur_auto"  [ngClass]="item.attendance.ispresent == 1 || item.attendance.ispresent == 0 ? 'active_cls active' : ''">
                                                Present
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}} cur_auto">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance"  *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined && item.attendance !='') && role_num == 7)">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" [ngClass]="item.attendance.ispresent == 2 ? 'active_cls active' : 'cur_auto'" (click)="item.am_absence_reason == '' && amreasonsend(item,1);
                                            item.am_absence_reason!='' && amreasonsend(item,2)">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance"  *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined && item.attendance !='') && role_num != 7)">
                                            <button class="btn primary btn-attend btn-absent absent{{item.userid}}" [ngClass]="item.attendance.ispresent == 2 ? 'active_cls active' : 'cur_auto'" (click)="reasonsend(item,2)">
                                                Absent
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">
                                            <button class="upload-img load{{item.userid}} cur_auto">
                                                <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}">
                                                <span>Upload Photo</span>
                                            </button>
                                        </td>
                                        <td class="attendance" *ngIf="((item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined))">
                                            <div class="snapshot preview" *ngIf="item.attendance.image!=null && item.attendance.image!=undefined && item.attendance.image!=''">
                                                <img class="preview_img{{item.userid}} single_img ptr" [src]="item.attendance.image" style="border: 1px solid #ddd;height:70px;" (click)="viewimage(item)"/>
                                            </div>
                                            <div *ngIf="item.attendance.image==null || item.attendance.image==undefined || item.attendance.image==''">
                                                <button class="upload-img load{{item.userid}} cur_auto">
                                                    <img src="/assets/img/photo.svg" alt="Upload" class="upload_img{{item.userid}}">
                                                    <span>Upload Photo</span>
                                                </button>
                                            </div>
                                        </td>
                                        <td *ngIf="(showabsentees_trainer && (item.status == 1 || item.status == 0) && (item.attendance==null || item.attendance==undefined))">-</td>
                                        <td *ngIf="(showabsentees_trainer && (item.status == 1 || item.status == 0) && (item.attendance!=null && item.attendance!=undefined && item.attendance !=''))">{{item.attendance.absence_reason}}</td>

                                        <td *ngIf="(showabsentees && (role_num == 14 || role_num == 6) && (item.status == 1 || item.status == 0) && (item.am_absence_reason_name != '' && item.am_absence_reason_name != null) && item.am_absence_reason != 6)">{{item.am_absence_reason_name}}</td>
                                        <td *ngIf="(showabsentees &&  (role_num == 14 || role_num == 6) &&(item.status == 1 || item.status == 0) && (item.am_absence_reason_name != '' && item.am_absence_reason_name != null) && item.am_absence_reason == 6)">{{item.am_absence_reason_name}} - {{item.am_absence_reason_desc}}</td>
                                        <td *ngIf="(showabsentees  && (role_num == 14 || role_num == 6)&& (item.status == 1 || item.status == 0) && (item.am_absence_reason_name == '' || item.am_absence_reason_name == null))">-</td>

                                        <td class="comment" *ngIf="item.status == 1 || item.status == 0">
                                            <form *ngIf="item.attendance==null || item.attendance==undefined">
                                                <input type="checkbox" [value]="item.userid" id="{{item.userid}}" name="{{item.userid}}" disabled class="check{{item.userid}}">
                                                <div>
                                                    <textarea class="form-control text{{item.userid}}" id = {{item.userid}} placeholder="Enter Reason" [(ngModel)] = "manual_reason[item.userid]" [ngModelOptions]="{standalone: true}" disabled></textarea>
                                                </div>
                                            </form>
                                            <form *ngIf="item.attendance!=null && item.attendance!=undefined">
                                                <input type="checkbox" id="{{item.userid}" class="check{{item.userid}}" [attr.disabled] = "(item.attendance.manual_attendance_reason != '') ? true : false" [checked]="item.attendance.manual_attendance_reason != ''">
                                                <div>
                                                    <textarea class="form-control" placeholder="Enter Reason" [(ngModel)] = "item.attendance.manual_attendance_reason" [ngModelOptions]="{standalone: true}" [ngClass]="item.attendance.manual_attendance_reason == '' ? 'no_action' : ''" disabled></textarea>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade body_check" id="comments" role="tabpanel" >
                            <div class="table_training table-responsive">
                                <table class="table table-fixed">
                                    <thead>
                                        <tr>
                                            <th>SMPIN</th>
                                            <th>Participant Name</th>
                                            <th>Dealer/AM Name</th>
                                            <th *ngIf="showpre">Pre-Test Score</th>
                                            <th *ngIf="showpost">Post-Test Score</th>
                                            <th *ngIf="showrole">Role Play/Demo</th>
                                            <th *ngIf="showassign">Assignment</th>
                                            <th *ngIf="showperform">Performance</th>
                                            <th>Total Score</th>
                                            <th *ngIf="showcertified">Certification</th>   
                                            <th>Comments</th>   
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of attendances_list; let i=index">
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.smpin}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.name}}</td>
                                        <td *ngIf="item.status == 1 || item.status == 0">{{item.dealer_code}} - {{item.dealer_name}}<br><span class="am"> AM : {{item.am_name}}</span></td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showpre)">
                                            <input type="text" placeholder="Score" class="form-control pretest{{item.userid}}" [(ngModel)]="item.pre_test_percentage" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showpost)">
                                            <input type="text" placeholder="Score" class="form-control posttest{{item.userid}}" [(ngModel)]="item.post_test_percentage" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo ==''))">
                                            <input type="text" placeholder="Score" class="form-control role{{item.userid}}" readonly>
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showrole && (item.roleplay_or_demo !=''))">
                                            <input type="text" placeholder="Score" class="form-control role{{item.userid}}" [(ngModel)] = "item.roleplay_or_demo" [ngModelOptions]="{standalone: true}" readonly>
                                            <span class="has-error score_err roleerr{{item.userid}}">* Please enter Max({{rolepercentage}}) score</span>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment ==''))">
                                            <input type="text" placeholder="Score" class="form-control assign{{item.userid}}" readonly>
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showassign && (item.assignment !=''))">
                                            <input type="text" placeholder="Score" class="form-control assign{{item.userid}}" [(ngModel)] = "item.assignment" [ngModelOptions]="{standalone: true}" readonly>
                                            <span class="has-error score_err assignerr{{item.userid}}">* Please enter Max({{assignpercentage}}) score</span>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showperform && (item.performance ==''))">
                                            <input type="text" placeholder="Score" class="form-control perform{{item.userid}}" readonly>
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0 )&& showperform && (item.performance !=''))">
                                            <input type="text" placeholder="Score" class="form-control perform{{item.userid}}" [(ngModel)] = "item.performance" [ngModelOptions]="{standalone: true}" readonly>
                                            <span class="has-error score_err performerr{{item.userid}}">* Please enter Max({{performpercentage}}) score</span>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0) && (item.overall ==''))">
                                            <input type="text" class="form-control overall{{item.userid}}" name="score"  placeholder="Score" readonly>
                                        </td>
                                        <td class="certificate" *ngIf="((item.status == 1 || item.status == 0)&& (item.overall !=''))">
                                            <input type="text" class="form-control overall{{item.userid}}" name="score"  placeholder="Score"  [(ngModel)] = "item.overall" [ngModelOptions]="{standalone: true}" readonly>
                                        </td>
                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification ==0))" class="1">
                                            <button class="btn primary cert certification{{item.userid}}">{{name_Of_certification}}</button>
                                        </td>

                                        <td *ngIf="((item.status == 1 || item.status == 0) && showcertified && (item.certification !=0))" class="2">
                                            <button class="btn primary cert success certification{{item.userid}}" *ngIf="item.certification == 1">Certified</button>
                                            <button class="btn primary cert failure certification{{item.userid}}" *ngIf="item.certification == 2">Failed</button>
                                        </td>

                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks ==''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Enter Remarks" [(ngModel)] = "comments[item.userid]" [ngModelOptions]="{standalone: true}" readonly></textarea>
                                            </form>
                                        </td>
                                        <td class="comment" *ngIf="((item.status == 1 || item.status == 0) && (item.remarks !=''))">
                                            <form>
                                                <textarea class="form-control remark{{item.userid}}" placeholder="Remarks" [(ngModel)] = "item.remarks" [ngModelOptions]="{standalone: true}" readonly></textarea>
                                            </form>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="summary" role="tabpanel">
                            <div class="col-sm-12">
                                <div class="summary-inn" *ngIf="summary_details!='' && summary_details!= undefined && summary_details!=null">
                                    <div class="row" *ngIf="summary_attendance!=''">
                                        <div class="table-responsive col-sm-9">
                                            <table class="table table-fixed">
                                                <thead>
                                                    <tr>
                                                        <th>Days</th>
                                                        <th>Total Planned Participant</th>
                                                        <th>Total Participant Attended</th>
                                                        <th>No of Absents</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let btn of summary_attendance;let i= index">
                                                        <td>Day {{btn.day}}</td>
                                                        <td>{{btn.total_planned_participant}}</td>
                                                        <td>{{btn.total_participant_appeared}}</td>
                                                        <td>{{btn.no_of_absents}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <p><span>Total Planned Participants:</span>{{summary_details.total_planned_participant}}</p>
                                    <p><span>Total Participant Attended:</span>{{summary_details.total_participant_appeared}}</p>
                                    <p><span>No of DSE Certified:</span>{{summary_details.no_of_dse_certified}}</p>
                                    <p><span>No of DSE Failed:</span>{{summary_details.no_of_dse_failed}}</p>
                                    <p><span>Batch through %:</span>{{summary_details.batch_through}}%</p>
                                    <p><span>Average Batch score:</span>{{summary_details.average_batch_score}}%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn_section" *ngIf="role_num == 7">
                        <div class="btn_inner_box">
                            <span class="has-error score_err amackerror">* Please Give reason for all absentees</span>
                            <!-- <button class="btn primary fixed float-right btn-resize" *ngIf="tab_clicked == 1 && schedule_data.attendance_submit == 1 && schedule_data.am_acknowledgement == 0" (click)="onam_acknowlege()" [disabled] = "amreason_list.length== 0">Acknowledge</button> -->
                            <button class="btn primary fixed float-right btn-resize" *ngIf="tab_clicked == 1 && schedule_data.current_attendance_submit_status == 1 && schedule_data.current_am_acknowledgement_status == 0" (click)="onam_acknowlege()" [disabled] = "amreason_list.length== 0">Acknowledge</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- sendcodemodal -->
<div class="modal fade" id="sendcodemodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Enter Code</h5>
        </div>
        <div class="modal-body" *ngIf="dsedata!='' && dsedata!=undefined && dsedata !=null">
          <p>{{dsedata.name}} - {{dsedata.smpin}} would have received attendance code. Get the code and enter in the field below.</p>
            <div class="form-group">
                <input type="number" class="form-control" placeholder="Enter attendance code" [(ngModel)]="attendance_code">           
                 <p class="has-error" *ngIf="showpresenterror">* {{error_msg}}</p>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelmodal()">Cancel</button>
          <button type="button" class="btn primary fixed" (click)="attendance_present(dsedata)">Submit</button>
        </div>
      </div>
    </div>
</div>

<!-- reasonmodal -->
<div class="modal fade" id="reasonmodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Reason for Absence
        </h5>
        </div>
        <div class="modal-body" *ngIf="dsedata!='' && dsedata!=undefined && dsedata !=null">
          <p>
                Participant Name: {{dsedata.name}} - {{dsedata.smpin}}<br>
                Dealer Name: {{dsedata.dealer_code}} - {{dsedata.dealer_name}}<br>
                Area Manager Name: {{dsedata.am_name}}
            </p>
            <div class="form-group" *ngIf="showfield == 1">
                <textarea class="form-control" placeholder="Enter reason" [(ngModel)]="reason_absent"></textarea>
                <p class="has-error" *ngIf="showerror">* Please give reason for Absent</p>
            </div>
            <div class="form-group" *ngIf="showfield == 2">
                <p *ngIf="(dsedata.am_absence_reason_name != '' && dsedata.am_absence_reason_name != null) && dsedata.am_absence_reason!=6" class="amtrainer_reason">Reason Given by AM: {{dsedata.am_absence_reason_name}}</p>
                <p *ngIf="(dsedata.am_absence_reason_name != '' && dsedata.am_absence_reason_name != null) && dsedata.am_absence_reason ==6" class="amtrainer_reason">Reason Given by AM: {{dsedata.am_absence_reason_name}} - {{dsedata.am_absence_reason_desc}}</p>
                <textarea class="form-control" placeholder="Enter reason" [(ngModel)]="dsedata.attendance.absence_reason" readonly></textarea>
            </div>
        </div>
        <div class="modal-footer" *ngIf="showfield == 1">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelmodal()">Cancel</button>
          <button type="button" class="btn primary fixed" (click)="attendance_absent(dsedata)">Save</button>
        </div>
        <div class="modal-footer" *ngIf="showfield == 2">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelmodal()">Close</button>
        </div>
      </div>
    </div>
</div>

<!-- AMreasonmodal -->
<div class="modal fade" id="amreasonmodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">View Reason for Absence
        </h5>
        </div>
        <div class="modal-body" *ngIf="dsedata!='' && dsedata!=undefined && dsedata !=null">
          <p *ngIf="dsedata.attendance!='' && dsedata.attendance!=undefined && dsedata.attendance !=null">
                Participant Name: {{dsedata.name}} - {{dsedata.smpin}}<br>
                Dealer Name: {{dsedata.dealer_code}} - {{dsedata.dealer_name}}<br>
                Area Manager Name: {{dsedata.am_name}}<br>
                <span class="amtrainer_reason">Reason Given by Trainer: {{dsedata.attendance.absence_reason}}</span>
            </p>
            <div class="form-group" *ngIf="showamfield == 1">
                <select class="form-control fs14" [(ngModel)]="reason" (change)="selectreason($event)">
                    <option value="" disabled>Select the Reason for Absent *</option>
                    <option value="{{reason.id}}" *ngFor="let reason of reason_list">{{reason.name}}</option>
                </select>
                <p class="has-error" *ngIf="showerror">* Please select reason for Absent</p>
            </div>
            <div class="form-group" *ngIf="showamfield == 1 && showtext">
                <textarea type="text" class="form-control" placeholder="Reason" [(ngModel)]="other_reason"></textarea>            
                <p class="has-error" *ngIf="showtemperror">* Please Enter reason</p>
            </div>
            <div class="form-group" *ngIf="showamfield == 2">
                <textarea class="form-control" placeholder="Enter reason" [(ngModel)]="dsedata.am_absence_reason_name" readonly *ngIf="dsedata.am_absence_reason!=6"></textarea>
                <textarea class="form-control" placeholder="Enter reason" [(ngModel)]="dsedata.am_absence_reason_name+' - '+dsedata.am_absence_reason_desc" readonly *ngIf="dsedata.am_absence_reason == 6"></textarea>
            </div>
        </div>
        <div class="modal-footer" *ngIf="showamfield == 1">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelammodal()">Cancel</button>
          <button type="button" class="btn primary fixed" (click)="saveam_reason(dsedata)">Save</button>
        </div>
        <div class="modal-footer" *ngIf="showamfield == 2">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelmodal()">Close</button>
        </div>
      </div>
    </div>
</div>

<!-- preview image modal -->
<div id="previewModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body" *ngIf="singleuser_profile!='' && singleuser_profile!=undefined && singleuser_profile !=null">
          <a class="close" data-dismiss="modal">&times;</a>
          <img [src]="singleuser_profile.attendance.image" class="img-responsive viewpro">
        </div>
      </div>
    </div>
</div>


<!-- webcammodal -->
<div class="modal fade" id="webcammodal" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <a class="close webcame_close" data-dismiss="modal" (click)="closecam()">&times;</a>
            <webcam style="width: 100%;height: 100%; float: left;" [trigger]="triggerObservable" (imageCapture)="handleImage($event)" *ngIf="showWebcam"
            [allowCameraSwitch]="allowCameraSwitch" [switchCamera]="nextWebcamObservable"
            [videoOptions]="videoOptions"
            [imageQuality]="1"
            (cameraSwitched)="cameraWasSwitched($event)"
            (initError)="handleInitError($event)"
            ></webcam>
            <div class="cam-action">
                <button type="button" class="btn primary fixed cambtn" data-dismiss="modal" (click)="triggerSnapshot();">SAVE & EXIT</button>
            </div>
        </div>
      </div>
    </div>
</div>