Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!-- src/index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<div class="place-contract pt-[12px]" [formGroup]="form">
<!-- <hr style="width: 100%; background-color: #CCCCCC; border: 1px solid #CCCCCC; margin-inline: unset; margin-block: unset; margin: 0; margin-bottom: 12px" /> -->
<div class="search-place-contract d-flex justify-content-between row !px-[10px] !mx-0">
<div class="flex items-center !p-0">
<div class="mt-0 !pr-[12px]">
<div>
<nz-select nzPlaceHolder="Chọn" formControlName="routeId" style="width: 200px; height:48px !important;">
<nz-option *ngFor="let data of listRoute" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="form.get('routeId')?.invalid && (form.get('routeId')?.dirty || form.get('routeId')?.touched)">
<div *ngIf="form.get('routeId')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="mt-0 !pl-0 !pr-[12px]">
<div style="font-weight: 500;">
<nz-select nzPlaceHolder="Chọn" formControlName="itineraryId" style="width:200px; height:48px !important;">
<nz-option *ngFor="let data of listItinerary" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="form.get('itineraryId')?.invalid && (form.get('itineraryId')?.dirty || form.get('itineraryId')?.touched)">
<div *ngIf="form.get('itineraryId')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="mt-0 !pl-0">
<div>
<nz-date-picker
nzFormat="dd/MM/yyyy"
formControlName="date"
class="w-full lunar-date-picker"
style="width: 200px;font-weight: 500; height:48px"
nzPlaceHolder="{{ 'customer.set-up-promotions-tab.select-date' | translate }}"
[nzDisabledDate]="disabledDate"
[nzDateRender]="dateRender"
></nz-date-picker>
<ng-template #dateRender let-current>
<div class="ant-picker-cell-inner"
[class.today-cell]="getDateCellRender(current).isToday"
[class.holiday-cell]="getDateCellRender(current).isHoliday"
[attr.title]="getDateCellRender(current).holidayName">
<div class="solar-date">{{ current.getDate() }}</div>
<div class="lunar-date">{{ getDateCellRender(current).lunarDay }}/{{ getDateCellRender(current).lunarMonth }}</div>
</div>
</ng-template>
</div>
</div>
</div>
<!-- <div class="col-4 row d-flex justify-content-end">
<div class="mt-3 col-6">
<nz-date-picker
nzFormat="dd/MM/yyyy"
formControlName="date"
class="w-full"
style="width: 100%"
nzPlaceHolder="{{ 'customer.set-up-promotions-tab.select-date' | translate }}"
></nz-date-picker>
</div>
</div> -->
</div>
<div class="time-line-bus !mt-[12px] !px-[10px]">
<div class="row-grid-bus">
<ng-container *ngFor="let trip of listBus; let idx = index" >
<div class="bus-item cursor-pointer" (click)="$event.stopPropagation();handleSelectCurrentBus(trip)" >
<div class=" d-flex justify-content-center align-items-center bus-item-above-half" [ngClass]="{
'bus-item-above-half-active': trip?.time === currentBus?.id
}">
<div class="time-bus">{{trip.time}}</div>
<div class="icon-ticket icon-show-list-car" *ngIf="trip.carList && trip.carList.length">
<i nz-icon nzType="caret-up" nzTheme="outline"
*ngIf=" trip.showListCar">
</i>
<i nz-icon nzType="caret-down" nzTheme="outline"
*ngIf="!trip.showListCar">
</i>
</div>
</div>
<div
*ngIf="!trip.isShowListCar"
style="height: 100%"
class="d-flex flex-column relative justify-content-center align-items-center bus-item-bottom-half">
<div
class="d-flex align-items-center justify-content-center "
*ngIf="trip.numberCar > 0"
style="cursor: pointer; height: 100%; width: 100%"
>
<div class="icon-warning w-[15px] absolute left-[2px] top-1/2 -translate-y-1/2" *ngIf="trip.isWarning">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.3335 17.5L10.5002 1.66666L19.6668 17.5H1.3335ZM10.5002 15C10.7363 15 10.9342 14.9201 11.0939 14.7604C11.2536 14.6007 11.3335 14.4028 11.3335 14.1667C11.3335 13.9305 11.2536 13.7326 11.0939 13.5729C10.9342 13.4132 10.7363 13.3333 10.5002 13.3333C10.2641 13.3333 10.0661 13.4132 9.90641 13.5729C9.74669 13.7326 9.66683 13.9305 9.66683 14.1667C9.66683 14.4028 9.74669 14.6007 9.90641 14.7604C10.0661 14.9201 10.2641 15 10.5002 15ZM9.66683 12.5H11.3335V8.33332H9.66683V12.5Z"
fill="#EF4444" />
</svg>
</div>
{{trip.numberCar + ' Chuyến'}}
<div class="icon-ticket absolute w-[15px] right-[8px] top-1/2 -translate-y-1/2" *ngIf="trip.isGolden">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.4 12.9167L10.5 11.3854L12.5625 12.9167L11.775 10.4375L13.875 8.83332H11.325L10.5 6.35416L9.675 8.83332H7.125L9.1875 10.4375L8.4 12.9167ZM4.5 15.8333C4.0875 15.8333 3.73438 15.6905 3.44063 15.4049C3.14687 15.1193 3 14.776 3 14.375V11.9141C3 11.7804 3.04375 11.6649 3.13125 11.5677C3.21875 11.4705 3.33125 11.4097 3.46875 11.3854C3.76875 11.2882 4.01562 11.112 4.20938 10.8568C4.40313 10.6016 4.5 10.316 4.5 9.99999C4.5 9.68402 4.40313 9.39843 4.20938 9.14322C4.01562 8.88801 3.76875 8.7118 3.46875 8.61457C3.33125 8.59027 3.21875 8.5295 3.13125 8.43228C3.04375 8.33506 3 8.21961 3 8.08593V5.62499C3 5.22395 3.14687 4.88063 3.44063 4.59504C3.73438 4.30945 4.0875 4.16666 4.5 4.16666H16.5C16.9125 4.16666 17.2656 4.30945 17.5594 4.59504C17.8531 4.88063 18 5.22395 18 5.62499V8.08593C18 8.21961 17.9563 8.33506 17.8688 8.43228C17.7813 8.5295 17.6688 8.59027 17.5313 8.61457C17.2313 8.7118 16.9844 8.88801 16.7906 9.14322C16.5969 9.39843 16.5 9.68402 16.5 9.99999C16.5 10.316 16.5969 10.6016 16.7906 10.8568C16.9844 11.112 17.2313 11.2882 17.5313 11.3854C17.6688 11.4097 17.7813 11.4705 17.8688 11.5677C17.9563 11.6649 18 11.7804 18 11.9141V14.375C18 14.776 17.8531 15.1193 17.5594 15.4049C17.2656 15.6905 16.9125 15.8333 16.5 15.8333H4.5Z"
fill="#F2BA42" />
</svg>
</div>
</div>
<div class="d-flex align-item-center justify-content-center" *ngIf="!trip.numberCar || trip.numberCar <= 0">
-
</div>
</div>
<div
appClickOutside (appClickOutside)="outsideClick(trip)"
*ngIf="trip.showListCar"
style="height: 100%"
class="d-flex flex-column align-items-center dropdown-car"
>
<div>
<ng-container *ngFor="let car of trip.carList; let idxCar = index">
<div class="car-info d-flex justify-around" [class]="idxCar == trip.carList.length ? 'last' : ''" (click)="setCurrentDriverBoard(trip, car); handleGetListSlotOfBus(trip, car);">
<div class="license-plate" [ngClass]="{'yellow': car.isGolden}"
[style]="!car.driverBoardId && !car.registerNo ? 'cursor: pointer; background-color: #FCFCFC; color: #252C32' : ''"
>{{car.lecensePlate}}</div>
<div class="slot-remaining">
<span class="icon-user">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6C5.45 6 4.97917 5.80417 4.5875 5.4125C4.19583 5.02083 4 4.55 4 4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2C6.55 2 7.02083 2.19583 7.4125 2.5875C7.80417 2.97917 8 3.45 8 4C8 4.55 7.80417 5.02083 7.4125 5.4125C7.02083 5.80417 6.55 6 6 6ZM2 10V8.6C2 8.31667 2.07292 8.05625 2.21875 7.81875C2.36458 7.58125 2.55833 7.4 2.8 7.275C3.31667 7.01667 3.84167 6.82292 4.375 6.69375C4.90833 6.56458 5.45 6.5 6 6.5C6.55 6.5 7.09167 6.56458 7.625 6.69375C8.15833 6.82292 8.68333 7.01667 9.2 7.275C9.44167 7.4 9.63542 7.58125 9.78125 7.81875C9.92708 8.05625 10 8.31667 10 8.6V10H2Z" fill="#274EA1"/>
</svg>
</span>
<span class="number-slot">
{{car.remainSlot}}/{{car.totalSlot}}
</span>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</ng-container>
</div>
<ng-container *ngIf="!listBus || !listBus.length">
<div>
<nz-empty nzNotFoundImage="simple"></nz-empty>
</div>
</ng-container>
</div>
<div class="wrap-tab !p-0 !px-[10px]">
<!-- <div class="tabs px-0">
<ng-container *ngFor="let tab of tabData">
<a
class="tab-link"
[class.active]="currentTab === tab.link"
(click)="changeTab(tab.link)"
>
{{ tab.label }}
</a>
</ng-container>
</div> -->
<div class="label-transfer-bus-1 !mt-[12px] mb-2" *ngIf="currentTab == 'transfer-bus' && (!dataPaste || !dataPaste?.id) && listDetailInfoBus.lstContract && listDetailInfoBus.lstContract.length">
Chọn chuyến cần chuyển
</div>
<div class="label-transfer-bus-1 !mt-[12px] mb-2" *ngIf="currentTab == 'transfer-bus' && (dataPaste && dataPaste?.id) && listDetailInfoBus.lstContract && listDetailInfoBus.lstContract.length">
Chọn chỗ để dán
</div>
<div class="wrap-body-contract !mt-[12px]" *ngIf="currentTab == 'contract' || currentTab == 'transfer-bus'">
<div class="list-place-contract"
[style]="!(listDetailInfoBus.tripInfoDTO && listDetailInfoBus.lstContract && listDetailInfoBus.lstContract.length) ? 'width: 100%' : ''"
*ngIf="listDetailInfoBus.lstContract && listDetailInfoBus.lstContract.length" tabindex="0">
<ng-container *ngFor="let contract of listDetailInfoBus.lstContract; let idx = index">
<div class="card-contract m" [class]="contract.id ? '' : 'is-empty'">
<div class="card-header justify-between" [ngClass]="{
'yellow' : contract.goldenId && contract['golden']
}">
<div class="flex items-center gap-x-[8px]">
<span class="number-header">{{ idx + 1 }}</span>
<a href="javascript:void(0)" class="text-[#FCFCFC] font-medium text-[14px] cursor-pointer hover:underline"
(click)="showContractDetail(contract?.id)">
{{contract?.id}}
</a>
</div>
<div class="flex items-center gap-x-[8px]">
<span class="text-[#FCFCFC] font-medium text-[14px]">{{contract.groupId}}</span>
<div class="cursor-pointer" (click)="showActionGoldenTicket(contract)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M4 18C3.71667 18 3.47917 17.9042 3.2875 17.7125C3.09583 17.5208 3 17.2833 3 17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16H20C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17C21 17.2833 20.9042 17.5208 20.7125 17.7125C20.5208 17.9042 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.2833 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47917 7.90417 3.2875 7.7125C3.09583 7.52083 3 7.28333 3 7C3 6.71667 3.09583 6.47917 3.2875 6.2875C3.47917 6.09583 3.71667 6 4 6H20C20.2833 6 20.5208 6.09583 20.7125 6.2875C20.9042 6.47917 21 6.71667 21 7C21 7.28333 20.9042 7.52083 20.7125 7.7125C20.5208 7.90417 20.2833 8 20 8H4Z"
fill="#FCFCFC" />
</svg>
</div>
</div>
</div>
<div class="card-body">
<div class="confirm-done" *ngIf="contract.status === 2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.83317 13.8333L14.7082 7.95834L13.5415 6.79167L8.83317 11.5L6.45817 9.12501L5.2915 10.2917L8.83317 13.8333ZM9.99984 18.3333C8.84706 18.3333 7.76373 18.1146 6.74984 17.6771C5.73595 17.2396 4.854 16.6458 4.104 15.8958C3.354 15.1458 2.76025 14.2639 2.32275 13.25C1.88525 12.2361 1.6665 11.1528 1.6665 10C1.6665 8.84723 1.88525 7.76389 2.32275 6.75001C2.76025 5.73612 3.354 4.85417 4.104 4.10417C4.854 3.35417 5.73595 2.76042 6.74984 2.32292C7.76373 1.88542 8.84706 1.66667 9.99984 1.66667C11.1526 1.66667 12.2359 1.88542 13.2498 2.32292C14.2637 2.76042 15.1457 3.35417 15.8957 4.10417C16.6457 4.85417 17.2394 5.73612 17.6769 6.75001C18.1144 7.76389 18.3332 8.84723 18.3332 10C18.3332 11.1528 18.1144 12.2361 17.6769 13.25C17.2394 14.2639 16.6457 15.1458 15.8957 15.8958C15.1457 16.6458 14.2637 17.2396 13.2498 17.6771C12.2359 18.1146 11.1526 18.3333 9.99984 18.3333Z" fill="#22C55E"/>
</svg>
</div>
<div class="text-info-card mb-1 w-full overflow-hidden">
<div class="label-text !w-[64px]">{{'customer.place-contract.kh-name' | translate}}:</div>
<div nz-tooltip nzTooltipTitle="{{contract.customerName}}" class="content-text w-full text-ellipsis overflow-hidden whitespace-nowrap">{{contract.customerName}}</div>
</div>
<div class="d-flex align-items-center mb-1">
<div class="text-info-card">
<div class="label-text !w-[64px]">{{'customer.place-contract.year-of_birth' | translate}}:</div>
<div class="content-text">{{contract.customerYOB}}</div>
</div>
<div class="text-info-card ms-3">
<div class="label-text">{{'customer.place-contract.sđt' | translate}}:</div>
<a class="content-text"
href="javascript:void(0)"
(click)="confirmCall(contract.phoneNumber)">
{{ contract.phoneNumber }}
</a>
</div>
</div>
<div class="text-info-card mb-1 w-full overflow-hidden">
<div class="label-text !w-[64px]">{{'customer.place-contract.pick-up-point' | translate}}:</div>
<div nz-tooltip nzTooltipTitle="{{contract.pickUpPoint}}" class="content-text w-full text-ellipsis overflow-hidden whitespace-nowrap italic">{{contract.pickUpPoint}}</div>
</div>
<div class="text-info-card mb-1 w-full overflow-hidden whitespace-nowrap">
<div class="label-text !w-[64px]">{{'customer.place-contract.drop-off-point' | translate}}:</div>
<div nz-tooltip nzTooltipTitle="{{contract.dropOffPoint}}" class="content-text w-full text-ellipsis overflow-hidden whitespace-nowrap italic">{{contract.dropOffPoint}}</div>
</div>
<div class="text-info-card mb-1 w-full">
<div class="label-text !w-[64px]">{{'customer.place-contract.driver-collects' | translate}}:</div>
<div *ngIf="contract.remainingAmount !== null && contract.remainingAmount !== undefined" class="content-text" style="color: #EF4444;" [ngClass]="{
'italic' : contract.remainingAmount === 0
}" >{{contract.remainingAmount !== 0 ? formatMoney(contract.remainingAmount || 0) : 'Đã thanh toán'}}</div>
</div>
<div class="text-info-card mb-1 w-full overflow-hidden">
<div nz-tooltip nzTooltipTitle="{{contract.note}}" class="note-text w-full text-ellipsis overflow-hidden whitespace-nowrap">{{contract.note ? contract.note : ' '}}</div>
</div>
<hr style="width: 100%; background-color: #DDDDDD; border: 1px solid #DDDDDD; margin-inline: unset; margin-block: unset; margin: 0" />
<div class="text-footer d-flex">
<div class="label-text text-[#6B7280] font-normal italic text-[13px]">{{'customer.place-contract.nv' | translate}}:</div>
<div class="content-text ms-2 italic text-[#6B7280] text-[13px]" style="font-weight: 400;">{{contract.createdBy || countdownMap().get(contract.sitNum)?.staffName}}</div>
</div>
</div>
<div class="action show" [ngClass]="{'!flex': contract.showActions }" >
<div (click)="showActionGoldenTicket(contract)"
class="absolute top-1 flex items-center justify-center bg-white rounded right-1 cursor-pointer w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M5.33317 15.8333L4.1665 14.6667L8.83317 9.99999L4.1665 5.33332L5.33317 4.16666L9.99984 8.83332L14.6665 4.16666L15.8332 5.33332L11.1665 9.99999L15.8332 14.6667L14.6665 15.8333L9.99984 11.1667L5.33317 15.8333Z"
fill="#252C32" />
</svg>
</div>
<div class="wrap-btns">
<!-- Xác nhận -->
<div class="customer-btn" (click)="confirmContract(contract)" *ngIf="contract.status !== 2 && checkHideActionTime()">
<span class="icon-action">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.73006 12L3 8.2079L3.93252 7.25988L6.73006 10.104L12.7342 4L13.6667 4.94802L6.73006 12Z" fill="#274EA1"/>
</svg>
</span>
<span class="text-action">{{'customer.place-contract.confirm' | translate}}</span>
</div>
<!-- Sửa -->
<div class="customer-btn" (click)="showModalUpdateContract(contract)" *ngIf="checkHideActionTime()" >
<span class="icon-action">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 14V11.1667L11.3 2.38333C11.4333 2.26111 11.5806 2.16667 11.7417 2.1C11.9028 2.03333 12.0722 2 12.25 2C12.4278 2 12.6 2.03333 12.7667 2.1C12.9333 2.16667 13.0778 2.26667 13.2 2.4L14.1167 3.33333C14.25 3.45556 14.3472 3.6 14.4083 3.76667C14.4694 3.93333 14.5 4.1 14.5 4.26667C14.5 4.44444 14.4694 4.61389 14.4083 4.775C14.3472 4.93611 14.25 5.08333 14.1167 5.21667L5.33333 14H2.5ZM12.2333 5.2L13.1667 4.26667L12.2333 3.33333L11.3 4.26667L12.2333 5.2Z" fill="#274EA1"/>
</svg>
</span>
<span class="text-action">{{'customer.place-contract.edit' | translate}}</span>
</div>
<!-- Hủy vé -->
<div class="customer-btn" (click)="showModalCancelContract(contract)" *ngIf="checkHideActionTime()">
<span class="icon-action">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.8335 14C4.46683 14 4.15294 13.8694 3.89183 13.6083C3.63072 13.3472 3.50016 13.0333 3.50016 12.6667V4H2.8335V2.66667H6.16683V2H10.1668V2.66667H13.5002V4H12.8335V12.6667C12.8335 13.0333 12.7029 13.3472 12.4418 13.6083C12.1807 13.8694 11.8668 14 11.5002 14H4.8335ZM6.16683 11.3333H7.50016V5.33333H6.16683V11.3333ZM8.8335 11.3333H10.1668V5.33333H8.8335V11.3333Z" fill="#EF4444"/>
</svg>
</span>
<span class="text-action" style="color: rgba(239, 68, 68, 1)">{{'customer.place-contract.cancel-ticket' | translate}}</span>
</div>
<!-- Xuất Hóa đơn -->
<div class="customer-btn">
<span class="icon-action">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.8335 14.6667C4.27794 14.6667 3.80572 14.4722 3.41683 14.0833C3.02794 13.6944 2.8335 13.2222 2.8335 12.6667V10.6667H4.8335V1.33333L5.8335 2.33333L6.8335 1.33333L7.8335 2.33333L8.8335 1.33333L9.8335 2.33333L10.8335 1.33333L11.8335 2.33333L12.8335 1.33333L13.8335 2.33333L14.8335 1.33333V12.6667C14.8335 13.2222 14.6391 13.6944 14.2502 14.0833C13.8613 14.4722 13.3891 14.6667 12.8335 14.6667H4.8335ZM12.8335 13.3333C13.0224 13.3333 13.1807 13.2694 13.3085 13.1417C13.4363 13.0139 13.5002 12.8556 13.5002 12.6667V3.33333H6.16683V10.6667H12.1668V12.6667C12.1668 12.8556 12.2307 13.0139 12.3585 13.1417C12.4863 13.2694 12.6446 13.3333 12.8335 13.3333ZM6.8335 6V4.66666H10.8335V6H6.8335ZM6.8335 8V6.66666H10.8335V8H6.8335ZM12.1668 6C11.9779 6 11.8196 5.93611 11.6918 5.80833C11.5641 5.68055 11.5002 5.52222 11.5002 5.33333C11.5002 5.14444 11.5641 4.98611 11.6918 4.85833C11.8196 4.73055 11.9779 4.66666 12.1668 4.66666C12.3557 4.66666 12.5141 4.73055 12.6418 4.85833C12.7696 4.98611 12.8335 5.14444 12.8335 5.33333C12.8335 5.52222 12.7696 5.68055 12.6418 5.80833C12.5141 5.93611 12.3557 6 12.1668 6ZM12.1668 8C11.9779 8 11.8196 7.93611 11.6918 7.80833C11.5641 7.68055 11.5002 7.52222 11.5002 7.33333C11.5002 7.14444 11.5641 6.98611 11.6918 6.85833C11.8196 6.73055 11.9779 6.66666 12.1668 6.66666C12.3557 6.66666 12.5141 6.73055 12.6418 6.85833C12.7696 6.98611 12.8335 7.14444 12.8335 7.33333C12.8335 7.52222 12.7696 7.68055 12.6418 7.80833C12.5141 7.93611 12.3557 8 12.1668 8Z" fill="#274EA1"/>
</svg>
</span>
<span class="text-action">{{'customer.place-contract.export-hd-pt' | translate}}</span>
</div>
<!-- Sao chép -->
<div class="customer-btn" (click)="copyInfoBus(contract, 'copy')">
<span class="icon-action">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66699 12C6.30033 12 5.98644 11.8694 5.72533 11.6083C5.46421 11.3472 5.33366 11.0333 5.33366 10.6667V2.66666C5.33366 2.29999 5.46421 1.98611 5.72533 1.72499C5.98644 1.46388 6.30033 1.33333 6.66699 1.33333H12.667C13.0337 1.33333 13.3475 1.46388 13.6087 1.72499C13.8698 1.98611 14.0003 2.29999 14.0003 2.66666V10.6667C14.0003 11.0333 13.8698 11.3472 13.6087 11.6083C13.3475 11.8694 13.0337 12 12.667 12H6.66699ZM4.00033 14.6667C3.63366 14.6667 3.31977 14.5361 3.05866 14.275C2.79755 14.0139 2.66699 13.7 2.66699 13.3333V3.99999H4.00033V13.3333H11.3337V14.6667H4.00033Z" fill="#274EA1"/>
</svg>
</span>
<span class="text-action">{{'customer.place-contract.copy' | translate}}</span>
</div>
<!-- Gửi TT -->
<div class="customer-btn" *ngIf="checkHideActionTime()" (click)="sendNotification(contract.id)">
<span class="icon-action">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.1665 12.6667V11.3333H4.49984V6.66666C4.49984 5.74444 4.77761 4.925 5.33317 4.20833C5.88873 3.49166 6.61095 3.02222 7.49984 2.79999V2.33333C7.49984 2.05555 7.59706 1.81944 7.7915 1.62499C7.98595 1.43055 8.22206 1.33333 8.49984 1.33333C8.77761 1.33333 9.01373 1.43055 9.20817 1.62499C9.40261 1.81944 9.49984 2.05555 9.49984 2.33333V2.79999C10.3887 3.02222 11.1109 3.49166 11.6665 4.20833C12.2221 4.925 12.4998 5.74444 12.4998 6.66666V11.3333H13.8332V12.6667H3.1665ZM8.49984 14.6667C8.13317 14.6667 7.81928 14.5361 7.55817 14.275C7.29706 14.0139 7.1665 13.7 7.1665 13.3333H9.83317C9.83317 13.7 9.70261 14.0139 9.4415 14.275C9.18039 14.5361 8.8665 14.6667 8.49984 14.6667Z"
fill="#274EA1" />
</svg>
</span>
<span class="text-action">{{'customer.place-contract.send-tt' | translate}}</span>
</div>
<!-- Chuyển -->
<div class="customer-btn" *ngIf="checkHideActionTime()" (click)="copyInfoBus(contract, 'move')">
<span class="icon-action">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M14 8L9.33333 3.33333V6C4.66667 6.66667 2.66667 10 2 13.3333C3.66667 11 6 9.93333 9.33333 9.93333V12.6667L14 8Z"
fill="#274EA1" />
</svg>
</span>
<span class="text-action">{{'customer.place-contract.share' | translate}}</span>
</div>
</div>
</div>
<div class="wrap-show-ticket hidden" [ngClass]="{'!flex' : contract.showActionGolden}">
<div (click)="showActionGoldenTicket(contract)" class="absolute top-1 flex items-center justify-center bg-white rounded right-1 cursor-pointer w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M5.33317 15.8333L4.1665 14.6667L8.83317 9.99999L4.1665 5.33332L5.33317 4.16666L9.99984 8.83332L14.6665 4.16666L15.8332 5.33332L11.1665 9.99999L15.8332 14.6667L14.6665 15.8333L9.99984 11.1667L5.33317 15.8333Z"
fill="#252C32" /> </svg>
</div>
<div (click)="updateGoldenTicket(contract)" *ngIf="checkHideActionTime()" class="w-28 h-7 cursor-pointer rounded bg-[#F7F7F7] flex items-center justify-center gap-x-[6px]">
<span class="icon-action">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
<path
d="M6.32 10.8333L8 9.60834L9.65 10.8333L9.02 8.85001L10.7 7.56668H8.66L8 5.58334L7.34 7.56668H5.3L6.95 8.85001L6.32 10.8333ZM3.2 13.1667C2.87 13.1667 2.5875 13.0524 2.3525 12.824C2.1175 12.5955 2 12.3208 2 12V10.0313C2 9.92432 2.035 9.83195 2.105 9.75418C2.175 9.6764 2.265 9.62779 2.375 9.60834C2.615 9.53057 2.8125 9.38959 2.9675 9.18543C3.1225 8.98126 3.2 8.75279 3.2 8.50001C3.2 8.24723 3.1225 8.01876 2.9675 7.81459C2.8125 7.61043 2.615 7.46945 2.375 7.39168C2.265 7.37223 2.175 7.32362 2.105 7.24584C2.035 7.16807 2 7.0757 2 6.96876V5.00001C2 4.67918 2.1175 4.40452 2.3525 4.17605C2.5875 3.94758 2.87 3.83334 3.2 3.83334H12.8C13.13 3.83334 13.4125 3.94758 13.6475 4.17605C13.8825 4.40452 14 4.67918 14 5.00001V6.96876C14 7.0757 13.965 7.16807 13.895 7.24584C13.825 7.32362 13.735 7.37223 13.625 7.39168C13.385 7.46945 13.1875 7.61043 13.0325 7.81459C12.8775 8.01876 12.8 8.24723 12.8 8.50001C12.8 8.75279 12.8775 8.98126 13.0325 9.18543C13.1875 9.38959 13.385 9.53057 13.625 9.60834C13.735 9.62779 13.825 9.6764 13.895 9.75418C13.965 9.83195 14 9.92432 14 10.0313V12C14 12.3208 13.8825 12.5955 13.6475 12.824C13.4125 13.0524 13.13 13.1667 12.8 13.1667H3.2Z"
fill="#F2BA42" /> </svg>
</span>
<span class="text-[#F2BA42] text-[13px] font-medium">{{ (contract.goldenId && contract.golden ? 'customer.place-contract.cancel-golden-ticket' : 'customer.place-contract.golden-ticket') | translate}}</span>
</div>
</div>
<div class="wrap-icon-plus" [class]="(dataPaste && dataPaste?.id) ? ' justify-evenly' : 'justify-center'" *ngIf="!contract.showActionGolden && currentTab == 'contract' && checkHideActionTime() && !checkHolding(contract.sitNum)">
<span class="i-plus" (click)="showModalPlaceContract(contract); dataPaste = null"><svg width="14" height="14" viewBox="0 0 14 14"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6 8H1C0.716667 8 0.479167 7.90417 0.2875 7.7125C0.0958333 7.52083 0 7.28333 0 7C0 6.71667 0.0958333 6.47917 0.2875 6.2875C0.479167 6.09583 0.716667 6 1 6H6V1C6 0.716667 6.09583 0.479167 6.2875 0.2875C6.47917 0.0958333 6.71667 0 7 0C7.28333 0 7.52083 0.0958333 7.7125 0.2875C7.90417 0.479167 8 0.716667 8 1V6H13C13.2833 6 13.5208 6.09583 13.7125 6.2875C13.9042 6.47917 14 6.71667 14 7C14 7.28333 13.9042 7.52083 13.7125 7.7125C13.5208 7.90417 13.2833 8 13 8H8V13C8 13.2833 7.90417 13.5208 7.7125 13.7125C7.52083 13.9042 7.28333 14 7 14C6.71667 14 6.47917 13.9042 6.2875 13.7125C6.09583 13.5208 6 13.2833 6 13V8Z"
fill="#274EA1" />
</svg>
</span>
<!-- <span *ngIf="(dataOldContract && dataOldContract?.id)" class="i-plus" (click)="showModalUpdateContract(dataOldContract)">+</span> -->
<div *ngIf="currentTab == 'contract' && (!contract.id || !contract) && (dataPaste && dataPaste?.id) && !contract.showActionGolden && (copyType === 'move' ? dataPaste.driverBoardId != currentDriverBoard.driverBoardId : true)"
style="padding: 8px 12px;
background: rgba(247, 247, 247, 1);
border-radius: 31px;
cursor: pointer"
class="d-flex align-items-center justify-content-center" (click)="pasteDataBus(contract.sitNum, contract.goldenId && contract.golden, contract)">
<svg style="margin-right: 8px;" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_937_14888)">
<path d="M5.5 21C4.95 21 4.47917 20.8042 4.0875 20.4125C3.69583 20.0208 3.5 19.55 3.5 19V9C3.5 8.45 3.69583 7.97917 4.0875 7.5875C4.47917 7.19583 4.95 7 5.5 7H9.5V9H5.5V19H19.5V9H15.5V7H19.5C20.05 7 20.5208 7.19583 20.9125 7.5875C21.3042 7.97917 21.5 8.45 21.5 9V19C21.5 19.55 21.3042 20.0208 20.9125 20.4125C20.5208 20.8042 20.05 21 19.5 21H5.5ZM12.5 16L8.5 12L9.9 10.6L11.5 12.175V0H13.5V12.175L15.1 10.6L16.5 12L12.5 16Z" fill="#274EA1"/>
</g>
<defs>
<clipPath id="clip0_937_14888">
<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Dán thông tin khách
</div>
</div>
<div class="wrap-icon-tick" *ngIf="currentTab == 'transfer-bus' && (contract.id && contract)">
<div (click)="copyInfoBus(contract, 'move')"
style="width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(247, 247, 247, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.59509 18L4 12.3119L5.39877 10.8898L9.59509 15.1559L18.6012 6L20 7.42204L9.59509 18Z" fill="#274EA1"/>
</svg>
</div>
</div>
<div class="wrap-show-ticket hidden" [ngClass]="{'!flex' : checkHolding(contract.sitNum)}">
<div class="text-sm text-gray-700 mr-2">
<div
style="width: 75px;
height: 40px;
border-radius: 39px;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
gap: 4px;
angle: 0 deg;
opacity: 1;
background: rgba(39, 78, 161, 1);
cursor: pointer"
class="d-flex align-items-center justify-content-center">
<span style="font-family: Roboto Condensed;
font-weight: 500;
font-style: Medium;
font-size: 15px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
color: rgba(247, 247, 247, 1)
">{{ countdownMap().get(contract.sitNum)?.display }}</span>
</div>
</div>
<div class="text-sm text-gray-700" *ngIf="countdownMap().get(contract.sitNum)?.isUser">
<div
style="width: 40px;
height: 40px;
border-radius: 31px;
gap: 4px;
angle: 0 deg;
opacity: 1;
padding: 8px;
background: rgba(247, 247, 247, 1);
cursor: pointer"
class="d-flex align-items-center justify-content-center"
(click)="handleRealeaseSession()">
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.9 14L0.5 12.6L6.1 7L0.5 1.4L1.9 0L7.5 5.6L13.1 0L14.5 1.4L8.9 7L14.5 12.6L13.1 14L7.5 8.4L1.9 14Z" fill="#EF4444"/>
</svg>
</div>
</div>
</div>
<!-- <div class="wrap-paste-info" *ngIf="currentTab == 'contract' && (!contract.id || !contract) && (dataPaste && dataPaste?.id) && !showGoldenTicket">
<div
style="padding: 8px 12px;
background: rgba(247, 247, 247, 1);
border-radius: 31px;
cursor: pointer"
class="d-flex align-items-center justify-content-center" (click)="pasteDataBus(idx + 1)">
<svg style="margin-right: 8px;" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_937_14888)">
<path d="M5.5 21C4.95 21 4.47917 20.8042 4.0875 20.4125C3.69583 20.0208 3.5 19.55 3.5 19V9C3.5 8.45 3.69583 7.97917 4.0875 7.5875C4.47917 7.19583 4.95 7 5.5 7H9.5V9H5.5V19H19.5V9H15.5V7H19.5C20.05 7 20.5208 7.19583 20.9125 7.5875C21.3042 7.97917 21.5 8.45 21.5 9V19C21.5 19.55 21.3042 20.0208 20.9125 20.4125C20.5208 20.8042 20.05 21 19.5 21H5.5ZM12.5 16L8.5 12L9.9 10.6L11.5 12.175V0H13.5V12.175L15.1 10.6L16.5 12L12.5 16Z" fill="#274EA1"/>
</g>
<defs>
<clipPath id="clip0_937_14888">
<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Dán thông tin khách
</div>
</div> -->
</div>
</ng-container>
</div>
<div [class]="(listDetailInfoBus.lstContract && listDetailInfoBus.lstContract.length) ? 'wrap-right' : ''" *ngIf="listDetailInfoBus.lstContract && listDetailInfoBus.lstContract.length">
<div class="current-contract-view">
<!-- toàn bộ nội dung info-driver / info-bus / bottom-haft -->
<div class="above-haft">
<div class="info-driver">
<div class="wrap-info">
<span class="label-info">{{'vehicle_active.table.plate' | translate}}:</span>
<span class="text-info text-info-value">
{{listDetailInfoBus.tripInfoDTO?.registerNo || '-'}}
</span>
</div>
<div class="wrap-info">
<span class="label-info">{{'customer.place-contract.driver-name' | translate}}:</span>
<span class="text-info text-info-value">
{{listDetailInfoBus.tripInfoDTO?.driverName || '-'}}
</span>
</div>
<div class="wrap-info">
<span class="label-info">{{ 'common.phone' | translate }}:</span>
<span
class="text-info text-info-value"
style="color: #274EA1; text-decoration: underline; cursor: pointer;"
(click)="$event.stopPropagation();
openZalo(
listDetailInfoBus.tripInfoDTO?.phoneNumber,
{
name: listDetailInfoBus.tripInfoDTO?.customerName,
phone: listDetailInfoBus.tripInfoDTO?.phoneNumber,
trip: listDetailInfoBus.tripInfoDTO?.tripName,
order: listDetailInfoBus.tripInfoDTO?.orderCode
}
)">
{{ listDetailInfoBus.tripInfoDTO?.phoneNumber || '-' }}
</span>
</div>
<div class="wrap-info">
<span class="label-info">{{'customer.place-contract.number-of-passengers' | translate}}:</span>
<span class="text-info text-info-number">
{{listDetailInfoBus.tripInfoDTO?.numberOfPassenger + '/' + listDetailInfoBus.tripInfoDTO?.total || '-'}}
</span>
</div>
<div class="wrap-info">
<span style="color: #6B7280;">{{'customer.place-contract.route-code' | translate}}:</span>
<span style="font-weight: 500; color: #EF4444; margin-left: 5px;">{{listDetailInfoBus.tripInfoDTO?.driverBoardId ||
'-'}}</span>
</div>
</div>
<hr style="width: 100%; background-color: #DDDDDD; border: 1px solid #DDDDDD;; margin-inline: unset; margin-block: unset; margin: 12px 0"/>
<div class="info-bus">
<div class="text-info-bus mb-2">
<span style="color: #6B7280;">{{'customer.place-contract.departure-point' | translate}}:</span>
<span style="font-weight: 500; color: #252C32; margin-left: 5px;">{{listDetailInfoBus.tripInfoDTO?.departurePoint || '-'}}</span>
</div>
<div class="text-info-bus mb-2">
<span style="color: #6B7280;">{{'customer.place-contract.departure-time' | translate}}:</span>
<span style="font-weight: 500; color: #252C32; margin-left: 5px;">{{listDetailInfoBus.tripInfoDTO?.startTime || '-'}}</span>
</div>
</div>
<hr style="width: 100%; background-color: #DDDDDD; border: 1px solid #DDDDDD;; margin-inline: unset; margin-block: unset; margin: 12px 0" />
<div class="info-bus">
<span class="text-info-bus">{{'customer.place-contract.end' | translate}}:</span>
<ul style="margin-block: unset;
padding-inline-start: 8px;">
@for(endpoint of listDetailInfoBus.lstDropOffPoints; track endpoint) {
<li class="text-[#252C32] w-full overflow-hidden d-flex relative">
<div class="dot"></div>
<span nz-tooltip nzTooltipTitle="{{endpoint}}" class="endpoint-text overflow-hidden text-ellipsis inline-block whitespace-nowrap">{{endpoint}}</span>
</li>
}
</ul>
</div>
<hr style="width: 100%; background-color: #DDDDDD; border: 1px solid #DDDDDD;; margin-inline: unset; margin-block: unset; margin: 12px 0" />
<div class="bottom-haft">
<div class="title-text-price-bus mb-2">
<span class="type-fee">{{'customer.place-contract.total-revenue' | translate}}: </span>
<span class="price">{{listDetailInfoBus.tripFinancialInfoDTO?.totalAmount | formatMoney}}</span>
</div>
<div class="title-text-price-bus mb-2">
<span class="type-fee">{{'customer.place-contract.paid' | translate}}: </span>
<span class="price">{{listDetailInfoBus.tripFinancialInfoDTO?.paidAmount | formatMoney}}</span>
</div>
<div class="title-text-price-bus mb-2">
<span class="type-fee">{{'customer.place-contract.driver-collected' | translate}}: </span>
<span class="price red">{{listDetailInfoBus.tripFinancialInfoDTO?.remainingAmount| formatMoney}}</span>
</div>
</div>
<div class="tacvu-toggle" (click)="toggleTacVu()">
<div class="tacvu-panel" *ngIf="isShowTacVu">
<div class="tacvu-list">
<a class="tacvu-item tacvu-item--hopdong" (click)="$event.stopPropagation(); onViewContract()">
<i nz-icon nzType="info-circle" class="tacvu-item__icon"></i>
<div class="tacvu-item__content">
<span class="tacvu-item__title">Xem hợp đồng vận chuyển</span>
</div>
</a>
<a class="tacvu-item tacvu-item--autocall" (click)="$event.stopPropagation(); onAutoCallArrivedPlate()">
<i nz-icon nzType="customer-service" class="tacvu-item__icon"></i>
<div class="tacvu-item__content">
<span class="tacvu-item__title">Auto call - báo biển xe tới KH</span>
</div>
</a>
<a class="tacvu-item tacvu-item--notify" (click)="$event.stopPropagation(); sendNotifyCustomer()">
<i nz-icon nzType="message" class="tacvu-item__icon"></i>
<div class="tacvu-item__content">
<span class="tacvu-item__title">Gửi thông báo tới KH</span>
<span class="tacvu-item__desc">Tuỳ chọn: Zalo, Email, hoặc cả hai</span>
</div>
</a>
<a class="tacvu-item tacvu-item--cancelled" (click)="$event.stopPropagation(); openCanceledCustomerList()">
<i nz-icon nzType="user" class="tacvu-item__icon"></i>
<div class="tacvu-item__content">
<span class="tacvu-item__title">Danh sách khách đã huỷ</span>
</div>
</a>
<a class="tacvu-item tacvu-item--transfer" (click)="$event.stopPropagation(); transferCustomer()">
<i nz-icon nzType="swap" class="tacvu-item__icon"></i>
<div class="tacvu-item__content">
<span class="tacvu-item__title">Chuyển khách</span>
</div>
</a>
<a class="tacvu-item tacvu-item--alert" (click)="$event.stopPropagation(); onCreateTripAlert()">
<i nz-icon nzType="warning" class="tacvu-item__icon"></i>
<div class="tacvu-item__content">
<span class="tacvu-item__title">Tạo cảnh báo chuyến đi</span>
</div>
</a>
</div>
</div>
<span class="text">Tác vụ</span>
<i nz-icon [nzType]="isShowTacVu ? 'caret-down' : 'caret-up'" nzTheme="outline"></i>
</div>
</div>
</div>
</div>
<ng-container *ngIf="currentTab == 'contract' && (!listDetailInfoBus.lstContract)">
<div>
<nz-empty nzNotFoundImage="simple"></nz-empty>
</div>
</ng-container>
</div>
</div>
<nz-modal
nzClassName="custom-modal-place-contract"
#formShowModalContract
[(nzVisible)]="isShowModalPlaceContract"
[nzWidth]="'932px'"
[nzClosable]="false"
nzMaskClosable="false"
nzCentered
[nzTitle]="translate.instant('customer.place-contract.place-contract')"
(nzOnCancel)="handleCancelPlaceContract()"
(nzOnOk)="handleSavePlaceContract()" >
<ng-container *nzModalContent>
<div [formGroup]="formPlaceContract" style="position: relative;" *ngIf="!isFinalStep">
<div class="icon-back-step" (click)="backStep()" *ngIf="getLstContracts.controls.length > 1 && step > 1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z" fill="#5F6368"/>
</svg>
</div>
<div class="row">
<div class="col-md-4 col-4">
<div>
<label class="label-form fs-13-bold">
{{ "customer.place-contract.number-of-passengers" | translate }}
</label>
<nz-select nzPlaceHolder="Chọn" formControlName="numberCustomer" style="width: 100%; height:48px">
<nz-option *ngFor="let data of listNumberCustomer" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="formPlaceContract.get('numberCustomer')?.invalid && (formPlaceContract.get('numberCustomer')?.dirty || formPlaceContract.get('numberCustomer')?.touched)">
<div *ngIf="formPlaceContract.get('numberCustomer')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-4">
<div>
<label class="label-form fs-13-bold">
{{ "customer.place-contract.customer-source" | translate }}
</label>
<nz-select
nzPlaceHolder="Chọn"
[formControl]="getLstContracts.at(step - 1)?.get('agency')"
style="width: 100%; height:48px;">
<nz-option *ngFor="let data of listSourceCustomer" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="getLstContracts.at(step - 1)?.get('agency')?.invalid && (getLstContracts.at(step - 1)?.get('agency')?.dirty || getLstContracts.at(step - 1)?.get('agency')?.touched)">
<div *ngIf="getLstContracts.at(step - 1)?.get('agency')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-4">
<div>
<label class="label-form fs-13-bold">
SĐT người đặt
</label>
<input
nz-input
class="input-form"
placeholder="{{ 'common.inputphonenumber' | translate }}"
[formControl]="getLstContracts.at(step - 1)?.get('phoneNumber')"
[appDynamicMaxLengthPhoneNumber]="true"
(blur)="getLstContracts.at(step - 1)?.get('phoneNumber')?.markAsTouched()"
/>
<div class="error-container"
*ngIf="getLstContracts.at(step - 1)?.get('phoneNumber')?.invalid && (getLstContracts.at(step - 1)?.get('phoneNumber')?.dirty || getLstContracts.at(step - 1)?.get('phoneNumber')?.touched)">
<div *ngIf="getLstContracts.at(step - 1)?.get('phoneNumber')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="getLstContracts.at(step - 1)?.get('phoneNumber')?.hasError('pattern')">
<span class="validate_input">{{ "pattern.phone_pattern" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div formArrayName="lstContracts">
<ng-container *ngFor="let a of getLstContracts.controls;let i = index">
<div [formGroupName]="i" *ngIf="(step-1) == i">
<div class="mt-3">
<div class="d-flex align-item-center justify-content-between">
<label class="label-form fs-13-bold" for="">
{{"customer.place-contract.customer-infomation" | translate}}
</label>
<button nz-button nzType="text" nzDanger style="color: #EF4444" *ngIf="getLstContracts.controls.length > 1" (click)="clearDataCustomerByIdx(i)">
{{"customer.place-contract.delete" | translate}}
</button>
</div>
<nz-card class="card-custom" style="border-radius: 6px;">
<div class="row">
<div class="col-9 col-md-9 col-sm-9">
<div class="row">
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.phone-number" | translate}}</label>
<!-- <input nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="phoneNumber"/> -->
<nz-mention [nzPrefix]="arrayLetterNumber" [nzSuggestions]="suggestionsPhoneNumber" (nzOnSelect)="onSelectSuggestPhoneNumber(i, $event)">
<input
nzMentionTrigger
formControlName="phoneNumber"
nz-input
class="input-form"
[appDynamicMaxLengthPhoneNumber]="true"
placeholder="{{'common.inputphonenumber' | translate}}"
(blur)="getLstContracts.at(i).get('phoneNumber')?.markAsTouched(); onChangeSuggestPhoneNumber(i)"
tasTrimSpace
/>
</nz-mention>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('phoneNumber')?.invalid && (getLstContracts.at(i).get('phoneNumber')?.dirty || getLstContracts.at(i).get('phoneNumber')?.touched)">
<div *ngIf="getLstContracts.at(i).get('phoneNumber')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="getLstContracts.at(i).get('phoneNumber')?.hasError('pattern')">
<span class="validate_input">{{ "pattern.phone_pattern" | translate}}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.customer-name" | translate}}</label>
<input tasTrimSpace nz-input class="input-form w-[200px]" placeholder="{{'common.inputcustomername' | translate}}" formControlName="customerName" [maxlength]="100"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('customerName')?.invalid && (getLstContracts.at(i).get('customerName')?.dirty || getLstContracts.at(i).get('customerName')?.touched)">
<div *ngIf="getLstContracts.at(i).get('customerName')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.year-of_birth" | translate}}</label>
<input tasTrimSpace nz-input class="input-form w-[200px]" maxlength="4" placeholder="{{'common.input' | translate}}" formControlName="customerYOB"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('customerYOB')?.invalid && (getLstContracts.at(i).get('customerYOB')?.dirty || getLstContracts.at(i).get('customerYOB')?.touched)">
<div *ngIf="getLstContracts.at(i).get('customerYOB')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="getLstContracts.at(i).get('customerYOB')?.hasError('pattern')">
<span class="validate_input">{{ translate.instant("required.only_number", {label: translate.instant('customer.place-contract.year-of_birth')}) }}</span>
</div>
<div *ngIf="getLstContracts.at(i).get('customerYOB')?.hasError('max')">
<span class="validate_input">{{ "required.current_birthday" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-wrapper-sm col-6 col-md-6 col-sm-6">
<div *ngIf="!isShowCbbPickUpPoint">
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.pick-up-point" | translate}}</label>
<input
tasTrimSpace
nz-input
maxlength="500"
class="input-form w-[200px]"
placeholder="{{ 'common.inputpickup' | translate }}"
formControlName="pickUpPoint"
[nzAutocomplete]="autoPickUp"
/>
<nz-autocomplete #autoPickUp>
<nz-auto-option
*ngFor="let item of dataInputPickUp"
[nzValue]="item.label">{{ item.label }}
</nz-auto-option>
</nz-autocomplete>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('pickUpPoint')?.invalid && (getLstContracts.at(i).get('pickUpPoint')?.dirty || getLstContracts.at(i).get('pickUpPoint')?.touched)">
<div *ngIf="getLstContracts.at(i).get('pickUpPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="getLstContracts.at(i).get('pickUpPoint')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.pick-up-point'), numberLength: 255}) }}</span>
</div>
</div>
</div>
<div class="input-wrapper-sm">
<vt-select *ngIf="isShowCbbPickUpPoint" [vtRequire]="true" [vtFormControl]="getLstContracts.at(i).get('pickUpPoint')"
[vtHeight]="'48px'"
[vtData]="dataDropDownDropOff" vtLabelText=" {{'customer.place-contract.pick-up-point' | translate}}"
[vtErrors]="getLstContracts.at(i).get('pickUpPoint')?.errors"
[vtShowError]="((getLstContracts.at(i).get('pickUpPoint')?.touched || false) || (getLstContracts.at(i).get('pickUpPoint')?.dirty ?? false)) && getLstContracts.at(i).get('pickUpPoint')?.errors != null"
[vtErrorDefs]="[
{ errorName: 'required', errorDesc: 'required.cannotBlank' | translate: {label: 'customer.place-contract.pick-up-point' | translate}}
]">
</vt-select>
</div>
</div>
<div class="input-wrapper-sm col-6 col-md-6 col-sm-6">
<div *ngIf="!isShowCbbDropOffPoint">
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.drop-off-point" | translate}}</label>
<input tasTrimSpace nz-input class="input-form !h-[44px]" placeholder="{{'common.input' | translate}}" formControlName="dropOffPoint" maxlength="500"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('dropOffPoint')?.invalid && (getLstContracts.at(i).get('dropOffPoint')?.dirty || getLstContracts.at(i).get('dropOffPoint')?.touched)">
<div *ngIf="getLstContracts.at(i).get('dropOffPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
<vt-select-flex
[vtHeight]="'48px'"
*ngIf="isShowCbbDropOffPoint"
[vtRequire]="true"
[vtFormControl]="getLstContracts.at(i).get('dropOffPoint')"
[vtData]="dataDropDownDropOff"
vtLabelText="{{'customer.place-contract.drop-off-point' | translate}}"
[vtErrors]="getLstContracts.at(i).get('dropOffPoint')?.errors"
[vtShowError]="((getLstContracts.at(i).get('dropOffPoint')?.touched ?? false) || (getLstContracts.at(i).get('dropOffPoint')?.dirty ?? false)) && getLstContracts.at(i).get('dropOffPoint')?.errors != null"
[vtErrorDefs]="[
{ errorName: 'required', errorDesc: 'required.cannotBlank' | translate: {label: 'customer.place-contract.drop-off-point' | translate}}
]">
</vt-select-flex>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-sm-3">
<div>
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.membership-information" | translate}}</label>
<nz-card class="card-info-member" style="border-radius: 6px;">
<div class="d-flex justify-content-start flex-column">
<div class="d-flex align-items-center justify-content-between">
<div class="label-text">{{"customer.place-contract.tank" | translate}}:</div>
<div class="content-text">
{{getLstContracts.at(i).get('levelName')?.value}}
</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="label-text">{{"customer.place-contract.balance" | translate}}:</div>
<div class="content-text">{{getLstContracts.at(i).get('awardPoints')?.value | formatMoney : '' }}</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="label-text">{{"customer.place-contract.reward-level" | translate}}:</div>
<div class="content-text">{{getLstContracts.at(i).get('bonusPointsPerTrip')?.value | formatMoney : ''}}</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="label-text">{{"customer.place-contract.number-of-rides" | translate}}:</div>
<div class="content-text">{{getLstContracts.at(i).get('numTrips')?.value}}</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="label-text">{{"customer.place-contract.number-of-rides-to-upgrade" | translate}}:</div>
<div class="content-text">{{getLstContracts.at(i).get('numTripsToNextLevel')?.value}}</div>
</div>
</div>
</nz-card>
</div>
</div>
</div>
<div class="row !mt-[12px]">
<div class="col-9 col-md-9 col-sm-9">
<div class="col-12 col-md-12 col-sm-12">
<!-- <span class="required-star" >*</span> -->
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.note" | translate}}</label>
<input [maxlength]="1000" tasTrimSpace nz-input class="input-form" placeholder="{{'common.inputnote' | translate}}" formControlName="note"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('note')?.invalid && (getLstContracts.at(i).get('note')?.dirty || getLstContracts.at(i).get('note')?.touched)">
<div *ngIf="getLstContracts.at(i).get('note')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="getLstContracts.at(i).get('note')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.note'), numberLength: 1000}) }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-3 col-md-3 col-sm-3">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.customer-source" | translate}}</label>
<nz-select nzPlaceHolder="Chọn" formControlName="agency" style="width: 200px; height:48px;">
<nz-option *ngFor="let data of listSourceCustomer" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="getLstContracts.at(i).get('agency')?.invalid && (getLstContracts.at(i).get('agency')?.dirty || getLstContracts.at(i).get('agency')?.touched)">
<div *ngIf="getLstContracts.at(i).get('agency')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
<div
class="mt-2 d-flex align-items-center gap-4"
*ngIf="!(dataOldContract && dataOldContract?.id)"
>
<div class="d-flex align-items-center">
<input
style="width: 16px; height: 16px"
type="checkbox"
id="isRoundTrip"
formControlName="isRoundTrip"
(click)="changeIsRoundTrip(i)"
/>
<label class="fs-13-bold ms-2" for="isRoundTrip" style="cursor: pointer;">
{{ "customer.place-contract.round-trip" | translate }}
</label>
</div>
<div class="d-flex align-items-center">
<input
style="width: 16px; height: 16px"
type="checkbox"
[id]="'isWithChild-' + i"
formControlName="isWithChild"
(change)="changeIsWithChild(i, $event)"
/>
<label class="fs-13-bold ms-2" [for]="'isWithChild-' + i" style="cursor: pointer;">
{{ "customer.place-contract.is-with-child" | translate }}
</label>
</div>
<div
class="row mt-2"
*ngIf="getLstContracts.at(i).get('isWithChild')?.value"
>
<div class="col-6">
<label class="label-form fs-13-bold">
Tên trẻ em
</label>
<input
nz-input
class="input-form"
placeholder="Họ và tên"
formControlName="childName"
maxlength="100"
/>
</div>
<div class="col-6">
<label class="label-form fs-13-bold">
Năm sinh
</label>
<input
nz-input
class="input-form"
placeholder="Nhập năm sinh"
maxlength="4"
formControlName="childYob"
/>
</div>
</div>
</div>
<div *ngIf="form.errors?.['childRequired']">
Vui lòng nhập thông tin trẻ em (năm sinh/Họ tên)
</div>
</nz-card>
</div>
<div *ngIf="getLstContracts.at(i).get('isRoundTrip')?.value" class="mt-3" formGroupName="roundTripReqDTO">
<label class="label-form fs-13-bold" for="">
{{"customer.place-contract.customer-infomation" | translate}}
</label>
<nz-card class="card-custom" style="border-radius: 6px;">
<div class="row">
<div class="col-9 col-md-9 col-sm-9">
<div class="row">
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.date" | translate}}</label>
<nz-date-picker
[nzDisabledDate]="disabledDateRoundTrip"
nzFormat="dd/MM/yyyy"
formControlName="tripDate"
class="w-full"
style="width: 100%; height:48px"
nzPlaceHolder="{{ 'customer.set-up-promotions-tab.select-date' | translate }}"
></nz-date-picker>
<div class="error-container" *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('tripDate')?.invalid
&& (getLstContracts.at(i).get('roundTripReqDTO')?.get('tripDate')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('tripDate')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('tripDate')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.hour" | translate}}</label>
<nz-select nzPlaceHolder="Chọn" formControlName="timeSlot" style="width: 100%; height:48px;">
<nz-option *ngFor="let data of listHourRoundTrip" [nzValue]="data.value" [nzLabel]="data.label" [nzDisabled]="disabledHourRoundTrip(data.value,getLstContracts.at(i).get('roundTripReqDTO')?.get('tripDate')?.value)"></nz-option>
</nz-select>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('timeSlot')?.invalid && (getLstContracts.at(i).get('roundTripReqDTO')?.get('timeSlot')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('timeSlot')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('timeSlot')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.route" | translate}}</label>
<nz-select nzPlaceHolder="Chọn" formControlName="itineraryId" style="width: 100%; height:48px"
>
<!-- [nzDisabled]="!(getLstContracts.at(i).get('roundTripReqDTO')?.get('tripDate')?.value && getLstContracts.at(i).get('roundTripReqDTO')?.get('timeSlot'))?.value" -->
<nz-option *ngFor="let data of listItineraryRoundTrip" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.invalid && (getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-3 col-md-3 col-sm-3">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"Chuyến" | translate}}</label>
<nz-select [nzCustomTemplate]="template" nzPlaceHolder="Chọn" [nzDropdownRender]="renderTemplate" [nzOptionHeightPx]="50" formControlName="driverBoardId" style="width: 100%; height: 48px;" [nzOptionOverflowSize]="5" [compareWith]="compareFn">
<nz-option nzCustomContent *ngFor="let data of (getLstContracts.at(i).get('roundTripReqDTO')?.get('listDriverBoardRoundTrip')?.value || [])" [nzValue]="data">
<div class="car-info d-flex justify-content-start">
<div class="license-plate" [ngClass]="{
'yellow': data.isGolden
}" style="cursor: pointer; background-color: #E3F6FD; color: #252C32">
{{data.lecensePlate}}
</div>
<div class="slot-remaining">
<span class="icon-user">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6C5.45 6 4.97917 5.80417 4.5875 5.4125C4.19583 5.02083 4 4.55 4 4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2C6.55 2 7.02083 2.19583 7.4125 2.5875C7.80417 2.97917 8 3.45 8 4C8 4.55 7.80417 5.02083 7.4125 5.4125C7.02083 5.80417 6.55 6 6 6ZM2 10V8.6C2 8.31667 2.07292 8.05625 2.21875 7.81875C2.36458 7.58125 2.55833 7.4 2.8 7.275C3.31667 7.01667 3.84167 6.82292 4.375 6.69375C4.90833 6.56458 5.45 6.5 6 6.5C6.55 6.5 7.09167 6.56458 7.625 6.69375C8.15833 6.82292 8.68333 7.01667 9.2 7.275C9.44167 7.4 9.63542 7.58125 9.78125 7.81875C9.92708 8.05625 10 8.31667 10 8.6V10H2Z" fill="#274EA1"/>
</svg>
</span>
<span class="number-slot">
{{data.cusNum}}/{{data.totalSit}}
</span>
</div>
</div>
</nz-option>
</nz-select>
<ng-template #template let-selected>
<div class="max-w-[110px] h-full flex items-center text-ellipsis gap-x-2 overflow-hidden text-sm leading-[22px]">
<div class="text-[16px] font-medium text-[#252C32]">{{selected.nzValue.lecensePlate}}</div>
<div class="slot-remaining flex items-center">
<span class="icon-user w-[16px] h-[16px]" nz-icon >
<svg class="!w-full !h-full object-contain" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6 6C5.45 6 4.97917 5.80417 4.5875 5.4125C4.19583 5.02083 4 4.55 4 4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2C6.55 2 7.02083 2.19583 7.4125 2.5875C7.80417 2.97917 8 3.45 8 4C8 4.55 7.80417 5.02083 7.4125 5.4125C7.02083 5.80417 6.55 6 6 6ZM2 10V8.6C2 8.31667 2.07292 8.05625 2.21875 7.81875C2.36458 7.58125 2.55833 7.4 2.8 7.275C3.31667 7.01667 3.84167 6.82292 4.375 6.69375C4.90833 6.56458 5.45 6.5 6 6.5C6.55 6.5 7.09167 6.56458 7.625 6.69375C8.15833 6.82292 8.68333 7.01667 9.2 7.275C9.44167 7.4 9.63542 7.58125 9.78125 7.81875C9.92708 8.05625 10 8.31667 10 8.6V10H2Z"
fill="#274EA1" />
</svg>
</span>
<span class="number-slot text-[14px] font-medium text-[#274EA1]">
{{selected.nzValue.cusNum}}/{{selected.nzValue.totalSit}}
</span>
</div>
</div>
</ng-template>
<ng-template #renderTemplate>
<div class="px-[12px] py-[7.5px] cursor-pointer hover:bg-[#f5f5f5]" (click)="createNewDriverBoard(getLstContracts.at(i)!.get('roundTripReqDTO')!.get('tripDate')!.value, getLstContracts.at(i)!.get('roundTripReqDTO')!.get('timeSlot')!.value, getLstContracts.at(i)!.get('roundTripReqDTO')!.get('itineraryId')!.value, i)">
<div class="flex items-center gap-x-2 text-[16px] font-medium text-[#274EA1]">
<span nz-icon>
<img src="../../assets/icon/add-blue.svg" alt="add button" />
</span>
Tạo lốt mới
</div>
</div>
</ng-template>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('driverBoardId')?.invalid && (getLstContracts.at(i).get('roundTripReqDTO')?.get('driverBoardId')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('driverBoardId')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('driverBoardId')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row !mt-[12px]">
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div *ngIf="!checkStartWithHN(getItineraryRoundTripNameById(getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.value))">
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.pick-up-point" | translate}}</label>
<input tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="pickUpPoint" maxlength="500"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.invalid && (getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
<vt-select
[vtHeight]="'48px'"
*ngIf="checkStartWithHN(getItineraryRoundTripNameById(getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.value))"
[vtRequire]="true"
[vtFormControl]="getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')"
[vtData]="getLstContracts.at(i).get('roundTripReqDTO')?.get('listDropOffOrPickUp')?.value || []"
vtLabelText="{{'customer.place-contract.pick-up-point' | translate}}"
[vtErrors]="getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.errors"
[vtShowError]="((getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.touched ?? false) || (getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.dirty ?? false)) && getLstContracts.at(i).get('roundTripReqDTO')?.get('pickUpPoint')?.errors != null"
[vtErrorDefs]="[
{ errorName: 'required', errorDesc: 'required.cannotBlank' | translate: {label: 'customer.place-contract.pick-up-point' | translate}}
]"
>
</vt-select>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div *ngIf="!checkStartNotWithHN(getItineraryRoundTripNameById(getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.value))">
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.drop-off-point" | translate}}</label>
<input [maxlength]="500" tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="dropOffPoint"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.invalid && (getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
<vt-select
[vtHeight]="'48px'"
*ngIf="checkStartNotWithHN(getItineraryRoundTripNameById(getLstContracts.at(i).get('roundTripReqDTO')?.get('itineraryId')?.value))"
[vtRequire]="true"
[vtFormControl]="getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')"
[vtData]="getLstContracts.at(i).get('roundTripReqDTO')?.get('listDropOffOrPickUp')?.value || []"
vtLabelText="{{'customer.place-contract.drop-off-point' | translate}}"
[vtErrors]="getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.errors"
[vtShowError]="((getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.touched ?? false) || (getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.dirty ?? false)) && getLstContracts.at(i).get('roundTripReqDTO')?.get('dropOffPoint')?.errors != null"
[vtErrorDefs]="[
{ errorName: 'required', errorDesc: 'required.cannotBlank' | translate: {label: 'customer.place-contract.drop-off-point' | translate}}
]"
>
</vt-select>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.note" | translate}}</label>
<input tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="note" [maxlength]="1000"/>
<div class="error-container"
*ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('note')?.invalid && (getLstContracts.at(i).get('roundTripReqDTO')?.get('note')?.dirty || getLstContracts.at(i).get('roundTripReqDTO')?.get('note')?.touched)">
<div *ngIf="getLstContracts.at(i).get('roundTripReqDTO')?.get('note')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
</nz-card>
</div>
<!-- <div class="d-flex align-item-center mt-4" *ngIf="!getLstContracts.controls.length || getLstContracts.controls.length == 1">
<label class="label-form fs-13-bold" for="">
{{"customer.place-contract.payment-detail" | translate}}
</label>
</div> -->
<!-- <div class="mt-1" *ngIf="!getLstContracts.controls.length || getLstContracts.controls.length == 1">
<nz-card class="card-custom" style="border-radius: 6px;">
<div class="flex justify-between">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="col-9 col-md-9 col-sm-9"
*ngIf="getLstContracts.controls.length == 1 || !formPlaceContract.get('numberCustomer')?.value">
<div>
<label class="label-form fs-13-bold d-block" for="">{{"customer.place-contract.payment-account" |
translate}}</label>
<input tasTrimSpace nz-input class="input-form !w-[200px]" placeholder="{{'common.input' | translate}}"
formControlName="amountPaid" (ngModelChange)="changeValueLstContracts()" />
<div class="error-container"
*ngIf="getLstContracts.at(i).get('amountPaid')?.invalid && (getLstContracts.at(i).get('amountPaid')?.dirty || getLstContracts.at(i).get('amountPaid')?.touched)">
<div *ngIf="getLstContracts.at(i).get('amountPaid')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="getLstContracts.at(i).get('amountPaid')?.hasError('pattern')">
<span class="validate_input">{{ translate.instant("required.only_number", {label:
translate.instant('customer.place-contract.payment-account')}) }}</span>
</div>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-sm-3 ms-4"
*ngIf="(getLstContracts.controls.length == 1 || !formPlaceContract.get('numberCustomer')?.value) && isUseBonus ">
<label class="fs-13-bold" nz-checkbox formControlName="useBonus">
{{"customer.place-contract.bonus-usage" | translate}}
</label>
</div>
</div>
<div class="mt-3" *ngIf="getLstContracts.controls.length == 1 || !formPlaceContract.get('numberCustomer')?.value">
<fieldset [disabled]="!(getLstContracts.at(i).get('amountPaid')?.value > 0)">
<div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center justify-content-between form-check">
<input tasTrimSpace name="payMethod" class="form-check-input" type="radio" id="payOnline" value="1"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payOnline">
{{'customer.place-contract.transfer' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between ms-3">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payOffline" value="2"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payOffline">
{{'customer.place-contract.cash-payment-at-office' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between ms-3">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payAgent" value="3"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payAgent">
{{'customer.place-contract.collection-agent' | translate}}
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="w-[406px]">
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fs-13-bold">
{{"customer.place-contract.ticket-price" | translate}}
</span>
<span class="fs-13-bold">
{{getLstContracts.at(i).get('ticketPrice')?.value | formatMoney : ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fs-13-bold">
{{"customer.place-contract.count" | translate}}
</span>
<span class="fs-13-bold">
{{formPlaceContract.get('numberCustomer')?.value || ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2"
*ngIf="getLstContracts.at(i).get('useBonus')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.used-bonus-money" | translate}}
</span>
<span class="fs-13-bold">
{{totalBonusMoney | formatMoney : ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2"
*ngIf="formPlaceContract.get('discountCode')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.discount-money" | translate}}
</span>
<span class="fs-13-bold">
{{discountMoney?.discountAmount | formatMoney : ''}}
</span>
</div>
<div>
<hr style="width: 100%" />
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="fs-13-bold">
{{"customer.place-contract.total-revenue-2" | translate}}
</span>
<span class="fs-13-bold" style="color: #EF4444">
{{formPlaceContract.get('remainingAmount')?.value | formatMoney : '0'}}
</span>
</div>
</div>
</div>
</nz-card>
</div> -->
<div class="steps" *ngIf="getLstContracts.controls.length > 1">
<ng-container *ngFor="let customer2 of getLstContracts.controls;let idx = index">
<div class="step step-1 cursor-pointer" (click)="onStep(idx + 1)" [class]="((step-1) == idx) ? 'active' : ''">
{{idx + 1}}
</div>
<div class="hr-tag" *ngIf="idx < getLstContracts.controls.length-1"></div>
</ng-container>
</div>
</div>
</ng-container>
</div>
<!-- Chi tiet thanh toan -->
<div class="d-flex align-item-center mt-4" >
<label class="label-form fs-13-bold" for="">
{{"customer.place-contract.payment-detail" | translate}}
</label>
</div>
<div class="mt-1" >
<nz-card class="card-custom" style="border-radius: 6px;">
<div class="flex justify-between">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="col-9 col-md-9 col-sm-9">
<div>
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.payment-account" | translate}}</label>
<input [appOnlyNumber]="true" [appFormatNumber]="true" [formatNumber]="true" tasTrimSpace nz-input class="input-form !w-[200px]" placeholder="{{'common.input' | translate}}"
formControlName="amountPaid" />
<div class="error-container"
*ngIf="formPlaceContract.get('amountPaid')?.invalid && (formPlaceContract.get('amountPaid')?.dirty || formPlaceContract.get('amountPaid')?.touched)">
<div *ngIf="formPlaceContract.get('amountPaid')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formPlaceContract.get('amountPaid')?.hasError('pattern')">
<span class="validate_input">{{ translate.instant("required.only_number", {label:
translate.instant('customer.place-contract.payment-account')}) }}</span>
</div>
</div>
</div>
</div>
<!-- <div class="col-3 col-md-3 col-sm-3 ms-4">
<label class="fs-13-bold" nz-checkbox formControlName="useBonus">
{{"customer.place-contract.bonus-usage" | translate}}
</label>
</div> -->
</div>
<div class="mt-2">
<fieldset [disabled]="!(formPlaceContract.get('amountPaid')?.value > 0)">
<div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center justify-content-between form-check">
<input tasTrimSpace name="payMethod" class="form-check-input" type="radio" id="payOnline" value="1"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payOnline">
{{'customer.place-contract.transfer' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between ms-3">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payOffline" value="2"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payOffline">
{{'customer.place-contract.cash-payment-at-office' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between ms-3">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payAgent" value="3"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payAgent">
{{'customer.place-contract.collection-agent' | translate}}
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="mt-2">
<div class="col-9 col-md-9 col-sm-9"
*ngIf="(getLstContracts.controls.length == 1 || !formPlaceContract.get('numberCustomer')?.value) && isUseBonus ">
<label class="fs-13-bold" nz-checkbox formControlName="useBonus">
{{"customer.place-contract.bonus-usage" | translate}}
</label>
</div>
</div>
</div>
<div class="w-[406px]">
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fs-13-bold">
{{"customer.place-contract.ticket-price" | translate}}
</span>
<span class="fs-13-bold">
{{formPlaceContract.get('ticketPrice')?.value | formatMoney : ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2" *ngIf="formPlaceContract.get('isGolden')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.golden-ticket-money" | translate}}
</span>
<span class="fs-13-bold">
{{getTotalGoldenDiscountAmount() | formatMoney : ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fs-13-bold">
{{"customer.place-contract.count" | translate}}
</span>
<span class="fs-13-bold">
{{formPlaceContract.get('numberCustomer')?.value + numberContract || ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2" *ngIf="formPlaceContract.get('useBonus')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.used-bonus-money" | translate}}
</span>
<span class="fs-13-bold">
{{(formPlaceContract.get('bonusAmount')?.value ? formPlaceContract.get('bonusAmount')?.value : '0') | formatMoney }}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2"
*ngIf="formPlaceContract.get('discountCode')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.discount-money" | translate}}
</span>
<span class="fs-13-bold">
{{getTotalDiscountAmount() | formatMoney }}
</span>
</div>
<div>
<hr style="width: 100%" />
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="fs-13-bold">
{{"customer.place-contract.total-revenue-2" | translate}}
</span>
<span class="fs-13-bold" style="color: #EF4444">
{{formPlaceContract.get('remainingAmount')?.value | formatMoney : '0'}}
</span>
</div>
</div>
</div>
</nz-card>
</div>
<!-- Chi tiet thanh toan -->
</div>
<div class="step-final d-flex align-items-center flex-column" *ngIf="isFinalStep">
<div class="icon-success">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="80" height="80" fill="url(#pattern0_859_18818)"/>
<defs>
<pattern id="pattern0_859_18818" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_859_18818" transform="scale(0.002)"/>
</pattern>
<image id="image0_859_18818" width="500" height="500" preserveAspectRatio="none" xlink:href="data:image/png;base64,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8YtPOPomzrNhDCIbD8ORUvIjgKDn5xNaFJAA4h4QZsFFIeIFO4+mOxNA0J1R8WDpBBD30j3o135E3I8XT5dPAEEv34dY4EmAzXSewAp5fG3NmLMHf8iYVoi/aGZ4AgR/eKaUWBiBzvPt9I7sPcnmtuxdRAMTEmDISgibqvIn0Llbnp6SjfOYSs/GFTQkMwIMU5k5hObkRaBz3Z2ek8RRdhp9dmPNnDv8KsSTEKeSkgnQSUr2Hm1PTgCBj4d8flObMYYMPB5jSpZNAEGX7V+sS0CANfgRkLlqdQQ8XoXAMgEEnYiAQAQCiPxOqGTeEQKNIiFQI4CgEw4QSEhAvNDPFkMKa94Jg4qqILBFAEEnFCCQEYEj60dn735ycbtF9hOxa2ZmtnRy0pZWXyNDsCd1A5VDoJMAgk5wQEAQgadOvTg7fen9pT8ImuaRPQtyOKZAgCl3YgACEIAABCAgiwAZuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCglgKArdTxmQwACEICALAIIuix/Yg0EIAABCCgl8P8BLzj9iruqVLEAAAAASUVORK5CYII="/>
</defs>
</svg>
</div>
<div class="text-success my-3">
{{ "customer.place-contract.place-contract-success" | translate }}
</div>
<!-- <div class="send-noti-to-customer">
<button class="btn-noti" type="submit" nz-button nzType="default">
<span nz-icon nzType="bell" nzTheme="outline" class="me-2" style="color: #274EA1"> </span>
<span style="color: #274EA1; font-weight: 500;">{{ "customer.place-contract.place-contract-success" | translate }}</span>
</button>
</div> -->
</div>
</ng-container>
<ng-template [nzModalFooter]>
<div class="d-flex align-items-center justify-content-center mb-3" *ngIf="!isFinalStep">
<button nz-button nzType="default" (click)="handleCancelPlaceContract()" class="button-modal btn-cancel btn-cancel-red">
{{ "customer.set-up-promotions-tab.cancel" | translate }}
</button>
<button nz-button nzType="primary" (click)="handleHidePlaceModal()" type="default" class="button-modal button-modal-ghost btn-save ms-3">
{{ "customer.place-contract.hide" | translate }}
</button>
<button nz-button nzType="primary"
*ngIf="!formPlaceContract.controls['numberCustomer'].value || (formPlaceContract.controls['numberCustomer'] && step == formPlaceContract.controls['numberCustomer'].value)"
type="default"
class="button-modal btn-save ms-3"
[class.button-save-disabled]="(disableSave || formPlaceContract.invalid)"
(click)="handlePlaceContract()"
[disabled]="disableSave || formPlaceContract.invalid">
{{ "customer.place-contract.complete" | translate }}
</button>
<button nz-button nzType="primary"
*ngIf="formPlaceContract.controls['numberCustomer']
&& formPlaceContract.controls['numberCustomer'].value > 1
&& (step < formPlaceContract.controls['numberCustomer'].value)"
type="default"
class="button-modal btn-save ms-3"
[class]="(disableSave || getLstContracts.at(step-1).invalid) ? 'btn-disabled' : ''"
(click)="nextStep()"
[disabled]="disableSave || getLstContracts.at(step-1).invalid">
{{ "customer.place-contract.continue" | translate }}
</button>
</div>
<div class="d-flex align-items-center justify-content-center mb-3" *ngIf="isFinalStep">
<button nz-button nzType="primary"
type="default"
class="button-modal btn-save ms-3"
(click)="handleCancelPlaceContract()">
{{ "customer.place-contract.ok" | translate }}
</button>
</div>
</ng-template>
</nz-modal>
<nz-modal
nzClassName="custom-modal-place-contract"
[(nzVisible)]="isShowModalUpdateContract"
[nzWidth]="'932px'"
[nzClosable]="false"
nzMaskClosable="false"
nzCentered
[nzTitle]="translate.instant('common.changeTitle')"
(nzOnCancel)="handleCancelUpdateContract()"
(nzOnOk)="handleSaveUpdateContract()">
<ng-container *nzModalContent>
<div [formGroup]="formUpdateContract">
<!-- <div class="row">
<div class="col-md-3 col-3">
<div>
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.promotion-code" | translate}}</label>
<nz-select nzPlaceHolder="Chọn" formControlName="discountCode" nzAllowClear style="width: 100%">
<nz-option *ngFor="let data of listPromotionCode" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container"
*ngIf="formPlaceContract.get('discountCode')?.invalid && (formPlaceContract.get('discountCode')?.dirty || formPlaceContract.get('discountCode')?.touched)">
<div *ngIf="formPlaceContract.get('discountCode')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formPlaceContract.get('discountCode')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.promotion-code'), numberLength: 255}) }}</span>
</div>
</div>
</div>
</div>
</div> -->
<div>
<div>
<div class="mt-3">
<div class="flex justify-center">
<label class="label-form fs-13-bold" for="">
{{"customer.place-contract.customer-infomation" | translate}}
</label>
</div>
<nz-card class="card-custom" style="border-radius: 6px;">
<div class="row">
<div class="col-9 col-md-9 col-sm-9">
<div class="row">
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.phone-number" | translate}}</label>
<nz-mention [nzPrefix]="arrayLetterNumber" [nzSuggestions]="suggestionsPhoneNumber" (nzOnSelect)="onSelectSuggestPhoneNumber(0, $event, 'update')">
<input
tasTrimSpace
nzMentionTrigger
formControlName="phoneNumber"
nz-input
[appDynamicMaxLengthPhoneNumber]="true"
class="input-form"
placeholder="{{'common.input' | translate}}"
(ngModelChange)="onChangeSuggestPhoneNumber(0, 'update')"
(blur)="formUpdateContract.get('phoneNumber')?.markAsTouched(); onChangeSuggestPhoneNumber(0, 'update')"
/>
</nz-mention>
<div class="error-container"
*ngIf="formUpdateContract.get('phoneNumber')?.invalid && (formUpdateContract.get('phoneNumber')?.dirty || formUpdateContract.get('phoneNumber')?.touched)">
<div *ngIf="formUpdateContract.get('phoneNumber')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('phoneNumber')?.hasError('pattern')">
<span class="validate_input">{{ translate.instant("required.only_number", {label: translate.instant('customer.place-contract.phone-number')}) }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.customer-name" | translate}}</label>
<input tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="customerName"/>
<div class="error-container"
*ngIf="formUpdateContract.get('customerName')?.invalid && (formUpdateContract.get('customerName')?.dirty || formUpdateContract.get('customerName')?.touched)">
<div *ngIf="formUpdateContract.get('customerName')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('customerName')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.customer-name'), numberLength: 255}) }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-4 col-md-4 col-sm-4">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.year-of_birth" | translate}}</label>
<input tasTrimSpace nz-input class="input-form" maxlength="4" placeholder="{{'common.input' | translate}}" formControlName="customerYOB"/>
<div class="error-container"
*ngIf="formUpdateContract.get('customerYOB')?.invalid && (formUpdateContract.get('customerYOB')?.dirty || formUpdateContract.get('customerYOB')?.touched)">
<div *ngIf="formUpdateContract.get('customerYOB')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('customerYOB')?.hasError('pattern')">
<span class="validate_input">{{ translate.instant("required.only_number", {label: translate.instant('customer.place-contract.year-of_birth')}) }}</span>
</div>
<div *ngIf="formUpdateContract.get('customerYOB')?.hasError('max')">
<span class="validate_input">{{ "required.current_birthday" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-[12px]">
<div class="input-wrapper-sm col-6 col-md-6 col-sm-6">
<div *ngIf="!isShowCbbPickUpPoint">
<span class="required-star">*</span><label class="label-form fs-13-bold"
for="">{{"customer.place-contract.pick-up-point" | translate}}</label>
<input maxlength="500" tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}"
formControlName="pickUpPoint" />
<div class="error-container"
*ngIf="formUpdateContract.get('pickUpPoint')?.invalid && (formUpdateContract.get('pickUpPoint')?.dirty || formUpdateContract.get('pickUpPoint')?.touched)">
<div *ngIf="formUpdateContract.get('pickUpPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('pickUpPoint')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label:
translate.instant('customer.place-contract.pick-up-point'), numberLength: 255}) }}</span>
</div>
</div>
</div>
<vt-select *ngIf="isShowCbbPickUpPoint" [vtRequire]="true"
[vtHeight]="'48px'"
[vtFormControl]="formUpdateContract.get('pickUpPoint')" [vtData]="dataInputPickUp"
vtLabelText="{{'customer.place-contract.pick-up-point' | translate}}"
[vtErrors]="formUpdateContract.get('pickUpPoint')?.errors"
[vtShowError]="((formUpdateContract.get('pickUpPoint')?.touched || false) || (formUpdateContract.get('pickUpPoint')?.dirty ?? false)) && formUpdateContract.get('pickUpPoint')?.errors != null"
[vtErrorDefs]="[{ errorName: 'required', errorDesc: 'required.cannotBlank' | translate: {label: 'customer.place-contract.pick-up-point' | translate}}]">
</vt-select>
</div>
<div class="input-wrapper-sm col-6 col-md-6 col-sm-6">
<div *ngIf="!isShowCbbDropOffPoint">
<span class="required-star">*</span><label class="label-form fs-13-bold"
for="">{{"customer.place-contract.drop-off-point" | translate}}</label>
<input maxlength="500" tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}"
formControlName="dropOffPoint" />
<div class="error-container"
*ngIf="formUpdateContract.get('dropOffPoint')?.invalid && (formUpdateContract.get('dropOffPoint')?.dirty || formUpdateContract.get('dropOffPoint')?.touched)">
<div *ngIf="formUpdateContract.get('dropOffPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('dropOffPoint')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label:
translate.instant('customer.place-contract.drop-off-point'), numberLength: 255}) }}</span>
</div>
</div>
</div>
<vt-select *ngIf="isShowCbbDropOffPoint" [vtRequire]="true"
[vtHeight]="'48px'"
[vtFormControl]="formUpdateContract.get('dropOffPoint')" [vtData]="dataDropDownDropOff"
vtLabelText="{{'customer.place-contract.drop-off-point' | translate}}"
[vtErrors]="formUpdateContract.get('dropOffPoint')?.errors"
[vtShowError]="((formUpdateContract.get('dropOffPoint')?.touched ?? false) || (formUpdateContract.get('dropOffPoint')?.dirty ?? false)) && formUpdateContract.get('dropOffPoint')?.errors != null"
[vtErrorDefs]="[{ errorName: 'required', errorDesc: 'required.cannotBlank' | translate: {label: 'customer.place-contract.drop-off-point' | translate}} ]">
</vt-select>
</div>
</div>
</div>
<div class="input-wrapper-sm col-3 col-md-3 col-sm-3">
<div>
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.membership-information" | translate}}</label>
<nz-card class="card-info-member" style="border-radius: 6px;">
<div class="d-flex justify-content-start flex-column">
<div class="d-flex align-items-center">
<div class="label-text">{{"customer.place-contract.tank" | translate}}:</div>
<div class="content-text">{{formUpdateContract.controls['levelName'].value || ''}}</div>
</div>
<div class="d-flex align-items-center">
<div class="label-text">{{"customer.place-contract.balance" | translate}}:</div>
<div class="content-text">{{formUpdateContract.controls['awardPoints'].value | formatMoney : ''}}</div>
</div>
<div class="d-flex align-items-center">
<div class="label-text">{{"customer.place-contract.reward-level" | translate}}:</div>
<div class="content-text">{{formUpdateContract.controls['bonusPointsPerTrip'].value | formatMoney : ''}}</div>
</div>
<div class="d-flex align-items-center">
<div class="label-text">{{"customer.place-contract.number-of-rides" | translate}}:</div>
<div class="content-text">{{formUpdateContract.controls['numTrips'].value || 0}}</div>
</div>
<div class="d-flex align-items-center">
<div class="label-text">{{"customer.place-contract.number-of-rides-to-upgrade" | translate}}:</div>
<div class="content-text">{{formUpdateContract.controls['numTripsToNextLevel'].value || 0}}</div>
</div>
</div>
</nz-card>
</div>
</div>
</div>
<!-- <div class="row mt-3">
<div class="col-9 col-md-9 col-sm-9">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.drop-off-point" | translate}}</label>
<input nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="dropOffPoint"/>
<div class="error-container"
*ngIf="formUpdateContract.get('dropOffPoint')?.invalid && (formUpdateContract.get('dropOffPoint')?.dirty || formUpdateContract.get('dropOffPoint')?.touched)">
<div *ngIf="formUpdateContract.get('dropOffPoint')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('dropOffPoint')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.drop-off-point'), numberLength: 255}) }}</span>
</div>
</div>
</div>
</div>
<div class="col-3 col-md-3 col-sm-3">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.customer-source" | translate}}</label>
<nz-select nzPlaceHolder="Chọn" formControlName="agency" style="width: 100%">
<nz-option *ngFor="let data of listSourceCustomer" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="formUpdateContract.get('agency')?.invalid && (formUpdateContract.get('agency')?.dirty || formUpdateContract.get('agency')?.touched)">
<div *ngIf="formUpdateContract.get('agency')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
</div> -->
<div class="row !mt-[12px]">
<div class="col-9 col-md-9 col-sm-9">
<div class="input-wrapper-sm col-12 col-md-12 col-sm-12">
<!-- <span class="required-star" >*</span> -->
<label class="label-form fs-13-bold" for="">{{"customer.place-contract.note" | translate}}</label>
<input tasTrimSpace nz-input class="input-form" placeholder="{{'common.input' | translate}}" formControlName="note"/>
<div class="error-container"
*ngIf="formUpdateContract.get('note')?.invalid && (formUpdateContract.get('note')?.dirty || formUpdateContract.get('note')?.touched)">
<div *ngIf="formUpdateContract.get('note')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formUpdateContract.get('note')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.note'), numberLength: 255}) }}</span>
</div>
</div>
</div>
</div>
<div class="input-wrapper-sm col-3 col-md-3 col-sm-3">
<div>
<span class="required-star" >*</span><label class="label-form fs-13-bold" for="">{{"customer.place-contract.customer-source" | translate}}</label>
<nz-select nzPlaceHolder="Chọn" formControlName="agency" style="width: 100%; height:48px">
<nz-option *ngFor="let data of listSourceCustomer" [nzValue]="data.value" [nzLabel]="data.label"></nz-option>
</nz-select>
<div class="error-container" *ngIf="formUpdateContract.get('agency')?.invalid && (formUpdateContract.get('agency')?.dirty || formUpdateContract.get('agency')?.touched)">
<div *ngIf="formUpdateContract.get('agency')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
</div>
</nz-card>
</div>
<div class="mt-2 d-flex align-items-center">
<input
style="width: 16px; height: 16px"
type="checkbox"
id="isWithChild-update"
formControlName="isWithChild"
/>
<label class="fs-13-bold ms-2" for="isWithChild-update" style="cursor: pointer;">
{{ "customer.place-contract.is-with-child" | translate }}
</label>
</div>
<div class="row mt-2" *ngIf="formUpdateContract.get('isWithChild')?.value">
<div class="col-6">
<label class="label-form fs-13-bold">Tên trẻ em</label>
<input
nz-input
class="input-form"
placeholder="Họ và tên"
formControlName="childName"
maxlength="100"
/>
</div>
<div class="col-6">
<label class="label-form fs-13-bold">Năm sinh</label>
<input
nz-input
class="input-form"
placeholder="Nhập năm sinh"
maxlength="4"
formControlName="childYob"
/>
</div>
<div class="col-12 mt-1" *ngIf="formUpdateContract.hasError('childRequired')">
Vui lòng nhập thông tin trẻ em (năm sinh/Họ tên)
</div>
</div>
<!-- Chi tiet thanh toan -->
<div class="d-flex align-item-center mt-4" >
<label class="label-form fs-13-bold" for="">
{{"customer.place-contract.payment-detail" | translate}}
</label>
</div>
<div class="mt-1" >
<nz-card class="card-custom" style="border-radius: 6px;">
<div class="d-flex justify-between">
<div class="d-flex flex-col">
<div class="d-flex justify-content-between flex-col">
<div class="col-9 col-md-9 col-sm-9">
<div>
<label class="label-form fs-13-bold d-inline-block" for="">{{"customer.place-contract.payment-account" |
translate}}</label>
<input [appOnlyNumber]="true" [appFormatNumber]="true" [formatNumber]="true" tasTrimSpace nz-input class="input-form !w-[200px]" placeholder="{{'common.input' | translate}}"
formControlName="amountPaid" />
<div class="error-container"
*ngIf="formUpdateContract.get('amountPaid')?.invalid && (formUpdateContract.get('amountPaid')?.dirty || formUpdateContract.get('amountPaid')?.touched)">
<div *ngIf="formUpdateContract.get('amountPaid')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
</div>
</div>
</div>
<div class="mt-2">
<fieldset [disabled]="!(formUpdateContract.get('amountPaid')?.value > 0)">
<div>
<div class="d-flex align-items-center">
<div class=" d-flex align-items-center justify-content-between form-check">
<input tasTrimSpace name="payMethod" class="form-check-input" type="radio" id="payOnline" value="1"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payOnline">
{{'customer.place-contract.transfer' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between ms-3">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payOffline" value="2"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payOffline">
{{'customer.place-contract.cash-payment-at-office' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between ms-3">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payAgent" value="3"
formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-13-bold" for="payAgent">
{{'customer.place-contract.collection-agent' | translate}}
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<!-- <div class="mt-[18px]">
<label class="fs-13-bold" nz-checkbox formControlName="useBonus">
{{"customer.place-contract.bonus-usage" | translate}}
</label>
</div> -->
</div>
<div class="w-[406px]">
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fs-13-bold">
{{"customer.place-contract.ticket-price" | translate}}
</span>
<span class="fs-13-bold">
{{formUpdateContract.get('ticketPrice')?.value | formatMoney : ''}}
<!-- {{discountMoney?.discountPrice}} {{discountMoney?.discountPrice ? 'đ' : ''}} -->
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2" *ngIf="formUpdateContract.get('goldenTicketAmount')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.golden-ticket-money" | translate}}
</span>
<span class="fs-13-bold">
{{formUpdateContract.get('goldenTicketAmount')?.value | formatMoney : ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fs-13-bold">
{{"customer.place-contract.count" | translate}}
</span>
<span class="fs-13-bold">
{{formUpdateContract.get('numberCustomer')?.value || ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2" *ngIf="formUpdateContract.get('useBonus')?.value">
<span class="fs-13-bold">
{{"customer.place-contract.used-bonus-money" | translate}}
</span>
<span class="fs-13-bold">
{{formUpdateContract.get('bonusAmount')?.value | formatMoney : ''}}
</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-2"
*ngIf="formUpdateContract.get('discountCode')?.value">
<span class="fs-13-bold">
{{formUpdateContract.get('discountName')?.value || ''}}
</span>
<span class="fs-13-bold">
{{formUpdateContract.get('discountAmount')?.value | formatMoney : '' }}
</span>
</div>
<div>
<hr style="width: 100%" />
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="fs-13-bold">
{{"customer.place-contract.total-revenue-2" | translate}}
</span>
<span class="fs-13-bold" style="color: #EF4444">
{{formUpdateContract.get('remainingAmount')?.value | formatMoney : '0'}}
</span>
</div>
</div>
</div>
</nz-card>
</div>
<!-- Chi tiet thanh toan -->
</div>
</div>
</div>
</ng-container>
<ng-template [nzModalFooter]>
<div class="d-flex align-items-center justify-content-center mb-3">
<button nz-button nzType="default" (click)="handleCancelUpdateContract()" class="button-modal btn-cancel">
{{ "customer.set-up-promotions-tab.cancel" | translate }}
</button>
<button nz-button nzType="primary"
type="default"
class="button-modal btn-save ms-3"
[class]="(disableSave || formUpdateContract.invalid) ? 'btn-disabled' : ''"
[disabled]="disableSave || formUpdateContract.invalid"
(click)="handleUpdateContract()"
>
{{ "common.saveButton" | translate }}
</button>
</div>
</ng-template>
</nz-modal>
<nz-modal
nzClassName="custom-modal-place-contract" [nzWidth]="'396px'"
[(nzVisible)]="isShowModalCancelContract"
[nzClosable]="false"
nzMaskClosable="false"
nzCentered
(nzOnCancel)="handleCancelCancelContract()"
(nzOnOk)="handleSaveCancelContract()">
<ng-container *nzModalContent>
<div class="d-flex flex-column align-items-center" *ngIf="stepCancelContract == 1">
<svg style="scale: 2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 21.5C6.45 21.5 5.97917 21.3042 5.5875 20.9125C5.19583 20.5208 5 20.05 5 19.5V6.5H4V4.5H9V3.5H15V4.5H20V6.5H19V19.5C19 20.05 18.8042 20.5208 18.4125 20.9125C18.0208 21.3042 17.55 21.5 17 21.5H7ZM9 17.5H11V8.5H9V17.5ZM13 17.5H15V8.5H13V17.5Z" fill="#EF4444"/>
</svg>
<label class="fs-24-bold mt-[24px]">
{{"customer.place-contract.confirm-cancel-ticket" | translate}}
</label>
</div>
<div class="d-flex flex-column align-items-center" *ngIf="stepCancelContract == 2">
<label class="fs-24-bold">
{{"customer.place-contract.cancel-ticket" | translate}}
</label>
</div>
<div class="d-flex flex-column align-items-center" *ngIf="stepCancelContract == 3">
<label class="fs-24-bold">
{{"customer.place-contract.support-transfer-bus" | translate}}
</label>
</div>
<div class="d-flex flex-column align-items-center" *ngIf="stepCancelContract == 4">
<span nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a"></span>
<label class="fs-24-bold">
{{"customer.place-contract.canceled-ticket" | translate}}
</label>
</div>
<div class="row !mt-3" [formGroup]="formCancelContract">
<div class="col-12 col-md-12 col-sm-12" *ngIf="stepCancelContract == 1">
<!-- <span class="required-star" >*</span> -->
<textarea maxlength="1000" tasTrimSpace class="input-form" [style.height]="'auto'" rows="4" nz-input formControlName="reason" placeholder="Lý do hủy"></textarea>
<div class="error-container"
*ngIf="formCancelContract.get('reason')?.invalid && (formCancelContract.get('reason')?.dirty || formCancelContract.get('reason')?.touched)">
<div *ngIf="formCancelContract.get('reason')?.hasError('required')">
<span class="validate_input">{{ "required.cannotBlank" | translate }}</span>
</div>
<div *ngIf="formCancelContract.get('reason')?.hasError('maxlength')">
<span class="validate_input">{{ translate.instant("required.maxLength", {label: translate.instant('customer.place-contract.note'), numberLength: 255}) }}</span>
</div>
</div>
</div>
<div class="mt-3" *ngIf="stepCancelContract == 2">
<fieldset class="d-flex flex-column">
<div class="d-flex justify-content-center">
<div class="d-flex flex-column align-items-start w-45">
<div class="d-flex align-items-center justify-content-between form-check">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payOnline" value="1" formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-15-bold" for="payOnline">
{{'customer.place-contract.support-transfer-bus' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between">
@if(percentDiscountCancelTicket.toString() === '0') {
<input [disabled]="true" name="payMethod" class="form-check-input me-1" type="radio" id="payOffline" value="2">
} @else {
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payOffline" value="2" formControlName="payMethod">
}
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-15-bold" for="payOffline">
{{'customer.place-contract.refund-money' | translate}} <span>({{percentDiscountCancelTicket}}%)</span>
</label>
</div>
<div class="d-flex align-items-center justify-content-between">
<input tasTrimSpace name="payMethod" class="form-check-input me-1" type="radio" id="payAgent" value="3" formControlName="payMethod">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-15-bold" for="payAgent">
{{'customer.place-contract.cancel-ticket' | translate}}
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="mt-3" *ngIf="stepCancelContract == 3 && formCancelContract.get('payMethod')?.value == 1">
<fieldset class="d-flex flex-column">
<div class="d-flex justify-content-center">
<div class="d-flex flex-column align-items-start w-40">
<div class="d-flex align-items-center justify-content-between form-check">
<input tasTrimSpace name="supportTransferBus" class=" form-check-input" type="radio" id="newBus" value="1" formControlName="supportTransferBus" >
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-15-bold" for="newBus">
{{'customer.place-contract.choose-new-bus' | translate}}
</label>
</div>
<div class="d-flex align-items-center justify-content-between">
<input tasTrimSpace name="supportTransferBus" class="form-check-input me-1" type="radio" id="waitingList" value="2" formControlName="supportTransferBus">
<label class="form-check-label ms-2 cursor-pointer pt-1 fs-15-bold" for="waitingList">
{{'customer.place-contract.add-to-waiting-list' | translate}}
</label>
</div>
</div>
</div>
</fieldset>
<div class="d-flex flex-column align-items-center mt-3">
<span style="color: #EF4444; font-style: italic;">* Thời gian chờ chuyến tối đa 60 phút.</span>
<span style="color: #EF4444; font-style: italic;">Sau 60 phút sẽ hủy vĩnh viễn</span>
</div>
</div>
</div>
</ng-container>
<ng-template [nzModalFooter]>
<div class="d-flex align-items-center justify-content-center mb-3">
<button
*ngIf="stepCancelContract == 1 || stepCancelContract == 2 || stepCancelContract == 3"
nz-button nzType="default" (click)="backStepCancelContract()" class="button-modal btn-cancel">
{{ "common.back" | translate }}
</button>
<button nz-button nzType="primary"
*ngIf="stepCancelContract == 1 || (stepCancelContract == 2 && formCancelContract.controls['payMethod'].value == 1)"
type="default"
class="button-modal btn-save ms-3"
[class]="formCancelContract.get('note')?.invalid ? 'btn-disabled' : ''"
[disabled]="formCancelContract.get('note')?.invalid"
(click)="nextStepCancelContract()"
>
{{ "common.continue" | translate }}
</button>
<button nz-button nzType="primary"
*ngIf="stepCancelContract == 3 || (stepCancelContract == 2 && formCancelContract.controls['payMethod'].value == 2)
|| (stepCancelContract == 2 && formCancelContract.controls['payMethod'].value == 3)"
type="default"
class="button-modal btn-save ms-3"
(click)="handleSaveCancelContract()"
>
{{ "common.confirm" | translate }}
</button>
<button nz-button nzType="primary"
*ngIf="stepCancelContract == 4"
type="default"
class="button-modal btn-save ms-3"
(click)="handleSaveCancelContract()"
>
{{ "common.ok" | translate }}
</button>
</div>
</ng-template>
</nz-modal>
<div *ngIf="currentSitSelected" class="btn-popup absolute bottom-3 right-7" (click)="isShowModalPlaceContract = true">
<span nz-icon>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M8.33333 2.5H2.5V8.33333M2.5 12.2808V16.25C2.5 16.5815 2.6317 16.8995 2.86612 17.1339C3.10054 17.3683 3.41848 17.5 3.75 17.5H16.25C16.5815 17.5 16.8995 17.3683 17.1339 17.1339C17.3683 16.8995 17.5 16.5815 17.5 16.25V3.75C17.5 3.41848 17.3683 3.10054 17.1339 2.86612C16.8995 2.6317 16.5815 2.5 16.25 2.5H12.5M9.25 9.25L2.875 2.875"
stroke="#FCFCFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
<span>Đặt hợp đồng</span>
</div>
<nz-modal nzClassName="custom-modal-place-contract"
[(nzVisible)]="showWarningHavingPlaceContract"
[nzClosable]="false"
nzMaskClosable="false"
nzCentered
>
<ng-container *nzModalContent>
<div class="flex items-center justify-center flex-col gap-y-[20px]">
<span nz-icon>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
<path
d="M32 44.6153C32.6102 44.6153 33.1217 44.4089 33.5346 43.996C33.9475 43.5831 34.154 43.0715 34.154 42.4613C34.154 41.8511 33.9475 41.3396 33.5346 40.9267C33.1217 40.5142 32.6102 40.308 32 40.308C31.3897 40.308 30.8782 40.5142 30.4653 40.9267C30.0524 41.3396 29.846 41.8511 29.846 42.4613C29.846 43.0715 30.0524 43.5831 30.4653 43.996C30.8782 44.4089 31.3897 44.6153 32 44.6153ZM30 34.872H34V18.872H30V34.872ZM32.0046 57.3333C28.5006 57.3333 25.2071 56.6684 22.124 55.3387C19.0408 54.0089 16.3591 52.2042 14.0786 49.9247C11.7982 47.6451 9.99263 44.9644 8.66196 41.8827C7.33174 38.8009 6.66663 35.5082 6.66663 32.0047C6.66663 28.5007 7.33151 25.2071 8.66129 22.124C9.99107 19.0409 11.7957 16.3591 14.0753 14.0787C16.3548 11.7982 19.0355 9.99266 22.1173 8.66199C25.1991 7.33177 28.4917 6.66666 31.9953 6.66666C35.4993 6.66666 38.7929 7.33154 41.876 8.66132C44.9591 9.9911 47.6409 11.7958 49.9213 14.0753C52.2017 16.3549 54.0073 19.0355 55.338 22.1173C56.6682 25.1991 57.3333 28.4918 57.3333 31.9953C57.3333 35.4993 56.6684 38.7929 55.3386 41.876C54.0089 44.9591 52.2042 47.6409 49.9246 49.9213C47.6451 52.2018 44.9644 54.0073 41.8826 55.338C38.8008 56.6682 35.5082 57.3333 32.0046 57.3333ZM32 53.3333C37.9555 53.3333 43 51.2667 47.1333 47.1333C51.2666 43 53.3333 37.9555 53.3333 32C53.3333 26.0444 51.2666 21 47.1333 16.8667C43 12.7333 37.9555 10.6667 32 10.6667C26.0444 10.6667 21 12.7333 16.8666 16.8667C12.7333 21 10.6666 26.0444 10.6666 32C10.6666 37.9555 12.7333 43 16.8666 47.1333C21 51.2667 26.0444 53.3333 32 53.3333Z"
fill="#EF4444" /> </svg>
</span>
<p class="text-[24px] font-medium text-[#252C32]" >{{'customer.place-contract.having-place-contract' | translate}}</p>
</div>
</ng-container>
<ng-template [nzModalFooter]>
<div class="d-flex align-items-center justify-content-center mb-3">
<button nz-button
nzType="default" (click)="handleBackWarningHavingPlaceContract()" class="button-modal btn-cancel">
{{ "common.back" | translate }}
</button>
<button nz-button nzType="primary" type="default"
class="button-modal btn-save ms-3"
(click)="handleShowHavingPlaceContract()">
{{ "customer.place-contract.go-to-place-contract" | translate }}
</button>
</div>
</ng-template>
</nz-modal>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
4
Requests
3
Domains
210KB
Transfer Size
212KB
Content Size
212.0ms
Dom Content Loaded
252.0ms
First Paint
293.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...