<template>
    <div class="bg-white mb-[10px] max-w-[1140px] m-auto p-[20px] rounded-lg">
        <div class="max-w-[1100px] min-h-[115px] bg-blue-100 rounded-[8px]">
            <div class="flex justify-between">
                <div class="p-[20px]">
                    <h1
                        class="max-w-[150px] mb-[10px] h-[15px] font-inter font-normal leading-[14.5px] text-[12px] text-[#29419B]"
                    >
                        {{
                            $t("Register.project_id") +
                            ": MH-" +
                            proposal.project_id
                        }}
                    </h1>
                    <h1
                        class="max-w-[200px] mb-[10px] h-[15px] font-inter font-medium leading-[16.94px] text-[14px] text-gray-300"
                    >
                        {{ proposal.proposalable.name }}
                    </h1>
                    <div>
                        <div class="flex flex-wrap gap-2 max-w-[700px]">
                            <Badge
                                v-for="item in proposal.proposalable
                                    .hierarchicalCategories.sub_categories"
                                :key="item.id"
                                size="fits"
                            >
                                {{ item.name }}
                            </Badge>
                        </div>
                    </div>
                </div>
                <div
                    class="mt-5 leading-[16px] p-[10px] mx-[20px] w-[148px] h-[51px] rounded-[8px] bg-white"
                >
                    <h1
                        class="text-[12px] font-medium text-gray-300 leading-[14.5px] font-inter"
                    >
                        {{ $t("Register.fixed_price") }}
                    </h1>
                    <h1
                        class="text-[12px] font-medium text-gray-200 mb-[10px] leading-[14.5px] font-inter"
                    >
                        {{ currency(proposal.amount) }}
                    </h1>
                </div>
            </div>
        </div>
        <div class="w-full border-blue-200 border-t-[1px] my-[20px]"></div>
        <div>
            <Badge :color="badgeColor" size="fits">
                {{ proposal.status }}
            </Badge>
        </div>
        <div class="max-w-full mt-[5px] mb-[20px]" title="descraption">
            <h1
                class="font-inter font-normal leading-[16.95px] italic text-[14px] text-gray-200"
            >
                {{
                    !checkstate
                        ? proposal.description.substr(0, 300)
                        : proposal.description
                }}
                <button
                    v-if="proposal.description.length > 300"
                    @click="checkstate = !checkstate"
                    class="text-[14px] italic font-medium leading-4 text-blue-300 ml-[1px] normal font-Inter"
                >
                    {{ checkstate ? "Read less" : "Read more" }}
                </button>
            </h1>
        </div>
        <div
            class="flex flex-col md:flex-row flex-wrap justify-between gap-x-[20px]"
        >
            <div class="flex gap-[10px]">
                <div>
                    <img
                        class="w-[50px] h-[50px] rounded-[50%] no-magnify"
                        :src="proposal.proposalable.user.profile_photo_url"
                        alt=""
                    />
                </div>
                <div>
                    <h1
                        class="text-[12px] font-medium leading-[14.52px] normal font-Inter"
                    >
                        {{ proposal.proposalable.name }}
                    </h1>
                    <h1
                        class="text-[10px] font-medium mt-[5px] text-gray-200 leading-[12.1px] normal font-Inter"
                    >
                        {{ proposal.proposalable.tag_line }}
                    </h1>
                    <h1
                        class="text-[10px] font-medium mt-[5px] text-gray-200 leading-[12.1px] normal font-Inter"
                    >
                        {{
                            moment(
                                String(proposal.proposalable.created_at)
                            ).format("MM/DD/YYYY hh:mm A")
                        }}
                    </h1>
                </div>
            </div>
            <div class="mt-[15px]">
                <Button
                    buttonStyle="blue_view"
                    size="fit_2"
                    :href="
                        engineer
                            ? route(
                                  'engineer.projects.show',
                                  proposal.project.slug
                              )
                            : route('firm.projects.show', proposal.project.slug)
                    "
                    >{{ $t("Register.view_details") }}</Button
                >
            </div>
        </div>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";
import moment from "moment";
import Button from "@/Jetstream/Button";

export default {
    props: ["proposal", "engineer"],
    data() {
        return {
            checkstate: false,
        };
    },
    components: {
        Badge,
        Button,
    },
    mounted() {},
    computed: {
        badgeColor() {
            if (this.proposal.status == "Accepted") {
                return "green";
            } else if (this.proposal.status == "Pending Approval") {
                return "orange";
            } else if (this.proposal.status == "Declined") {
                return "red";
            }
        },
    },
};
</script>
