<div class="section-header text-center">

<h2 class="price-head">our Exams</h2>

<form>
<div class="middleinput" style="display: flex;justify-content: center;margin-
top: 7px;">
<input type="Text" class="searchinput" placeholder="Exam Name"
[value]="examName" (change)="Search($event)">
<br>
<div class="example-button-row"></div>
<button mat-raised-button class="searchbutton"
(click)="SearchButton()">Search</button>
</div>
</form>
</div>

<div class="tbl">
<button mat-raised-button [ngStyle]="{'color':'#fff','background-
color':'#188048','margin-bottom.px': 2}"
(click)="OpenCreateDialog()">Add
Exam</button>
<table mat-table [dataSource]="user.exams" class="mat-elevation-z8">
<tbody>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.examid}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Exam Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="description" style="width: 10px;">
<th mat-header-cell *matHeaderCellDef> Description </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container>
<ng-container matColumnDef="examduration">
<th mat-header-cell *matHeaderCellDef> Duration </th>
<td mat-cell *matCellDef="let element"> {{element.examduration}} </td>
</ng-container>
<ng-container matColumnDef="examprice">
<th mat-header-cell *matHeaderCellDef> Exam Price </th>
<td mat-cell *matCellDef="let element"> {{element.examprice}} </td>
</ng-container>
<ng-container matColumnDef="numofquestions">
<th mat-header-cell *matHeaderCellDef> Num Of Questions </th>
<td mat-cell *matCellDef="let element"> {{element.numofquestions}} </td>
</ng-container>
<ng-container matColumnDef="passmark">
<th mat-header-cell *matHeaderCellDef> Pass Mark </th>
<td mat-cell *matCellDef="let element"> {{element.passmark}} </td>
</ng-container>
<ng-container matColumnDef="coursename">
<th mat-header-cell *matHeaderCellDef> Course Name </th>
<td mat-cell *matCellDef="let element"> {{element.coursename}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Image </th>
<td mat-cell *matCellDef="let element">
<img src="../../../assets/images/{{element.imagepath}}"
[ngStyle]="{'width.px':70,'hight.px':70}">
 </td>
</ng-container>
<ng-container matColumnDef="Options">
<th mat-header-cell *matHeaderCellDef> Options </th>
<td mat-cell *matCellDef="let element">
<button mat-raised-button color="primary"
(click)="OpenUpdateDialog(element)">Update</button>
<button mat-raised-button color="warn"
(click)="OpenDeleteDialog(element.examid)">Delete</button>
</td>
</ng-container>
</tbody>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

<!-- For Update -->

<ng-template #CallUpdateDialog>
<h2 mat-dialog-title style="color:#005555"> <i class="fa fa-pencil-square-o"
aria-hidden="true"></i>
Update Exam</h2>
<div mat-dialog-content>
<form class="example-form mat-dialog-container" [formGroup]="UpdateForm">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Course Name</mat-label>
<input type="text" matInput formControlName="name"
[(ngModel)]="previous_data.name">
<mat-error *ngIf="UpdateForm.controls['name'].hasError('required')">
Course Name is <strong>required</strong>
</mat-error>
<mat-error *ngIf="UpdateForm.controls['name'].hasError('pattern')">
Exam Name Should be in english (only latters)
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Course Description</mat-label>
<input type="text" matInput formControlName="description"
[(ngModel)]="previous_data.description">
<mat-error *ngIf="UpdateForm.controls['description'].hasError('required')">
Description is <strong>required</strong>
</mat-error>
<mat-error *ngIf="UpdateForm.controls['description'].hasError('pattern')">
Exam Name Should be in Arabic (only latters)
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Exam Duration</mat-label>
<input type="number" matInput formControlName="examduration"
[(ngModel)]="previous_data.examduration">
<mat-error
*ngIf="UpdateForm.controls['examduration'].hasError('required')">
Duration is required
</mat-error>
</mat-form-field>
<br>
 <mat-form-field class="example-full-width" appearance="fill">
<mat-label>Price</mat-label>
<input type="number" matInput formControlName="examprice"
[(ngModel)]="previous_data.examprice">
<mat-error *ngIf="UpdateForm.controls['examprice'].hasError('required')">
Price is required
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Num. of Questions</mat-label>
<input type="number" matInput formControlName="numofquestions"
[(ngModel)]="previous_data.numofquestions">
<mat-error
*ngIf="UpdateForm.controls['numofquestions'].hasError('required')">
Num. of Questions is required
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Pass Mark</mat-label>
<input type="number" matInput formControlName="passmark"
[(ngModel)]="previous_data.passmark">
<mat-error *ngIf="UpdateForm.controls['passmark'].hasError('required')">
Pass Mark is required
</mat-error>
</mat-form-field>
<br>

<mat-form-field class="example-full-width" appearance="fill">

<mat-label>Course Id</mat-label>
[(ngModel)]="previous_data.courseid">
<input type="number" matInput formControlName="courseid"
[(ngModel)]="previous_data.courseid">
<mat-error *ngIf="UpdateForm.controls['courseid'].hasError('required')">
Course Id is required
</mat-error>
</mat-form-field>
<br>
</form>
</div>
<div mat-dialog-actions>
<button mat-button mat-dialog-close class="updatebutton">Cancel</button>
<button mat-button mat-dialog-close cdkFocusInitial class="updatebutton"
(click)="SaveData()">Save</button>
</div>
</ng-template>

<!-- Delete Form -->

<ng-template #CallDeleteDialog>
<h2 mat-dialog-title style="color:#005555">
Delete Exam</h2>
<div mat-dialog-content>
<form class="example-form mat-dialog-container">
<h1 style="text-transform:capitalize;">Are You Sure You Want To Delete this
item ?</h1>
</form>
</div>
<div mat-dialog-actions>
 <button class="updatebutton" style="background-color:red; border-color:red;"
mat-dialog-close="yes">Yes</button>
<button mat-button mat-dialog-close>No</button>
</div>
</ng-template>

<!-- Create Dialoge -->

<ng-template #CallCreateDialog>
<h2 mat-dialog-title style="color:#005555"> <i class="fa fa-plus-circle" aria-
hidden="true"></i>
Create Exam</h2>
<mat-dialog-content class="mat-typography">
<form class="example-form mat-dialog-container" [formGroup]="CreateForm">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Exam Name</mat-label>
<input type="text" matInput formControlName="name">
<mat-error *ngIf="CreateForm.controls['name'].hasError('required')">
Exam Name is required
</mat-error>
<mat-error *ngIf="CreateForm.controls['name'].hasError('pattern')">
Exam Name Should be in english (only latters)
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Exam Description</mat-label>
<textarea type="text" matInput formControlName="description"></textarea>
<mat-error *ngIf="CreateForm.controls['description'].hasError('required')">
Description is required
</mat-error>
<mat-error *ngIf="CreateForm.controls['description'].hasError('pattern')">
Exam Name Should be in Arabic (only latters)
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Exam Duration</mat-label>
<input type="number" matInput formControlName="examduration">
<mat-error
*ngIf="CreateForm.controls['examduration'].hasError('required')">
Duration is required
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Price</mat-label>
<input type="number" matInput formControlName="examprice">
<mat-error *ngIf="CreateForm.controls['examprice'].hasError('required')">
Price is required
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Num. Of Questions</mat-label>
<input type="number" matInput formControlName="numofquestions">
<mat-error
*ngIf="CreateForm.controls['numofquestions'].hasError('required')">
Num. Of Questions is required
</mat-error>
 </mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Pass Mark</mat-label>
<input type="number" matInput formControlName="passmark">
<mat-error *ngIf="CreateForm.controls['passmark'].hasError('required')">
Pass Mark is required
</mat-error>
</mat-form-field>
<br>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Course Id</mat-label>
<input matInput type="number" formControlName="courseid">
<mat-error *ngIf="CreateForm.controls['courseid'].hasError('required')">
Course Id is required
</mat-error>
</mat-form-field>
<br>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close class="createbutton">Cancel</button>
<button mat-button [mat-dialog-close]="true" cdkFocusInitial
class="createbutton"
(click)="CreateData()">save</button>
</mat-dialog-actions>
</ng-template>