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

<div class="trainercourse"  [ngClass]="type=='mobile'?'fullwidth':''">
  <div class="trainer_in">
    <div class="trainer_left">
      <div class="left_card">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
              <a class="nav-link active back_btn"  ng id="home-tab" data-toggle="tab"  (click)="backclicked()"
              role="tab" aria-controls="home" aria-selected="true">back</a>
          </li>
        </ul>
        <div class="inner_load" *ngIf="loader">
          <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
              <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                <animateTransform 
                    attributeName="transform" 
                    attributeType="XML" 
                    type="rotate"
                    dur="1s" 
                    from="0 50 50"
                    to="360 50 50" 
                    repeatCount="indefinite" />
            </path>
          </svg>
            <p>Just a moment...</p>
        </div>

        <div class="trainingcontainer" *ngIf="(schedule_data!='' && !loader)">
          <div class="training_head">
            <div class="cls_trainingheader">Training Details</div>
            <div class="row">
              <div class="col-sm-2 col-xs-12">
                <div class="snapshot preview">
                  <img class="group_img no_img" src="{{schedule_data.training_group_image}}" *ngIf="schedule_data.training_group_image!=''"/>
                  <img class="group_img no_img" src="https://hyper-m.cygnusa.in/images/no_user.png" *ngIf="schedule_data.training_group_image=='' || schedule_data.training_group_image==undefined"/>
                </div>
              </div>

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

                <div class="row">
                    
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="user-details">
            <p><span>Trainer Name:</span><b>{{schedule_data.organizer_name}} </b></p>
            <!-- <p><span>DSE Name:</span>	<b>{{feedback.dse_name}}</b></p> -->
          </div>

          <div class="col-sm-9">
            <div class="table-responsive scroll_x">
              <table class="table table-fixed">
                <thead>
                  <tr>
                    <th>Training Feedback</th>
                    <th>Scale 1-5</th>
                  </tr>
                </thead>

                <tbody>
                  <tr *ngFor = "let item of trainingfeedbackquestion;">
                    <td>{{item.questiontext}}</td>
                    <td>
                      <div class="form-group">
                        <input class="form-control" type="text" placeholder="Overall Score" [(ngModel)] = "item.question_ans" [ngModelOptions]="{standalone: true}" readonly/>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>Over all Training Feedback score</th>
                    <th>
                      <div class="form-group">
                        <input class="form-control training_score" type="text" placeholder="Overall Score" [(ngModel)] = "feedback_datas.training_feedback_score_avg" [ngModelOptions]="{standalone: true}" readonly/>
                      </div>
                    </th>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="table-responsive scroll_x">
              <table class="table table-fixed">
                <thead>
                  <tr>
                    <th>Trainer's Feedback
                    </th>
                    <th>Scale 1-5</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor = "let item of trainerfeedbackquestion">
                    <td>{{item.questiontext}}</td>
                    <td>
                      <div class="form-group">
                        <input class="form-control" type="text" placeholder="Overall Score" [(ngModel)] = "item.question_ans" [ngModelOptions]="{standalone: true}" readonly/>
                      </div>
                    </td>
                  </tr>
                  
                  <tr>
                    <th>Over all Trainer Feedback score</th>
                    <th>
                      <div class="form-group">
                        <input class="form-control" type="text" [(ngModel)] = "feedback_datas.trainer_feedback_score_avg" [ngModelOptions]="{standalone: true}"  placeholder="Overall Score" readonly/>
                      </div>
                    </th>
                  </tr>

                  <!-- <tr>
                    <th colspan="2">Remarks</th>
                  </tr>

                  <tr>
                    <th colspan="2">
                        <div class="form-group">
                          <textarea class="form-control" type="text" placeholder="Enter remarks" [(ngModel)] = "feedback.remarks" [ngModelOptions]="{standalone: true}" readonly></textarea>
                        </div>
                    </th>
                  </tr> -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

