import { Router } from '@angular/router';
import { IExCon } from "../../examconfig";

@Component({
  selector: 'app-edit-exam',
  templateUrl: './edit-exam.component.html',
  styleUrls: ['./edit-exam.component.css']
})
export class EditExamComponent implements OnInit {


  examid:string;
  myexam: IExCon[];
  exam: string;
  topic: string;
  description: string;
  noof:string;
  timer: string;
  creat: boolean = true;
  message:string;


  constructor(private apiService: ExamService,private router: Router) { }


  ngOnInit() {

    this.apiService.castexamid.subscribe(data =>
      {
        this.examid = data;
  });

  this.apiService.getaExam(this.examid)
  .subscribe(
  resultArray => {
    this.myexam = resultArray;
    this.exam = JSON.stringify(this.myexam);

    this.topic = this.myexam[0].topic;
    this.description = this.myexam[0].description;
    this.noof = this.myexam[0].noofq;
    this.timer = this.myexam[0].timer;


  })
  }


  save(){

this.apiService.EditExam(this.examid,this.topic,this.description,this.noof,this.timer);
this.creat = false;
this.message = '';

  }

  gohome(){
    this.router.navigate(['']);
  }

  goback(){
    this.router.navigate(['showexams']);
  }

  OnTopic(event:any)
  {
    this.topic = event.target.value;
  }

  onDesc(event:any)
  {
    this.description = event.target.value;
  }

  onNoof(event:any)
  {
    this.noof = event.target.value;
  }

  onTimer(event:any)
  {
    this.timer = event.target.value;
  }
}

<form>
    <div *ngFor="let item of myexam">
    <div *ngIf="creat;else created">
    <div class="container">
      <div class="row">
  <div class="span12">
    <!-- <form> -->
      <fieldset>
        <div class="control-group">

          <div class="controls">
              <label for="topic">Topic</label>
            <input type="text" id="topic" name="topic" [ngModel]="item.Topic" class="input-xlarge" (keyup)="OnTopic($event)">
          </div>
        </div>
        <br>
        <div class="control-group">

          <div class="controls">
              <label for="description">Description</label>
            <input type="text" id="description" name="description" [ngModel]="item.Description" class="input-xlarge" (keyup)="onDesc($event)">
          </div>
        </div>
        <br>
        <div class="control-group">

          <div class="controls">
              <label for="noof">No of Questions</label>
            <input type="text" id="noof" name="noof" [ngModel]="item.Noofq" class="input-xlarge" (keyup)="onNoof($event)">
          </div>
        </div>
        <br>
        <div class="control-group">

            <div class="controls">
              <label for="timer">Timer</label>
              <input type="text" id="timer" name="timer" [ngModel]="item.Timer" class="input-xlarge" (keyup)="onTimer($event)">
            </div>
          </div>
        <div class="control-group">
          <br>
          <div class="controls">
            <button type="button" class="btn btn-primary" (click)="save()">Save</button>
          </div>
          <br>
          <div class="controls">
              <button type="button" class="btn btn-primary" (click)="goback()">Cancel</button>
            </div>
        </div>
      </fieldset>


  </div>
</div>
</div>
</div>
<ng-template #created>
  <h2>Exam Edited Successfully</h2><br>
  <button type="button" (click)="gohome()">Go to Home page</button>
</ng-template>
</div>
</form>