<template>
    <button type="button" v-print="printObj"
        class="flex items-center justify-center gap-2 px-4 h-[38px] rounded shadow-db-card bg-primary">
        <i class="lab lab-printer-line lab-font-size-16 text-white"></i>
        <span class="text-sm capitalize text-white"> {{ $t('button.print_invoice') }}</span>
    </button>

    <div id="receipt" class="modal">
        <div class="modal-dialog max-w-[340px] rounded-none" id="print" :dir="direction">
            <div class="modal-body">
                <div class="text-center pb-3.5 border-b border-dashed border-gray-400">
                    <h3 class="text-2xl font-bold mb-1">{{ setting.company_name }}</h3>
                    <h4 class="text-sm font-normal">{{ setting.company_address }}</h4>
                    <h5 class="text-sm font-normal">Tel: {{ setting.company_phone }}</h5>
                </div>

                <table class="w-full my-1.5">
                    <tbody>
                        <tr>
                            <td class="text-xs text-left py-0.5 text-heading">{{ $t('button.order') }}
                                #{{ order.order_serial_no }}
                            </td>
                        </tr>
                        <tr>
                            <td class="text-xs text-left py-0.5 text-heading">{{ order.order_date }}</td>
                            <td class="text-xs text-right py-0.5 text-heading">{{ order.order_time }}</td>
                        </tr>
                    </tbody>
                </table>

                <table class="w-full">
                    <thead class="border-t border-b border-dashed border-gray-400">
                        <tr>
                            <th scope="col" class="py-1 font-normal text-xs capitalize text-left text-heading w-8">
                                {{ $t('label.qty') }}
                            </th>
                            <th scope="col"
                                class="py-1 font-normal text-xs capitalize flex items-center justify-between text-heading">
                                <span>{{ $t('label.item_description') }}</span>
                                <span>{{ $t('label.price') }}</span>
                            </th>
                        </tr>
                    </thead>

                    <tbody class="border-b border-dashed border-gray-400">
                        <tr v-if="orderItems.length > 0" v-for="item in orderItems" :key="item">
                            <td class="text-left font-normal align-top py-1">
                                <p class="text-xs leading-5 text-heading">{{ item.quantity }}</p>
                            </td>
                            <td class="text-left font-normal align-top py-1">
                                <div class="flex items-center justify-between">
                                    <h4 class="text-sm font-normal capitalize">{{ item.item_name }}</h4>
                                    <p class="text-xs leading-5 text-heading">{{ item.total_currency_price
                                    }}
                                    </p>
                                </div>
                                <p v-if="Object.keys(item.item_variations).length !== 0"
                                    class="text-xs leading-5 font-normal text-heading max-w-[200px]">
                                    <span v-for="(variation, index) in item.item_variations">
                                        {{ variation.variation_name }}: {{ variation.name }}
                                        <span v-if="index + 1 < Object.keys(item.item_variations).length">, </span>
                                    </span>
                                </p>
                                <p v-if="item.instruction"
                                    class="text-xs leading-5 font-normal text-heading max-w-[200px]">
                                    {{ $t('label.instruction') }}: {{ item.instruction }}
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="py-2 pl-7">
                    <table class="w-full">
                        <tbody>
                            <tr>
                                <td class="text-xs text-left py-0.5 uppercase text-heading">{{ $t('label.cart_total')
                                    }}:
                                </td>
                                <td class="text-xs text-right py-0.5 text-heading">
                                    {{ order.cart_total_currency_price }}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-xs text-left py-0.5 uppercase text-heading">
                                    {{ $t('label.no_of_days') }}:
                                </td>
                                <td class="text-xs text-right py-0.5 text-heading">
                                    {{ order.number_of_days }}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-xs text-left py-0.5 uppercase text-heading">
                                    {{ $t('label.subtotal') }}:
                                </td>
                                <td class="text-xs text-right py-0.5 text-heading">
                                    {{ order.subtotal_currency_price }}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-xs text-left py-0.5 uppercase text-heading">
                                    {{ $t('label.tax') }}:
                                </td>
                                <td class="text-xs text-right py-0.5 text-heading">
                                    {{ order.total_tax_currency_price }}
                                </td>
                            </tr>

                            <tr>
                                <td class="text-xs text-left py-0.5 uppercase text-heading">{{
                                    $t('label.delivery_charge')
                                }}:
                                </td>
                                <td class="text-xs text-right py-0.5 text-heading">{{
                                    order.delivery_charge_currency_price
                                }}
                                </td>
                            </tr>

                            <tr>
                                <td class="text-xs text-left py-0.5 font-bold uppercase text-heading">
                                    {{ $t('label.total') }}:
                                </td>
                                <td class="text-xs text-right py-0.5 font-bold text-heading">
                                    {{ order.total_currency_price }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="text-xs py-1 border-t border-b border-dashed border-gray-400 text-heading">
                    <table class="w-full">
                        <tbody>
                            <tr v-if="parseInt(order.source) === enums.sourceEnum.POS && order.cash_back_amount > 0">
                                <td class="pt-1 pb-1 pr-1 align-top text-start">{{ $t('label.payment_type') }}: {{
                                    enums.posPaymentMethodEnumArray[order.pos_payment_method] }}</td>
                                <td class="pt-1 pb-1 text-end w-[120px]" v-if="order.cash_back_amount > 0">
                                    <div>{{ $t('label.cash') }}: {{ order.pos_received_currency_amount }}</div>
                                    <span>{{ $t('label.change') }} : {{ order.cash_back_currency_amount }}</span>
                                </td>
                            </tr>
                            <tr v-else-if="parseInt(order.source) === enums.sourceEnum.POS">
                                <td class="pt-1 pb-1 pr-1">{{ $t('label.payment_type') }}: {{
                                    enums.posPaymentMethodEnumArray[order.pos_payment_method] }}</td>
                            </tr>
                            <tr v-else>
                                <td class="pt-1 pb-1 pr-1">{{ $t('label.payment_type') }}:
                                    <span v-if="order.transaction">{{ order.transaction.payment_method }}</span>
                                    <span v-else>{{ enums.paymentTypeEnumArray[order.payment_method] }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="pt-1 pb-1 pr-1" colspan="2">{{ $t('label.meal_type') }}: <span
                                        v-for="(meal_type, index) in order.meal_types">{{
                                            meal_type.category_name }} <span
                                            v-if="index + 1 < Object.keys(order.meal_types).length">, </span></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="text-xs py-1 border-b border-dashed border-gray-400 text-heading">
                    <table>
                        <tbody>
                            <tr>
                                <td class="pt-1 pb-1 pr-1">{{ $t('label.customer') }}:</td>
                                <td class="pt-1 pb-1">{{ orderUser.name }}</td>
                            </tr>
                            <tr>
                                <td class="pt-1 pb-1 pr-1">{{ $t('label.phone') }}:</td>
                                <td class="pt-1 pb-1">{{ orderAddress.country_code + '' + orderAddress.phone }}</td>
                            </tr>
                            <tr>
                                <td class="pt-1 pb-1 pr-1">{{ $t('label.address') }}:</td>
                                <td class="pt-1 pb-1">
                                    {{ orderAddress.address }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="text-center pt-2 pb-4">
                    <p class="text-[11px] leading-[14px] capitalize text-heading">{{ $t('message.thank_you') }}</p>
                </div>

                <div class="flex flex-col items-end">
                    <h5 class="text-[8px] font-normal text-left w-[46px] leading-[10px]">
                        {{ $t('label.powered_by') }}
                    </h5>
                    <h6 class="text-xs font-normal leading-4">{{ setting.company_name }}</h6>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import print from "vue3-print-nb";
import orderTypeEnum from "../../../enums/modules/orderTypeEnum";
import paymentTypeEnum from "../../../enums/modules/paymentTypeEnum";
import displayModeEnum from "../../../enums/modules/displayModeEnum";
import sourceEnum from "../../../enums/modules/sourceEnum";
import posPaymentMethodEnum from "../../../enums/modules/posPaymentMethodEnum";
import { useFrontendSettingStore } from "../../../stores/frontend/frontendSetting";
import { useFrontendLanguageStore } from "../../../stores/frontend/frontendLanguage";

export default {
    name: "OrderReceiptComponent",
    props: {
        order: Object,
        orderItems: Object,
        orderUser: Object,
        orderAddress: Object
    },
    directives: {
        print
    },
    data() {
        return {
            loading: {
                isActive: false
            },
            printObj: {
                id: "print",
                popTitle: this.$t("menu.order_receipt"),
            },
            enums: {
                orderTypeEnum: orderTypeEnum,
                sourceEnum: sourceEnum,
                posPaymentMethodEnum: posPaymentMethodEnum,
                orderTypeEnumArray: {
                    [orderTypeEnum.DELIVERY]: this.$t("label.delivery")
                },
                paymentTypeEnumArray: {
                    [paymentTypeEnum.CASH_ON_DELIVERY]: this.$t("label.cash_on_delivery")
                },
                posPaymentMethodEnumArray: {
                    [posPaymentMethodEnum.CASH]: this.$t("label.cash"),
                    [posPaymentMethodEnum.CARD]: this.$t("label.card"),
                    [posPaymentMethodEnum.MOBILE_BANKING]: this.$t("label.mobile_banking"),
                    [posPaymentMethodEnum.OTHER]: this.$t("label.other"),
                },
            },
            frontendSettingStore: useFrontendSettingStore(),
            frontendLanguageStore: useFrontendLanguageStore()
        }
    },
    computed: {
        setting: function () {
            return this.frontendSettingStore.lists;
        },
        direction: function () {
            return this.frontendLanguageStore.show.display_mode === displayModeEnum.RTL ? 'rtl' : 'ltr';
        },
    }
}
</script>