<template>
    <Modal
        ref="modal"
        size="semi-fullscreen-contained"
        @closed="null"
        :title="$t('Register.project_contract')"
        color="blue"
    >
        <div class="container flex flex-col gap-5 px-5 lg:flex-row">
            <div class="flex-1 flex flex-col gap-2.5">
                <Overview :proposal="proposal" :project="project" />
                <Milestones
                    :milestones="proposal.milestones"
                    :accepted="proposal.accepted"
                    worker
                />
            </div>
            <div class="lg:max-w-[260px] w-full flex flex-col gap-2.5">
                <ClientInfo
                    worker
                    :proposal="proposal"
                    :client="project.user"
                />
                <ProviderInfo worker :proposal="proposal" />
                <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 || "Pending" }}
                            </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">
                                {{ project.contract?.id || "Pending" }}
                            </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?.start_date
                                        ? moment(
                                              project.contract.start_date
                                          ).format("DD MMM, YYYY")
                                        : "TBD"
                                }}
                            </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?.due_date
                                        ? moment(
                                              project.contract.due_date
                                          ).format("DD MMM, YYYY")
                                        : "TBD"
                                }}
                            </span>
                        </div>
                        <div class="flex flex-col gap-0.5 font-medium">
                            <Link
                                class="text-xs"
                                :href="route('project.show', project.slug)"
                                >{{
                                    $t("Register.view_original_project")
                                }}</Link
                            >
                            <Link
                                class="text-xs"
                                :href="
                                    route(
                                        'engineer.proposals.show',
                                        proposal.id
                                    )
                                "
                                >{{ $t("Register.view_proposal") }}</Link
                            >
                            <!-- <Link class="text-xs">Escrow Instructions</Link> -->
                        </div>
                    </div>
                </Card>
            </div>
        </div>
        <div
            class="container mt-3 flex w-full items-center justify-end gap-2.5"
            v-if="!workerSigned"
        >
            <Button class="md" buttonStyle="white" @click="close">
                {{ $t("Register.cancel") }}
            </Button>
            <Button class="md" @click="submit">Sign & Start Job</Button>
        </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/Projects/Client/Contracts/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";
import { useForm } 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();
        },
        submit() {
            this.form.post(
                route("engineer.contract.sign", this.project.contract?.id),
                {
                    preserveScroll: true,
                    onSuccess: () => {
                        this.close();
                        this.$emit("signed");
                    },
                }
            );
        },
    },
    components: {
        Modal,
        Card,
        Button,
        Link,
        ProviderInfo,
        ClientInfo,
        Overview,
        Milestones,
    },
    beforeMount() {
        if (!this.project.hired) this.project.hired = this.proposal;
    },
    computed: {
        workerSigned() {
            return !!this.project.contract?.contractor_signed_at;
            // return false;
        },
    },
    data() {
        return {
            form: useForm({}),
        };
    },
};
</script>
