<template>
    <AppLayout
        :title="
            engineer.user.is_current_user
                ? 'My profile'
                : `${engineer.name}'s profile`
        "
    >
        <div class="container py-10 max-w-7xl">
            <div
                class="flex flex-col flex-1 w-full gap-5 lg:flex-row max-w-7xl"
            >
                <div class="flex flex-col flex-1 w-full gap-5">
                    <TabGroup>
                        <Card :padding="false">
                            <div class="relative w-full">
                                <img
                                    class="object-cover w-full max-h-48 rounded-t-2xl"
                                    :src="engineer.user.cover_photo_path"
                                    alt="profile header"
                                />
                                <div
                                    class="border-[3px] min-w-[140px] select-none flex-col font-medium absolute top-0 right-0 mx-7 my-9 border-blue-200 bg-blue-300 py-[12px] px-[15px] inline-flex rounded-2xl gap-1"
                                >
                                    <span class="text-sm text-white">
                                        {{
                                            engineer.level_of_experience[
                                                `name_${$i18n.locale}`
                                            ]
                                        }}
                                    </span>
                                    <span class="text-xs text-gray-200">
                                        {{
                                            engineer.level_of_experience[
                                                `sub_${$i18n.locale}`
                                            ]
                                        }}
                                    </span>
                                </div>
                            </div>
                            <div class="container">
                                <div class="relative h-[60px]">
                                    <div
                                        class="flex items-center justify-start select-none -translate-y-[90px] absolute top-0 left-0"
                                    >
                                        <span
                                            class="p-[11px] bg-white rounded-full overflow-hidden"
                                        >
                                            <img
                                                class="object-cover aspect-square w-[150px] h-[150px] rounded-full overflow-hidden"
                                                :src="
                                                    engineer.user
                                                        .profile_photo_url
                                                "
                                                alt="profile image"
                                            />
                                        </span>
                                    </div>
                                </div>
                                <div class="flex flex-col justify-center mt-5">
                                    <div
                                        class="flex w-full flex-col-reverse lg:flex-row gap-2 lg:items-center justify-between mb-2.5"
                                    >
                                        <div
                                            class="flex justify-start flex-1 gap-2"
                                        >
                                            <h2
                                                class="flex items-center justify-start gap-2 font-medium text-gray-300 line-clamp-1 overflow-ellipsis sm:text-xl"
                                            >
                                                {{ engineer.name }}
                                            </h2>
                                            <span
                                                v-if="engineer.verified"
                                                class="flex items-center justify-start gap-0.5 select-none cursor-default text-[#50CD89] text-2xs font-bold uppercase"
                                            >
                                                <svg
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 18 18"
                                                    fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <path
                                                        d="M6.75 9L8.25 10.5L11.25 7.5"
                                                        stroke="#50CD89"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M9.00012 2.25C10.752 3.79993 13.0385 4.60692 15.3751 4.5C15.7153 5.65726 15.8194 6.8711 15.6812 8.06939C15.543 9.26767 15.1654 10.426 14.5707 11.4754C13.976 12.5248 13.1764 13.444 12.2195 14.1784C11.2625 14.9127 10.1677 15.4472 9.00012 15.75C7.83253 15.4472 6.73773 14.9127 5.78078 14.1784C4.82383 13.444 4.02425 12.5248 3.42957 11.4754C2.83488 10.426 2.45722 9.26767 2.31903 8.06939C2.18083 6.8711 2.28493 5.65726 2.62512 4.5C4.96177 4.60692 7.24825 3.79993 9.00012 2.25"
                                                        stroke="#50CD89"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </svg>
                                                {{
                                                    $t(
                                                        "Register.verified_engineer"
                                                    )
                                                }}
                                            </span>
                                        </div>

                                        <div
                                            v-if="engineer.user.is_current_user"
                                            class="flex lg:w-auto w-full justify-end items-center gap-2.5"
                                        >
                                            <Button
                                                :href="
                                                    route(
                                                        'engineer.settings.show',
                                                        {
                                                            _query: {
                                                                tab: 'about',
                                                            },
                                                        }
                                                    )
                                                "
                                                type="link"
                                                size="sm"
                                                buttonStyle="outline"
                                            >
                                                <span
                                                    class="flex items-center justify-center gap-1"
                                                >
                                                    <svg
                                                        width="17"
                                                        height="16"
                                                        viewBox="0 0 17 16"
                                                        fill="none"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                    >
                                                        <path
                                                            d="M6.49984 4.66675H4.49984C4.14622 4.66675 3.80708 4.80722 3.55703 5.05727C3.30698 5.30732 3.1665 5.64646 3.1665 6.00008V12.0001C3.1665 12.3537 3.30698 12.6928 3.55703 12.9429C3.80708 13.1929 4.14622 13.3334 4.49984 13.3334H10.4998C10.8535 13.3334 11.1926 13.1929 11.4426 12.9429C11.6927 12.6928 11.8332 12.3537 11.8332 12.0001V10.0001"
                                                            stroke="#222222"
                                                            stroke-width="1.25"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M6.5 10.0001H8.5L14.1667 4.3334C14.4319 4.06819 14.5809 3.70848 14.5809 3.3334C14.5809 2.95833 14.4319 2.59862 14.1667 2.3334C13.9015 2.06819 13.5417 1.91919 13.1667 1.91919C12.7916 1.91919 12.4319 2.06819 12.1667 2.3334L6.5 8.00007V10.0001Z"
                                                            stroke="#222222"
                                                            stroke-width="1.25"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M11.1665 3.33325L13.1665 5.33325"
                                                            stroke="#222222"
                                                            stroke-width="1.25"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </svg>

                                                    {{ $t("Register.edit") }}
                                                </span>
                                            </Button>
                                        </div>
                                    </div>

                                    <TaglineManager
                                        v-model:engineer="engineer"
                                    />
                                    <LocationManager
                                        v-model:engineer="engineer"
                                    />
                                    <PhoneNumberManager
                                        v-model:engineer="engineer"
                                    />
                                    <CategoriesManager
                                        v-model:engineer="engineer"
                                    />
                                    <RatesManager v-model:engineer="engineer" />
                                </div>
                            </div>
                            <TabList class="container flex gap-1 mt-5">
                                <Tab
                                    class="px-3 py-4 font-semibold focus:outline-none focus:border-none"
                                    as="button"
                                    v-slot="{ selected }"
                                >
                                    <span
                                        :class="[
                                            'py-4',
                                            selected
                                                ? 'text-blue-300 border-b-[3px] border-blue-300'
                                                : 'text-gray-200',
                                        ]"
                                    >
                                        {{ $t("Register.general") }}
                                    </span>
                                </Tab>
                                <Tab
                                    class="px-3 py-4 font-semibold focus:outline-none focus:border-none"
                                    as="button"
                                    v-slot="{ selected }"
                                >
                                    <span
                                        :class="[
                                            'py-4',
                                            selected
                                                ? 'text-blue-300 border-b-[3px] border-blue-300'
                                                : 'text-gray-200',
                                        ]"
                                    >
                                        {{ $t("Register.portfolio") }}
                                    </span>
                                </Tab>
                                <Tab
                                    class="px-3 py-4 font-semibold focus:outline-none focus:border-none"
                                    as="button"
                                    v-slot="{ selected }"
                                >
                                    <span
                                        :class="[
                                            'py-4',
                                            selected
                                                ? 'text-blue-300 border-b-[3px] border-blue-300'
                                                : 'text-gray-200',
                                        ]"
                                    >
                                        {{ $t("Register.services") }}
                                    </span>
                                </Tab>
                            </TabList>
                        </Card>
                        <TabPanels class="">
                            <TabPanel
                                as="div"
                                class="flex flex-col flex-1 gap-5"
                            >
                                <About :engineer="engineer" />
                                <Experience :engineer="engineer" />
                                <Education :engineer="engineer" />
                                <Certificates :engineer="engineer" />
                                <Skills :engineer="engineer" />
                                <Languages :engineer="engineer" />
                                <Reviews :engineer="engineer" />
                            </TabPanel>
                            <TabPanel as="div">
                                <Projects :engineer="engineer" />
                            </TabPanel>
                            <TabPanel as="div">
                                <Services
                                    :services="services"
                                    :engineer="engineer"
                                />
                            </TabPanel>
                        </TabPanels>
                    </TabGroup>
                </div>
                <div class="flex flex-col w-full gap-5 lg:flex-1 lg:max-w-xs">
                    <Card
                        v-if="
                            (!profileCompletion.done || !engineer.verified) &&
                            engineer.user.is_current_user
                        "
                        :title="$t('Register.complete_profile')"
                    >
                        <ul class="flex flex-col w-full">
                            <li>
                                <FormKit
                                    v-model="profileCompletion.experiences"
                                    :data-checked="
                                        profileCompletion.experiences
                                    "
                                    name="completion_experiences"
                                    disabled
                                    type="checkbox"
                                >
                                    <template #suffix>
                                        <label
                                            class="text-sm font-medium text-gray-200 transition-colors duration-200 ease-in-out select-none peer-checked:text-blue-300"
                                            :class="
                                                profileCompletion.experiences
                                                    ? 'line-through decoration-blue-300'
                                                    : null
                                            "
                                            for="completion_experiences"
                                            >{{
                                                $t("profile.experience")
                                            }}</label
                                        >
                                    </template>
                                </FormKit>
                            </li>
                            <li>
                                <FormKit
                                    v-model="profileCompletion.education"
                                    :data-checked="profileCompletion.education"
                                    name="completion_education"
                                    disabled
                                    type="checkbox"
                                >
                                    <template #suffix>
                                        <label
                                            class="text-sm font-medium text-gray-200 transition-colors duration-200 ease-in-out select-none peer-checked:text-blue-300"
                                            :class="
                                                profileCompletion.education
                                                    ? 'line-through decoration-blue-300'
                                                    : null
                                            "
                                            for="completion_education"
                                            >{{
                                                $t("profile.education")
                                            }}</label
                                        >
                                    </template>
                                </FormKit>
                            </li>
                            <li>
                                <FormKit
                                    v-model="profileCompletion.certificates"
                                    :data-checked="
                                        profileCompletion.certificates
                                    "
                                    name="completion_certificates"
                                    disabled
                                    type="checkbox"
                                >
                                    <template #suffix>
                                        <label
                                            class="text-sm font-medium text-gray-200 transition-colors duration-200 ease-in-out select-none peer-checked:text-blue-300"
                                            :class="
                                                profileCompletion.certificates
                                                    ? 'line-through decoration-blue-300'
                                                    : null
                                            "
                                            for="completion_certificates"
                                            >{{
                                                $t("profile.certificates")
                                            }}</label
                                        >
                                    </template>
                                </FormKit>
                            </li>
                            <li>
                                <FormKit
                                    v-model="profileCompletion.languages"
                                    :data-checked="profileCompletion.languages"
                                    name="completion_languages"
                                    disabled
                                    type="checkbox"
                                >
                                    <template #suffix>
                                        <label
                                            class="text-sm font-medium text-gray-200 transition-colors duration-200 ease-in-out select-none peer-checked:text-blue-300"
                                            :class="
                                                profileCompletion.languages
                                                    ? 'line-through decoration-blue-300'
                                                    : null
                                            "
                                            for="completion_languages"
                                            >{{
                                                $t("profile.langauges")
                                            }}</label
                                        >
                                    </template>
                                </FormKit>
                            </li>
                            <li>
                                <FormKit
                                    v-model="
                                        profileCompletion.portfolio_projects
                                    "
                                    :data-checked="
                                        profileCompletion.portfolio_projects
                                    "
                                    name="completion_portfolio"
                                    disabled
                                    type="checkbox"
                                >
                                    <template #suffix>
                                        <label
                                            class="text-sm font-medium text-gray-200 transition-colors duration-200 ease-in-out select-none peer-checked:text-blue-300"
                                            :class="
                                                profileCompletion.portfolio_projects
                                                    ? 'line-through decoration-blue-300'
                                                    : null
                                            "
                                            for="completion_portfolio"
                                            >{{
                                                $t("Register.portfolio")
                                            }}</label
                                        >
                                    </template>
                                </FormKit>
                            </li>
                            <li class="mb-5">
                                <p>{{ $t("profile.profile_completion") }}</p>
                                <p>
                                    {{
                                        profileCompletion.percentage.toFixed(2)
                                    }}%
                                </p>
                                <div
                                    class="w-full bg-blue-100 rounded-full h-1.5"
                                >
                                    <div
                                        class="bg-blue-300 h-1.5 rounded-full"
                                        :style="{
                                            width: `${profileCompletion.percentage}%`,
                                        }"
                                    ></div>
                                </div>
                            </li>
                            <li>
                                <Button
                                    :disabled="!profileCompletion.done"
                                    @click="completeProfile"
                                    type="button"
                                    size="full-sm"
                                >
                                    <span
                                        class="flex items-center justify-center w-full gap-1 text-center"
                                    >
                                        {{ $t("Register.complete_profile") }}
                                    </span>
                                </Button>
                            </li>
                        </ul>
                    </Card>
                    <Card v-if="engineer.socials" title="Register.social_links">
                        <template v-if="engineer.user.is_current_user" #actions>
                            <Button
                                :href="route('engineer.settings.show')"
                                type="link"
                                size="sm"
                                buttonStyle="outline"
                            >
                                <span
                                    class="flex items-center justify-center gap-1"
                                >
                                    <svg
                                        width="17"
                                        height="16"
                                        viewBox="0 0 17 16"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M6.49984 4.66675H4.49984C4.14622 4.66675 3.80708 4.80722 3.55703 5.05727C3.30698 5.30732 3.1665 5.64646 3.1665 6.00008V12.0001C3.1665 12.3537 3.30698 12.6928 3.55703 12.9429C3.80708 13.1929 4.14622 13.3334 4.49984 13.3334H10.4998C10.8535 13.3334 11.1926 13.1929 11.4426 12.9429C11.6927 12.6928 11.8332 12.3537 11.8332 12.0001V10.0001"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.5 10.0001H8.5L14.1667 4.3334C14.4319 4.06819 14.5809 3.70848 14.5809 3.3334C14.5809 2.95833 14.4319 2.59862 14.1667 2.3334C13.9015 2.06819 13.5417 1.91919 13.1667 1.91919C12.7916 1.91919 12.4319 2.06819 12.1667 2.3334L6.5 8.00007V10.0001Z"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M11.1665 3.33325L13.1665 5.33325"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>

                                    {{ $t("Register.edit") }}
                                </span>
                            </Button>
                        </template>
                        <ul class="flex flex-col w-full gap-5">
                            <li
                                v-for="social in socials"
                                :key="'link_' + social"
                            >
                                <ProfileLink
                                    :link="engineer.socials[social]?.link"
                                    :type="
                                        engineer.socials[social]?.provider ||
                                        social
                                    "
                                />
                            </li>
                        </ul>
                    </Card>
                    <Card title="Register.share" class="!overflow-auto">
                        <template v-if="engineer.user.is_current_user" #actions>
                            <Button
                                :href="route('engineer.settings.show')"
                                type="link"
                                size="sm"
                                buttonStyle="outline"
                            >
                                <span
                                    class="flex items-center justify-center gap-1"
                                >
                                    <svg
                                        width="17"
                                        height="16"
                                        viewBox="0 0 17 16"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M6.49984 4.66675H4.49984C4.14622 4.66675 3.80708 4.80722 3.55703 5.05727C3.30698 5.30732 3.1665 5.64646 3.1665 6.00008V12.0001C3.1665 12.3537 3.30698 12.6928 3.55703 12.9429C3.80708 13.1929 4.14622 13.3334 4.49984 13.3334H10.4998C10.8535 13.3334 11.1926 13.1929 11.4426 12.9429C11.6927 12.6928 11.8332 12.3537 11.8332 12.0001V10.0001"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.5 10.0001H8.5L14.1667 4.3334C14.4319 4.06819 14.5809 3.70848 14.5809 3.3334C14.5809 2.95833 14.4319 2.59862 14.1667 2.3334C13.9015 2.06819 13.5417 1.91919 13.1667 1.91919C12.7916 1.91919 12.4319 2.06819 12.1667 2.3334L6.5 8.00007V10.0001Z"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M11.1665 3.33325L13.1665 5.33325"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>

                                    {{ $t("Register.edit") }}
                                </span>
                            </Button>
                        </template>
                        <ul>
                            <ProfileLink
                                copy
                                :link="
                                    route(
                                        'engineer.profile.slugged',
                                        engineer.slug
                                    )
                                "
                                :type="'muhandisin'"
                            />
                        </ul>
                    </Card>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import CurrencySelect from "@/components/CurrencySelect";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import Badge from "@/components/General/Badge";
import TaglineManager from "./Partials/TaglineManager.vue";
import ProfileLink from "@/components/General/ProfileLink.vue";
import LocationManager from "./Partials/LocationManager.vue";
import PhoneNumberManager from "./Partials/PhoneNumberManager.vue";
import CategoriesManager from "./Partials/CategoriesManager.vue";
import RatesManager from "./Partials/RatesManager.vue";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import About from "./Partials/Cards/About.vue";
import Education from "./Partials/Cards/Education.vue";
import Experience from "./Partials/Cards/Experience.vue";
import Languages from "./Partials/Cards/Languages.vue";
import Skills from "./Partials/Cards/Skills.vue";
import Certificates from "./Partials/Cards/Certificates.vue";
import Projects from "./Partials/Cards/Projects.vue";
import Reviews from "./Partials/Cards/Reviews.vue";
import Services from "./Partials/Cards/Services.vue";
import { Inertia } from "@inertiajs/inertia";

export default {
    props: {
        engineer: Object,
        services: Array,
    },
    components: {
        AppLayout,
        CurrencySelect,
        Card,
        Button,
        Badge,
        TaglineManager,
        LocationManager,
        ProfileLink,
        PhoneNumberManager,
        CategoriesManager,
        RatesManager,
        TabGroup,
        TabList,
        Tab,
        TabPanels,
        TabPanel,
        About,
        Education,
        Experience,
        Skills,
        Certificates,
        Reviews,
        Projects,
        Languages,
        Services,
    },
    methods: {
        setCategories() {
            this.engineer.category = {
                id: 1,
                name: {
                    en: "Software Engineer",
                    ar: "مهندس برمجيات",
                },
            };
            this.engineer.sub_categories = [
                {
                    id: 1,
                    name: {
                        en: "Web Development",
                        ar: "تطوير الويب",
                    },
                },
                {
                    id: 2,
                    name: {
                        en: "Web Development",
                        ar: "تطوير الويب",
                    },
                },
                {
                    id: 3,
                    name: {
                        en: "Web Development",
                        ar: "تطوير الويب",
                    },
                },
            ];
        },
        setCurrency() {
            this.engineer.currency = {
                id: 1,
                code: "USD",
                name: {
                    en: "USD",
                    ar: "دولار أمريكي",
                },
            };
        },
        setLanguages() {
            this.engineer.languages = [
                {
                    id: 1,
                    name: {
                        en: "English",
                        ar: "الإنجليزية",
                    },
                    proficiency: {
                        id: 1,
                        name: {
                            en: "Fluent",
                            ar: "متقن",
                        },
                    },
                },
                {
                    id: 2,
                    name: {
                        en: "Arabic",
                        ar: "العربية",
                    },
                    proficiency: {
                        id: 1,
                        name: {
                            en: "Fluent",
                            ar: "متقن",
                        },
                    },
                },
            ];
        },
        setSocialLinks() {
            this.engineer.social_links = this.engineer.user.social_links;
        },
        setReviews() {
            this.engineer.reviews = [
                {
                    id: 1,
                    rating: 4.5,
                    project: {
                        id: 75486,
                        name: {
                            en: "KS graphics",
                            ar: "مشروع",
                        },
                    },
                    reviewer: {
                        id: 1,
                        name: "Jowairia Khalil",
                        avatar: "https://i.pravatar.cc/150?img=1",
                    },
                },
                {
                    id: 2,
                    rating: 4.5,
                    project: {
                        id: 94572,
                        name: {
                            en: "Muhandisin",
                            ar: "مشروع",
                        },
                    },
                    reviewer: {
                        id: 2,
                        name: "Omar Ashraf",
                        avatar: "https://i.pravatar.cc/150?img=3",
                    },
                },
                {
                    id: 3,
                    rating: 3.5,
                    project: {
                        id: 321547,
                        name: {
                            en: "KS graphics",
                            ar: "مشروع",
                        },
                    },
                    reviewer: {
                        id: 3,
                        name: "Omnia Samir",
                        avatar: "https://i.pravatar.cc/150?img=5",
                    },
                },
            ];
        },
        setPortfolioProjects() {
            this.engineer.portfolio_projects.forEach((project) => {
                project.skills = this.engineer.skills.slice(0, 5);
                project.images = [
                    {
                        id: 1,
                        url: "https://images.unsplash.com/photo-1554919700-69c4bb11dde5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXJjaGV0ZWN0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
                    },
                    {
                        id: 2,
                        url: "https://images.unsplash.com/photo-1612824534932-6f4115eb78d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YXJjaGV0ZWN0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
                    },
                    {
                        id: 3,
                        url: "https://images.unsplash.com/photo-1629540864718-c148c52750b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGFyY2hldGVjdHVyZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                    },
                ];
            });
        },
        completeProfile() {
            Inertia.post(
                route(
                    "engineer-profile-information.complete",
                    this.engineer.id
                ),
                {},
                {
                    preserveScroll: true,
                }
            );
        },
    },
    mounted() {
        // this.$inertia.visit(this.route("dashboard"));
        // this.setCategories();
        // this.setCurrency();
        // this.setSocialLinks();
        // this.setLanguages();
        // this.setReviews();
        // this.setPortfolioProjects();
    },
    data() {
        return {
            socials: ["facebook", "twitter", "instagram", "linkedin"],
        };
    },
    computed: {
        profileCompletion: function () {
            const completion = {
                experiences:
                    this.engineer.experiences.length > 0 ? true : false,
                education: this.engineer.educations.length > 0 ? true : false,
                certificates:
                    this.engineer.certificates.length > 0 ? true : false,
                languages:
                    this.engineer.languageMasteries.length > 0 ? true : false,
                portfolio_projects:
                    this.engineer.portfolio_projects.length > 0 ? true : false,
            };
            completion.total = Object.values(completion).length;
            completion.completed = Object.values(completion).filter(
                (item) => item == true
            ).length;
            completion.percentage =
                (completion.completed / completion.total) * 100;
            completion.done = completion.percentage == 100 ? true : false;
            return completion;
        },
    },
};
</script>
