mirror-cathay/src/app/pages/contract/approved/do/contract-approved-do.component.html

<ul class="progressbar">
  <li [ngClass]="{ 'active' : isTabs === 1}" (click)="isTabs = 1">รายละเอียดหลัก</li>
  <li [ngClass]="{ 'active' : isTabs === 2}" (click)="isTabs = 2">การจัดผ่อน</li>
  <li [ngClass]="{ 'active' : isTabs === 3}" (click)="isTabs = 3">ข้อมูลรับชำระเงิน</li>
</ul>


<form class="main-form" #ngf="ngForm" (ngSubmit)="onSubmit(ngf)">

  <ng-container *ngIf="isTabs === 1">
    <div class="card card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title"> สัญญาเงินกู้ระหว่าง CM-FS. Co., Ltd. ("บริษัทฯ") กับ</div>
      </div>
      <div class="card-body">
        <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>เลขที่สัญญา/BOM</mat-label>
            <mat-form-field>
              <input matInput name="productNo" #productNo="ngModel" [(ngModel)]="dataForm.productNo" disabled  >
            </mat-form-field>
          </div>
<!--          <div class="col-span-4 md:col-span-12 ">-->
<!--            <mat-label>ชื่อลูกค้า</mat-label>-->
<!--            <mat-form-field>-->
<!--              <div class="flex">-->
<!--                <input style="width: 75px;  padding-right: 0 !important;" matInput name="customerPrefix" #customerPrefix="ngModel" [(ngModel)]="dataForm.customer.prefix" disabled>-->
<!--                <input style="padding-left: 0 !important;" matInput name="customerFirstName" #customerFirstName="ngModel" [(ngModel)]="dataForm.customer.firstName" disabled>-->
<!--              </div>-->
<!--            </mat-form-field>-->
<!--          </div>-->
<!--          <div class="col-span-4 md:col-span-12 ">-->
<!--            <mat-label>นามสกุล</mat-label>-->
<!--            <mat-form-field>-->
<!--              <input matInput name="customerLastName" #customerLastName="ngModel" [(ngModel)]="dataForm.customer.lastName" 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.customer.phone" disabled>-->
<!--            </mat-form-field>-->
<!--          </div>-->

<!--          <div class="col-span-4 md:col-span-12 ">-->
<!--            <mat-label>เลขบัตรประชาชน</mat-label>-->
<!--            <mat-form-field>-->
<!--              <input matInput name="customerIdCard" #customerIdCard="ngModel" [(ngModel)]="dataForm.customer.idCard" disabled>-->
<!--            </mat-form-field>-->
<!--          </div>-->

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>วันที่ทำสัญญา</mat-label>
            <mat-form-field>
              <input
                matInput
                name="contractDate"
                #contractDate="ngModel"
                (click)="dpkName.open()"
                [(ngModel)]="dataForm.contractDate"
                [matDatepicker]="dpkName"
                readonly
                disabled
              />
              <mat-datepicker-toggle [for]="dpkName" matSuffix></mat-datepicker-toggle>
              <mat-datepicker #dpkName></mat-datepicker>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:hidden"></div>

          <div class="col-span-2 md:col-span-12 ">
            <mat-label>คำนำหน้า</mat-label>
            <ng-select placeholder="เลือกคำนำหน้า" name="prefix" #prefix="ngModel" [(ngModel)]="dataForm.customer.prefix" appendTo="body" disabled>
              <ng-option *ngFor="let item of prefixData" [value]="item">{{item}}</ng-option>
            </ng-select>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ชื่อลูกค้า</mat-label>
            <mat-form-field>
              <input matInput name="firstName" #firstName="ngModel" [(ngModel)]="dataForm.customer.firstName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>นามสกุล</mat-label>
            <mat-form-field>
              <input matInput name="lastName" #lastName="ngModel" [(ngModel)]="dataForm.customer.lastName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-2 md:col-span-12 ">
            <mat-label>เพศ</mat-label>
            <ng-select placeholder="" name="gender" #gender="ngModel" [(ngModel)]="dataForm.customer.gender" appendTo="body" disabled>
              <ng-option *ngFor="let item of genderData" [value]="item">{{item}}</ng-option>
            </ng-select>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>เบอร์โทร</mat-label>
            <mat-form-field>
              <input matInput name="phone" #phone="ngModel" [(ngModel)]="dataForm.customer.phone" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>เลขบัตรประชาชน</mat-label>
            <mat-form-field>
              <input matInput name="idCard" #idCard="ngModel" [(ngModel)]="dataForm.customer.idCard" disabled>
            </mat-form-field>
          </div>


          <div class="col-span-12 md:col-span-12 ">
            <mat-label>ที่อยู่ตามบัตรประชาชน</mat-label>
            <mat-form-field>
              <input matInput name="address" #address="ngModel" [(ngModel)]="dataForm.customer.address" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-12 md:col-span-12 ">
            <mat-label>ที่อยู่ในการจัดส่ง</mat-label>
            <label class="inline-flex items-center cursor-pointer select-none ml-2">
              <input type="checkbox" name="isAddress" [(ngModel)]="dataForm.customer.isAddress" disabled>
              <span style="padding-left: 2px;">ใช้ที่อยู่ตามบัตรประชาชน</span>
            </label>

            <mat-form-field>
              <input matInput name="deliveryAddress" #deliveryAddress="ngModel" [(ngModel)]="dataForm.customer.deliveryAddress" [disabled]="dataForm.customer.isAddress" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>E-mail</mat-label>
            <mat-form-field>
              <input matInput name="email" #email="ngModel" [(ngModel)]="dataForm.customer.email" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-8 md:col-span-12 ">
            <mat-label>อาชีพ</mat-label>
            <mat-form-field>
              <input matInput name="occupation" #occupation="ngModel" [(ngModel)]="dataForm.customer.occupation" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ID Line</mat-label>
            <mat-form-field>
              <input matInput name="line" #line="ngModel" [(ngModel)]="dataForm.customer.line" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>Facebook</mat-label>
            <mat-form-field>
              <input matInput name="facebook" #facebook="ngModel" [(ngModel)]="dataForm.customer.facebook" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>IG</mat-label>
            <mat-form-field>
              <input matInput name="ig" #ig="ngModel" [(ngModel)]="dataForm.customer.ig" disabled>
            </mat-form-field>
          </div>


        </div>
      </div>
    </div>

    <div class="card card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title"> ข้อมูลร้านค้า</div>
      </div>
      <div class="card-body">
        <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">


          <div class="col-span-2 md:col-span-12 ">
            <mat-label>คำนำหน้า</mat-label>
            <ng-select placeholder="เลือกคำนำหน้า" name="sellerprefix" #sellerprefix="ngModel" [(ngModel)]="dataForm.seller.prefix" appendTo="body" disabled>
              <ng-option *ngFor="let item of prefixData" [value]="item">{{item}}</ng-option>
            </ng-select>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ชื่อลูกค้า</mat-label>
            <mat-form-field>
              <input matInput name="sellerfirstName" #sellerfirstName="ngModel" [(ngModel)]="dataForm.seller.firstName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>นามสกุล</mat-label>
            <mat-form-field>
              <input matInput name="sellerlastName" #sellerlastName="ngModel" [(ngModel)]="dataForm.seller.lastName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-2 md:col-span-12 ">
            <mat-label>เพศ</mat-label>
            <ng-select placeholder="" name="sellergender" #sellergender="ngModel" [(ngModel)]="dataForm.seller.gender" appendTo="body" disabled>
              <ng-option *ngFor="let item of genderData" [value]="item">{{item}}</ng-option>
            </ng-select>
          </div>

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

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>Facebook</mat-label>
            <mat-form-field>
              <input matInput name="sellerFacebook" #sellerFacebook="ngModel" [(ngModel)]="dataForm.seller.facebook" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ID Line</mat-label>
            <mat-form-field>
              <input matInput name="sellerLine" #sellerLine="ngModel" [(ngModel)]="dataForm.seller.line" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ID LINE ร้านค้า</mat-label>
            <mat-form-field>
              <input matInput name="sellerLineShop" #sellerLineShop="ngModel" [(ngModel)]="dataForm.seller.lineShop" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>IG</mat-label>
            <mat-form-field>
              <input matInput name="sellerIg" #sellerIg="ngModel" [(ngModel)]="dataForm.seller.ig" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>S/N สินค้า</mat-label>
            <mat-form-field>
              <input matInput name="sellerSnProduct" #sellerSnProduct="ngModel" [(ngModel)]="dataForm.seller.snProduct" disabled>
            </mat-form-field>
          </div>

          <div class="col-span-4 md:col-span-12 ">
            <mat-label>แหล่งที่มา</mat-label>
            <mat-form-field>
            <input matInput name="source" #source="ngModel" [(ngModel)]="dataForm.source" disabled>
            </mat-form-field>
          </div>
<!--          <div class="col-span-4 md:col-span-12 ">-->
<!--            <mat-label>ค่าขนส่ง</mat-label>-->
<!--            <mat-form-field>-->
<!--              <input matInput name="shippingCost" #shippingCost="ngModel" [(ngModel)]="dataForm.shippingCost" disabled>-->
<!--            </mat-form-field>-->
<!--          </div>-->


        </div>
      </div>
    </div>

    <div class="card card-table card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title"> ข้อมูลสินค้า</div>
      </div>
      <div class="card-body">
        <div class="grid grid-cols-12 gap-4 md:gap-2 mb-2">
          <div class="col-span-3 md:col-span-12 ">
            <mat-label>Condition</mat-label>
            <ng-select placeholder="Condition" name="condition" #condition="ngModel" [(ngModel)]="dataForm.productCondition" disabled>
              <ng-option *ngFor="let item of conditions" [value]="item">{{item}}</ng-option>
            </ng-select>
          </div>

          <div class="col-span-3 md:col-span-12 ">
            <mat-label>Year</mat-label>
            <mat-form-field>
              <input appNumberOnly matInput name="year" #year="ngModel" [(ngModel)]="dataForm.productYear" disabled>
            </mat-form-field>
          </div>
        </div>
        <div class="table-wrap">
          <table class="tables ">
            <thead>
            <tr>
              <th>BOM</th>
              <th>Model</th>
              <th>Brand</th>
              <th>Main</th>
              <th>น้ำหนัก</th>
              <th>Color</th>
              <th>Year</th>
              <th>ราคาสินค้า</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="text-center">{{dataForm.productNo}}</td>
              <td class="text-center">{{dataForm.productName }}</td>
              <td class="text-center">{{dataForm.productBrandName}}</td>
              <td class="text-center">{{dataForm.productSize }}</td>
              <td class="text-center">{{dataForm.productWeight }}</td>
              <td class="text-center">{{dataForm.productColor }}</td>
              <td class="text-center">{{dataForm.productYear }}</td>
              <td class="text-center"> <div class="b-color-orange">{{dataForm.price | number : '1.2-2'}}</div></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="card card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title flex items-center">
          <div class="">รูปสินค้าจากลูกค้า</div>
        </div>
      </div>
      <div class="card-body">
        <div class="list-images">
          <div class=" grid grid-cols-12 gap-2 md:gap-2 items-center">
            <ng-container *ngFor="let item of attachments; let i = index">
              <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 *ngIf="dataForm.coverImage !== item" class="bi bi-star color-main cursor-pointer select-none"></i>
                    <i *ngIf="dataForm.coverImage === item" class="bi bi bi-star-fill color-main cursor-pointer select-none"></i>
                  </div>
                  <img src="{{storage.products}}/{{item}}" alt="">
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
    </div>

    <div class="card card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title flex items-center">
          <div class="">อุปกรณ์</div>

        </div>
      </div>
      <div class="card-body">

        <ng-container *ngFor="let item of equipment; let i = index">
          <div class="form-list">
            <div class="form-list-item grid grid-cols-12 gap-4 md:gap-2 items-center">

              <div class="col-span-9 md:col-span-8 " >{{item}}</div>
            </div>
          </div>
        </ng-container>

        <ng-container *ngIf="equipment.includes('อื่นๆ')">
          <ng-container *ngFor="let item of equipmentOther; let i = index">
            <div class="form-list">
              <div class="form-list-item grid grid-cols-12 gap-4 md:gap-2 items-center">

                <div class="col-span-9 md:col-span-8 " >{{item}}</div>
              </div>
            </div>
          </ng-container>
        </ng-container>

        <div style="height: 20px;"></div>

      </div>
    </div>


  </ng-container>

  <ng-container *ngIf="isTabs === 2">

    <div class="grid grid-cols-12 gap-4 md:gap-2 ">
      <div class="col-span-6 md:col-span-12">
        <div class="card card-form-panel card-form-panel-blue mb-6">
          <div class="card-header ">
            <div class="card-title"> ข้อมูลการจัดผ่อน</div>
          </div>
          <div class="card-body form-input-list">
            <div style="height: 20px;"></div>

            <div class="grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> วันที่เริ่มจัดผ่อน</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input
                    matInput
                    name="startDate"
                    #startDate="ngModel"
                    (click)="dpkName.open()"
                    [(ngModel)]="dataForm.startDate"
                    [matDatepicker]="dpkName"
                    readonly
                    disabled
                  />
                  <mat-datepicker-toggle [for]="dpkName" matSuffix></mat-datepicker-toggle>
                  <mat-datepicker #dpkName></mat-datepicker>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit"></div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> ราคา (Price)</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="price" #price="ngModel" [(ngModel)]="dataForm.price" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> มัดจำแม่ค้า</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="sellerDeposit" #sellerDeposit="ngModel" [(ngModel)]="dataForm.sellerDeposit" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> มัดจำ CMFS</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="deposit" #deposit="ngModel" [(ngModel)]="dataForm.deposit" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> เงินต้นคงเหลือ (Total)</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="principalBalanceTotal" #principalBalanceTotal="ngModel" [(ngModel)]="dataForm.principalBalanceTotal" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> ต้องการผ่อน (Term)</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput type="number" name="wantToInstallmentTerm" #wantToInstallmentTerm="ngModel" [(ngModel)]="dataForm.wantToInstallmentTerm" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">งวด</div>
              </div>
            </div>
            <div style="height: 20px;"></div>

          </div>
        </div>
      </div>
      <div class="col-span-6 md:col-span-12">
        <div class="card card-form-panel card-form-panel-blue mb-6">
          <div class="card-header ">
            <div class="card-title"> รายละเอียดค่าใช้จ่ายในการโอนเงิน</div>
          </div>
          <div class="card-body form-input-list">
            <div style="height: 20px;"></div>
            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> มัดจำ CMFS Deposit</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="cmfsDeposit" #cmfsDeposit="ngModel" [(ngModel)]="dataForm.cmfsDeposit" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> หัก เงินมัดจำแม่ค้า </label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="lessSellerDeposit" #lessSellerDeposit="ngModel" [(ngModel)]="dataForm.lessSellerDeposit" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> บวก Packing </label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="plusPacking" #plusPacking="ngModel" [(ngModel)]="dataForm.plusPacking" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> บวก Luxury handbag </label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="plusLuxuryHandbag" #plusLuxuryHandbag="ngModel" [(ngModel)]="dataForm.plusLuxuryHandbag" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> บวก Bank fee, Insurance , Storage</label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="plusBankFee" #plusBankFee="ngModel" [(ngModel)]="dataForm.plusBankFee" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> ส่วนลด </label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="discount" #discount="ngModel" [(ngModel)]="dataForm.discount"  disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div class=" grid grid-cols-12 gap-4 md:gap-2 items-center">
              <div class="col-span-4 md:col-span-12 text-right md:text-left">
                <label> สรุปยอดโอน </label>
              </div>
              <div class="col-span-4 md:col-span-12">
                <mat-form-field>
                  <input matInput appCurrencyInputMask name="transferSummary" #transferSummary="ngModel" [(ngModel)]="dataForm.transferSummary" disabled>
                </mat-form-field>
              </div>
              <div class="col-span-4 md:col-span-12">
                <div class="unit">บาท (THB)</div>
              </div>
            </div>

            <div style="height: 10px;"></div>
          </div>
        </div>


      </div>

    </div>
    <div class="card card-table mb-6">
      <div class="card-body">
        <div class="table-wrap" *ngIf="dataForm.quotationDetail?.[0]">
          <table class="tables">
            <thead>
            <tr>
              <th>งวดที่</th>
              <th>กำหนดจ่ายวันที่ <br>Due date</th>
              <th>เงินต้น <br>Principle</th>
              <th>ดอกเบี้ย(บาท) <br>Interest Total</th>
              <th>Bank fee, <br>Insurance ,Storage</th>
              <th>รวมยอดจ่ายต่อเดือน <br>Total payment</th>
              <th>เงินต้นคงเหลือ <br>Principle Total</th>
            </tr>
            </thead>
            <tbody>
            <ng-container *ngFor="let item of dataForm.quotationDetail; let i = index">
              <tr>
                <td class="text-center">{{item.installment }}</td>
                <td class="text-center">{{item.dueDate | date : 'dd/MM/YYYY'}}</td>
                <td class="text-center">{{item.principle | number : '1.0-0'}}</td>
                <td class="text-center">{{item.interestTotal | number : '1.0-0'}}</td>
                <td class="text-center">{{item.fee | number : '1.0-0'}}</td>
                <td class="text-center"><span class="b-color-green">{{item.totalPayment | number : '1.0-0'}}</span></td>
                <td class="text-center"><span class="b-color-orange" *ngIf="item.principleTotal">{{item.principleTotal | number : '1.0-0'}}</span></td>
              </tr>
            </ng-container>
              <tr>
                <td colspan="2" class="text-right"><b>รวม</b></td>
                <td class="text-center">{{dataForm.principleSum | number : '1.0-0'}}</td>
                <td class="text-center">{{dataForm.interestTotalSum | number : '1.0-0'}}</td>
                <td class="text-center">{{dataForm.feeSum | number : '1.0-0'}}</td>
                <td class="text-center"><span class="b-color-green">{{dataForm.totalPaymentSum | number : '1.0-0'}}</span></td>
                <td class="text-center"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="isTabs === 3">

    <div class="card card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title"> ข้อมูลธนาคารที่รับชำระเงิน</div>
      </div>
      <div class="card-body">
        <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">
          <div class="col-span-8 md:col-span-12 ">
            <mat-label>ชื่อธนาคาร</mat-label>
            <mat-form-field>
              <input matInput name="productNo" #productNo="ngModel" [(ngModel)]="dataForm.contractBankName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:hidden"></div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>ชื่อบัญชี</mat-label>
            <mat-form-field>
              <input matInput name="contractAccountName" #contractAccountName="ngModel" [(ngModel)]="dataForm.contractAccountName" disabled>
            </mat-form-field>
          </div>
          <div class="col-span-4 md:col-span-12 ">
            <mat-label>เลขที่บัญชี</mat-label>
            <mat-form-field>
              <input matInput name="contractAccountNumber" #contractAccountNumber="ngModel" [(ngModel)]="dataForm.contractAccountNumber" disabled>
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>

    <div class="card card-form-panel card-form-panel-blue mb-6">
      <div class="card-header ">
        <div class="card-title"> รายละเอียดท้ายสัญญา</div>
      </div>
      <div class="card-body">
        <div class="grid grid-cols-12 gap-4 md:gap-2 mt-4 mb-4">
          <div class="col-span-12 md:col-span-12 ">
            <mat-form-field>
              <textarea matInput [(ngModel)]="dataForm.contractDetail" name="contractDetail" #contractDetail="ngModel" placeholder="" disabled></textarea>
            </mat-form-field>
          </div>

        </div>
      </div>
    </div>

  </ng-container>

  <div class="main-form-action text-right">
    <ng-container *ngIf="dataForm.statusContract === 'pending' ">
      <button type="button" class="btn btn-red" (click)="onSubmitCancel(ngf)">ไม่อนุมัติ</button>
      <button type="submit" class="btn btn-submit">อนุมัติ</button>
    </ng-container>

    <button type="button" class="btn btn-back" (click)="onAction('back')">ยกเลิก</button>
  </div>

</form>