

<ion-header>
  <ion-toolbar class="header-toolbar-new">
      <ion-buttons slot="start">
        <nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
      </ion-buttons>
      <ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','createHR-Request')}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- <form [formGroup] = "form" (ngSubmit) = "submitRequest(form.value)"> -->

  <div >
    <ion-card class="result-serviceType">
    <ion-card-content>
    <div class="request-heading">
      <span>{{ts.trPK('userProfile','ServiceType')}}</span>
    </div>
    <div>
      <ion-row class="custom-radio">
          <ion-radio-group [(ngModel)]="SelectedServiceType" class="radio-list">
          
            <ion-radio value="HR Services" [color]="myColor">{{HR}}</ion-radio>
            <ion-label class="text-label" >{{HR}}</ion-label>
          
            <ion-radio  value="Complaints"  [color]="myColor"  >{{complaints}}</ion-radio>
            <ion-label class="text-label">{{complaints}}</ion-label>
          
            <ion-radio  value="Inquiry"  [color]="myColor"  >{{inquiry}}</ion-radio>
            <ion-label class="text-label">{{inquiry}}</ion-label>
        
          </ion-radio-group>
      </ion-row>
    </div>
  
    <!-- /////////////////////////////////////////// -->
    <div>
      <div>
    <ion-list>
      <label class="labels">{{ts.trPK('userProfile','DeptName')}}</label>
      <ion-item lines="none" class="filed-container">
        <select class="filed1" placeholder="Select Department" type="text" [(ngModel)]="depType">
          <option [selected]="x.departmentName" value="{{i}}"
            *ngFor="let x of departTypeList; let i=index;">
            {{x.departmentName}} </option>
        </select>
        <!-- <select class="filed1" placeholder="Select Department" type="text">
          <option >{{EmpRelations}}</option>
          <option >{{Hr}}</option>
          <option >{{Payroll}}</option>
          <option >{{GovRelation}}</option>
        </select> -->
      </ion-item>
      <label class="labels">{{ts.trPK('userProfile','RelatedSection')}}</label>
      <ion-item lines="none" class="filed-container">
        <select [(ngModel)]="secType" class="filed2" placeholder="Select Sectiont" type="text">
          <option [selected]="x.projectName" value="{{i}}"
            *ngFor="let x of sectionTypeList; let i=index;">
            {{x.sectionName}} </option>
         
        </select>
      </ion-item>
      <label class="labels">{{ts.trPK('userProfile','RelatedTopic')}}</label>
      <ion-item lines="none" class="filed-container">
        <select [(ngModel)]="topicType" class="filed3" placeholder="Select Topic" type="text">
          <option [selected]="x.topicName" value="{{i}}"
          *ngFor="let x of topicTypeList; let i=index;">
          {{x.topicName}} </option>
        </select>
      </ion-item>
    </ion-list>
  </div>
  
  
    <div class="request-heading">
      <span>{{ts.trPK('userProfile','SupportingDocument')}}</span>
    </div>
    <div>
      
        <div class="fileUpload btn btn-primary">
          <img  slot="start" style=" height: 55px;"src="../assets/imgs/add-photo.svg">
          <input end class="upload" type="file" ng2FileSelect [uploader]="uploader"(change)="onFileSelected($event)" />
        </div>
        <ion-slides>
          <ion-slide>
            <ion-grid class=" gridAH" *ngIf="uploader?.queue?.length > 0">
                <ion-col class="rowAH" *ngFor="let item of uploader.queue">
                    <ion-col size="4">
                        <label for="">{{ item?.file?.name }}</label>
                    </ion-col>
                    <!-- <ion-col size="4">
                        <label *ngIf="uploader.options.isHTML5">{{ item?.file?.size/1024/1024 | number:'.2' }}
                            MB</label>
                    </ion-col> -->
                    <ion-col size="2">
                      <button class="iconButton" ion-button (click)="removeFile(item)"> 
                        <ion-icon style="color: red;" name="close"></ion-icon>
                        <!-- <img class="imgSize" src="../assets/imgs/close_menu_icon.png "> -->
                      </button>
                    </ion-col>
                </ion-col>
            </ion-grid>
            </ion-slide>
          </ion-slides>
              
        
   





      <!-- <div>
        <button class="iconButton" ion-button (click)="removeFile(item)"> 
          <img class="imgSize" src="../assets/imgs/close_menu_icon.png "></button>
      </div>
    <div class="fileUpload btn btn-primary">
      <img  slot="start" style=" height: 55px;"src="../assets/imgs/add-photo.svg">
      <input type="file" class="upload" ng2FileSelect [uploader]="uploader"
      (change)="onFileSelected($event)" (click)="onFileSelectedclick($event)" />
    
    </div> -->
  
    </div>
    <div class="request-heading">
      <span>{{ts.trPK('userProfile','Description')}}</span>
    </div>
    
    <ion-col size="12">
      <ion-item style="margin-left: -20px;margin-right: -13px;margin-top: -24px;" lines="none">
        <ion-input [(ngModel)]="Description"  [ngClass]="direction == 'en' ? 'filedDesc':'filedDesc-ar' "  placeholder="{{ts.trPK('userProfile','Description')}}" type="text"></ion-input>
      </ion-item>
     </ion-col>
  
    </div>
    </ion-card-content>
  </ion-card>
  </div>

<!-- </form> -->
</ion-content>

<ion-footer  >
  <div class="centerDiv">
    <button  class="gridCancelBtn"  ion-button (click)="cancelRequest()">{{ts.trPK('general','cancel')}}</button>
    <button  class="gridSubmitBtn" ion-button (click)="submitRequest()">{{ts.trPK('general','submit')}}</button>
  </div>
  </ion-footer>


