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

<div class="fulfillment-wrapper">
    <div class="order-lines">
        <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.refund' | translate }}</th>
                    <th>{{ 'order.return-to-stock' | 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"></vdr-line-refunds>
                </td>
                <td class="align-middle quantity">
                    {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
                </td>
                <td class="align-middle fulfil">
                    <input
                        *ngIf="lineCanBeRefunded(line)"
                        [(ngModel)]="lineQuantities[line.id].quantity"
                        type="number"
                        [max]="line.quantity"
                        min="0"
                    />
                </td>
                <td class="align-middle">
                    <div class="cancel-checkbox-wrapper">
                        <input
                            type="checkbox"
                            *ngIf="lineCanBeRefunded(line)"
                            clrCheckbox
                            [disabled]="0 === lineQuantities[line.id].quantity"
                            [(ngModel)]="lineQuantities[line.id].cancel"
                        />
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="refund-details">
        <label class="clr-control-label">{{ 'order.refund-reason' | translate }}</label>
        <ng-select
            [items]="reasons"
            bindLabel="name"
            autofocus
            [placeholder]="'order.refund-reason-required' | translate"
            bindValue="id"
            [addTag]="true"
            [(ngModel)]="reason"
        ></ng-select>

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

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

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button
        type="submit"
        (click)="select()"
        [disabled]="!selectedPayment || !reason || refundTotal === 0 || refundTotal > selectedPayment.amount"
        class="btn btn-primary"
    >
        {{
            'order.refund-with-amount'
                | translate: { amount: refundTotal / 100 | currency: order.currencyCode }
        }}
    </button>
</ng-template>
