<div class="addHospital-w">
<div class="container">
<div class="row" style="margin-bottom: 30px;">
<div class="col-12">
<ul class="list-unstyled titileLi-w">
<li class="headingText-w">خدمه التدريب</li>
<li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> إستعراض بيانات المتدربين</li>
<li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
</ul>
</div>
</div>
<div class="containerContent-w">
<form (ngSubmit)="onSubmittedForm()" #f="ngForm">
<div class="row">
<div class="col-6" *ngIf="!typeMode">
<div class="form-group">
<label for="trainee" style="float:right">المتدرب</label>
<select id="trainee" class="form-control" (input)="getTraineeData($event)" ngModel name="trainee" [(ngModel)]="formData.trainee" >
<option *ngFor="let trainee of trainees" [value]="trainee.id">{{trainee.name}}</option>
</select>
</div>
</div>
<div class="col-12" *ngIf="typeMode">
<h2 class="title">المعلومات الشخصيه</h2>
<div class="row">
<div class="wrapper">
<div class="col-12 col-md-4">
<div class="form-group">
<label for="name" style="float:right">الإسم</label>
<input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name" [(ngModel)]="userData.name" [disabled]="disabledInput" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
<select class="form-control" style="padding:0 5px" ngModel name="nationality_id" [(ngModel)]="userData.nationality_id" [disabled]="disabledInput" required>
<option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.country_arName}}</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
<select class="form-control select" id="identity" (change)="getSelectedOptionText($event)" ngModel name="identity_type_id" [(ngModel)]="userData.identity_type_id" [disabled]="disabledInput" required>
<option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
<input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" (input)="onIdentitiyChange($event.target.value)" ngModel name="identity_number" [(ngModel)]="userData.identity_number" [disabled]="disabledInput" required/>
<span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
<span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
<span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
<input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" ngModel name="birthday" [(ngModel)]="userData.birthday" [disabled]="disabledInput" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
<div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
<input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
<label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
</div>
<div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
<input type="radio" class="custom-control-input customStyleInput" id="defaultChecked" value="female" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
<label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12" *ngIf="typeMode">
<h2 class="title">معلومات الإتصال</h2>
<div class="row">
<div class="wrapper">
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
<input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" ngModel name="phone" [(ngModel)]="userData.phone" [disabled]="disabledInput" required/>
</div>
</div>
<div class="col-12 col-md-4">
<div class="form-group">
<label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
<input id="email" type="email" class="form-control" placeholder="الإيميل" ngModel name="email" [(ngModel)]="userData.email" [disabled]="disabledInput" required/>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<h2 class="title">معلومات التدريب</h2>
<div class="row">
<div class="wrapper">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label style="float:right">نوع الطلب <span class="spanReqired-w">*</span></label>
<select class="form-control selectStyle-w" ngModel name="type" [(ngModel)]="formData.type" (input)="changeType($event)" required>
<option value="trainees">المتدربين</option>
<option value="fellowship"> زماله(البورد السعودي) </option>
<option value="university_administrators">مشرفي الجامعات</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="order" style="float:right">اسم التخصص <span class="spanReqired-w">*</span></label>
<input type="text" id="order" placeholder=" إسم التخصص" ngModel name="specialization_name" [(ngModel)]="formData.specialization_name" class="form-control" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="spec" style="float:right">التخصص الدقيق <span class="spanReqired-w">*</span></label>
<input type="text" id="spec" class="form-control" placeholder="التخصص الدقيق" name="specific_specialization" [(ngModel)]="formData.specific_specialization" ngModel required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
<div class="form-group">
<label for="universty" style="float:right">الجامعه <span class="spanReqired-w">*</span></label>
<input type="text" id="universty" placeholder="الجامعه" class="form-control" name="univeristy" ngModel [(ngModel)]="formData.university" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="level" style="float:right">المستوي <span class="spanReqired-w">*</span></label>
<input type="text" id="level" placeholder="المستوي" class="form-control" name="level" ngModel [(ngModel)]="formData.level" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="trainning" style="float:right">الفتره التدريبيه <span class="spanReqired-w">*</span></label>
<input type="text" id="trainning" placeholder="الفتره التدريبيه" class="form-control" name="training_period" ngModel [(ngModel)]="formData.training_period" required />
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
<div class="form-group">
<label for="regester" style="float:right">رقم التسجيل <span class="spanReqired-w">*</span></label>
<input type="number" id="regester" placeholder="رقم التسجيل" class="form-control" name="training_period" ngModel [(ngModel)]="formData.registration_number" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
<div class="form-group">
<label for="card" style="float:right">رقم البطاقه الهينه <span class="spanReqired-w">*</span></label>
<input id="card" type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" ngModel [(ngModel)]="formData.authority_card_number" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
<div class="form-group">
<label for="job" style="float:right"> البطاقه الوظيفي <span class="spanReqired-w">*</span></label>
<input type="number" id="job" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" ngModel [(ngModel)]="formData.functional_number" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
<div class="form-group">
<label for="contract" style="float:right">نوع التعاقد <span class="spanReqired-w">*</span></label>
<input type="text" id="contract" placeholder="نوع التعاقد" class="form-control" name="contract_type" ngModel [(ngModel)]="formData.contract_type" required/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
<div class="form-group">
<label for="field" style="float:right">الجهه التابع لها المتدرب <span class="spanReqired-w">*</span></label>
<input type="text" id="field" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" ngModel [(ngModel)]="formData.organization_affiliated_with" required/>
</div>
</div>
<!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="!editMode">
<div class="form-group">
<label for="department1" style="float:right;">القسم الأول</label>
<select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1">
<option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="!editMode">
<div class="form-group">
<label for="department2" style="float:right;">القسم الثاني</label>
<select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2">
<option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="!editMode">
<div class="form-group">
<label for="department3" style="float:right;">القسم الثالث</label>
<select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3">
<option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="editMode">
<div class="form-group">
<label for="department4" style="float:right;">القسم</label>
<select class="form-control selectStyle-w" id="department4" name="department4" [(ngModel)]="formData.department4">
<option *ngFor="let department of departments" [value]="department.department_id">{{department.department_name}}</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12" *ngIf="editMode">
<div class="form-group">
<label for="status" style="float:right; display:block"> الحاله <span class="spanReqired-w">*</span></label>
<button type="button" class="btn btn-success statusBtn-w" (click)="statusShow('accepted')">قبول</button>
<button type="button" class="btn btn-danger statusBtn-w" (click)="statusShow('refuced')">رفض</button>
<button type="button" class="btn btn-default statusBtn-w" (click)="statusShow('asked_for_opinion')">طلب رأي</button>
<input type="text" placeholder="سبب الرفض" class="form-control" name="status_description" ngModel [(ngModel)]="formData.status_description" *ngIf="showRefusedCause" required>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<h2 class="title">المرفقات</h2>
<div class="row">
<div class="wrapper">
<div class="col-12">
<button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
</div>
<table class="table table-bordered">
<thead class="headBackground-w">
<tr>
<th> إسم المرفق</th>
<th>رفع املف ( بصيغه pdf )</th>
<th>حذف</th>
</tr>
</thead>
<tbody>
<tr style="text-align:center;" *ngFor="let file of files; let i = index">
<td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}"/></td>
<td style="position: relative;">
<input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" />
<label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
<span class="fileName-w">{{file.nameFile}}</span>
</td>
<td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
<button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
</div>
</div>
</form>
</div>
</div>
</div>