<div class="row">
  <div class="col-sm-12">
    <form class="k-form" #trailIncome="ngForm" (submit)="next(trailIncome)">
      <ng-container>
        <bkp-divider>
          <kendo-icon [name]="'file-pdf'"></kendo-icon>&nbsp;Record from {{Loan.Lender}} </bkp-divider>
        <div style="text-align: center">
          <kendo-chip label="SuperCredit Loan ID {{Loan.Id}}" [removable]="false"></kendo-chip>
        </div>

        <div class="vertical-spacer"></div>

        <kendo-formfield>
          <kendo-label [for]="Lender" text="Fund Supplier's Name"></kendo-label>
          <input #Lender name="Lender" kendoTextBox [(ngModel)]="Loan.Lender" [readonly]="Loan.PayIn.length>0"/>
          <kendo-formhint>Unique Name for a fund provider (readonly after income data is available)</kendo-formhint>
          <kendo-formerror>Error: Lender name is required</kendo-formerror>
        </kendo-formfield>
        <div class="vertical-spacer"></div>

        <kendo-formfield>
          <kendo-label [for]="LenderLoanNumber" text="Fund Supplier's Loan Identification"></kendo-label>
          <input #LenderLoanNumber name="LenderLoanNumber"
                 kendoTextBox [(ngModel)]="Loan.LenderLoanNumber" [readonly]="Loan.PayIn.length>0"/>
          <kendo-formhint>Unique transaction ID from Funds supplier (readonly after income data is available)</kendo-formhint>
          <kendo-formerror>Error: the ID is required</kendo-formerror>
        </kendo-formfield>
        <div class="vertical-spacer"></div>


        <bkp-divider>
          <kendo-icon [name]="'table'"></kendo-icon> &nbsp; Monthly Income
        </bkp-divider>

        <kendo-grid [data]="Loan.PayIn"
                    [height]="410"
                    (add)="addHandler($event)"
                    (cancel)="cancelHandler($event)"
                    (save)="saveHandler($event)"
                    (edit)="editHandler($event)"
                    (remove)="removeHandler($event)"
        >
          <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand icon="plus" >Add new Income</button>
          </ng-template>

          <kendo-grid-command-column title="command" width="100">
            <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
              <button kendoGridEditCommand *ngIf="!dataItem.Uploads !== 0" icon="edit"></button>
              <button kendoGridRemoveCommand *ngIf="!dataItem.Uploads !== 0" icon="delete"></button>
              <button kendoGridSaveCommand [disabled]="formGroup?.invalid" icon="save"></button>
              <button kendoGridCancelCommand icon="cancel"></button>
            </ng-template>
          </kendo-grid-command-column>

          <kendo-grid-column field="Id" title="Id" width="50" editable="false">
          </kendo-grid-column>

          <kendo-grid-column field="Trail" title="Trail Received" width="200" format="{0:c}" editor="numeric">
          </kendo-grid-column>

          <kendo-grid-column field="Ts" title="Trail Date" editor="date">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.Ts | date: 'yyyy-MM-dd' }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="Balance" title="Balance" width="220">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div *ngIf="dataItem.Balance >=0 "> {{ dataItem.Balance | currency}} </div>
              <div *ngIf="dataItem.Balance < 0 "> unknown  </div>
            </ng-template>
            <ng-template kendoGridEditTemplate
                         let-dataItem="dataItem"
                         let-formGroup="formGroup">

              <kendo-switch [checked]="dataItem.Balance >=0"
                            name="showBalance" [(ngModel)]="showBalance"
                            ngModelOptions="{standalone: true}"
                            [onLabel]="'Yes'"
                            [offLabel]="'No'"
                            >
              </kendo-switch>

              <kendo-numerictextbox  *ngIf="showBalance" name="balance" [formControl]="formGroup.get('Balance')"
                                     [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
              </kendo-numerictextbox>
            </ng-template>

          </kendo-grid-column>


          <kendo-grid-column field="OffsetBalance" title="Offset" width="200" >
            <ng-template kendoGridCellTemplate let-dataItem>
              <div *ngIf="dataItem.OffsetBalance >=0 "> {{ dataItem.OffsetBalance | currency}} </div>
              <div *ngIf="dataItem.OffsetBalance < 0 "> unknown  </div>
            </ng-template>
            <ng-template kendoGridEditTemplate
                         let-dataItem="dataItem"
                         let-formGroup="formGroup">

              <kendo-switch [checked]="dataItem.OffsetBalance >=0"
                            name="showOffsetBalance" [(ngModel)]="showOffsetBalance"
                            ngModelOptions="{standalone: true}"
                            [onLabel]="'Yes'"
                            [offLabel]="'No'"
                            >
              </kendo-switch>

              <kendo-numerictextbox  *ngIf="showOffsetBalance" name="offsetBalance"
                                     [formControl]="formGroup.get('OffsetBalance')"
                                     [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
              </kendo-numerictextbox>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="Uploaded" title="Uploads" width="100" format="{0:c}" editable="false">
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
              <button kendoButton *ngIf="dataItem.Uploads > 0" (click)="visitUploads(dataItem)"  icon="attachment">
              </button>
              <p *ngIf="dataItem.Uploads <=0" align="center"> - </p>
            </ng-template>
          </kendo-grid-column>

        </kendo-grid>

        <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
        <div class="vertical-spacer"></div>

      </ng-container>

      <div class="k-form-buttons k-buttons-end">
        <div>
          <button class="k-button k-primary" (click)="prev()">◀ Prev</button>
          <button kendoButton look="flat" [disabled]="true">&nbsp;</button>
          <button kendoButton type="submit" class="k-button k-primary" (click)="next(trailIncome)" icon="save"> (Save and) Finish ▶</button>
        </div>
      </div>
    </form>
  </div>
</div>
