kfmc_website/src/app/dashboard/section-review-for-trainee/section-review-trainee-add/section-review-trainee-add.component.html

<div class="addHospital-w">
    <div class="container">
  
      <div class="row">
          <div class="col-12">
            <ul class="list-unstyled titileLi-w" style="margin:0">
              <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-12">
              <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">
              <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" [disabled]="disabledInput" (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" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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="register_number" ngModel [(ngModel)]="formData.registration_number" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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" [disabled]="disabledInput" 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" [disabled]="disabledInput" required/>
                    </div>
                  </div>

                <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <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" [disabled]="disabledInput">
                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
                        <option [value]="2001">حذف</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <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" [disabled]="disabledInput">
                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
                        <option [value]="2002">حذف</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <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" [disabled]="disabledInput">
                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
                        <option [value]="2003">حذف</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12">
              <h2 class="title">المرفقات</h2>
              <div class="row">

                <div class="col-12" *ngIf="files.length == 0">
                  <h2 class="titileFiles-w">لا يوجد مرفقات لعرضها </h2>
                </div>

                <div class="wrapper" *ngIf="files.length > 0">
                  
                  <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}" [disabled]="disabledInput"/></td>
                        <td style="position: relative;">
                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" [disabled]="disabledInput"/>
                          <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)" [disabled]="disabledInput">حذف</button></td>
                      </tr>
                    </tbody>
                  </table>

                </div>
              </div>
            </div>

            <div class="col-12" style="margin: 20px 0;">
                <div class="row">
                  <div class="wrapper">
                    
                    <div class="askForOpinion-w" *ngIf="!isConfirmedStatus">
                      <div class="col-12 col-md-12">
                        <div class="form-group">
                          <label style="float:right; margin: 20px;"> رأي القسم </label>
                          <quill-editor id="description" name="actionOpinionForm" [(ngModel)]="actionOpinionForm.department_opinion" required>
                            </quill-editor>
                        </div>
                      </div>
                    </div>
                    
                    <div class="confirmed-w" *ngIf="isConfirmedStatus">
                      <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                          <div class="form-group">
                            <label for="startDate" style="float:right" >تاريخ البدايه</label>
                            <div *ngIf='bindingDateSplitStart && typeMode'>
                              <app-higri-date (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart"></app-higri-date>
                            </div>
                            <!-- <div *ngIf='!typeMode'>
                              <app-higri-date (onDatePicked)="getDate($event, 'start')" ></app-higri-date>
                            </div> -->
                          </div>
                        </div>
          
                        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                          <div class="form-group">
                            <label for="endDate" style="float:right" >تاريخ الإنتهاء</label>
                            <div *ngIf='bindingDateSplitEnd && typeMode'>
                              <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd"> </app-end-higri-date>
                            </div>
                            <!-- <div *ngIf='!typeMode'>
                              <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" ></app-end-higri-date>
                            </div> -->
                          </div>
                        </div>

                        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                          <button class="btn btn-success" type="button" (click)="beginTrainning()" style="width: 100%; margin-top:30px;">بدء التدريب</button>
                        </div>
                    </div>
                  
                  </div>
                </div>
            </div>

            <div class="col-12">
              <button type="submit" class="btn btn-success rightW" [disabled]="checkSaveClick">حفظ</button>
              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
            </div>

          </div>
        </form>
      </div>
  
  
    </div>
  </div>