<template>
    <Modal
        ref="modal"
        size="semi-fullscreen-contained"
        @closed="null"
        :title="$t('Register.project_contract')"
        color="blue"
    >
        <div class="container flex gap-5 px-5">
            <div class="flex-1 flex flex-col gap-2.5">
                <Overview :proposal="proposal" :project="project" />
                <Milestones
                    :milestones="project.hired.milestones"
                    :accepted="project.hired.accepted"
                />
            </div>
            <div class="max-w-[260px] w-full flex flex-col gap-2.5">
                <!-- <ProviderInfo :proposal="project.hired" /> -->
                <ProviderInfo
                    :user="project.hired.proposalable"
                    :address="
                        project.hired.proposalable?.user?.location?.address
                    "
                    :service="project"
                    :workerId="project.hired.proposalable_id"
                    :workerType="project.hired.proposalable_type"
                    isProject
                />
                <ClientInfo :proposal="project.hired" :client="project.user" />
                <Card :title="$t('Register.contract_details')">
                    <div class="flex flex-col gap-2.5 font-medium">
                        <div class="flex items-center justify-between gap-1">
                            <span class="text-xs text-gray-400">
                                {{ $t("Register.contract_status") }}:
                            </span>
                            <span class="text-xs text-gray-200">
                                {{ project.contract.status }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-1">
                            <span class="text-xs text-gray-400">
                                {{ $t("Register.contract_id") }}:
                            </span>
                            <span class="text-xs text-gray-200">
                                MH-{{ project.contract.id }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-1">
                            <span class="text-xs text-gray-400">
                                {{ $t("Register.start_date") }}:
                            </span>
                            <span class="text-xs text-gray-200">
                                {{
                                    project.contract.contractor_signed_at
                                        ? moment(
                                              project.contract.start_date
                                          ).format("DD MMM, YYYY")
                                        : $t("Register.waiting_for_engineer")
                                }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-1">
                            <span class="text-xs text-gray-400">
                                {{ $t("Register.end_date") }}:
                            </span>
                            <span class="text-xs text-gray-200">
                                {{
                                    project.contract.contractor_signed_at
                                        ? moment(
                                              project.contract.due_date
                                          ).format("DD MMM, YYYY")
                                        : $t("Register.waiting_for_engineer")
                                }}
                            </span>
                        </div>
                        <div class="flex flex-col gap-0.5 font-medium">
                            <Link
                                class="text-xs"
                                :href="
                                    route('client.projects.show', project.slug)
                                "
                                >{{
                                    $t("Register.view_original_project")
                                }}</Link
                            >
                            <Link
                                class="text-xs"
                                :href="
                                    route(
                                        'client.projects.proposals.show',
                                        proposal.id
                                    )
                                "
                                >{{ $t("Register.view_proposal") }}</Link
                            >
                            <!-- <Link class="text-xs">Escrow Instructions</Link> -->
                        </div>
                    </div>
                </Card>
            </div>
        </div>
    </Modal>
</template>

<script>
import Modal from "@/components/General/FormModal";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import ProviderInfo from "@/components/Services/ProviderInfo";
import ClientInfo from "@/components/Projects/Client/Contracts/ClientInfo";
import Overview from "@/components/Projects/Client/Contracts/Overview";
import Milestones from "@/components/Projects/Client/Contracts/Milestones";
import { Link } from "@inertiajs/inertia-vue3";
export default {
    props: {
        project: {
            type: Object,
            required: true,
        },
        proposal: {
            type: Object,
            required: true,
        },
    },
    methods: {
        open() {
            this.$refs.modal.open();
        },
        close() {
            this.$refs.modal.close();
        },
    },
    components: {
        Modal,
        Card,
        Button,
        Link,
        ProviderInfo,
        ClientInfo,
        Overview,
        Milestones,
    },
    beforeMount() {
        if (!this.project.hired) this.project.hired = this.proposal;
    },
};
</script>
