<kendo-dialog title="Issue Checks / 開立支票" [width]="720" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="onClose()">
  <div class="p-2 flex flex-col gap-4" style="max-height: 70vh; overflow-y: auto;">

    <label class="flex flex-col gap-1 w-60">
      Check Date / 支票日期
      <kendo-datepicker [(ngModel)]="checkDate"></kendo-datepicker>
    </label>

    <div *ngFor="let f of forms; let i = index" class="border rounded p-3 flex flex-col gap-3"
         style="border-color:#e5e7eb;">
      <div class="font-semibold">
        Check #{{ i + 1 }} — {{ f.group.payeeType }} · Total {{ f.group.totalAmount | currency }}
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
        <label class="flex flex-col gap-1 md:col-span-2">
          Payee Name / 收款人
          <kendo-textbox [(ngModel)]="f.payeeName"></kendo-textbox>
        </label>
        <label class="flex flex-col gap-1 md:col-span-2">
          Address / 地址
          <kendo-textbox [(ngModel)]="f.address"></kendo-textbox>
        </label>
        <label class="flex flex-col gap-1">
          City / 城市
          <kendo-textbox [(ngModel)]="f.city"></kendo-textbox>
        </label>
        <div class="grid grid-cols-2 gap-2">
          <label class="flex flex-col gap-1">
            State / 州
            <kendo-textbox [(ngModel)]="f.state"></kendo-textbox>
          </label>
          <label class="flex flex-col gap-1">
            Zip / 郵遞區號
            <kendo-textbox [(ngModel)]="f.zip"></kendo-textbox>
          </label>
        </div>
        <label class="flex flex-col gap-1">
          Check # / 支票號碼
          <kendo-textbox [(ngModel)]="f.checkNumber"></kendo-textbox>
        </label>
        <label class="flex flex-col gap-1">
          Memo / 摘要
          <kendo-textbox [(ngModel)]="f.memo"></kendo-textbox>
        </label>
      </div>

      <table class="w-full text-sm">
        <thead>
          <tr class="text-left" style="border-bottom:1px solid #e5e7eb;">
            <th class="py-1">Date</th><th>Description</th><th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let l of f.group.lines" style="border-bottom:1px solid #f3f4f6;">
            <td class="py-1">{{ l.expenseDate }}</td>
            <td>{{ l.description }}</td>
            <td class="text-right">{{ l.amount | currency }}</td>
          </tr>
          <tr class="font-semibold">
            <td></td><td class="text-right pr-2">Total</td>
            <td class="text-right">{{ f.group.totalAmount | currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <kendo-dialog-actions>
    <button kendoButton (click)="onClose()">Cancel</button>
    <button kendoButton themeColor="primary" (click)="confirm()">
      Issue {{ forms.length }} Check(s)
    </button>
  </kendo-dialog-actions>
</kendo-dialog>
