<app-toaster-container></app-toaster-container>
<app-addparticipantpop></app-addparticipantpop>
<app-confirmpop></app-confirmpop>
<app-main-header  *ngIf="type!='mobile'"></app-main-header>
<div class="trainercourse">
    <div class="trainer_in">
        <div class="trainer_left">
            <div class="trainer_card">
                 <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active"  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>
                
                <div class="trainingcontainer">
                    <div class="training_head">
                        <form class="trainer_form" [formGroup]="registerForm" (ngSubmit)="onSubmit(registerForm.value)">
                            <div class="cls_trainingheader">Modify Training</div>
                            <div *ngIf="schedule_data!='' && !loader">  
                                <div class="row">
                                    <!-- Training Reschedule -->
                                    <div class="col-sm-4">
                                        <div class="form-group m0">
                                            <label class="wid100">Training Reschedule</label>
                                        </div>
                                        <div class="wid100">
                                            <label class="radio-inline">
                                                <input type="radio" (change)="dataradio($event)" value="reschedule" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}">
                                                <span>Do you want to reschedule this session?</span>
                                            </label>
                                        </div>
                                        <div class="wid100">
                                            <div class="form-group" *ngIf="reason == 'reschedule'">
                                                <label>Select Reason</label>
                                                <select class="form-control fs14" [(ngModel)]="ques_id" (change)="selectreason($event)" [ngModelOptions]="{standalone: true}">
                                                    <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="wid100" *ngIf="showtext && reason == 'reschedule'">
                                            <div class="form-group">
                                                <label>Reason</label>
                                                <input type="text" class="form-control" [(ngModel)]="custom_reason" [ngModelOptions]="{standalone: true}"/>
                                            </div>
                                            <p class="has-error" *ngIf="!iscustom_error">* Please Enter Custom Reason</p>
                                        </div>
                                    </div>

                                    <!-- Training cancel -->
                                    <div class="col-sm-4" *ngIf="schedule_data.is_deleted == 0">
                                        <div class="form-group m0">
                                            <label class="wid100">Training Cancel</label>
                                        </div>
                                        <div class="wid100">
                                            <label class="radio-inline">
                                                <input type="radio" (change)="dataradio($event)" value="cancel" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}">
                                                <span>Do you want to Cancel this session?</span>
                                            </label>
                                        </div>
                                        <div class="wid100">
                                            <div class="form-group" *ngIf="reason == 'cancel'">
                                                <label>Select Reason</label>
                                                <select class="form-control fs14" [(ngModel)]="ques_id_cancel" (change)="selectreason($event)" [ngModelOptions]="{standalone: true}">
                                                    <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="wid100" *ngIf="showtext && reason == 'cancel'">
                                            <div class="form-group">
                                                <label>Reason</label>
                                                <input type="text" class="form-control" [(ngModel)]="custom_reason" [ngModelOptions]="{standalone: true}"/>
                                            </div>
                                            <p class="has-error" *ngIf="!iscustom_error">* Please Enter Custom Reason</p>
                                        </div>
                                    </div>

                                    <!-- Training Modify -->
                                    <div class="col-sm-4">
                                        <div class="form-group m0">
                                            <label class="wid100">Training Modify</label>
                                        </div>
                                        <div class="wid100">
                                            <label class="radio-inline">
                                                <input type="radio" (change)="dataradio($event)" value="modify" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}">
                                                <span>Do you want to Modify this session?</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>                        
                            </div>

                            <div class="row" [ngClass]="reason == 'modify' ? 'enable' : 'disable'">
                                <div class="col-sm-12">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" class="checkcls cur" value="" formControlName="adhoc_training">
                                        <span class="dealer_cls">Adhoc Training</span>
                                    </label>
                                    <div class="form-group segment">
                                        <label class="tit">Business Segment</label>
                                        <label class="checkbox-inline cur" *ngFor="let val of segmentvalues">
                                            <input type="radio" class="checkcls cur" formControlName="business_segment" value="{{val.id}}"><span class="dealer_cls">{{val.type}}</span>
                                        </label>
                                        <p class="has-error" *ngIf="!registerForm.controls['business_segment'].valid&&submitted">* Please select Business Segment</p>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Training Title</label>
                                        <select class="form-control" formControlName="title" disabled>
                                            <option value="" disabled>Select Training Title</option>
                                            <option *ngFor="let level of level_list" value="{{level.lvl_id}}">{{level.lvl_name}}</option>
                                        </select>
                                        <p class="has-error" *ngIf="!registerForm.controls['title'].valid&&submitted">* Please select title</p>
                                    </div>
                                </div>
                                <div class="col-sm-6" *ngIf="show_other_text">
                                    <div class="form-group">
                                        <label>Training Name</label>
                                        <input type="text" class="form-control cur" placeholder="Training Name" value="" formControlName="othertitlename"/>
                                        <p class="has-error" *ngIf="!registerForm.controls['othertitlename'].valid&&submitted">* Please Enter Training name</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea class="form-control" formControlName="description" name="description" id="description" autocomplete="off" placeholder="Enter Training Description" required>
                                        </textarea>
                                        <p class="has-error" *ngIf="!registerForm.controls['description'].valid&&submitted">* Please Enter Description</p>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Zone</label>
                                        <select class="form-control" formControlName="zone" (change)="changezone($event)" disabled>
                                            <option value="" disabled>Select Zone</option>
                                            <option *ngFor="let item of zones;let i=index;" value="{{item.zone}}">{{item.zone}}</option>
                                        </select>
                                        <p class="has-error" *ngIf="!registerForm.controls['zone'].valid&&submitted">* Please select zone</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row table-reponsive" [ngClass]="reason == 'modify' ? 'enable' : 'disable'" *ngIf="participant_list.length > 0">
                                <div class="col-sm-10"> 
                                    <div class="form-group search"> 
                                        <input type="text" class="form-control" placeholder="Search SMPIN / Name" (keyup)="searchkey()" [(ngModel)]="searchvalue" [ngModelOptions]="{standalone: true}"/>
                                        <img src="/assets/img/search1.svg" alt="search" />
                                    </div>
                                </div>
                                <div class="col-sm-2 pl0">
                                    <button *ngIf="!hideaddbtn" (click)="enableoption();$event.preventDefault()" class="btn primary full add_btn m0">{{btn_text}}</button>
                                </div>
                            </div>
                            <div class="row" [ngClass]="reason == 'modify' ? 'enable' : 'disable'">
                                <div class="col-md-3" *ngFor="let participant of participant_list | filter : searchvalue;let i=index;">
                                    <div class="participant_list_new">
                                        <div class="profile">
                                        <img src="{{participant.profile_photo}}">
                                        </div>
                                        <div class="content">
                                            <p class="head">SMPIN : {{participant.smpin}}</p>
                                            <p class="desc">{{participant.name}}</p>
                                            <span class="trash" (click)="delete(participant.smpin);$event.preventDefault()">
                                                <img src="/assets/img/delete.png" alt="delete">
                                            </span>
                                        </div>
                                        <p class="desc out">{{participant.dealer_code}} - {{participant.dealer_name}}</p>
                                        <p class="desc out am">{{participant.am_name}}</p>
                                    </div>
                                </div>
                                <div *ngIf="(participant_list | filter : searchvalue).length == 0">
                                    <div class="col nolist">
                                        No DSE list found..
                                </div></div>
                            </div> 

                            <div class="row">
                                <div class = "row newrow" [ngClass]="reason == 'modify' ? 'enable' : 'disable'">
                                    <div class="col-sm-12" *ngIf="showselected_option">
                                        <h5 class="headh5">Regional Manager</h5>
                                        <div class="full_row inner-box">
                                            <ul class="reset" *ngIf="rm_list.length!=0">
                                                <li *ngFor="let rm of rm_list;let i=index;">
                                                    <label class="checkbox-inline">
                                                        <input type="checkbox" class="checkcls"  value="{{rm.rm_email}}" (change)='Changerm($event,i,rm)'><span>{{rm.rm_name}}</span>
                                                    </label>
                                                </li>                                 
                                            </ul>
                                            <div *ngIf="rm_list.length==0">
                                                <div class="col nolist">
                                                    No RM list found..
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12" *ngIf="showam">
                                        <h5 class="headh5">Area Manager</h5>
                                        <div class="full_row inner-box">
                                            <ul class="reset"  *ngFor="let ams of am_data">
                                                <li *ngFor="let am of ams.list;let i=index;">
                                                    <label class="checkbox-inline">
                                                        <input type="checkbox" class="checkcls"  value="{{am.am_email}}" (change)='Changeam($event,i,am,ams.rm_name)'><span>{{am.am_name}}</span>
                                                    </label>
                                                </li>                                 
                                            </ul>
                                            <div *ngIf="am_data.length==0">
                                                <div class="col nolist">
                                                    No AM list found..
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 full_row" *ngIf="showdealer">
                                        <h5 class="headh5">Dealer</h5>
                                        <div class="row">
                                            <div class="col-sm-3 p0" *ngFor="let dealer of dealer_data">
                                                <div class="inner-box seperate">
                                                    <label class="box-tit">{{dealer.am_name}}</label>
                                                    <ul class="reset dealer_scroll" *ngIf="dealer.list.length!=0">
                                                        <li *ngFor="let data of dealer.list;let i=index">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" class="checkcls"  value="{{data.dealer_code}}" (change)='Changedealer($event,i,data,dealer)'><span class="dealer_cls">{{data.dealer_code}} - {{data.dealer_name}}</span>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                    <div *ngIf="dealer.list.length==0">
                                                        <div class="col nolist">
                                                            No Dealer list found..
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Select DSE Ui comment 04-08-2020
                                    <div class="col-sm-12 full_row" *ngIf="showdse">
                                        <h5 class="headh5">Select DSE</h5>
                                        <div class="row">
                                            <div class="col-sm-3" *ngFor="let dse of dse_data;let j=index;">
                                                <div class="inner-box seperate">
                                                    <label class="box-tit">{{dse.dealer_code}} - {{dse.dealer_name}}</label>
                                                    <ul class="reset" *ngIf="dse.list.length!=0">
                                                        <li *ngFor="let data of dse.list;let i=index">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" class="checkcls"  value="{{data.userid}}" (change)='Changedse($event,data)'><span class="dealer_cls">{{data.smpin}} - {{data.fname}} {{data.lname}}</span>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                    <div *ngIf="dse.list.length==0">
                                                        <div class="col nolist">
                                                            No DSE list found..
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->


                                    <!-- DSE -->
                                    <div class="col-sm-12 table-reponsive" *ngIf="showdse">
                                        <div class="form-group search">
                                            <input type="text" class="form-control" placeholder="Search SMPIN / Name" (keyup)="searchkey()" [(ngModel)]="searchvalue" [ngModelOptions]="{standalone: true}"/>
                                            <img src="/assets/img/search1.svg" alt="search" />
                                        </div>
                                        <h5 class="headh5">Select DSE</h5>
                                        <table class="table table-striped dse-table">
                                            <thead>
                                                <tr>
                                                    <th>Area Manager</th>
                                                    <th>Dealer & DSE</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr *ngFor="let dse of dse_data">
                                                    <td>
                                                        <p>{{dse.am_name}}</p>
                                                    </td>
                                                    <td>
                                                        <div class="full_row inner-box">
                                                            <label class="box-tit">{{dse.dealer_code}} - {{dse.dealer_name}}</label>
                                                            <ul class="reset" *ngIf="dse.list.length!=0">
                                                                <li *ngFor="let data of dse.list | filter:searchvalue">
                                                                    <label class="checkbox-inline">
                                                                        <input type="checkbox" class="checkcls check{{data.userid}}"  value="{{data.userid}}" (change)='Changedse($event,data,dse)'><span class="dealer_cls">{{data.smpin}} - {{data.fname}} {{data.lname}}</span>
                                                                    </label>
                                                                </li>
                                                                <li *ngIf="(dse.list | filter : searchvalue).length == 0"><div class="col nolist">
                                                                    No DSE list found..
                                                                </div></li>
                                                            </ul>
                                                            <div *ngIf="dse.list.length==0 ">
                                                                <div class="col nolist">
                                                                    No DSE list found..
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                    <div class="col-sm-12 p0">
                                        <h5 class="headh5" *ngIf="totalparticipant_list.length!=0" style="margin-left: 15px;">DSE Selected List</h5>
                                        <div class="row" *ngIf="totalparticipant_list.length!=0">
                                            <div class="col-md-3" *ngFor="let participant of totalparticipant_list;let i=index;">
                                                <div class="participant_list_new">
                                                    <div class="profile">
                                                        <img src="{{participant.profile}}">
                                                    </div>
                                                    <div class="content">
                                                        <p class="head">SMPIN : {{participant.smpin}}</p>
                                                        <p class="desc">{{participant.fname}} {{participant.lname}}</p>
                                                        
                                                        <span class="trash" (click)="removedse(participant)">
                                                            <img src="/assets/img/delete.png" alt="delete">
                                                        </span>
                                                    </div>
                                                    <p class="desc out">{{participant.dealer_code}} - {{participant.dealer_name}}</p>
                                                    <p class="desc out am">{{participant.am_name}}</p>
                                                    
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                                 
                                <!-- [ngClass]="reason == 'modify' || reason == 'reschedule' ? 'enable' : 'disable'" -->
                                <div [ngClass]="reason == 'reschedule' ? 'enable' : 'disable'" class="row">
                                    <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"  class="form-control" formControlName="startdate" required (ngModelChange)="changestartdate($event)"></ng-datepicker>
                                            <p class="has-error" *ngIf="!registerForm.controls['startdate'].valid&&submitted">* Please select startdate</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group training-date">
                                            <label class="w100">Training End Date <span class="no-days">No. Of Training days: {{training_day_count}}</span></label>
                                            <input type="text" *ngIf="!openpick" class="form-control" placeholder="End Date" value="{{enddate}}"  name="enddate" [(ngModel)]="enddate" [ngModelOptions]="{standalone: true}" data-toggle="modal" data-target="#end-date-modal"/>
                                            
                                            <ng-datepicker *ngIf="openpick" placeholder="End Date" [options]="options_end" name="enddate" class="form-control" formControlName="enddate"  required (ngModelChange)="changeenddate($event)" ></ng-datepicker>
                                            <p class="has-error" *ngIf="!registerForm.controls['enddate'].valid&&submitted">* Please select Enddate</p>
                                            <!-- <span class="note pull-right">Note: # Days of schedule selected</span> -->
                                        </div>
                                    </div>

                                    <!-- Each Days of Time -->
                                    <div class="row full_row">
                                        <div class="col-sm-2">
                                            <div class="form-group m0">
                                                <label>Days</label>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group m0">
                                                <label>Date</label>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group m0">
                                                <label>Training Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group m0">
                                                <label>Training End Time </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group m0">
                                                <label>Total Time (Hours)</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row w100" *ngFor="let day of add_buttons;let i = index;">
                                        <div class="col-sm-2">
                                            <div class="form-group each-day">
                                                <p class="btn primary auto">{{day.day}}</p>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="Date" value="{{day.date}}" readonly/>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group custom-picker no-top" *ngIf="registerForm.controls['startTime'+i] !=undefined">
                                                <input type="time" name="startTime" id="startTime" class="form-control" formControlName="startTime{{i}}" (click)="openstartclock(i)" value="startTime"/>
                                                <p class="has-error" *ngIf="showdateerror && !registerForm.controls['startTime'+i].valid&&submitted">* Please select Start Time</p>
                                            </div>
                                            <div class="form-group custom-picker no-top" *ngIf="registerForm.controls['startTime'+i] ==undefined">
                                                <input type="time" name="startTime" id="startTime" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group custom-picker no-top" *ngIf="registerForm.controls['endTime'+i] !=undefined"> 
                                                <input type="time" name="endTime" id="endTime" class="form-control" value="endTime" formControlName="endTime{{i}}" (click)="openendclock(i)"/>
                                                <p class="has-error" *ngIf="showdateerror && !registerForm.controls['endTime'+i].valid&&submitted">* Please select End Time</p>
                                                <!-- <span class="note pull-right">Note: # hours selected</span> -->
                                            </div>
                                            <div class="form-group custom-picker no-top" *ngIf="registerForm.controls['endTime'+i] == undefined">
                                                <input type="time" name="endTime" id="endTime" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="Duration" name="durationTime" id="durationTime" formControlName="durationTime{{i}}" readonly/>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" value="hideminutes" name="hideminutes" id="hideminutes" formControlName="hideminutes{{i}}" style="display: none;">
                                    </div>
                                    <div class="w100">
                                        <div class="col-sm-2 pull-right" *ngIf="(totalhour != undefined && totalhour != null && totalhour != '' && totalhour != 0)">
                                            <div class="form-group">
                                                <label class="no-days hr">{{totaltimeformat}}</label>
                                            </div>
                                        </div>
                                        <div class="col-sm-2 pull-right" *ngIf="(totalhour != undefined && totalhour != null && totalhour != '' && totalhour != 0)">
                                            <div class="form-group">
                                                <label class="no-days hr hr_label">Total Training Hours</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" [ngClass]="reason == 'modify' ? 'enable' : 'disable'">
                                    <!-- Venue Location -->
                                    <div class="col-sm-12">
                                        <h5>Venue Location</h5>
                                    </div>
                                    <div [ngClass]="!showdealerdrop && !showcomment ? 'col-sm-12' : 'col-sm-3'">
                                        <div class="form-group">
                                            <label>Select Type</label>
                                            <select class="form-control" formControlName="venue_type" (change)='selectvenuetype($event)'>
                                                <option value="" disabled>Select Type</option>
                                                <option value="1">Dealer</option>
                                                <option value="2">Other</option>
                                            </select>
                                            <p class="has-error" *ngIf="!registerForm.controls['venue_type'].valid&&submitted">* Please select Venue Type</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-3" *ngIf="showdealerdrop">
                                        <div class="form-group">
                                            <label>Select Area Manager</label>
                                            <select class="form-control" formControlName="venue_am" (change)='changearea($event)'>
                                                <option value="" disabled>Select Area Manager</option>
                                                <option value="{{area.am_email}}" *ngFor="let area of zoneam_list">{{area.am_name}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3" *ngIf="showdealerdrop">
                                        <div class="form-group">
                                            <label>Select Dealer</label>
                                            <select class="form-control" formControlName="venue_dealer" (change)='selectdealer($event)'>
                                                <option value="" disabled>Select Dealer</option>
                                                <option value="{{dealer.dealer_code}}" *ngFor="let dealer of zonedealer_list">{{dealer.dealer_code}} - {{dealer.dealer_name}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div  class="col-sm-3" *ngIf="showdealerdrop">
                                        <div class="form-group">
                                            <label>Address</label>
                                            <textarea class="form-control" rows="3" formControlName="venue_address" name="venue_address" placeholder="Enter Address"></textarea>
                                            <p class="has-error" *ngIf="!registerForm.controls['venue_address'].valid&&submitted">* Please select Venue Address</p>
                                        </div>
                                    </div>

                                    <div  class="col-sm-9" *ngIf="showcomment">
                                        <div class="form-group">
                                            <label>Address</label>
                                            <textarea class="form-control" rows="3" formControlName="venue_address" name="venue_address"></textarea>
                                            <p class="has-error" *ngIf="!registerForm.controls['venue_address'].valid&&submitted">* Please select Venue Address</p>
                                        </div>
                                    </div>

                                    <!-- Pre Assessment -->
                                    <div class="col-sm-3 custom">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" class="checkcls pre"  value="1" (change)="getvalue($event)" [(ngModel)]="precheck" [ngModelOptions]="{standalone: true}"><span class="ass-tit">Pre Assessment</span>
                                        </label>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Enter Assessment Name"  name="assessnamepre" autocomplete="off" formControlName="assessnamepre"  [ngClass]="(precheck!='' && precheck!=undefined && precheck!=null) ? 'activecls' : 'disablecls'"/>
                                            <p class="has-error" *ngIf="!registerForm.controls['assessnamepre'].valid&&submitted">* Please Enter Pre-Assessment name</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <input type="number" class="form-control dura" placeholder="Enter Question Count"  name="assessquescountpre" autocomplete="off" formControlName="assessquescountpre" [ngClass]="(precheck!='' && precheck!=undefined && precheck!=null) ? 'activecls' : 'disablecls'" (input)="isInteger()" (keypress)="restrictAlphabets($event)" maxlength="3"/>
                                            <p class="has-error" *ngIf="!registerForm.controls['assessquescountpre'].valid&&submitted">* Please Enter Question Count</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group duration">
                                            <input type="number" name="assessTimepre" id="assessTimepre" class="form-control dura" placeholder="Enter Duration" value="assessTimepre"  name="assessTimepre" formControlName="assessTimepre" autocomplete="off" [ngClass]="(precheck!='' && precheck!=undefined && precheck!=null) ? 'activecls' : 'disablecls'" (input)="isInteger()" (keypress)="restrictAlphabets($event)" maxlength="3"/>
                                            <span>Minutes</span>
                                            <p class="has-error" *ngIf="!registerForm.controls['assessTimepre'].valid&&submitted">* Please select Time</p>
                                        </div>
                                    </div>

                                    <!-- Post Assessment -->
                                    <div class="col-sm-3 custom">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" class="checkcls post"  value="2" (change)="getvalue($event)" [(ngModel)]="postcheck" [ngModelOptions]="{standalone: true}"><span class="ass-tit">Post Assessment</span>
                                        </label>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Enter Assessment Name" name="assessnamepost" autocomplete="off" formControlName="assessnamepost" [ngClass]="(postcheck!=''  && postcheck!=undefined && postcheck!=null)? 'activecls' : 'disablecls'"/>
                                            <p class="has-error" *ngIf="!registerForm.controls['assessnamepost'].valid&&submitted">* Please Enter Post-Assessment name</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <input type="number" class="form-control dura" name="assessquescountpost" formControlName="assessquescountpost" autocomplete="off" placeholder="Enter Question Count" [ngClass]="(postcheck!=''  && postcheck!=undefined && postcheck!=null)? 'activecls' : 'disablecls'" (input)="isInteger()" (keypress)="restrictAlphabets($event)" maxlength="3"/>
                                            <p class="has-error" *ngIf="!registerForm.controls['assessquescountpost'].valid&&submitted">* Please Enter Question Count</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group duration">
                                            <input type="number" name="assessTimepost" id="assessTimepost" class="form-control dura" placeholder="Enter Duration" autocomplete="off" value="assessTimepost" name="assessTimepost" formControlName="assessTimepost" autocomplete="off" [ngClass]="(postcheck!=''  && postcheck!=undefined && postcheck!=null)? 'activecls' : 'disablecls'" (input)="isInteger()" (keypress)="restrictAlphabets($event)" maxlength="3"/>
                                            <span>Minutes</span>
                                            <p class="has-error" *ngIf="!registerForm.controls['assessTimepost'].valid&&submitted">* Please select Time</p>
                                            <p class="note pull-right">Note: Duration in minutes.</p>
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" class="checkcls"  value="" formControlName="is_feedback"><span class="ass-tit">Send Training Feedback Once Completed</span>
                                        </label>
                                    </div>

                                    <div class="col-sm-12">
                                        <p class="note">Note: Notifications / Reminders sent to ZM/RM/AM/DLR/DSE before 1 hour from Training Date.</p>
                                    </div>
                                    <div class="col-sm-12" *ngIf="reason == 'modify'">
                                        <button class="btn primary fixed float-right sub" data-value="1"  data-toggle="modal" data-target="#publish-modal">Update</button>
                                        <button class="btn primary fixed float-right cancle" (click)="onCancel()">Cancel</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row" *ngIf="reason != 'modify'">
                                <div class="col-sm-12">
                                    <button class="btn primary fixed float-right sub" (click)="sendreq();$event.preventDefault()" [disabled] = "reason=='' || reason==null || reason== undefined">Submit</button>
                                    <button class="btn primary fixed float-right cancle" (click)="onCancel()">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- trainer_form -->

                <!-- Full Calendar -->
                <!-- <div class="full_row p15">
                    <full-calendar #calendar [options]="calendarOptions" ></full-calendar>
                </div> -->

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


<!-- end-date-modal -->
<div class="modal fade" id="end-date-modal" tabindex="-1" role="dialog" aria-hidden="true"  data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p>The Training selected is "{{trainingname}}".You are trying to amend the duration of training. If you would like to continue to increase/ decrease the duration, please provide the reason.
        </p>
            <div class="form-group">
                <textarea class="form-control" placeholder="Enter reason" [(ngModel)]="restrict_reason"></textarea>
                <p class="has-error err_p" *ngIf="showerror">* Please Enter reason</p>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelend_date_modal()">Cancel</button>
          <button type="button" class="btn primary fixed" (click)="enddate_submit()">Submit</button>
          <p class="note">You can  cancel if you are not willing to change the duration.</p>
        </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">
            <p>Do you wants to {{save_btn_text}} the schedule <br>
            <b>({{trainingname}} – {{schedule_date}})</b>now</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn primary fixed" data-dismiss="modal" (click)="cancelmodal()">No</button>
          <button type="button" class="btn primary fixed"  (click)="submitdata()">Yes</button>
        </div>
      </div>
    </div>
  </div>
 