<template>
    <LoadingComponent :props="loading" />
    <div class="row py-2">
        <div class="col-12 !p-0">
            <div class="db-card shadow-[0_2px_6px_0_rgb(187,190,194,0.1)]">
                <div class="db-card-header border-none">
                    <div class="card 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.props.search.category_id === itemCategory.id ? 'text-primary border-primary' : ''"
                            @click.prevent="setCategory(itemCategory.id)">
                            {{ itemCategory.name }}
                        </span>
                    </div>
                    <div class="db-card-filter">
                        <TableLimitComponent :method="list" :search="props.search" :page="paginationPage" />
                        <FilterComponent @click.prevent="handleSlide('tomorrow-order-filter')" />
                        <div class="dropdown-group">
                            <ExportComponent />
                            <div
                                class="dropdown-list db-card-filter-dropdown-list transition-all duration-300 scale-y-0 origin-top">
                                <PrintComponent :props="printObj" />
                                <ExcelComponent :method="xls" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-filter-div" id="tomorrow-order-filter">
                    <form class="p-4 sm:p-5 mb-5" @submit.prevent="search">
                        <div class="row">
                            <div class="col-12 sm:col-6 md:col-4 xl:col-3">
                                <label for="order_id" class="db-field-title after:hidden">{{ $t('label.order_id')
                                    }}</label>
                                <input id="order_id" v-model="props.search.order_serial_no" type="text"
                                    class="db-field-control">
                            </div>

                            <div class="col-12 sm:col-6 md:col-4 xl:col-3">
                                <label for="user_id" class="db-field-title">
                                    {{ $t("label.customer") }}
                                </label>
                                <vue-select class="db-field-control f-b-custom-select" id="user_id"
                                    v-model="props.search.user_id" :options="customers" label-by="name" value-by="id"
                                    :closeOnSelect="true" :searchable="true" :clearOnClose="true" placeholder="--"
                                    search-placeholder="--" />
                            </div>

                            <div class="col-12 sm:col-6 md:col-4 xl:col-3">
                                <label for="searchSource" class="db-field-title after:hidden">{{
                                    $t('label.source')
                                    }}</label>
                                <vue-select class="db-field-control f-b-custom-select" id="searchSource"
                                    v-model="props.search.source" :options="sourceObject" label-by="name"
                                    value-by="value" :closeOnSelect="true" :searchable="true" :clearOnClose="true"
                                    placeholder="--" search-placeholder="--" />
                            </div>

                            <div class="col-12">
                                <div class="flex flex-wrap gap-3 mt-4">
                                    <button class="db-btn py-2 text-white bg-primary">
                                        <i class="lab lab-search-line lab-font-size-16"></i>
                                        <span>{{ $t('button.search') }}</span>
                                    </button>
                                    <button class="db-btn py-2 text-white bg-gray-600" @click="clear">
                                        <i class="lab lab-cross-line-2 lab-font-size-22"></i>
                                        <span>{{ $t('button.clear') }}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="db-table-responsive">
                    <table class="db-table stripe" id="printTomorrow" :dir="direction">
                        <thead class="db-table-head">
                            <tr class="db-table-head-tr">
                                <th class="db-table-head-th">{{ $t('label.order_id') }}</th>
                                <th class="db-table-head-th">{{ $t('label.source') }}</th>
                                <th class="db-table-head-th">{{ $t('label.category') }}</th>
                                <th class="db-table-head-th">{{ $t('label.customer') }}</th>
                                <th class="db-table-head-th">{{ $t('label.amount') }}</th>
                                <th class="db-table-head-th">{{ $t('label.delivery_date') }}</th>
                                <th class="db-table-head-th">{{ $t('label.status') }}</th>
                                <th class="db-table-head-th hidden-print" v-if="permissionChecker('all-orders')">
                                    {{ $t('label.action') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="db-table-body" v-if="orders.length > 0">
                            <tr class="db-table-body-tr" v-for="order in orders" :key="order">
                                <td class="db-table-body-td">
                                    {{ order.order_serial_no }}

                                </td>
                                <td class="db-table-body-td">
                                    {{ enums.sourceEnumArray[order.source] }}
                                </td>
                                <td class="db-table-body-td">
                                    <span
                                        class="py-0.5 px-2 rounded-full text-[12px] font-fira leading-4 first-letter:capitalize whitespace-nowrap text-[#008BBA] bg-[#E0F8FF]">
                                        {{ order.category_name }}
                                    </span>
                                </td>
                                <td class="db-table-body-td">
                                    {{ textShortener(order.customer_name, 20) }}
                                </td>
                                <td class="db-table-body-td">{{ order.total_amount_price }}</td>
                                <td class="db-table-body-td">
                                    {{ order.order_datetime }}
                                </td>
                                <td class="db-table-body-td">
                                    <span :class="orderStatusClass(order.status)">
                                        {{ order.status_name }}
                                    </span>
                                </td>
                                <td class="db-table-body-td hidden-print" v-if="permissionChecker('all-orders')">
                                    <div
                                        class="flex justify-start items-center sm:items-start sm:justify-start gap-1.5">

                                        <router-link class="db-table-action view" v-if="permissionChecker('all-orders')"
                                            :to="{ name: 'admin.tomorroworder.show', params: { id: order.id } }">
                                            <i class="lab lab-view"></i>
                                            <span class="db-tooltip">{{ $t('button.view') }}</span>
                                        </router-link>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                        <tbody class="p-4 text-center w-full" v-else>
                            <tr class="db-table-body-tr">
                                <td colspan="8" class="db-table-body-td">
                                    <div class="p-4">
                                        <div class="w-full flex items-center justify-center mt-2 mb-3">
                                            <img class="max-w-[300px] w-full h-full"
                                                :src="ENV.API_URL + '/images/order/order-not-found.png'"
                                                alt="Not Found">
                                        </div>
                                        <span class="d-block text-lg text-[#6E7191]">{{ $t('message.no_data_available') }}</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-6"
                    v-if="orders.length > 0">
                    <PaginationSMBox :pagination="pagination" :method="list" />
                    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                        <PaginationTextComponent :props="{ page: paginationPage }" />
                        <PaginationBox :pagination="pagination" :method="list" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import LoadingComponent from "../../components/LoadingComponent.vue";
import alertService from "../../../../services/alertService";
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 orderStatusEnum from "../../../../enums/modules/orderStatusEnum";
import TableLimitComponent from "../../components/TableLimitComponent.vue";
import SmIconDeleteComponent from "../../components/buttons/SmIconDeleteComponent.vue";
import SmIconViewComponent from "../../components/buttons/SmIconViewComponent.vue";
import FilterComponent from "../../components/buttons/collapse/FilterComponent.vue";
import ExportComponent from "../../components/buttons/export/ExportComponent.vue";
import PrintComponent from "../../components/buttons/export/PrintComponent.vue";
import ExcelComponent from "../../components/buttons/export/ExcelComponent.vue";
import displayModeEnum from "../../../../enums/modules/displayModeEnum";
import sourceEnum from "../../../../enums/modules/sourceEnum";
import { useTomorrowOrderStore } from "../../../../stores/tomorrowOrder";
import { useUserStore } from '../../../../stores/user';
import { useFrontendLanguageStore } from "../../../../stores/frontend/frontendLanguage";
import { useItemCategoryStore } from "../../../../stores/itemCategory";
import ENV from '../../../../config/env';

export default {
    name: "TomorrowOrderListComponent",
    components: {
        TableLimitComponent,
        PaginationSMBox,
        PaginationBox,
        PaginationTextComponent,
        LoadingComponent,
        SmIconDeleteComponent,
        SmIconViewComponent,
        FilterComponent,
        ExportComponent,
        PrintComponent,
        ExcelComponent,
    },
    data() {
        return {
            loading: {
                isActive: false
            },
            enums: {
                orderStatusEnum: orderStatusEnum,
                sourceEnum: sourceEnum,
                orderStatusEnumArray: {
                    [orderStatusEnum.ACCEPT]: this.$t("label.accept"),
                    [orderStatusEnum.DELIVERED]: this.$t("label.delivered"),
                },
                sourceEnumArray: {
                    [sourceEnum.WEB]: this.$t("label.web"),
                    [sourceEnum.APP]: this.$t("label.app"),
                    [sourceEnum.POS]: this.$t("label.pos")
                },
            },
            printLoading: true,
            printObj: {
                id: "printTomorrow",
                popTitle: this.$t("menu.tomorrow_orders"),
            },
            props: {
                search: {
                    paginate: 1,
                    page: 1,
                    per_page: 10,
                    order_column: 'id',
                    order_by: "desc",
                    order_serial_no: "",
                    user_id: null,
                    source: null,
                    category_id: null
                }
            },
            ENV: ENV,
            tomorrowOrderStore: useTomorrowOrderStore(),
            userStore: useUserStore(),
            frontendLanguageStore: useFrontendLanguageStore(),
            itemCategoryStore: useItemCategoryStore(),

        }
    },
    mounted() {
        setTimeout(() => {
            this.props.search.category_id = this.itemCategoryStore.lists[0]?.id;
            this.list();
        }, 300);

    },
    computed: {
        orders: function () {
            return this.tomorrowOrderStore.lists;
        },
        itemCategories: function () {
            return this.itemCategoryStore.lists;
        },
        customers: function () {
            return this.userStore.lists;
        },
        pagination: function () {
            return this.tomorrowOrderStore.pagination;
        },
        paginationPage: function () {
            return this.tomorrowOrderStore.page;
        },
        direction: function () {
            return this.frontendLanguageStore.show.display_mode === displayModeEnum.RTL ? 'rtl' : 'ltr';
        },
        sourceObject: function () {
            return [
                {
                    name: this.$t("label.web"),
                    value: sourceEnum.WEB,
                },
                {
                    name: this.$t("label.app"),
                    value: sourceEnum.APP,
                },
                {
                    name: this.$t("label.pos"),
                    value: sourceEnum.POS,
                },
            ];
        }
    },
    methods: {
        permissionChecker(e) {
            return appService.permissionChecker(e);
        },
        statusClass: function (status) {
            return appService.statusClass(status);
        },
        orderStatusClass: function (status) {
            return appService.orderStatusClass(status);
        },
        textShortener: function (text, number = 30) {
            return appService.textShortener(text, number);
        },
        handleSlide: function (id) {
            return appService.handleSlide(id);
        },
        search: function () {
            this.list();
        },
        setCategory: function (id) {
            this.props.search.category_id = id;
            this.list();
        },
        clear: function () {
            this.props.search.paginate = 1;
            this.props.search.page = 1;
            this.props.search.order_by = "desc";
            this.props.search.order_serial_no = "";
            this.props.search.source = null;
            this.props.search.user_id = null;
            this.props.search.category_id = this.props.search.category_id;
            this.list();
        },
        list: function (page = 1) {
            this.loading.isActive = true;
            this.props.search.page = page;
            this.tomorrowOrderStore.fetchLists(this.props.search).then(res => {
                this.loading.isActive = false;
            }).catch((err) => {
                this.loading.isActive = false;
            });
        },
        xls: function () {
            this.loading.isActive = true;
            this.tomorrowOrderStore.export(this.props.search).then((res) => {
                this.loading.isActive = false;
                const blob = new Blob([res.data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });
                const link = document.createElement("a");
                link.href = URL.createObjectURL(blob);
                link.download = this.$t("menu.tomorrow_orders");
                link.click();
                URL.revokeObjectURL(link.href);
            }).catch((err) => {
                this.loading.isActive = false;
                alertService.error(err.response.data.message);
            });
        },
    }
}
</script>

<style scoped>
@media print {
    .hidden-print {
        display: none !important;
    }
}
</style>