<template>
    <AppLayout :title="`Proposal for ${proposal.project.title}`">
        <div
            class="container justify-center pt-10 pb-20 mx-auto overflow-y-auto max-w-7xl place-items-center"
        >
            <Breadcrumbs class="pt-8" :breadcrumbs="breadcrumbs" />
            <div class="w-full mt-8">
                <div
                    class="flex flex-col-reverse flex-1 w-full gap-5 mb-10 md:flex-row"
                >
                    <section class="flex flex-col flex-1 gap-5">
                        <ProposalSummaryCard
                            :worker="worker"
                            :proposal="proposal"
                        />
                        <Milestones
                            :worker="worker"
                            :milestones="proposal.milestones"
                            :accepted="proposal.accepted"
                        />
                    </section>
                    <div
                        v-if="!worker"
                        class="flex flex-col flex-1 w-full gap-5 md:max-w-xs"
                    >
                        <ProviderInfo
                            :user="proposal.proposalable"
                            :proposalable_type="proposal.proposalable_type"
                            :address="proposal.proposalable.location.address"
                            :project="proposal.project"
                        />
                        <Analytics :proposal="proposal" />
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import ProposalSummaryCard from "@/components/Projects/Client/Proposals/ProposalSummaryCard.vue";
import Milestones from "@/components/Projects/Client/Proposals/HiredMilestonesCard.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import ProviderInfo from "@/components/Projects/EngineerInfo";
import Analytics from "@/components/Projects/Client/Proposals/ProjectAnalytics.vue";
export default {
    props: {
        proposal: {
            type: Object,
            required: true,
        },
        worker: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            breadcrumbs: [
                {
                    name: "Register.my_projects",
                    url: !this.worker
                        ? route("client.projects.index")
                        : route("projects.index"),
                },
                {
                    name: this.proposal.project.title,
                    url: !this.worker
                        ? route(
                              "client.projects.show",
                              this.proposal.project.slug
                          )
                        : route("project.show", this.proposal.project.slug),
                },
                {
                    name: this.proposal.proposalable.name + " Proposal",
                    url: null,
                },
            ],
        };
    },
    components: {
        AppLayout,
        ProposalSummaryCard,
        Milestones,
        Breadcrumbs,
        ProviderInfo,
        Analytics,
    },
    mounted() {},
};
</script>
