<template>
    <AppLayout title="My services">
        <TabGroup>
            <div class="py-4 bg-blue-200">
                <TabList class="container flex gap-8 max-w-[1440px]">
                    <Tab
                        v-for="tab in tabs"
                        :key="tab"
                        ref="tabRefs"
                        class="focus:outline-none focus:border-none"
                        as="button"
                        v-slot="{ selected }"
                        @click="addUrlParam({ name: 'section', value: tab })"
                    >
                        <span
                            :class="[
                                'flex items-center justify-center gap-1 font-medium capitalize',
                                selected ? 'text-blue-300' : 'text-gray-200',
                            ]"
                        >
                            <span
                                class="flex items-center justify-center w-[18px] h-[18px] m-1 border-2 rounded-full"
                                :class="
                                    selected
                                        ? 'border-blue-300'
                                        : 'border-gray-200'
                                "
                            >
                                <span
                                    class="w-2 h-2 bg-blue-300 rounded-full"
                                    :class="selected ? 'block' : 'hidden'"
                                ></span>
                            </span>
                            {{ $t("Register." + tab) }}
                        </span>
                    </Tab>
                </TabList>
            </div>
            <TabPanels class="container max-w-6xl mt-8">
                <TabPanel
                    as="div"
                    class="flex flex-col-reverse flex-1 w-full gap-5 mb-10 md:flex-row"
                >
                    <MyServices :firm="firm" :services="services" />
                    <PaymentOverview :firm="firm" />
                </TabPanel>
                <TabPanel
                    as="div"
                    class="flex flex-col-reverse flex-1 w-full gap-5 mb-10 md:flex-row"
                >
                    <MyOrders :firm="firm" :orders="orders" />
                    <PaymentOverview :firm="firm" />
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </AppLayout>
</template>

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import ServiceList from "@/Pages/Services/Firm/Partials/ServiceList.vue";
import { onMounted, ref, computed } from "@vue/runtime-core";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import { addUrlParam } from "@/composables/urlParams";
import MyOrders from "@/Pages/Services/Firm/Partials/Tabs/MyOrders.vue";
import MyServices from "@/Pages/Services/Firm/Partials/Tabs/MyServices.vue";
import PaymentOverview from "@/Pages/Services/Firm/Partials/PaymentOverview.vue";
const props = defineProps({
    firm: Object,
    services: Array,
    orders: Array,
});

const tabs = ["services", "orders"];

const tabRefs = ref([]);

const navigateToQueryTab = () => {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get("section")?.toLowerCase();
    if (tabs.includes(tab)) {
        const tabRef = tabRefs.value[tabs.indexOf(tab)];
        tabRef?.el?.click();
    }
};

onMounted(() => {
    navigateToQueryTab();
});
</script>
