<template>
    <div
        class="flex flex-col gap-5 p-5 mb-3 rounded-lg cont-main bg-[#ffffff] w-full inline-fl"
    >
        <div
            class="relative flex flex-col-reverse justify-between w-full gap-y-4 md:flex-row photo"
        >
            <div class="relative flex gap-2 leading-[16px]">
                <div class="h-full">
                    <img
                        :src="project.user.profile_photo_url"
                        class="img rounded-[50%] w-[50px] h-[50px] object-cover no-magnify"
                    />
                </div>
                <div class="flex-1">
                    <span
                        class="text-xs font-medium text-gray-300 normal font-Inter"
                    >
                        <a
                            :href="
                                route('user.profile.slugged', project.user.slug)
                            "
                            class="text-sm font-medium grey-200"
                        >
                            {{ project.user.name }}
                        </a>
                    </span>

                    <br />
                    <span
                        class="text-xs font-medium text-gray-200 normal font-Inter"
                        >{{ project.user.tag_line }}</span
                    >
                    <span
                        class="flex gap-1 mt-0 text-xs font-medium leading-4 text-gray-200 cont_spans normal font-Inter"
                        ><svg
                            width="15"
                            height="10"
                            viewBox="0 0 10 7"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M1.5 3.5L4 6L9 1"
                                stroke="#50CD89"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                        {{ project.user.successful_jobs }}
                        {{ $t("projects.successful_jobs") }}
                    </span>
                </div>
            </div>
            <div class="flex flex-col items-start gap-2 md:items-end">
                <span
                    class="text-xs font-medium text-gray-200 normal font-Inter"
                >
                    {{
                        moment(project.created_at).format("ddd, MMM Do YYYY")
                    }}</span
                >
                <div
                    class="py-1.5 px-3 leading-[16px] rounded-lg Rete_span max-w-max"
                >
                    <span class=""
                        >{{ $t("projects." + project.budget_type) }}
                    </span>
                    <br />
                    <span v-show="project.budget_type == 'Rate'" class="amount">
                        {{ $t("projects." + project.rate_type) }}
                        {{ $t("projects.rate") }}:
                        {{ currency(project.amount) }}</span
                    >
                    <span
                        v-show="project.budget_type == 'Bidding'"
                        class="amount"
                    >
                        {{ $t("projects.Starts") }}:
                        {{ currency(project.amount) }}</span
                    >
                    <span
                        v-show="project.budget_type == 'Fixed Price'"
                        class="amount"
                    >
                        {{ currency(project.amount) }}</span
                    >
                </div>
            </div>
        </div>
        <hr class="w-full Hr-element" />
        <div class="flex w-full">
            <div class="w-full">
                <div
                    v-if="project.hierarchicalCategories.category"
                    class="flex flex-col gap-1.5 mb-3"
                >
                    <div class="flex flex-wrap gap-x-1.5 gap-y-1">
                        <Badge color="gray" size="fits">
                            {{ project.hierarchicalCategories?.category?.name }}
                        </Badge>
                    </div>
                </div>
                <div class="w-full">
                    <div class="flex items-start justify-between w-full gap-1">
                        <span
                            class="ml-1 text-sm font-medium leading-4 text-gray-300 normal font-Inter"
                            >{{ project.title }}
                        </span>

                        <!-- <span
                        class="text-xs font-medium text-gray-200 normal font-Inter"
                    >
                        {{
                            moment(project.created_at).format(
                                "ddd, MMM Do YYYY"
                            )
                        }}</span
                    > -->
                    </div>
                    <h6
                        class="pt-3 ml-1 text-xs font-medium leading-4 text-gray-200 normal font-Inter"
                    >
                        {{
                            !checkstate
                                ? project.description.substr(0, 260)
                                : project.description
                        }}

                        <button
                            v-if="project.description.length > 260"
                            @click="checkstate = !checkstate"
                            style="font-size: 10px"
                            class="text-xs italic font-medium leading-4 text-blue-300 serMore ml-[4px] text-[12px] normal font-Inter"
                        >
                            {{
                                checkstate
                                    ? $t("Register.see_less")
                                    : $t("Register.see_more")
                            }}
                        </button>
                    </h6>

                    <div class="flex flex-col w-full gap-1.5 mt-3">
                        <p class="text-xs font-medium text-gray-200">
                            {{ $t("Register.skils_serch") }}:
                        </p>
                        <div class="flex flex-wrap gap-x-1.5 gap-y-1">
                            <Badge
                                v-for="itemB in project.skills"
                                :key="itemB.id"
                                size="fits"
                            >
                                {{ itemB[`name_${$i18n.locale}`] }}
                            </Badge>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-col md:flex-row md:justify-between mt-[12px]">
            <div
                class="flex items-center justify-between flex-1 md:justify-start md:gap-7 md:flex-none"
            >
                <span class="text-sm font-medium text-gray-200 leading-[30px]"
                    >{{ $t("Register.proposals") }}:
                    <br class="pt-3" />
                    <span class="sar font-Inter">
                        {{ project.proposalCount }}
                    </span>
                </span>
                <span class="text-sm font-medium text-gray-200 leading-[30px]"
                    >{{ $t("Register.project_duration2") }}: <br /><span
                        class="sar font-Inter"
                    >
                        {{ daysToReadable(project.duration) }}
                    </span>
                </span>
            </div>
            <div class="flex gap-2 mx-auto md:mx-0 btn-last mt-[10px]">
                <Button
                    :class="project.isLikedByUser?.isLiked ? 'span-divs ' : ''"
                    @click="saveProject"
                    :disabled="form.processing"
                    buttonStyle="white_save"
                    size="md"
                    class="h-[34px]"
                >
                    <svg
                        width="18"
                        height="16"
                        viewBox="0 0 18 16"
                        :fill="
                            project.isLikedByUser?.isLiked ? color_svg : 'none'
                        "
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M15.2501 8.81007L9.00009 15.0001L2.75009 8.81007M2.75009 8.81007C2.33784 8.40891 2.01312 7.92674 1.79638 7.39393C1.57963 6.86111 1.47556 6.28919 1.4907 5.71418C1.50585 5.13916 1.63989 4.57351 1.88439 4.05285C2.12888 3.53218 2.47853 3.06778 2.91133 2.68888C3.34412 2.30999 3.85068 2.02481 4.3991 1.8513C4.94752 1.67779 5.52593 1.61972 6.09789 1.68073C6.66986 1.74175 7.223 1.92053 7.72248 2.20582C8.22196 2.49111 8.65696 2.87673 9.00009 3.3384C9.3447 2.88008 9.7802 2.49783 10.2793 2.21557C10.7785 1.93331 11.3305 1.75711 11.9009 1.698C12.4712 1.63889 13.0477 1.69815 13.5941 1.87206C14.1405 2.04597 14.6451 2.33079 15.0764 2.7087C15.5077 3.08661 15.8563 3.54947 16.1004 4.06831C16.3446 4.58715 16.479 5.1508 16.4953 5.72399C16.5117 6.29718 16.4095 6.86756 16.1952 7.39944C15.9809 7.93132 15.6592 8.41325 15.2501 8.81507"
                            :stroke="
                                project.isLikedByUser?.isLiked
                                    ? '#F1416C'
                                    : '#29419B'
                            "
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>
                    {{
                        project.isLikedByUser?.isLiked
                            ? $t("Register.saved2")
                            : $t("Register.save")
                    }}
                </Button>
                <Button
                    class="btn-view text-center block;"
                    buttonStyle="blue_view"
                    size="fit_2"
                    type="link"
                    :href="route('project.show', project.slug)"
                >
                    {{ $t("Register.view_details") }}</Button
                >
            </div>
        </div>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";
import ContentCard from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import { Inertia } from "@inertiajs/inertia";
import { useForm } from "@inertiajs/inertia-vue3";

export default {
    props: ["project"],

    data() {
        return {
            value: [],
            checkstate: false,
            color_svg: "rgba(241, 65, 108, 0.2)",
            form: useForm({}),
        };
    },
    components: {
        Badge,
        ContentCard,
        Button,
    },
    methods: {
        saveProject() {
            this.form.post(
                route("client.projects.toggle-save", this.project.slug),

                {
                    preserveState: true,
                    preserveScroll: true,
                    onSuccess: () => {
                        this.project.isLikedByUser.isLiked =
                            !this.project.isLikedByUser.isLiked;
                    },
                }
            );
        },
    },
    mounted() {},
};
</script>
<style scoped>
.cont-main svg {
    margin-top: 2px;
}

.sar {
    color: black !important;
    font-size: 14px;
    line-height: 30px;
}

/* .btn-last svg {
    margin-left: 1px;
} */

.Rete_span {
    border: 2px solid #ebf0fe;
}
.amount {
    font-size: 12px !important;
    color: #aaaaaa !important;
    margin-right: 8px;
}
.span-divs {
    background-color: rgba(241, 65, 108, 0.2) !important;
    color: #f1416c !important;
}
</style>
