mirror-cathay/src/app/pages/finance/payment/popup-installment/finance-payment-installment.component.html

<form class="dialog-main form-dialog " #ngf="ngForm" (ngSubmit)="onSubmit(ngf)" autocomplete="off">
  <div class="dialog-main">
    <div class="dialog-header">
      <h2>{{title}}</h2>
    </div>
    <div class="dialog-body">
      <div class="grid grid-cols-12 gap-4 md:gap-2 ">

        <div class="col-span-4 md:col-span-12">
          <mat-label>ชื่อลูกค้า</mat-label>
          <mat-form-field>
            <input matInput [(ngModel)]="dataForm.customerFirstName" name="customerFirstName" #customerFirstName="ngModel" disabled>
          </mat-form-field>
        </div>

        <div class="col-span-4 md:col-span-12">
          <mat-label>นามสกุล</mat-label>
          <mat-form-field>
            <input matInput [(ngModel)]="dataForm.customerLastName" name="customerLastName" #customerLastName="ngModel" disabled>
          </mat-form-field>
        </div>


        <div class="col-span-4 md:col-span-12 ">
          <mat-label>เบอร์โทร</mat-label>
          <mat-form-field>
            <input matInput name="customerPhone" #customerPhone="ngModel" [(ngModel)]="dataForm.customerPhone" disabled>
          </mat-form-field>
        </div>

        <div class="col-span-4 md:col-span-12 ">
          <mat-label>เลขที่ใบเสร็จ</mat-label>
          <mat-form-field>
            <input matInput name="quotationNo" #quotationNo="ngModel" [(ngModel)]="dataForm.quotationNo" disabled>
          </mat-form-field>
        </div>

        <div class="col-span-4 md:col-span-12 ">
          <mat-label>วันที่ชำระ</mat-label>

          <mat-form-field>
            <input
              matInput
              name="paymentDate"
              #paymentDate="ngModel"
              (click)="dpkName.open()"
              [(ngModel)]="dataForm.paymentDate"
              [matDatepicker]="dpkName"
              readonly
              required
            />
            <mat-datepicker-toggle [for]="dpkName" matSuffix></mat-datepicker-toggle>
            <mat-datepicker #dpkName></mat-datepicker>
          </mat-form-field>

        </div>

        <div class="col-span-12 md:col-span-12 ">
          <div class="table-wrap" >
            <table class="tables table-sty-2">
              <thead>
              <tr>

                <th>BOM</th>
                <th>Model</th>
                <th>Brand</th>
                <th>งวดที่</th>
                <th>กำหนดจ่ายวันที่ <br>Due date</th>
                <th>เงินต้น <br>Principle</th>
                <th>ดอกเบี้ย(บาท) <br>Interest Total</th>
                <th>Bank fee, <br>Insurance ,Storage</th>
                <th>ค่าชำระล่าช้า</th>
                <th>รวมยอดจ่ายต่อเดือน <br>Total payment</th>
              </tr>

              </thead>
              <tbody>

                <tr>
                  <td class="text-center">{{dataForm?.quotation?.productNo}}</td>
                  <td class="text-center">{{dataForm?.quotation?.productName }}</td>
                  <td class="text-center">{{dataForm?.quotation?.productBrandName}}</td>
                  <td class="text-center"> {{dataForm.installment }}/{{dataForm?.quotation?.wantToInstallmentTerm}} </td>
                  <td class="text-center">{{dataForm.dueDate | date : 'dd/MM/YYYY'}}</td>
                  <td class="text-center">{{dataForm.principle | number : '1.2-2'}}</td>
                  <td class="text-center">{{dataForm.interestTotal | number : '1.2-2'}}</td>
                  <td class="text-center">{{dataForm.fee | number : '1.2-2'}}</td>
                  <td class="text-center">
                    <div class="b-color-red" *ngIf="dataForm.interestLateTotal">
                    {{dataForm.interestLateTotal | number : '1.2-2'}}
                    </div>
                  </td>
                  <td class="text-center">
                      <div class="b-color-orange" *ngIf="dataForm.totalPaymentAll">  {{dataForm.totalPaymentAll | number  : '1.2-2'}}</div>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>





        <div class="col-span-3 md:col-span-12 ">
          <mat-label>วิธีชำระ</mat-label>
          <ng-select placeholder="เลือกวิธีชำระ" name="paymentMethod" #paymentMethod="ngModel" [(ngModel)]="dataForm.paymentMethod" required>
            <ng-option *ngFor="let item of paymentMethods" [value]="item.value">{{item.name}}</ng-option>
          </ng-select>
        </div>
        <div class="col-span-3 md:col-span-12 ">
          <mat-label>จำนวนเงินที่ต้องชำระทั้งสิ้น</mat-label>
          <mat-form-field>
            <input matInput appCurrencyInputMask name="paymentAmountAll" #paymentAmountAll="ngModel" [(ngModel)]="dataForm.paymentAmountAll" required>
          </mat-form-field>
        </div>

        <div class="col-span-12">
          <div class="mt-4">
            <input hidden type="file" accept="image/*" #uploadFile (change)="onAttachments($event)"/>
            <button type="button" class="btn btn-sm btn-success-o" (click)="uploadFile.click()">เพิ่มแนบไฟล์</button>
          </div>
          <div class="list-images" *ngIf="dataForm.paymentImages" style="min-height: auto !important;">
            <div class=" grid grid-cols-12 gap-2 md:gap-2 items-center">
              <div class="col-span-2 md:col-span-4">
                <div class="flex justify-center items-center list-images-item">
                  <div class="list-images-action">
                    <i (click)="onRemoveAttachments()" class="bi bi-x-circle color-red cursor-pointer select-none"></i>
                  </div>
                  <img (click)="onAttachmentsView()" src="{{storage.images}}/{{dataForm.paymentImages}}" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>



      </div>
    </div>
    <div class="dialog-footer">
      <button type="submit" class="btn btn-submit" >บันทึก</button>
      <button type="button" mat-dialog-close class="btn btn-dialog-close">ยกเลิก</button>
    </div>
  </div>
</form>