<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" [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"  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>

                <div class="trainingcontainer">
                    <div class="training_head">
                        <form [formGroup]="registerForm" (ngSubmit)="onSubmit(registerForm.value)">
                            <div class="cls_trainingheader">Schedule New Training</div>
                            <div class="row">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="row">
                                        <div class="col-sm-12 clsright">
                                            <label>Training Title </label></div>
                                            <div class="col-sm-12 clsleft">
                                            <select (change)='typeChange($event.target.value)' placeholder="Select" class="form-control" formControlName="title" required>
                                                <option value="" disabled>Select title</option>
                                                <option *ngFor="let type of training_type" value="{{type.title}}">{{type.title}}</option>
                                                <!-- <option value="none">None</option> -->
                                            </select>
                                            <p class="has-error" *ngIf="!registerForm.controls['title'].valid&&submitted">* Please select title</p>
                                        </div>
                                    </div>
                                    <div class="row" *ngIf="showtextbox">
                                        <div class="col-sm-12 clsright" >Enter Training Title </div>
                                        <div class="col-sm-12 clsleft"> 
                                            <input type="text" class="form-control" formControlName="title" name="title" id="title" autocomplete="off" placeholder="Enter Training title" required>
                                        </div>
                                        <p class="has-error" *ngIf="!registerForm.controls['title'].valid&&submitted">* Please select title</p>
                                    </div>
                                    <div class="row" style="margin-top: 10px;">
                                        <div class="col-sm-12 clsright">Enter Training Description </div>
                                        <div class="col-sm-12 clsleft"> 
                                            <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 select Description</p>
                                        </div>
                                    </div>
                                    <div class="row podate">
                                        <div class="col-sm-4 p0">
                                            <div class="col-sm-12 clsright">
                                                <label>Start date</label></div>
                                            <div class="form-group col-sm-6 dob" class='over'>
                                                <ng-datepicker formControlName="startdate" (click)="changedate()" [options]="options" name="startdate" class="form-control" required>
                                                </ng-datepicker>
                                                <p class="has-error" *ngIf="!registerForm.controls['startdate'].valid&&submitted">* Please select startdate</p>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 p0">
                                            <div class="col-sm-12 clsright">
                                                <label>Start Time</label></div>
                                            <div class="form-group col-sm-6 dob" class='over'>
                                                <input type="time" name="startTime" id="startTime" class="form-control" formControlName="startTime" (click)="openstartclock()" value="startTime"/>
                                                <p class="has-error" *ngIf="!registerForm.controls['startTime'].valid&&submitted">* Please select start time</p>
                                            </div>
                                        </div>
                                        <!-- start="startTime" -->
                                        <div class="col-sm-4 p0">
                                            <div class="col-sm-12 clsright">
                                                <label>End Time</label></div>
                                            <div class="form-group col-sm-6 dob" class='over'>
                                                <input type="time" name="endTime" id="endTime" class="form-control" formControlName="endTime" (click)="openendclock()" value="endTime"/>
                                                <p class="has-error" *ngIf="!registerForm.controls['endTime'].valid&&submitted">* Please select end time</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6 p0">
                                            <div class="col-sm-12 clsright">
                                                <label>Select Role</label></div>
                                                <div class="col-sm-12 clsleft sec_class">
                                                    <select (change)='changerole($event.target.value)' placeholder="Select" class="form-control" formControlName="role" required>
                                                        <option value="" disabled>Select Role</option>
                                                        <option *ngFor="let type of role_list" value="{{type.id}}">{{type.rolename}}</option>
                                                    </select>
                                                <p class="has-error" *ngIf="!registerForm.controls['role'].valid&&submitted">* Please select Presenter</p>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 p0" *ngIf="role== 4 ">
                                            <div class="col-sm-12 clsright">
                                                <label>Zonal Manager</label>
                                            </div>
                                            <div class="col-sm-12 clsleft sec_class">
                                                <select (change)='changezm($event.target.value)' placeholder="Select" class="form-control" formControlName="" required>
                                                    <option value="" disabled>Select Zonal Manager</option>
                                                    <option *ngFor="let type of roleuserlist" value="{{type.value}}">{{type.emp_code}}-{{type.fname}} {{type.lname}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 p0" *ngIf="role== 5">
                                            <div class="col-sm-12 clsright">
                                                <label>Trainer</label>
                                            </div>
                                            <div class="col-sm-12 clsleft sec_class">
                                                <select (change)='changetrainer($event.target.value)' placeholder="Select" class="form-control" formControlName="role_selected" required>
                                                    <option value="" disabled>Select Trainer</option>
                                                    <option *ngFor="let type of roleuserlist" value="{{type.value}}">{{type.value}}-{{type.fname}} {{type.lname}}</option>
                                                </select>
                                                <p class="has-error" *ngIf="!registerForm.controls['role_selected'].valid&&submitted">* Please select Trainer</p>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 p0" *ngIf="role== 6 || role== 7 ||role== 14">
                                            <div class="col-sm-12 clsright">
                                                <label>Zonal Manager</label>
                                            </div>
                                            <div class="col-sm-12 clsleft sec_class">
                                                <select (change)='changezmsecond($event.target.value)' placeholder="Select" class="form-control" formControlName="" required>
                                                    <option value="" disabled>Zonal Manager</option>
                                                    <option *ngFor="let type of roleuserlist" value="{{type.value}}">{{type.emp_code}}-{{type.fname}} {{type.lname}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 p0" *ngIf="showzmrm">
                                            <div class="col-sm-12 clsright">
                                                <label>Regional Manager</label>
                                            </div>
                                            <div class="col-sm-12 clsleft sec_class">
                                                <select (change)='changezmrm($event.target.value)' placeholder="Select" class="form-control" formControlName="" required>
                                                    <option value="" disabled>Regional Manager</option>
                                                    <option *ngFor="let type of rolermlist" value="{{type.value}}">{{type.name}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 p0" *ngIf="showzmam">
                                            <div class="col-sm-12 clsright">
                                                <label>Area Manager</label>
                                            </div>
                                            <div class="col-sm-12 clsleft sec_class">
                                                <select (change)='changezmam($event.target.value)' placeholder="Select" class="form-control" formControlName="" required>
                                                    <option value="" disabled>Area Manager</option>
                                                    <option *ngFor="let type of roleamlist" value="{{type.value}}">{{type.name}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 p0" *ngIf="showzmdealer">
                                            <div class="col-sm-12 clsright">
                                                <label>Dealer</label>
                                            </div>
                                            <div class="col-sm-12 clsleft sec_class">
                                                <select (change)='changezmdealer($event.target.value)' placeholder="Select" class="form-control" formControlName="" required>
                                                    <option value="" disabled>Dealer</option>
                                                    <option *ngFor="let type of roledealerlist" value="{{type.value}}">{{type.name}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" *ngIf="showrm">
                                        <div class="col-md-12 selectedcitypan scroll_bar p0 selectbroder">
                                            <label>Regional Manager</label>
                                            <div class="row" *ngIf="rm_list.length!=0">
                                                <div class="col-md-3" *ngFor="let rm of rm_list;let i=index;">
                                                    <label class="checkbox-inline">
                                                        <input type="checkbox" class="checkcls"  value="{{rm.value}}" (change)='Changerm($event)'><span>{{rm.name}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div *ngIf="rm_list.length==0">
                                                <div class="col nolist">
                                                    No RM list found..
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" *ngIf="showam">
                                        <div class="col-sm-12 selectedcitypan scroll_bar p0 selectbroder">
                                            <label>Area Manager</label>
                                            <div class="row" *ngIf="am_list.length!=0">
                                                <div class="col-md-3" *ngFor="let am of am_list;let i=index;">
                                                    <label class="checkbox-inline">
                                                        <input type="checkbox" class="checkcls"  value="{{am.value}}" (change)='Changeam($event)'><span>{{am.name}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div *ngIf="am_list.length==0">
                                                <div class="col nolist">
                                                    No AM list found..
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" *ngIf="showdealer">
                                        <div class="col-sm-12 selectedcitypan scroll_bar p0 selectbroder">
                                        <label>Dealer</label>
                                        <div class="row" *ngIf="dealer_list.length!=0">
                                            <div class="col-md-3 dealer_col" *ngFor="let dealer of dealer_list;let i=index">
                                                <label class="checkbox-inline">
                                                    <input type="checkbox" class="checkcls"  value="{{dealer.value}}" (change)='Changedealer($event)'><span class="dealer_cls">{{dealer.name}}</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div *ngIf="dealer_list.length==0">
                                            <div class="col nolist">
                                                No Dealer list found..
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="row" *ngIf="showdse">
                                        <div class="col-sm-12 selectedcitypan scroll_bar p0 selectbroder">
                                            <label>DSE</label>
                                            <div class="row" *ngIf="dse_list.length!=0">
                                                <div class="col-md-3" *ngFor="let dse of dse_list;let i=index;">
                                                    <label class="checkbox-inline">
                                                        <input type="checkbox" class="checkcls"  value="{{dse.userid}}" (change)='Changedse($event,i)'><span>{{dse.smpin}} - {{dse.fname}} {{dse.lname}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div *ngIf="dse_list.length==0">
                                                <div class="col nolist">
                                                    No DSE list found..
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" *ngIf="totalparticipant_list.length!=0">
                                        <div class="col-sm-12 p0">
                                            <label>Total Participant list : <span class="font">{{totalparticipant_list.length}}</span></label>
                                            <div class="row">
                                                <div class="col-md-3" *ngFor="let totalparticipant of totalparticipant_list;let i=index;">
                                                    <div class="participant_list_new">
                                                        <div class="profile">
                                                        <img src="{{totalparticipant.profile}}">
                                                        </div>
                                                        <div class="content">
                                                            <p class="head">SMPIN : {{totalparticipant.smpin}}</p>
                                                            <p class="desc">{{totalparticipant.fname}} {{totalparticipant.lname}}</p>
                                                        </div>
                                                   </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        
                                    <!-- <timepicker [(ngModel)]="timevalue" ></timepicker> -->
                                    <div class="btn_section">
                                        <div class="btn_inner_box">
                                            <button class="btn primary fixed float-right sub" >Schedule</button>
                                            <button class="btn primary fixed float-right cancle" (click)="onCancel()">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
