{% block vrpayment_order_detail %}
<div class="vrpayment-order-detail">
	<div v-if="!isLoading">
		<mt-card :title="$tc('vrpayment-order.paymentDetails.cardTitle')">
			<template #grid>
				{% block vrpayment_order_actions_section %}
				<mt-card-section secondary slim>
					{% block vrpayment_order_transaction_refunds_action_button %}
						<mt-button
								variant="primary"
								size="small"
								:disabled="transaction.state != 'FULFILL' || refundableAmount <= 0"
								@click="spawnModal('refundByAmount')">
							{{ $tc('vrpayment-order.buttons.label.refund') }}
						</mt-button>
					{% endblock %}
					{% block vrpayment_order_transaction_completion_action_button %}
					<mt-button
							variant="primary"
							size="small"
							:disabled="transaction.state != 'AUTHORIZED' || isLoading"
							@click="spawnModal('completion')">
						{{ $tc('vrpayment-order.buttons.label.completion') }}
					</mt-button>
					{% endblock %}
					{% block vrpayment_order_transaction_void_action_button %}
					<mt-button
							variant="primary"
							size="small"
							:disabled="transaction.state != 'AUTHORIZED' || isLoading"
							@click="spawnModal('void')">
						{{ $tc('vrpayment-order.buttons.label.void') }}
					</mt-button>
					{% endblock %}
					{% block vrpayment_order_transaction_download_invoice_action_button %}
					<mt-button
							variant="primary"
							size="small"
							:disabled="transaction.state != 'FULFILL'"
							@click="downloadInvoice()">
						{{ $tc('vrpayment-order.buttons.label.download-invoice') }}
					</mt-button>
					{% endblock %}
					{% block vrpayment_order_transaction_download_packing_slip_action_button %}
					<mt-button
							variant="primary"
							size="small"
							:disabled="transaction.state != 'FULFILL'"
							@click="downloadPackingSlip()">
						{{ $tc('vrpayment-order.buttons.label.download-packing-slip') }}
					</mt-button>
					{% endblock %}
				</mt-card-section>
				{% endblock %}
			</template>
		</mt-card>
		{% block vrpayment_order_transaction_history_card %}
		<mt-card :title="$tc('vrpayment-order.transactionHistory.cardTitle')">
			<template #grid>

				{% block vrpayment_order_transaction_history_grid %}
				<sw-data-grid :dataSource="transactionData.transactions"
							  :columns="relatedResourceColumns"
							  :showActions="true"
							  :showSelection="false">

					<template #actions="{ item }">
						<sw-context-menu-item v-if="item.customerId">{{ $tc('vrpayment-order.transactionHistory.customerId') }}: {{ item.customerId }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.customerName">{{ $tc('vrpayment-order.transactionHistory.customerName') }}: {{ item.customerName }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.creditCardHolder">{{ $tc('vrpayment-order.transactionHistory.creditCardHolder') }}: {{ item.creditCardHolder }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.paymentMethodName">{{ $tc('vrpayment-order.transactionHistory.paymentMethod') }}: {{ item.paymentMethodName }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.brandName">{{ $tc('vrpayment-order.transactionHistory.paymentMethodBrand') }}: {{ item.brandName }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.pseudoCardNumber">{{ $tc('vrpayment-order.transactionHistory.PseudoCreditCardNumber') }}: {{ item.pseudoCardNumber }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.pseudoCardNumber && item.cardExpireMonth && item.cardExpireYear">{{ $tc('vrpayment-order.transactionHistory.CardExpire') }}: {{ item.cardExpireMonth }} / {{ item.cardExpireYear }}</sw-context-menu-item>
						<sw-context-menu-item v-if="item.payId">PayID: {{ item.payId }}</sw-context-menu-item>
					</template>
				</sw-data-grid>
				{% endblock %}
			</template>

		</mt-card>
		{% endblock %}
		{% block vrpayment_order_transaction_line_items_card %}
        <mt-card :title="$tc('vrpayment-order.lineItem.cardTitle')">
            <template #grid>

                {% block vrpayment_order_transaction_line_items_grid %}
                    <sw-data-grid
                            :dataSource="lineItems"
                            :columns="lineItemColumns"
                            :showActions="true"
                            :showSelection="true"
                            :local-mode="false"
                            :is-record-selectable="isSelectable"
                            @selection-change="onSelectionChanged"
                    >
                    {% block vrpayment_order_transaction_line_items_grid_grid_actions %}
                        <template #actions="{ item }">
                            <sw-context-menu-item
                                    :disabled="transaction.state != 'FULFILL' || item.refundableQuantity != item.quantity || item.refundableAmount == 0 || item.itemRefundedAmount > 0 || item.itemRefundedQuantity > 0"
                                    @click="lineItemRefund(item.uniqueId)">
                                {{ $tc('vrpayment-order.buttons.label.refund-whole-line-item') }}
                            </sw-context-menu-item>

                            <sw-context-menu-item
                                    :disabled="transaction.state != 'FULFILL' || item.refundableQuantity == 0 || item.refundableAmount == 0 || item.itemRefundedAmount > 0"
                                    @click="spawnModal('refund', item.uniqueId, item.refundableQuantity)">
                                {{ $tc('vrpayment-order.buttons.label.refund-line-item-by-quantity') }}
                            </sw-context-menu-item>

                            <sw-context-menu-item
                                    :disabled="transaction.state != 'FULFILL' || item.refundableQuantity == 0 || item.refundableAmount == 0 || item.itemRefundedQuantity > 0"
                                    @click="spawnModal('partialRefund', item.uniqueId, item.refundableQuantity, item.refundableAmount)">
                                {{ $tc('vrpayment-order.buttons.label.refund-line-item-parial') }}
                            </sw-context-menu-item>
                        </template>
                    {% endblock %}
                    {% block vrpayment_order_transaction_line_items_grid_bulk_actions %}
                        <template #bulk>
                            <a
                                    class="link link-danger"
                                    role="link"
                                    tabindex="0"
                                    :disabled="selectedItems.length === 0"
                                    @click="onPerformBulkAction">
                                {{ $tc('vrpayment-order.buttons.label.refund-line-item-selected') }}
                            </a>
                        </template>
                    {% endblock %}

                    </sw-data-grid>
                {% endblock %}
            </template>
        </mt-card>
		{% endblock %}
		{% block vrpayment_order_transaction_refunds_card %}
		<mt-card :title="$tc('vrpayment-order.refund.cardTitle')" v-if="transactionData.refunds.length > 0">
			<template #grid>

				{% block vrpayment_order_transaction_refunds_grid %}
				<sw-data-grid
						:dataSource="transactionData.refunds"
						:columns="refundColumns"
						:showActions="false"
						:showSelection="false">
				</sw-data-grid>
				{% endblock %}
			</template>

		</mt-card>
		{% endblock %}
		{% block vrpayment_order_actions_modal_refund_partial %}
			<vrpayment-order-action-refund-partial
					v-if="modalType === 'partialRefund'"
					:orderId="orderId"
					:transactionData="transactionData"
					:lineItems="lineItems"
					@modal-close="closeModal">
			</vrpayment-order-action-refund-partial>
		{% endblock %}
		{% block vrpayment_order_actions_modal_refund %}
		<vrpayment-order-action-refund
				v-if="modalType === 'refund'"
				:orderId="orderId"
				:transactionData="transactionData"
				:lineItems="lineItems"
				@modal-close="closeModal">
		</vrpayment-order-action-refund>
		{% endblock %}
		{% block vrpayment_order_actions_modal_refund_by_amount %}
			<vrpayment-order-action-refund-by-amount
					v-if="modalType === 'refundByAmount'"
					:orderId="orderId"
					:transactionData="transactionData"
					:lineItems="lineItems"
					@modal-close="closeModal">
			</vrpayment-order-action-refund-by-amount>
		{% endblock %}
		{% block vrpayment_order_actions_modal_completion%}
		<vrpayment-order-action-completion
				v-if="modalType === 'completion'"
				:orderId="orderId"
				:transactionData="transactionData"
				:lineItems="lineItems"
				@modal-close="closeModal">
		</vrpayment-order-action-completion>
		{% endblock %}
		{% block vrpayment_order_actions_modal_void %}
		<vrpayment-order-action-void
				v-if="modalType === 'void'"
				:orderId="orderId"
				:transactionData="transactionData"
				:lineItems="lineItems"
				@modal-close="closeModal">
		</vrpayment-order-action-void>
		{% endblock %}
	</div>
	<mt-loader v-if="isLoading"></mt-loader>
</div>
{% endblock %}
