<template>
    <LoadingContentComponent :props="loading" />
    <div class="db-card">
        <div class="db-card-header flex justify-center flex-wrap gap-3">
            <span class="px-5 sm:px-6 py-2 rounded-lg border cursor-pointer" v-for="itemCategory in itemCategories"
                :class="this.search.category_id === itemCategory.id ? 'text-primary border-primary' : ''"
                @click.prevent="setCategory(itemCategory.id)">
                {{ itemCategory.name }}
            </span>
        </div>
        <div class="db-card-body">
            <div class="row">
                <div class="col-12 md:col-6 lg:col-6 xl:col-4" v-if="deliveredOrders.length > 0"
                    v-for="order in deliveredOrders" :key="order">
                    <div class="w-full rounded-lg py-2 px-3 flex items-center gap-5 border border-[#EFF0F6]">
                        <i class="lab lab-reserve lab-font-size-24 lab-font-color-2"></i>
                        <div class="w-full">
                            <div class="flex items-center gap-4 mb-1">
                                <p class="text-sm leading-6 font-rubik">{{ $t('label.order_id') }}: <span
                                        class="text-heading">#{{
                                            order.order_serial_no
                                        }}</span>
                                </p>
                                <span :class="'text-xs capitalize px-2 rounded-3xl ' + orderStatusClass(order.status)">
                                    {{ order.status_name }}
                                </span>
                            </div>
                            <p class="text-xs">
                                {{ $t('label.meal_type') }}:
                                <span
                                    class="py-0.5 px-2 rounded-full text-[10px] font-medium leading-5 first-letter:capitapze whitespace-nowrap text-[#008BBA] bg-[#E0F8FF]">{{
                                        order.category_name }}</span>
                            </p>
                            <p class="text-xs font-light font-rubik mb-0.5">{{ order.order_items }} {{
                                $t("label.items")
                            }}</p>
                            <p class="text-xs font-light font-rubik mb-1">{{ order.order_datetime }}</p>
                            <div class="flex items-center justify-between">
                                <p class="text-sm leading-6 font-rubik capitalize text-heading">{{
                                    $t("label.total")
                                }}: <span class="font-medium">{{ order.total_currency_price }}</span></p>
                                <router-link
                                    :to="{ name: 'admin.delivery-boys.delivered-order.details', params: { id: props, orderId: order.id } }"
                                    class="text-[10px] leading-4 font-medium font-rubik flex items-center gap-1.5 text-primary">
                                    {{ $t("label.see_order_details") }}
                                    <i class="lab lab-arrow-right lab-font-size-13"></i>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-4 text-center w-full" v-else>
                    <div class="max-w-[300px] mx-auto mt-2">
                        <img class="w-full h-full" :src="ENV.API_URL + '/images/order/order-not-found.png'"
                            alt="Not Found">
                    </div>
                    <span class="d-block mt-3 text-lg">{{ $t('message.no_data_available') }}</span>
                </div>
            </div>
        </div>
        <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-6"
            v-if="deliveredOrders.length > 0">
            <PaginationSMBox :pagination="deliveredOrderPagination" :method="deliveredOrderLists" />
            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                <PaginationTextComponent :props="{ page: deliveredOrderPage }" />
                <PaginationBox :pagination="deliveredOrderPagination" :method="deliveredOrderLists" />
            </div>
        </div>
    </div>
</template>

<script>
import LoadingContentComponent from "../../components/LoadingContentComponent.vue";
import TableLimitComponent from "../../components/TableLimitComponent.vue";
import PaginationTextComponent from "../../components/pagination/PaginationTextComponent.vue";
import PaginationBox from "../../components/pagination/PaginationBox.vue";
import PaginationSMBox from "../../components/pagination/PaginationSMBox.vue";
import appService from "../../../../services/appService";
import { useDeliveryBoyOrderStore } from '../../../../stores/deliveryBoyOrder';
import { useDeliveryBoyStore } from '../../../../stores/deliveryBoy';
import statusEnum from "../../../../enums/modules/statusEnum";
import { useItemCategoryStore } from "../../../../stores/itemCategory";
import ENV from '../../../../config/env';

export default {
    name: "DeliveredOrderList",
    components: {
        LoadingContentComponent,
        TableLimitComponent,
        PaginationSMBox,
        PaginationBox,
        PaginationTextComponent
    },
    props: ["props"],
    data() {
        return {
            loading: {
                isActive: false,
            },
            search: {
                paginate: 1,
                page: 1,
                per_page: 9,
                order_column: 'id',
                order_type: 'asc',
                category_id: null,
            },
            ENV: ENV,
            deliveryBoyStore: useDeliveryBoyStore(),
            deliveryBoyOrderStore: useDeliveryBoyOrderStore(),
            itemCategoryStore: useItemCategoryStore()
        }
    },
    mounted() {
        this.itemCategoryStore.fetchLists({
            order_column: 'id',
            order_type: 'asc',
            status: statusEnum.ACTIVE
        }).then(res => {
            this.search.category_id = res.data.data[0].id;
            this.deliveredOrderLists();
            this.loading.isActive = false;
        }).catch((err) => {
            this.loading.isActive = false;
        });
    },
    computed: {
        deliveredOrders: function () {
            return this.deliveryBoyOrderStore.deliveredOrders;
        },
        deliveredOrderPagination: function () {
            return this.deliveryBoyOrderStore.deliveredOrderPagination;
        },
        deliveredOrderPage: function () {
            return this.deliveryBoyOrderStore.deliveredOrderPage;
        },
        itemCategories: function () {
            return this.itemCategoryStore.lists;
        },
    },
    methods: {
        orderStatusClass: function (status) {
            return appService.orderStatusClass(status);
        },
        setCategory: function (id) {
            this.search.category_id = id;
            this.deliveredOrderLists();
        },
        deliveredOrderLists: function (page = 1) {
            this.loading.isActive = true;
            this.search.page = page;
            this.deliveryBoyOrderStore.fetchDeliveredOrders({
                id: this.props,
                search: this.search
            }).then(res => {
                this.loading.isActive = false;
            }).catch((err) => {
                this.loading.isActive = false;
            });
        },
    }

}
</script>