<template>
    <AppLayout :title="project.title">
        <div class="container pt-10 pb-20 overflow-y-auto max-w-7xl">
            <Breadcrumbs class="pt-8" :breadcrumbs="breadcrumbs" />
            <div class="max-w-[1440px] mt-8">
                <div class="flex flex-col w-full gap-5 mb-10 md:flex-row">
                    <div
                        class="flex flex-col flex-1 w-full max-w-[800px] gap-5"
                    >
                        <!-- <General :service="service" />
                        <Tiers :service="service" />
                        <Reviews :reviews="reviews" /> -->
                        <Project
                            v-if="project"
                            :project="project"
                            :languages="languages"
                            :levelsOfExperience="levelsOfExperience"
                        />
                    </div>
                    <div
                        class="flex flex-col w-full gap-5 md:max-w-[250px] lg:max-w-xs"
                    >
                        <ProviderInfo
                            :user="project.user"
                            :address="project.user.location?.address"
                            :project="project"
                        />
                        <Card :title="$t('Register.project_analytics')">
                            <div class="flex flex-col w-full gap-2.5">
                                <div
                                    class="bg-blue-200 p-2.5 flex flex-col gap-2.5 rounded-lg"
                                >
                                    <div
                                        class="text-sm font-medium text-gray-300"
                                    >
                                        {{ $t("Register.total_proposals") }}
                                        <span class="block mt-1 text-green-300">
                                            {{ project.proposals_count }}
                                        </span>
                                    </div>
                                </div>
                                <Button
                                    v-if="
                                        $page.props.current_user?.is_engineer ||
                                        $page.props.current_user?.is_firm
                                    "
                                    :href="
                                        route(
                                            $page.props.current_user
                                                ?.is_engineer
                                                ? 'engineer.proposals.create'
                                                : 'firm.proposals.create',
                                            project.slug
                                        )
                                    "
                                    size="full-sm"
                                >
                                    <span
                                        class="flex items-center justify-center w-full"
                                    >
                                        {{ $t("Register.add_my_proposal") }}
                                    </span>
                                </Button>
                                <Button
                                    :class="
                                        project.isLikedByUser?.isLiked
                                            ? 'span-div'
                                            : ''
                                    "
                                    @click="saveProject"
                                    :disabled="form.processing"
                                    buttonStyle="white_save"
                                    size="full-sm"
                                    class="ml-1"
                                >
                                    <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.saved")
                                            : $t("Register.save")
                                    }}
                                </Button>
                            </div>
                        </Card>
                        <Card
                            :title="$t('Register.share')"
                            class="!overflow-auto"
                        >
                            <ul>
                                <ProfileLink
                                    copy
                                    :link="route('project.show', project.slug)"
                                    :type="'muhandisin'"
                                />
                            </ul>
                        </Card>
                    </div>
                </div>
            </div>
            <template v-if="relatedProjects.length > 0">
                <hr class="mb-5 border-gray-200" />
                <section class="flex flex-col w-full gap-5">
                    <h2 class="text-2xl font-semibold text-blue-300">
                        {{ $t("Register.similar_projects") }}
                    </h2>
                    <RelatedProjects
                        v-for="relatedProject in relatedProjects"
                        :key="relatedProject.id"
                        :project="relatedProject"
                    />
                </section>
            </template>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import SingleService from "@/components/Services/SingleService.vue";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import ProfileLink from "@/components/General/ProfileLink.vue";
import General from "@/components/Services/General";
import Tiers from "@/components/Services/Tiers";
import Reviews from "@/components/Services/Reviews";
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
import { computed, ref } from "@vue/runtime-core";
import Modal from "@/components/General/Modal.vue";
import RelatedProjects from "@/components/Projects/ClientCard";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import ProviderInfo from "@/components/Projects/ProviderInfo";
import TierPanel from "@/components/Services/TierPanel";
import Project from "@/components/Projects/SingleProject.vue";

export default {
    props: {
        project: Object,
        relatedProjects: Array,
        languages: Array,
        levelsOfExperience: Array,
    },
    data() {
        return {
            breadcrumbs: [
                {
                    name: "bread.explore_prjects",
                    url: route("projects.index"),
                },
                {
                    name: this.project.title,
                    url: null,
                },
            ],
            form: useForm({}),
            color_svg: "rgba(241, 65, 108, 0.2)",
        };
    },
    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;
                    },
                }
            );
        },
    },
    components: {
        AppLayout,
        Breadcrumbs,
        SingleService,
        Card,
        Button,
        ProfileLink,
        Modal,
        General,
        Tiers,
        RelatedProjects,
        TabGroup,
        TabList,
        Tab,
        TabPanels,
        TabPanel,
        Reviews,
        ProviderInfo,
        TierPanel,
        Project,
    },
};
</script>

<style>
.span-div {
    background-color: rgba(241, 65, 108, 0.2) !important;
    color: #f1416c !important;
}
</style>
