<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>

<div class="refund-wrapper">
    <div class="order-table">
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>{{ 'order.product-name' | translate }}</th>
                    <th>{{ 'order.product-sku' | translate }}</th>
                    <th>{{ 'order.quantity' | translate }}</th>
                    <th>{{ 'order.unit-price' | translate }}</th>
                    <th>{{ 'order.prorated-unit-price' | translate }}</th>
                    <th>{{ 'order.quantity' | translate }}</th>
                    <th>{{ 'order.refund' | translate }}</th>
                    <th>{{ 'order.cancel' | translate }}</th>
                </tr>
            </thead>
            <tr *ngFor="let line of order.lines" class="order-line">
                <td class="align-middle thumb">
                    <img [src]="line.featuredAsset | assetPreview: 'tiny'" />
                </td>
                <td class="align-middle name">{{ line.productVariant.name }}</td>
                <td class="align-middle sku">{{ line.productVariant.sku }}</td>
                <td class="align-middle quantity">
                    {{ line.quantity }}
                    <vdr-line-refunds [line]="line" [payments]="order.payments"></vdr-line-refunds>
                </td>
                <td class="align-middle quantity">
                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
                </td>
                <td class="align-middle quantity">
                    <div class="prorated-wrapper">
                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}
                        <ng-container *ngIf="line.discounts as discounts">
                            <vdr-dropdown *ngIf="discounts.length">
                                <div class="promotions-label" vdrDropdownTrigger>
                                    <button class="icon-button"><clr-icon shape="info"></clr-icon></button>
                                </div>
                                <vdr-dropdown-menu>
                                    <div class="line-promotion" *ngFor="let discount of discounts">
                                        {{ discount.description }}
                                        <div class="promotion-amount">
                                            {{
                                                discount.amount / 100 / line.quantity
                                                    | number: '1.0-2'
                                                    | currency: order.currencyCode
                                            }}
                                        </div>
                                    </div>
                                </vdr-dropdown-menu>
                            </vdr-dropdown>
                        </ng-container>
                    </div>
                </td>
                <td class="align-middle quantity-col">
                    <input
                        *ngIf="lineCanBeRefundedOrCancelled(line)"
                        [(ngModel)]="lineQuantities[line.id].quantity"
                        type="number"
                        [max]="line.quantity"
                        min="0"
                        (input)="handleZeroQuantity(lineQuantities[line.id])"
                    />
                </td>
                <td class="align-middle">
                    <div class="cancel-checkbox-wrapper">
                        <input
                            type="checkbox"
                            *ngIf="lineCanBeRefundedOrCancelled(line)"
                            clrCheckbox
                            [disabled]="0 === lineQuantities[line.id].quantity"
                            [(ngModel)]="lineQuantities[line.id].refund"
                        />
                    </div>
                </td>
                <td class="align-middle">
                    <div class="cancel-checkbox-wrapper">
                        <input
                            type="checkbox"
                            *ngIf="lineCanBeRefundedOrCancelled(line)"
                            clrCheckbox
                            [disabled]="0 === lineQuantities[line.id].quantity"
                            [(ngModel)]="lineQuantities[line.id].cancel"
                        />
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="refund-details mt4" [class.faded]="!isRefunding() && !isCancelling()">
        <div>
            <label class="clr-control-label">{{ 'order.refund-cancellation-reason' | translate }}</label>
            <ng-select
                [disabled]="!isRefunding() && !isCancelling()"
                [items]="reasons"
                bindLabel="name"
                autofocus
                [placeholder]="'order.refund-cancellation-reason-required' | translate"
                bindValue="id"
                [addTag]="true"
                [(ngModel)]="reason"
            ></ng-select>
        </div>

        <div>
            <clr-select-container>
                <label>{{ 'order.payment-to-refund' | translate }}</label>
                <select clrSelect name="options" [(ngModel)]="selectedPayment" [disabled]="!isRefunding()">
                    <option
                        *ngFor="let payment of settledPayments"
                        [ngValue]="payment"
                        [disabled]="payment.state !== 'Settled'"
                    >
                        #{{ payment.id }} {{ payment.method }}:
                        {{ payment.amount | localeCurrency: order.currencyCode }}
                    </option>
                </select>
            </clr-select-container>

            <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox [(ngModel)]="refundShipping" [disabled]="!isRefunding()" />
                <label>
                    {{ 'order.refund-shipping' | translate }} ({{
                        order.shippingWithTax | localeCurrency: order.currencyCode
                    }})
                </label>
            </clr-checkbox-wrapper>
            <clr-input-container>
                <label>{{ 'order.refund-adjustment' | translate }}</label>
                <vdr-currency-input
                    clrInput
                    [disabled]="!isRefunding()"
                    [currencyCode]="order.currencyCode"
                    [(ngModel)]="adjustment"
                ></vdr-currency-input>
            </clr-input-container>
            <div class="totals" [class.disabled]="!isRefunding()">
                <div class="order-total">
                    {{ 'order.payment-amount' | translate }}:
                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}
                </div>
                <div class="refund-total">
                    {{ 'order.refund-total' | translate }}:
                    {{ refundTotal | localeCurrency: order.currencyCode }}
                </div>
                <div class="refund-total-error" *ngIf="refundTotal < 0 || settledPaymentsTotal < refundTotal">
                    {{
                        'order.refund-total-error'
                            | translate
                                : {
                                      min: 0 | currency: order.currencyCode,
                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode
                                  }
                    }}
                </div>
                <div class="refund-total-warning" *ngIf="selectedPayment.amount < refundTotal">
                    {{ 'order.refund-total-warning' | translate }}
                </div>
            </div>
        </div>
    </div>
</div>

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button type="submit" (click)="select()" [disabled]="!canSubmit()" class="btn btn-primary">
        <ng-container *ngIf="isRefunding(); else cancelling">
            {{
                'order.refund-with-amount'
                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }
            }}
        </ng-container>
        <ng-template #cancelling>
            {{ 'order.cancel-selected-items' | translate }}
        </ng-template>
    </button>
</ng-template>
