<template>
    <Modal
        ref="modal"
        size="semi-fullscreen-contained"
        @closed="null"
        :title="$t('Register.project_contract')"
        color="blue"
    >
        <div
            class="container flex flex-col max-w-full gap-5 px-5 mb-8 lg:flex-row"
        >
            <div class="flex-1 flex flex-col gap-2.5 max-w-[470px]">
                <!-- <Overview :proposal="proposal" :project="proposal.project" /> -->
                <Milestones
                    slidesPerView="2.5"
                    :milestones="proposal.milestones"
                    :accepted="proposal.accepted"
                />
            </div>
            <div class="lg:max-w-[260px] w-full flex flex-col gap-2.5">
                <ProviderInfo :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"> 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">
                                MH-{{ proposal.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"> 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"> TBD </span>
                        </div>
                        <div class="flex flex-col gap-0.5 font-medium">
                            <Link
                                class="text-xs"
                                :href="
                                    route(
                                        'client.projects.show',
                                        proposal.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>
        <div
            class="flex items-center justify-end gap-2.5 w-full container pb-5 mt-auto"
        >
            <Button size="md" buttonStyle="white" @click="close">{{
                $t("Register.cancel")
            }}</Button>
            <Button size="md" @click="openAcceptModal">{{
                $t("Register.accept")
            }}</Button>
            <PaymentModal
                :proposal="proposal"
                ref="payment_modal"
                @close="close"
            />
        </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 PaymentModal from "@/components/Projects/Client/Contracts/ProposalPaymentModal";

export default {
    props: {
        proposal: {
            type: Object,
            required: true,
        },
    },
    methods: {
        open() {
            this.$refs.modal.open();
        },
        close() {
            this.$refs.modal.close();
        },
        openAcceptModal() {
            this.$refs["payment_modal"].open();
        },
    },
    data() {
        return {
            form: this.$inertia.form({
                proposal_id: this.proposal.id,
            }),
        };
    },
    components: {
        Modal,
        Card,
        Button,
        Link,
        ProviderInfo,
        ClientInfo,
        Overview,
        Milestones,
        PaymentModal,
    },
};
</script>
