<template>
    <Card :title="$t('Register.service_type')">
        <TabGroup>
            <div class="flex items-center justify-center w-full">
                <TabList class="flex justify-between w-full gap-1 px-1">
                    <Tab
                        class="focus:outline-none focus:border-none flex flex-col gap-1.5"
                        as="button"
                        v-slot="{ selected }"
                    >
                        <span
                            :class="[
                                'flex flex-col items-center justify-center gap-0.5 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>
                            <span class="flex flex-col">
                                <span> {{ $t("Register.basic") }}</span>
                                <span class="text-xs text-gray-200">
                                    {{ currency(service.basic_tier_price) }}
                                </span>
                            </span>
                        </span>
                    </Tab>
                    <template v-if="service.three_tiers">
                        <Tab
                            class="focus:outline-none focus:border-none flex flex-col gap-1.5"
                            as="button"
                            v-slot="{ selected }"
                        >
                            <span
                                :class="[
                                    'flex flex-col items-center justify-center gap-0.5 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>
                                <span class="flex flex-col">
                                    <span>
                                        {{ $t("Register.standard") }}
                                    </span>
                                    <span class="text-xs text-gray-200">
                                        {{
                                            currency(
                                                service.standard_tier_price
                                            )
                                        }}
                                    </span>
                                </span>
                            </span>
                        </Tab>
                        <Tab
                            class="focus:outline-none focus:border-none flex flex-col gap-1.5"
                            as="button"
                            v-slot="{ selected }"
                        >
                            <span
                                :class="[
                                    'flex flex-col items-center justify-center gap-0.5 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>
                                <span class="flex flex-col">
                                    <span>
                                        {{ $t("Register.pro") }}
                                    </span>
                                    <span class="text-xs text-gray-200">
                                        {{ currency(service.pro_tier_price) }}
                                    </span>
                                </span>
                            </span>
                        </Tab>
                    </template>
                </TabList>
            </div>
            <hr class="my-5 bg-gray-200" />
            <TabPanels>
                <TabPanel as="div">
                    <TierPanel
                        serviceType="0"
                        :serviceId="service.id"
                        :price="service.basic_tier_price"
                        :deliveryDays="service.basic_tier_days"
                        :options="service.tier_options"
                        packageType="basic"
                        isUser
                    />
                </TabPanel>
                <TabPanel as="div">
                    <TierPanel
                        serviceType="1"
                        :serviceId="service.id"
                        :price="service.standard_tier_price"
                        :deliveryDays="service.standard_tier_days"
                        :options="service.tier_options"
                        packageType="standard"
                        isUser
                    />
                </TabPanel>
                <TabPanel as="div">
                    <TierPanel
                        serviceType="2"
                        :serviceId="service.id"
                        :price="service.pro_tier_price"
                        :deliveryDays="service.pro_tier_days"
                        :options="service.tier_options"
                        packageType="pro"
                        isUser
                    />
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </Card>
</template>

<script>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import TierPanel from "@/components/Services/TierPanel";
import Card from "@/components/Containers/ContentCard";
export default {
    components: {
        TabGroup,
        TabList,
        Tab,
        TabPanels,
        TabPanel,
        TierPanel,
        Card,
    },
    props: {
        service: Object,
    },
};
</script>

<style></style>
