<template>
    <section class="col-12 pt-4 pb-4">
        <router-link to="" @click="$router.go(-1)" class="mb-3 inline-flex items-center gap-2 text-primary">
            <i class="lab lab-undo lab-font-size-16"></i>
            <span class="text-xs font-medium leading-6">{{ $t('label.back_to_orders') }}</span>
        </router-link>
        <div class="flex items-start flex-col md:flex-row gap-6">
            <div class="w-full">
                <div class="p-4 mb-6 rounded-2xl shadow-xs bg-white">

                    <div class="flex flex-wrap items-start gap-3 mt-1.5 mb-2">
                        <h3 class="text-sm leading-6 mb-1 font-medium">{{ $t("label.order_id") }}: <span
                                class="text-[#008BBA]">#{{ order.order_serial_no }}</span></h3>
                        <span :class="'text-xs capitalize px-2 rounded-3xl ' + orderStatusClass(order.status)">
                            {{ orderStatusEnumArray[order.status] }}
                        </span>
                    </div>
                    <ul class="flex flex-col gap-2">
                        <li class="flex items-center gap-2">
                            <i class="lab lab-calendar-line lab-font-size-16"></i>
                            <span class="text-xs">{{ order.order_datetime }}</span>
                        </li>
                        <li class="text-xs">
                            {{ $t('label.payment_type') }}:
                            <span class="text-heading" v-if="order.transaction">
                                {{ order.transaction.payment_method }}
                            </span>
                            <span v-else class="text-heading">
                                {{ paymentTypeEnumArray[order.payment_method] }}
                            </span>
                        </li>
                        <li class="text-xs flex whitespace-nowrap items-baseline gap-2">
                            {{ $t('label.meal_type') }}:
                            <p class="flex flex-wrap gap-2">
                                <span v-for="meal_type in order?.meal_types"
                                    class="py-0.5 px-2 rounded-full text-[10px] font-medium leading-5 first-letter:capitalize whitespace-nowrap text-[#008BBA] bg-[#E0F8FF]">{{
                                        meal_type.category_name }}</span>
                            </p>
                        </li>
                        <li class="text-xs">
                            <h4 class="text-sm font-medium leading-6 mb-1">{{ $t("label.selected_dates") }}:</h4>
                            <div v-if="order?.delivery_dates" class="mb-2"
                                v-for="(dates, monthYear) in groupedDates(order.delivery_dates)" :key="monthYear">
                                <p class="text-black/60 mb-1 leading-6">{{ monthYear }}</p>
                                <div class="flex flex-wrap items-center justify-start gap-2">
                                    <span v-for="date in dates" :key="date" class="date">{{ new Date(date).getDate()
                                    }}</span>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="p-4 mb-6 rounded-2xl shadow-xs bg-white"
                    v-if="orderAddress">
                    <h3 class="text-sm leading-6 font-medium mb-2">{{ $t("label.delivery_address") }}</h3>
                    <div class="flex items-start justify-start gap-2.5">
                        <i class="lab lab-location leading-none mt-1.5 flex-shrink-0 lab-font-size-14"></i>
                        <span class="text-sm leading-6 text-heading">
                            {{ orderAddress.name
                            }},{{
                                orderAddress.address }}
                        </span>
                    </div>
                </div>

                <div v-if="parseInt(order.status) !== parseInt(enums.orderStatusEnum.REJECTED) && parseInt(order.status) !== parseInt(enums.orderStatusEnum.CANCELED)"
                    class="p-4 rounded-2xl shadow-xs bg-white">
                    <h3 class="capitalize font-medium text-sm leading-6 mb-2">{{ $t("label.payment_info") }}</h3>
                    <ul class="flex flex-col gap-2">
                        <li class="flex items-center gap-2">
                            <span class="capitalize text-sm leading-6">{{ $t("label.method") }}:</span>
                            <span v-if="order.transaction" class="capitalize text-sm leading-6 text-heading">
                                {{ order.transaction.payment_method }} ({{ order.transaction.transaction_no }})
                            </span>
                            <span v-else class="capitalize text-sm leading-6 text-heading">
                                {{ paymentTypeEnumArray[order.payment_method] }}
                            </span>
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="capitalize text-sm leading-6">{{ $t("label.status") }}:</span>
                            <span class="capitalize text-sm leading-6"
                                :class="enums.paymentStatusEnum.PAID === order.payment_status ? 'text-green-600' : 'text-[#FB4E4E]'">
                                {{ paymentStatusEnumArray[order.payment_status] }}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="w-full rounded-2xl shadow-xs bg-white">
                <div class="p-4 border-b">
                    <h3 class="font-medium text-sm leading-6 capitalize mb-4">{{ $t('label.order_details') }}</h3>
                    <div class="pl-3">
                        <div class="mb-3 pb-3 border-b last:mb-0 last:pb-0 last:border-b-0 border-gray-2"
                            v-if="orderItems.length > 0" v-for="item in orderItems" :key="item">
                            <div class="flex items-center gap-3 relative">
                                <h3
                                    class="absolute top-5 -left-3 text-sm w-[26px] h-[26px] leading-[26px] text-center rounded-full text-white bg-heading">
                                    {{ item.quantity }}</h3>
                                <img class="w-16 h-16 rounded-lg flex-shrink-0" :src="item.item_image" alt="thumbnail">
                                <div class="w-full">
                                    <a href="#"
                                        class="text-sm font-medium capitalize transition text-heading hover:underline">{{
                                            textShortener(item.item_name, 80) }}</a>

                                    <h3 class="text-xs font-semibold">{{ item.total_currency_price }}</h3>
                                </div>
                            </div>
                            <ul class="flex flex-col gap-1.5 mt-2">
                                <li class="flex gap-1" v-if="item.instruction">
                                    <h3 class="capitalize text-xs w-fit whitespace-nowrap">
                                        {{ $t('label.instruction') }}:</h3>
                                    <p class="text-xs">{{ item.instruction }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <div class="rounded-xl border border-[#EFF0F6]">
                        <ul class="flex flex-col gap-2 p-3 border-b border-dashed border-[#EFF0F6]">
                            <li class="flex items-center justify-between text-heading">
                                <span class="text-sm leading-6 capitalize">{{ $t("label.cart_total") }}</span>
                                <span class="text-sm leading-6 capitalize">{{ order.cart_total_currency_price
                                    }}</span>
                            </li>
                            <li class="flex items-center justify-between text-heading">
                                <span class="text-sm leading-6 capitalize">{{ $t("label.no_of_days") }}</span>
                                <span class="text-sm leading-6 capitalize">{{ order.number_of_days }}</span>
                            </li>
                        </ul>
                        <ul class="flex flex-col gap-2 p-3 border-b border-dashed border-[#EFF0F6]">
                            <li class="flex items-center justify-between text-heading">
                                <span class="text-sm leading-6 capitalize">{{ $t("label.subtotal") }}</span>
                                <span class="text-sm leading-6 capitalize">{{ order.subtotal_currency_price
                                    }}</span>
                            </li>
                            <li class="flex items-center justify-between text-heading">
                                <span class="text-sm leading-6 capitalize">{{ $t("label.tax") }}</span>
                                <span class="text-sm leading-6 capitalize">{{ order.total_tax_currency_price
                                    }}</span>
                            </li>
                            <li class="flex items-center justify-between text-heading">
                                <span class="text-sm leading-6 capitalize">{{ $t("label.delivery_charge") }}</span>
                                <span class="text-sm leading-6 capitalize font-medium text-[#1AB759]"> {{
                                    order.delivery_charge_currency_price }}</span>
                            </li>
                        </ul>
                        <div class="flex items-center justify-between p-3">
                            <h4 class="text-sm leading-6 font-semibold capitalize">{{ $t("label.total") }}
                            </h4>
                            <h5 class="text-sm leading-6 font-semibold capitalize"> {{ order.total_currency_price }}
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>

import LoadingComponent from "./LoadingComponent.vue";
import orderStatusEnum from "../../../enums/modules/orderStatusEnum";
import orderTypeEnum from "../../../enums/modules/orderTypeEnum";
import paymentStatusEnum from "../../../enums/modules/paymentStatusEnum";
import paymentTypeEnum from "../../../enums/modules/paymentTypeEnum";
import appService from "../../../services/appService";

export default {
    name: "OrderDetailsComponent",
    components: { LoadingComponent },
    props: {
        order: Object,
        orderItems: Object,
        orderAddress: Object,
    },
    data() {
        return {
            loading: {
                isActive: false,
            },
            enums: {
                orderStatusEnum: orderStatusEnum,
                orderTypeEnum: orderTypeEnum,
                paymentStatusEnum: paymentStatusEnum,
                paymentTypeEnum: paymentTypeEnum
            },
        };
    },
    computed: {
        orderStatusEnumArray: function () {
            return {
                [orderStatusEnum.PENDING]: this.$t("label.pending"),
                [orderStatusEnum.ACCEPT]: this.$t("label.accept"),
                [orderStatusEnum.CANCELED]: this.$t("label.canceled"),
                [orderStatusEnum.REJECTED]: this.$t("label.rejected"),
                [orderStatusEnum.DELIVERED]: this.$t("label.delivered"),
            }
        },
        paymentStatusObject: function () {
            return [
                { name: this.$t("label.paid"), value: paymentStatusEnum.PAID },
                { name: this.$t("label.unpaid"), value: paymentStatusEnum.UNPAID },
            ];
        },
        paymentStatusEnumArray: function () {
            return {
                [paymentStatusEnum.PAID]: this.$t("label.paid"),
                [paymentStatusEnum.UNPAID]: this.$t("label.unpaid")
            }
        },
        paymentTypeEnumArray: function () {
            return {
                [paymentTypeEnum.CASH_ON_DELIVERY]: this.$t("label.cash_on_delivery"),
            }
        },
    },
    methods: {
        statusClass: function (status) {
            return appService.statusClass(status);
        },
        orderStatusClass: function (status) {
            return appService.orderStatusClass(status);
        },
        textShortener: function (text, number = 30) {
            return appService.textShortener(text, number);
        },
        groupedDates: function (orderDates) {
            return appService.groupedDates(orderDates);
        },
    }
}
</script>