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

<div class="trainer" [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="trainer_card 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="view_schedule" *ngIf="!loader">
                    <div class="schedule_tit">
                        View Schedule 
                    </div>
                    <div class="schedule-detail">
                        
                        <button class="modify" *ngIf="rolename == 5 && showmodify && is_not_deleted_event" (click)="modifydata(schedule_data.schedule_id)">
                            <img src="/assets/img/edit.svg" alt="Modify">Modify</button>
                        <button class="modify" *ngIf="(rolename == 5 && (!showmodify && publish_status == 0)  && is_not_deleted_event)" (click)="modifydata(schedule_data.schedule_id)">
                                <img src="/assets/img/edit.svg" alt="Modify">Modify</button>
                        <div class="row">
                            <p class="uniqueid">Training UID : {{schedule_data.training_id}}</p>
                            <p class="col-sm-12 detail">
                                <img src="/assets/img/calendar.png" alt="calendar">
                                <span *ngFor="let btn of add_buttons">{{btn.day}} : {{btn.date}} , {{btn.from}} - {{btn.to}}</span>
                            </p>
                            <p class="col-sm-12 detail">
                                <img src="/assets/img/location.png" alt="location">
                               <span>{{schedule_data.venue_address}}</span>
                            </p>
                            <p class="col-sm-12 detail">
                                <img src="/assets/img/list.svg" alt="location">
                                <span *ngIf="schedule_data.lvl_id == 7">Training Name : {{schedule_data.title}} ({{schedule_data.training_other_title}})</span>
                                <span *ngIf="schedule_data.lvl_id != 7">Training Name : {{schedule_data.title}}</span>
                                <span>Business Segment :  {{schedule_data.segment_name}}</span>
                                <span>Training Start Date  : {{schedule_data.start_date | date: 'dd-MMM-yyyy'}}</span>
                                <span>Training End Date  : {{schedule_data.end_date | date: 'dd-MMM-yyyy'}}
                                </span> 
                                <!-- <b class="custom-popover tit-info">
                                    <img src="/assets/img/question_white.svg" alt="Question"><span>Duration changed by trainer</span>
                                    <i class="popover-inn right">
                                        <span>Only when the decline reason is given, trainer will be able to submit the training completion</span>
                                    </i>
                                 </b> -->
                                <span *ngIf="schedule_data.schedule_name != ''">Training Description :  {{schedule_data.schedule_name}}
                                </span>
                                <span>Total Participant : {{schedule_data.participant.length}} </span>
                            </p>
                            <div class="col-sm-12 text-center" *ngIf="schedule_data.status == 0 && is_not_deleted_event && showmodify">
                                <button class="btn primary fixed sub" data-toggle="modal" data-target="#publish-modal">Publish</button>
                                <button class="btn primary fixed cancle" (click)="oncancel()">Cancel</button>
                            </div>
                            <div class="col-sm-12 text-center" *ngIf="!is_not_deleted_event">
                                <button class="btn primary fixed sub cancel_btn">Training Cancelled</button>
                            </div>

                            <!-- <div class="w100" *ngIf="schedule_data.reschedule_status == 0 && rolename == 5 && showmodify">
                                <h5 class="col-sm-12">Training Reschedule</h5>
                                <div class="col-sm-12">
                                    <label class="radio-inline">
                                        <input type="radio" (change)="dataradio($event)" value="reschedule" [(ngModel)]="reason">
                                        <span>Do you want to reschedule this session?</span>
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group" *ngIf="reason == 'reschedule'">
                                        <label>Select Reason</label>
                                        <select class="form-control fs14" [(ngModel)]="ques_id" (change)="selectreason($event)">
                                            <option value="" disabled>Reason for Rescheduling*</option>
                                            <option value="{{reason.id}}" *ngFor="let reason of reason_list">{{reason.name}}</option>
                                        </select>
                                    </div>
                                 </div>
                                <div class="col-sm-6" *ngIf="showtext && reason == 'reschedule'">
                                    <div class="form-group">
                                        <label>Reason</label>
                                        <input type="text" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="reason == 'reschedule'" class="w100 row m0">
                                <div class="col-sm-6">
                                    <div class="form-group training-date">
                                        <label>Training Start Date</label>
                                        <ng-datepicker placeholder="Start Date" [options]="options_start" name="startdate" [(ngModel)]="startdate" class="form-control" required (ngModelChange)="changestartdate($event)"></ng-datepicker>
                                        <p class="has-error" *ngIf="!is_startdate">* Please select startdate</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group training-date">
                                        <label>Training End Date</label>
                                        <ng-datepicker placeholder="End Date" [options]="options_end" name="enddate" class="form-control" [(ngModel)]="enddate"  required (ngModelChange)="changeenddate($event)"></ng-datepicker>
                                        <p class="has-error" *ngIf="!is_enddate">* Please select Enddate</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group custom-picker1">
                                        <label>Training Start Time</label>
                                        <input type="time" name="startTime" id="startTime" class="form-control" [(ngModel)]="startTime" (click)="openstartclock()" value="startTime"/>
                                        <p class="has-error" *ngIf="!is_starttime">* Please select Start Time</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group custom-picker1">
                                        <label>Training End Time</label>
                                        <input type="time" name="endTime" id="endTime" class="form-control" value="endTime" [(ngModel)]="endTime" (click)="openendclock()"/>
                                        <p class="has-error" *ngIf="!is_endtime">* Please select End Time</p>
                                    </div>
                                </div>
                            </div>
                            <div class="w100" *ngIf="rolename == 5 && showmodify && schedule_data.is_deleted == 0">
                                 <h5 class="col-sm-12">Training Cancel</h5>
                                 <div class="col-sm-12">
                                    <label class="radio-inline">
                                        <input type="radio" (change)="dataradio($event)" value="cancel" [(ngModel)]="reason">
                                        <span>Do you want to Cancel this session?</span>
                                    </label>
                                 </div>
                                 <div class="col-sm-6">
                                    <div class="form-group" *ngIf="reason == 'cancel'">
                                        <label>Select Reason</label>
                                        <select class="form-control fs14" [(ngModel)]="ques_id_cancel" (change)="selectreason($event)">
                                            <option value="" disabled>Reason for Cancelling*</option>
                                            <option value="{{reason.id}}" *ngFor="let reason of reason_list">{{reason.name}}</option>
                                        </select>
                                    </div>
                                 </div>
                                 <div class="col-sm-6" *ngIf="showtext && reason == 'cancel'">
                                    <div class="form-group">
                                        <label>Reason</label>
                                        <input type="text" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center" *ngIf="rolename == 5 && showmodify">
                                <button class="btn primary fixed sub" (click)="onSubmit()" [disabled] = "reason=='' || reason==null || reason== undefined">Submit</button>
                                <button class="btn primary fixed cancle" (click)="oncancel()">Cancel</button>
                            </div> -->
                        </div>
                    </div>    

                    <div class="participant-list">
                        <h5>Participant list ({{participant_list.length}})</h5>
                        <ul class="reset" *ngIf="participant_list.length != 0">
                            <li>
                                <div class="plist">
                                    <img src="/assets/img/profile.png" alt="Profile">
                                    <p>{{schedule_data.organizer_name}}</p>
                                    <span>Organizer / Trainer</span>
                                </div>
                            </li>
                            <li  *ngFor="let participant of participant_list">
                                <div class="plist">
                                    <img src="{{participant.profile_photo}}" alt="Profile">
                                    <p class="dsename">{{participant.smpin}} - {{participant.name}}</p>
                                    <p class="dsename">{{participant.dealer_code}} - {{participant.dealer_name}}</p>
                                    <p class="dsename">AM : {{participant.am_name}}</p>
                                    <span *ngIf="participant.status == 2" class="decline custom-popover">Declined 
                                        <img src="/assets/img/question_red.svg" alt="Question" class="ques_img">
                                        <i class="popover-inn">
                                            <b>Reason for Decline</b>
                                            <!-- <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry
                                            </span> -->
                                            <span *ngIf="participant.decline_reason != 6">{{participant.decline_reason_name}}
                                            </span>
                                            <span *ngIf="participant.decline_reason == 6">{{participant.decline_reason_name}}({{participant.decline_reason_desc}})</span>
                                        </i>
                                    </span>
                                    <span *ngIf="participant.status == 1" class="accept">Acknowledged</span>
                                    <span *ngIf="participant.status == 0 && !schedule_data.training_completed" class="waiting">Waiting for response</span>
                                    <span *ngIf="participant.status == 0 && schedule_data.training_completed" class="decline">Not responding</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
</div>

<!-- publish-modal -->
<div class="modal fade" id="publish-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
        <div class="modal-body" *ngIf="schedule_data!='' && schedule_data!=undefined && schedule_data !=null">
            <p>Do you wants to Publish the schedule <br>
            <b>({{schedule_data.title}} – {{schedule_data.start_date | date: 'dd-MM-yyyy'}})</b>  now </p>
        </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)="onpublish()">Submit</button>
        </div>
        </div>
    </div>
</div>

