<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import General from "@/Pages/Settings/Firm/Tabs/General/Index.vue";
import Categories from "@/Pages/Settings/Firm/Tabs/Category/Index.vue";
import { onMounted, ref } from "@vue/runtime-core";
import Portfolio from "./Tabs/Portfolio/Index.vue";
import Experience from "./Tabs/Experience/Index.vue";
import Education from "./Tabs/Education/Index.vue";
import Certificates from "./Tabs/Certificates/Index.vue";
const props = defineProps({
    firm: Object,
    firmSize: Array,
    languages: Array,
    proficiencies: Array,
    categories: Array,
});

const breadcrumbs = [
    {
        name: "profile.profile",
        url: route("firm.profile"),
    },
    {
        name: 'profile.edit_details',
        url: null,
    },
];

const tabs = ["general", "category", "portfolio", "licence"];

const tabRefs = ref([]);

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

<template>
    <AppLayout title="Profile">
        <TabGroup>
            <div class="w-full pt-10 pb-20 overflow-y-auto">
                <Breadcrumbs
                    class="container pt-10 max-w-7xl"
                    :breadcrumbs="breadcrumbs"
                />

                <div class="pt-6 mb-10 bg-white mt-7">
                    <div class="container flex flex-col w-full gap-5 max-w-7xl">
                        <div class="flex items-center justify-start gap-2.5">
                            <svg
                                width="32"
                                height="33"
                                viewBox="0 0 32 33"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M11.9999 9.83331H7.99992C7.29267 9.83331 6.6144 10.1143 6.1143 10.6144C5.6142 11.1145 5.33325 11.7927 5.33325 12.5V24.5C5.33325 25.2072 5.6142 25.8855 6.1143 26.3856C6.6144 26.8857 7.29267 27.1666 7.99992 27.1666H19.9999C20.7072 27.1666 21.3854 26.8857 21.8855 26.3856C22.3856 25.8855 22.6666 25.2072 22.6666 24.5V20.5"
                                    stroke="#29419B"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M12 20.5H16L27.3333 9.16668C27.8638 8.63625 28.1618 7.91683 28.1618 7.16668C28.1618 6.41654 27.8638 5.69712 27.3333 5.16668C26.8029 4.63625 26.0835 4.33826 25.3333 4.33826C24.5832 4.33826 23.8638 4.63625 23.3333 5.16668L12 16.5V20.5Z"
                                    stroke="#29419B"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M21.3333 7.16669L25.3333 11.1667"
                                    stroke="#29419B"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </svg>
                            <h1 class="text-3xl font-medium text-gray-300">
                                 {{ $t("Register.edit_pros") }}

                            </h1>
                        </div>
                        <TabList class="flex gap-1">
                            <Tab
                                v-for="tab in tabs"
                                :key="tab"
                                ref="tabRefs"
                                class="px-3 py-4 font-semibold focus:outline-none focus:border-none"
                                as="button"
                                v-slot="{ selected }"
                            >
                                <span
                                    :class="[
                                        'py-4 capitalize',
                                        selected
                                            ? 'text-blue-300 border-b-[3px] border-blue-300'
                                            : 'text-gray-200',
                                    ]"
                                >
                                    {{ $t("profile." + tab) }}
                                </span>
                            </Tab>
                        </TabList>
                    </div>
                </div>

                <TabPanels class="container max-w-7xl">
                    <TabPanel as="div">
                        <General
                            :firm="firm"
                            :firmSize="firmSize"
                            :languages="languages"
                            :proficiencies="proficiencies"
                        />
                    </TabPanel>
                    <TabPanel as="div">
                        <Categories :firm="firm" :categories="categories" />
                    </TabPanel>
                    <TabPanel as="div">
                        <Portfolio :firm="firm" />
                    </TabPanel>
                    <TabPanel as="div">
                        <Certificates :firm="firm" />
                    </TabPanel>
                </TabPanels>
            </div>
        </TabGroup>
    </AppLayout>
</template>
