<app-main-header *ngIf="type!='mobile'"></app-main-header>
<app-addparticipantpop></app-addparticipantpop>
<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="notify" *ngIf="!loader">
                    <h5>Classroom Training</h5>

                    <!-- DSE Notification Summary -->
                    <div class="row" *ngIf="rolename == 10">
                        <ul class="reset notify_ul">
                            <li>
                                <div class="full_row mb15">
                                    <p>Training UID : </p>
                                    <span>{{schedule_data.training_id}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training Name :</p>
                                    <span *ngIf="schedule_data.lvl_id == 7" class = "dse_in">
                                        <b class="custom-popover" [ngClass]="Dsedata.status ==2 ? 'reason' : ''">{{schedule_data.title}} ({{schedule_data.training_other_title}})
                                            <img src="/assets/img/question_red.svg" alt="Question" *ngIf="Dsedata.status ==2">
                                            <i class="popover-inn" *ngIf="Dsedata.status ==2">
                                                <b>Reason for Decline</b>
                                                <span *ngIf="Dsedata.decline_reason != 6">{{Dsedata.decline_reason_name}}
                                                </span>
                                                <span *ngIf="Dsedata.decline_reason == 6">{{Dsedata.decline_reason_name}}({{Dsedata.decline_reason_desc}})</span>
                                            </i>    
                                        </b>
                                        <!-- {{schedule_data.title}} ({{schedule_data.training_other_title}}) -->
                                    </span>
                                    <span *ngIf="schedule_data.lvl_id != 7" class = "dse_in">
                                        <b class="custom-popover" [ngClass]="Dsedata.status ==2 ? 'reason' : ''">{{schedule_data.title}}
                                            <img src="/assets/img/question_red.svg" alt="Question" *ngIf="Dsedata.status ==2">
                                            <i class="popover-inn" *ngIf="Dsedata.status ==2">
                                                <b>Reason for Decline</b>
                                                <span *ngIf="Dsedata.decline_reason != 6">{{Dsedata.decline_reason_name}}
                                                </span>
                                                <span *ngIf="Dsedata.decline_reason == 6">{{Dsedata.decline_reason_name}}({{Dsedata.decline_reason_desc}})</span>
                                            </i>    
                                        </b>
                                        <!-- {{schedule_data.title}} -->
                                    </span>
                                </div>

                                <!-- <div class="full_row mb15">
                                    <p>Training Level :</p>
                                    <span>{{schedule_data.title}}</span>
                                </div> -->

                                <div class="full_row mb15">
                                    <p>Trainer Name :</p>
                                    <span>{{schedule_data.organizer_name}}</span>
                                </div>

                                <div class="full_row mb15" *ngFor="let date_btn of add_date_buttons">
                                    <p>{{date_btn.day}}:</p>
                                    <span>{{date_btn.date}}</span>
                                </div> 
                            </li>

                            <li>
                                <div class="full_row mb15">
                                    <p>Training Start Date :</p>
                                <span>{{schedule_data.start_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training End Date :</p>
                                    <span>{{schedule_data.end_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Business Segment :</p>
                                    <span>{{schedule_data.segment_name}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training Duration :</p>
                                    <span>{{schedule_data.training_days}} days</span>
                                </div>
                                <div class="full_row mb15">
                                    <p>Venue Location:</p>
                                    <span>{{schedule_data.venue_address}}</span>
                                </div>

                            </li>
                        </ul>
                        <div class="col-sm-12 am-action-btn" *ngIf="(Dsedata!=undefined && Dsedata!='' && Dsedata!=null) && is_deleted == 0"> 
                            <button class="btn primary fixed float-right" *ngIf="Dsedata.status ==0 && schedule_data.is_active_hours == 1 && schedule_data.training_update_status " [ngClass]="schedule_data.training_completed ? 'disable_cls' : ''" (click)="amresponse(Dsedata.userid,1,'dse')">Acknowledge</button>

                            <button class="btn primary fixed float-right" *ngIf="Dsedata.status ==0 && schedule_data.is_active_hours == 1 && !schedule_data.training_update_status " [ngClass]="!schedule_data.training_update_status ? 'disable_cls' : ''" (click)="amresponse(Dsedata.userid,1,'dse')">Acknowledge</button>

                            <button class="btn primary fixed float-right reject_btn" *ngIf="Dsedata.status ==0 && schedule_data.is_active_hours == 0" [ngClass]="schedule_data.training_completed ? 'disable_cls' : ''">Not Responding</button>
                            
                            <button class="btn primary fixed float-right accept_btn" *ngIf="Dsedata.status ==1 && Dsedata.acknowledge_by == 1">Acknowledged by AM</button>

                            <button class="btn primary fixed float-right accept_btn" *ngIf="Dsedata.status ==1 && Dsedata.acknowledge_by == 2">Acknowledged by DSE</button>

                            <button class="btn primary fixed float-right reject_btn" *ngIf="Dsedata.status ==2">Declined</button>
                        </div>
                        <div *ngIf="is_deleted == 1" class="col-sm-12 am-action-btn">
                            <button class="btn primary fixed float-right reject_btn">Training Cancelled</button>
                        </div>

                        <div _ngcontent-c17="" class="col-sm-12 dse_remark"> 
                            <span class="note">Note: You can acknowledge until 24 hours of the scheduled notification received. Post 24 hours it will auto <br>acknowledged. You can contact your Area Manager for decline</span>
                        </div>
                    </div>
                    <!-- HO Notification Summary -->
                    <div class="row" *ngIf="rolename == 3 || rolename == 5">
                        <ul class="reset notify_ul">
                            <li>
                                <div class="full_row mb15">
                                    <p>Training UID : </p>
                                    <span>{{schedule_data.training_id}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training Name :</p>
                                    <span *ngIf="schedule_data.lvl_id == 7">
                                        {{schedule_data.title}} ({{schedule_data.training_other_title}})
                                    </span>
                                    <span *ngIf="schedule_data.lvl_id != 7">
                                        {{schedule_data.title}}
                                    </span>
                                </div>

                                <!-- <div class="full_row mb15">
                                    <p>Training Level :</p>
                                    <span>{{schedule_data.title}}</span>
                                </div> -->

                                <div class="full_row mb15">
                                    <p>Trainer Name :</p>
                                    <span>{{schedule_data.organizer_name}}</span>
                                </div>
                                

                                <div class="full_row mb15" *ngFor="let date_btn of add_date_buttons">
                                    <p>{{date_btn.day}}:</p>
                                    <span>{{date_btn.date}}</span>
                                </div> 
                            </li>

                            <li>
                                <div class="full_row mb15">
                                    <p>Training Start Date :</p>
                                <span>{{schedule_data.start_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training End Date :</p>
                                <span>{{schedule_data.end_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Business Segment :</p>
                                    <span>{{schedule_data.segment_name}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training Duration :</p>
                                    <span>{{schedule_data.training_days}} days</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Venue Location:</p>
                                    <span>{{schedule_data.venue_address}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Sales Consultant :</p>
                                    <span *ngFor="let dse of schedule_data.participant">{{dse.dealer_name}} ({{dse.smpin}})</span>
                                </div>

                            </li>                            
                        </ul>
                    </div>

                    <!-- AM Notification Summary -->
                    <div class="row" *ngIf="rolename == 7">
                        <div class="col-sm-12 text-center">
                        </div>
                        <ul class="reset notify_ul">
                            <li>
                                
                                <div class="full_row mb15">
                                    <p>Training UID : </p>
                                    <span>{{schedule_data.training_id}}</span>
                                </div>
                                
                                <div class="full_row mb15">
                                    <p>Training Name :</p>
                                    <span *ngIf="schedule_data.lvl_id == 7">{{schedule_data.title}} ({{schedule_data.training_other_title}})</span>
                                    <span *ngIf="schedule_data.lvl_id != 7">{{schedule_data.title}}</span>
                                </div>

                                <!-- <div class="full_row mb15">
                                    <p>Training Level :</p>
                                    <span>{{schedule_data.title}}</span>
                                </div> -->

                                <div class="full_row mb15">
                                    <p>Trainer Name :</p>
                                    <span>{{schedule_data.organizer_name}}</span>
                                </div>
                                
                                <div class="full_row mb15" *ngFor="let date_btn of add_date_buttons">
                                    <p>{{date_btn.day}}:</p>
                                    <span>{{date_btn.date}}</span>
                                </div> 
                            </li>

                            <li>
                                <div class="full_row mb15">
                                    <p>Training Start Date :</p>
                                    <span>{{schedule_data.start_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training End Date :</p>
                                    <span>{{schedule_data.end_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Business Segment :</p>
                                    <span>{{schedule_data.segment_name}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training Duration :</p>
                                    <span>{{schedule_data.training_days}} days</span>
                                </div>
                                <div class="full_row mb15">
                                    <p>Venue Location:</p>
                                    <span>{{schedule_data.venue_address}}</span>
                                </div>
                            </li>
                            <!-- <li>
                                <p>Sales Consultant :</p>
                                <span *ngFor="let dse of schedule_data.participant">{{dse.dealer_name}} ({{dse.smpin}})</span>
                            </li> -->
                        </ul>
                    </div>

                    <!-- AM Acknowledgement -->
                    <h5 *ngIf="rolename == 7">Training Details   
                         
                         <b class="custom-popover tit-info">
                            <img src="/assets/img/question_white.svg" alt="Question">
                            <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>
                    </h5>
                    <ul class="reset amaccept" *ngIf="rolename == 7">
                        <li *ngFor="let dse of schedule_data.participant">
                            <div class="row am-inn">
                                <div class="col-sm-12">
                                    <p class="tit" *ngIf="schedule_data.lvl_id == 7">
                                        <b class="custom-popover" [ngClass]="dse.status ==2 ? 'reason' : ''">{{schedule_data.title}} ({{schedule_data.training_other_title}})
                                            <img src="/assets/img/question_red.svg" alt="Question" *ngIf="dse.status ==2">
                                            <i class="popover-inn" *ngIf="dse.status ==2">
                                                <b>Reason for Decline</b>
                                                <span *ngIf="dse.decline_reason != 6">{{dse.decline_reason_name}}
                                                </span>
                                                <span *ngIf="dse.decline_reason == 6">{{dse.decline_reason_name}}({{dse.decline_reason_desc}})</span>
                                            </i>    
                                        </b>
                                        <span>DSE Name : {{dse.name}} - {{dse.smpin}}</span>
                                    </p>

                                    <p class="tit" *ngIf="schedule_data.lvl_id != 7">
                                        <b class="custom-popover" [ngClass]="dse.status ==2 ? 'reason' : ''">{{schedule_data.title}} 
                                            <img src="/assets/img/question_red.svg" alt="Question" *ngIf="dse.status ==2">
                                            <i class="popover-inn" *ngIf="dse.status ==2">
                                                <b>Reason for Decline</b>
                                                <span *ngIf="dse.decline_reason != 6">{{dse.decline_reason_name}}
                                                </span>
                                                <span *ngIf="dse.decline_reason == 6">{{dse.decline_reason_name}}({{dse.decline_reason_desc}})</span>
                                            </i>
                                        </b>             
                                        <span>DSE Name : {{dse.name}} - {{dse.smpin}}</span>
                                    </p>
                                    
                                    <p>Trainer Name : {{schedule_data.organizer_name}} <span>Dealer Name : {{dse.dealer_code}} - {{dse.dealer_name}}</span></p>
                                    <p class="sch">{{schedule_data.start_date | date: 'MMM dd, yyyy'}} -  {{schedule_data.end_date | date: 'MMM dd, yyyy'}}
                                        <!-- <span>{{schedule_data.start_date | date:'shortTime'}} -  {{schedule_data.end_date | date:'shortTime'}}</span> -->
                                        <span class="amdet">Area Manager : {{dse.am_name}}</span>
                                    </p>
                                </div>
                                <!-- [ngClass]="!schedule_data.training_update_status ? 'disable_cls' : ''" -->
                                <div class="col-sm-12 action-btn" *ngIf="is_deleted == 0">
                                    <button class="btn primary fixed" (click)="amresponse(dse.userid,1,'am')" *ngIf="dse.status ==0 && schedule_data.is_active_hours == 1 && schedule_data.training_update_status" [ngClass]="schedule_data.training_completed ? 'disable_cls' : ''">Acknowledge</button>

                                    <button class="btn primary fixed" (click)="amresponse(dse.userid,1,'am')" *ngIf="dse.status ==0 && schedule_data.is_active_hours == 1 && !schedule_data.training_update_status" [ngClass]="!schedule_data.training_update_status ? 'disable_cls' : ''">Acknowledge</button>

                                    <button class="btn primary fixed" data-toggle="modal" data-target="#declinemodal" (click)="clickdecline(dse,2)" *ngIf="dse.status ==0 && schedule_data.is_active_hours == 1 && schedule_data.training_update_status" [ngClass]="schedule_data.training_completed ? 'disable_cls' : ''">Decline</button>

                                    <button class="btn primary fixed" data-toggle="modal" data-target="#declinemodal" (click)="clickdecline(dse,2)" *ngIf="dse.status ==0 && schedule_data.is_active_hours == 1 && !schedule_data.training_update_status" [ngClass]="!schedule_data.training_update_status ? 'disable_cls' : ''">Decline</button>

                                    <button class="btn primary fixed reject_btn" *ngIf="dse.status ==0 && schedule_data.is_active_hours == 0">Not Responding</button>

                                    <button class="btn primary fixed accept_btn" *ngIf="dse.status ==1 && dse.acknowledge_by == 1">Acknowledged by AM</button>

                                    <button class="btn primary fixed accept_btn" *ngIf="dse.status ==1 && dse.acknowledge_by == 2">Acknowledged by DSE</button>

                                    <button class="btn primary fixed reject_btn" *ngIf="dse.status ==2">Declined</button>
                                </div>
                                <div class="col-sm-12 action-btn" *ngIf="is_deleted == 1">
                                    <button class="btn primary fixed reject_btn">Training Cancelled</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <!-- *ngIf="schedule_data.is_active_hours == 1 " -->
                    <!-- RM Notification Summary -->
                    <div class="row" *ngIf="rolename == 6 || rolename == 4 || rolename == 14">
                        <ul class="reset notify_ul">
                            <li>

                                <div class="full_row mb15">
                                    <p>Training UID : </p>
                                    <span>{{schedule_data.training_id}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Training Name :</p>
                                    <span *ngIf="schedule_data.lvl_id == 7">{{schedule_data.title}} ({{schedule_data.training_other_title}})</span>
                                    <span *ngIf="schedule_data.lvl_id != 7">{{schedule_data.title}}</span>
                                </div>

                                <!-- <div class="full_row mb15">
                                    <p>Training Level :</p>
                                    <span>{{schedule_data.title}}</span>
                                </div> -->

                                <div class="full_row mb15">
                                    <p>Trainer Name :</p>
                                    <span>{{schedule_data.organizer_name}}</span>
                                </div>

                                <div class="full_row mb15" *ngFor="let date_btn of add_date_buttons">
                                    <p>{{date_btn.day}}:</p>
                                    <span>{{date_btn.date}}</span>
                                </div> 
                                
                            </li>

                            <li>
                                <div class="full_row mb15">
                                    <p>Training Start Date :</p>
                                    <span>{{schedule_data.start_date | date: 'dd-MM-yyyy'}}</span>
                                </div>                            
                                
                                <div class="full_row mb15">
                                    <p>Training End Date :</p>
                                    <span>{{schedule_data.end_date | date: 'dd-MM-yyyy'}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Business Segment :</p>
                                    <span>{{schedule_data.segment_name}}</span>
                                </div>
                                
                                <div class="full_row mb15">
                                    <p>Training Duration :</p>
                                    <span>{{schedule_data.training_days}} days</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Venue Location:</p>
                                    <span>{{schedule_data.venue_address}}</span>
                                </div>

                                <div class="full_row mb15">
                                    <p>Sales Consultant :</p>
                                    <span *ngFor="let dse of schedule_data.participant">{{dse.dealer_name}} ({{dse.smpin}})</span>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- declinemodal -->
<div class="modal fade" id="declinemodal" tabindex="-1" role="dialog" aria-hidden="true"  data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered custom-modal" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Reason For Decline</h5>
        </div>
        <div class="modal-body" *ngIf="dsedetails!='' && dsedetails!=undefined && dsedetails !=null">
            <p>Do you want to Decline the classroom request for DSE Name : {{dsedetails.name}} – {{dsedetails.smpin}} / Dealer Name : {{dsedetails.dealer_code}} - {{dsedetails.dealer_name}} / Area Manager :  {{dsedetails.am_name}}</p>
            <div class="form-group">
               <select class="form-control fs14" [(ngModel)]="reason" (change)="selectreason($event)">
                    <option value="" disabled>Select the Reason for Decline *</option>
                    <option value="{{reason.id}}" *ngFor="let reason of reason_list">{{reason.name}}</option>
                </select>
                <p class="has-error" *ngIf="showerror">* Please select reason</p>
            </div>
            <div class="form-group" *ngIf="showtext">
                <textarea type="text" class="form-control" placeholder="Reason" [(ngModel)]="other_reason"></textarea>
            </div>
            <p class="has-error" *ngIf="showtemperror">* Please Enter reason</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="oncancel()">Cancel</button>
          <button type="button" class="btn primary fixed" (click)="attendance_absent()">Submit</button>
        </div>
      </div>
    </div>
  </div>