<template>
    <AppLayout :title="project.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 w-full gap-5 mb-10 md:flex-1 md:flex-row"
                >
                    <SingleProjectTabs
                        :project="project"
                        :levelsOfExperience="levelsOfExperience"
                        :languages="languages"
                        :acceptedProposal="hasAcceptedProposal"
                        :unacceptedProposal="hasUnacceptedProposal"
                    />
                    <template v-if="relatedProjects.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">
                                {{ $t("Register.similar_projects") }}
                            </h2>
                            <RelatedProjects
                                v-for="relatedProject in relatedProjects"
                                :key="relatedProject.id"
                                :project="relatedProject"
                            />
                        </section>
                    </template>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import Project from "@/components/Projects/SingleProject.vue";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import ProfileLink from "@/components/General/ProfileLink.vue";
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
import { computed, ref } from "@vue/runtime-core";
import Modal from "@/components/General/Modal.vue";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import SingleProjectTabs from "@/Pages/Projects/Engineer/Partials/Tabs/SingleProjectTabs.vue";
import Contract from "@/components/Contracts/BasicContract.vue";
import RelatedProjects from "@/components/Projects/ClientCard";

export default {
    props: {
        project: Object,
        levelsOfExperience: {
            type: Array,
            required: true,
        },
        languages: {
            type: Array,
            required: true,
        },
        relatedProjects: {
            type: Array,
            default: [],
        },
        hasAcceptedProposal: {
            type: Object,
            default: null,
        },
        hasUnacceptedProposal: {
            type: Object,
            default: null,
        },
    },
    computed: {
        total_recieved() {
            return new Intl.NumberFormat("en-US", {
                style: "currency",
                currency: "USD",
                currencyDisplay: "narrowSymbol",
                maximumFractionDigits: 0,
                minimumFractionDigits: 0,
            }).format(this.project.total_recieved || 0);
        },
    },
    data() {
        return {
            deleteForm: useForm({
                _method: "DELETE",
            }),
            pauseForm: useForm({
                _method: "POST",
            }),
            breadcrumbs: [
                {
                    name: "Register.my_projects",
                    url: route("client.projects.index"),
                },
                {
                    name: this.project.title,
                    url: null,
                },
            ],
        };
    },
    components: {
        AppLayout,
        Breadcrumbs,
        Project,
        Card,
        Button,
        ProfileLink,
        Modal,
        TabGroup,
        TabList,
        Tab,
        TabPanels,
        TabPanel,
        SingleProjectTabs,
        Contract,
        RelatedProjects,
    },
    methods: {
        closeContactModal() {
            this.$refs["contract_modal"].close();
        },
        openContactModal() {
            this.$refs["contract_modal"].open();
        },
    },
    mounted() {},
};
</script>
