<template>
    <AppLayout :title="service.title">
        <div class="container pt-10 pb-20 overflow-y-auto max-w-7xl">
            <Breadcrumbs class="pt-8" :breadcrumbs="breadcrumbs" />
            <div class="container max-w-[1440px] mt-8">
                <div
                    class="flex flex-col-reverse flex-1 w-full gap-5 mb-10 lg:flex-row"
                >
                    <div
                        class="flex flex-col flex-1 w-full max-w-[800px] gap-5"
                    >
                        <General isUser :service="service" />
                        <Tiers isUser :service="service" />
                        <Reviews :reviews="service.rates" />
                    </div>
                    <div
                        class="flex flex-col w-full gap-5 lg:flex-1 lg:max-w-xs"
                    >
                        <ProviderInfo
                            isUser
                            :user="service.serviceable"
                            :address="service.serviceable.location.address"
                            :service="service"
                        />
                        <ServiceType isUser :service="service" />
                    </div>
                </div>
            </div>
            <template v-if="relatedServices.length > 0">
                <hr class="mb-5 border-gray-200" />
                <section class="flex flex-col w-full gap-5">
                    <h2 class="text-2xl font-semibold text-blue-300">
                        Similar Services
                    </h2>
                    <RelatedServices
                        v-for="relatedService in relatedServices"
                        :key="relatedService.id"
                        :service="relatedService"
                    />
                </section>
            </template>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import SingleService from "@/components/Services/SingleService.vue";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import ProfileLink from "@/components/General/ProfileLink.vue";
import General from "@/components/Services/General";
import Tiers from "@/components/Services/Tiers";
import Reviews from "@/components/Services/Reviews";
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
import { computed, ref } from "@vue/runtime-core";
import Modal from "@/components/General/Modal.vue";
import RelatedServices from "@/components/Services/ClientCard";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import ProviderInfo from "@/components/Services/ProviderInfo";
import TierPanel from "@/components/Services/TierPanel";
import ServiceType from "@/components/Services/ServiceType.vue";

export default {
    props: {
        service: Object,
        relatedServices: Array,
    },
    data() {
        return {
            deleteForm: useForm({
                _method: "DELETE",
            }),
            breadcrumbs: [
                {
                    name: "bread.explore_services",
                    url: route("services.index"),
                },
                {
                    name: this.service.title,
                    url: null,
                },
            ],
        };
    },
    components: {
        AppLayout,
        Breadcrumbs,
        SingleService,
        Card,
        Button,
        ProfileLink,
        Modal,
        General,
        Tiers,
        RelatedServices,
        TabGroup,
        TabList,
        Tab,
        TabPanels,
        TabPanel,
        Reviews,
        ProviderInfo,
        TierPanel,
        ServiceType,
    },
    methods: {},
    mounted() {},
};
</script>
