<div class="app-content">
  <div class="app-content-header-box">
    <button class="back" (click)="doCancel()">
      <mat-icon>arrow_back_ios</mat-icon>
    </button>
    <h1 class="app-content-header-1">{{ 'TambahUbahNilaiTunjanganHarian' | translate }}</h1>
  </div>
  <form [formGroup]="inputForm" novalidate>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <app-date formControlName="tanggalAwalBerlaku" id="tanggalAwalBerlaku"
          placeholder="{{ 'TanggalBerlaku' | translate }}" [focus]="true" required>
        </app-date>
      </div>
    </div>
    <div class="row">
      <div class="app-inline-input-range">
        <div class="col-md-3 col-sm-12">
          <ng-template #positionClassOptTemplate let-item="item">{{ item.code }} - {{ item.name }}</ng-template>
          <app-dropdown-obj [id]="'levelJabatanAwal'" name="levelJabatanAwal" formControlName="levelJabatanAwal"
            [items]="positionClasses" [withEmpty]="true" placeholder="{{ 'LevelJabatanAwal' | translate }}"
            [optionTemplate]="positionClassOptTemplate" required>
          </app-dropdown-obj>
        </div>
        <div class="separator app-text-center">{{ 's/d' | translate }}</div>
        <div class="col-md-3 col-sm-12">
          <ng-template #positionClassOptTemplate let-item="item">{{ item.code }} - {{ item.name }}</ng-template>
          <app-dropdown-obj [id]="'levelJabatanAkhir'" name="levelJabatanAkhir" formControlName="levelJabatanAkhir"
            [items]="positionClasses" [withEmpty]="true" placeholder="{{ 'LevelJabatanAkhir' | translate }}"
            [optionTemplate]="positionClassOptTemplate" required>
          </app-dropdown-obj>
        </div>
        <!-- <div class="col-sm-5 col-md-5 app-pull-right">
          <button mat-button mat-flat-button color="primary" type="button" (click)="addHakTunjanganHarian()">
            {{ 'Tambahhaktunjanganharian' | translate }}
          </button>
        </div> -->
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="app-table-container">
          <div class="app-table-container-header">
            <div class="app-table-container-header-action">
              <button name="btnAddOneNilaiTunjanganHarianDetail" mat-icon-button
                (click)="addNilaiTunjanganHarianDetail(1)">
                <mat-icon>exposure_plus_1</mat-icon>
              </button>
              <button name="btnAddTwoNilaiTunjanganHarianDetail" mat-icon-button
                (click)="addNilaiTunjanganHarianDetail(2)">
                <mat-icon>exposure_plus_2</mat-icon>
              </button>
            </div>
          </div>
          <div class="app-table" formArrayName="nilaiTunjanganHarianDetails">
            <p-table class="app-primeng-table app-primeng-table-input" [columns]="columns"
              [value]="nilaiTunjanganHarianDetails?.controls" [rows]="10" [scrollable]="true">
              <ng-template pTemplate="header" let-columns>
                <tr>
                  <th class="action" *ngIf="isDetailError()">Error</th>
                  <th class="delete"></th>
                  <th style="width: 270px">{{ 'Tampilkannilaitunjangansebelumnya' | translate }}</th>
                  <th style="width: 150px">{{ 'LokasiKerja' | translate }}</th>
                  <th *ngFor="let column of columns" [ngStyle]="{ 'width': column.width }">
                    {{ column.header }}
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
                <tr formGroupName="{{ index }}" [ngClass]="rowStyle(rowData)">
                  <td class="action" *ngIf="isDetailError()">
                    <button mat-icon-button [pTooltip]="rowData?.value?.errors | tooltipListFormat"
                      tooltipStyleClass="app-primeng-tooltip" [escape]="false" tooltipPosition="right"
                      *ngIf="isRowError(rowData?.value?.errors)">
                      <mat-icon>clear</mat-icon>
                    </button>
                  </td>
                  <td class="delete">
                    <button mat-icon-button (click)="deleteNilaiTunjanganHarianDetail(rowData)">
                      <mat-icon>delete</mat-icon>
                    </button>
                  </td>
                  <td style="width: 270px">
                    <a class="app-link app-underlined app-cursor-pointer" (click)="onLokasiKerjaChange(inputForm.value.lokasiKerja, index)">
                      {{ 'Tampilkannilaitunjangansebelumnya' | translate }}
                    </a>
                  </td>
                  <td style="width: 150px">
                    <ng-template #workplaceOptTemplate let-item="item">{{ item.name }}</ng-template>
                    <app-dropdown-obj id="lokasiKerja" name="lokasiKerja" formControlName="lokasiKerja"
                      [items]="workplaces" withAll="false" [optionTemplate]="workplaceOptTemplate">
                    </app-dropdown-obj>
                  </td>
                  <td *ngFor="let column of columns" [ngStyle]="{ 'width': column.width }">
                    <app-number [id]="'nilai' + column.field" [name]="'nilai' + column.field"
                      [formControlName]="'nilai' + column.field">
                    </app-number>
                  </td>
                </tr>
              </ng-template>
              <ng-template pTemplate="emptymessage" let-columns>
                <tr>
                  <td align="center" [attr.colspan]="getColumnCount()">
                    {{ 'Datatidakditemukan' | translate }}
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <app-content-alert></app-content-alert>
      </div>
    </div>
    <div class="break-line"></div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <ng-container *ngIf="!selectedNilaiTunjanganHarian">
          <button mat-button mat-flat-button name="btnSimpan" color="primary" (click)="doCreate()"
            [disabled]="inputForm.invalid || nilaiTunjanganHarianDetails?.controls.length === 0">
            {{ 'Simpan' | translate }}
          </button>
        </ng-container>
        <ng-container *ngIf="selectedNilaiTunjanganHarian">
          <button mat-button mat-flat-button name="btnSimpan" color="primary" (click)="doUpdate()"
            [disabled]="inputForm.invalid || nilaiTunjanganHarianDetails?.controls.length === 0">
            {{ 'Ubah' | translate }}
          </button>
        </ng-container>
        <button mat-button mat-stroked-button name="btnCancel" (click)="doCancel()">{{ 'Kembali' | translate }}</button>
      </div>
    </div>
  </form>
</div>