<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col-12">
                            <list-component style="min-height: auto;" section="customerAnnouncements" :emptyListSection="false" :endpoint="route('api.announcement.list')" :options="{ has_segments: true, is_published: true }">
                                <template #list="{ data }">
                                    <view-announcement-form-component :data="data" section="customerAnnouncements"></view-announcement-form-component>
                                </template>
                            </list-component>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-lg-4 col-xl-4 mb-3 mb-md-0">
                            <div class="row">
                                <div class="col no-padding">
                                    <div class="absolute b-a b-success b-thick padding-5 animate__animated animate__infinite animate__pulse w-100 h-100" v-if="attention" style="top:0; left:0; z-index: -1;">
                                        <div class="b-a b-thick b-success h-100"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <booking-form-component :data="company" section="customerProfileSection" v-if="company" @click="attention = false"></booking-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg col-xl">
                            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                            <div class="row" v-if="!isLoading">
                                <div class="col">
                                    <div class="row m-l-0 m-r-0" v-show="!company.status || !company.bookings.length">
                                        <div class="col">
                                            <onboarding-section-component :data="company" @attention="attention = true"></onboarding-section-component>
                                        </div>
                                    </div>
                                    <div class="row tabsContainer" v-show="(company.status === 2 || company.status === 1) && company.bookings.length">
                                        <div class="col">
                                            <div class="row m-l-0 m-r-0">
                                                <div class="col-6 col-md-8">
                                                    <div class="row">
                                                        <div class="col m-r-5">
                                                            <div class="row fs-12 text-center">
                                                                <div class="col p-t-20 p-b-20 bg-master-lighter active tabButton" tab-name="transfers">
                                                                    <div class="row justify-content-center m-b-5">
                                                                        <div class="col-auto">
                                                                            <i class="fa fa-exchange fs-24 text-primary"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="fs-12 m-t-5">My Transfers</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col m-r-5 d-none d-md-inline">
                                                            <div class="row fs-12 text-center">
                                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="payments">
                                                                    <div class="row justify-content-center m-b-5">
                                                                        <div class="col-auto">
                                                                            <i class="fa fa-credit-card fs-24 text-primary"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="fs-12 m-t-5">Pending Payments</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col d-none d-md-inline">
                                                            <div class="row fs-12 text-center">
                                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton"
                                                                     tab-name="PO">
                                                                    <div class="row justify-content-center m-b-5">
                                                                        <div class="col-auto">
                                                                            <i class="fa fa-file-text-o fs-24 text-primary"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="fs-12 m-t-5">Purchase Orders</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6 col-md-4">
                                                    <div class="row justify-content-end">
                                                        <div class="col-12 col-md-8">
                                                            <div class="row fs-12 text-center">
                                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton"
                                                                     tab-name="complete">
                                                                    <div class="row justify-content-center m-b-5">
                                                                        <div class="col-auto">
                                                                            <i class="fa fa-list fs-24 text-primary"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="fs-12 m-t-5">Complete Orders</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row no-margin">
                                                <div class="col bg-white padding-25">
                                                    <div class="row tabsContainer tabContent active" tab-name="transfers">
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <list-component key="customer-transfer" section="transferSection" :endpoint="route('api.booking.list')" :options="{ per_page: 10, status: 2 }">
                                                                                <template #list="{ data }">
                                                                                    <booking-component :data="data"></booking-component>
                                                                                </template>
                                                                            </list-component>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row tabsContainer tabContent hide" tab-name="payments">
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <list-component key="customer-payments" section="pendingPaymentsSection" :endpoint="route('api.booking.list')" :options="{ per_page: 10, status: 2, pending_payment: true }">
                                                                                <template #list="{ data }">
                                                                                    <booking-component :data="data"></booking-component>
                                                                                </template>
                                                                            </list-component>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row tabsContainer hide tabContent" tab-name="PO">
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <list-component key="customer-po" section="PendingPurchaseOrdersSection" :endpoint="route('api.booking.list')" :options="{ per_page: 10, status: 2, pending_purchase_order: true }">
                                                                                <template #list="{ data }">
                                                                                    <booking-component :data="data"></booking-component>
                                                                                </template>
                                                                            </list-component>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row tabsContainer tabContent hide" tab-name="complete">
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <list-component key="customer-complete" section="completeTransferSection" :endpoint="route('api.booking.list')" :options="{ per_page: 10, status: 3 }">
                                                                                <template #list="{ data }">
                                                                                    <booking-component :data="data"></booking-component>
                                                                                </template>
                                                                            </list-component>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                    <wallet-component :data="company"></wallet-component>
                    <verification-warning-component v-if="!isLoading" :data="company"></verification-warning-component>
                    <new-service-announcement-component :data="company"></new-service-announcement-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import route from '@/general/functions/router';
import { useAuthStore } from '@/stores/auth';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';

const section = 'customerProfileSection';

const authStore = useAuthStore();
const queueStore = useQueueStore();
const { submit } = useRequest();

const isLoading = ref(true);
const company = ref<any>(null);
const attention = ref(false);

const pendingQueue = computed(() => queueStore.isInCompleteQueue(section));

const fetchCompany = async () => {
    isLoading.value = true;

    await submit(
        route('api.company.show', authStore.getCompanyId),
        'get',
        section,
        false,
        false,
        undefined,
        {
            successHandler: (response) => {
                queueStore.setListComplete({ name: section, data: [] });
                isLoading.value = false;
                company.value = response.payload?.data ?? null;
            },
            errorHandler: () => {
                isLoading.value = false;
            }
        }
    );
};

watch(pendingQueue, (inComplete) => {
    if (inComplete) {
        void fetchCompany();
    }
});

onMounted(() => {
    queueStore.updateListQueue({ name: section });
});
</script>
