<template>
    <Layout register title="Register">
        <div
            class="container flex flex-col items-center justify-start flex-1 py-5 overflow-hidden"
        >
            <Steps
                ref="steps"
                :currentStep="step"
                :steps="steps"
                @update="updateStep"
            />
            <Modal
                ref="confirmation_modal"
                size="lg"
                @closed="closedConfirmationModal"
            >
                <div class="flex flex-col items-center justify-center w-full">
                    <svg
                        class="mb-2.5"
                        fill="none"
                        height="101"
                        viewBox="0 0 101 101"
                        width="101"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M72.9406 2.5C69.9562 1.53125 67.4328 2.16406 65.4328 4.39063C64.1125 5.85938 63.5343 8.8125 62.7297 12.8984C62.5031 14.0469 62.2609 15.2812 61.9797 16.5703C61.6125 18.2734 61.1203 20.625 60.589 23.1641C59.3781 28.9609 57.8703 36.1797 57.3 38.0391L57.1203 38.6406C56.3781 41.1484 55.6984 42.9609 53.7297 43.2969C51.8156 43.1406 50.925 41.4688 49.9015 39.1172L49.6437 38.5391C48.8468 36.7578 46.4484 29.7578 44.5187 24.1406C43.6828 21.7031 42.9093 19.4453 42.339 17.8125C41.9015 16.5703 41.5109 15.375 41.1437 14.2656C39.839 10.3125 38.9015 7.45313 37.4093 6.16406C35.1515 4.20313 32.5734 3.89063 29.7297 5.21875C24.964 7.46094 27.0422 14.25 28.2765 18.2969L28.6125 19.4219C30.7062 26.5547 36.1593 41.8438 36.8547 43.3594C37.4406 44.6328 38.4797 47.7109 39.2453 49.9609L39.8468 51.7188C40.0343 52.2578 40.7687 53.9219 40.7687 53.9219L40.8234 54.0391L39.7687 54.6094C38.7922 51.9609 37.7922 49.2969 37.1359 47.5938C35.5578 43.5312 31.9406 42.8203 28.7453 44.0234C25.1984 45.3438 24.9718 49.625 25.7843 52.0312C26.2218 53.3125 27.8468 56.8047 29.5422 60.1484L28.1672 60.8906C27.6593 59.8281 27.1437 58.7969 26.6515 57.875C24.7765 54.3359 22.0422 53.7813 19.1593 55.0234C15.964 56.3906 16.1125 61.0938 16.964 63.2656C17.214 63.9062 17.7218 64.9766 18.3468 66.2109C18.3468 66.2109 21.0656 76.8984 22.9797 82.7422L23.0422 82.9609L23.1672 83.3125C23.464 84.1953 23.7375 84.9531 23.9718 85.4922C24.4562 86.7656 24.4718 86.9688 24.8468 87.6953C28.5031 94.8281 35.7687 98.8359 43.6672 98.8359C44.6672 98.8359 63.0578 100.734 72.2453 87.5391C73.6515 85.5234 75.089 82.4453 75.5109 75.5547C75.6672 72.9609 75.6047 69.2969 74.9797 66.7344C73.8781 62.2656 70.8156 59.3828 67.0187 57.4141L68.0109 52.25L68.0265 52.2031C68.0265 52.2031 68.55 50.4609 68.6672 49.9063L69.0422 48.0938C69.5187 45.7656 70.175 42.5703 70.5968 41.2344C71.0968 39.6484 74.6125 23.7969 75.8078 16.4531L76.0031 15.2969C76.7297 11.125 77.9484 4.13281 72.9406 2.5Z"
                            fill="#FADCBC"
                        />
                        <path
                            d="M53.4561 53.2109C53.4561 53.2109 61.2217 54.5234 66.9482 57.3828L67.4873 54.7578C67.4873 54.7578 62.3857 52.4609 56.5264 51.3594C54.5576 50.9922 51.9951 50.2813 50.042 50.2813C46.7217 50.2813 43.5264 50.9766 41.292 52.3281L37.3545 44.4531C37.3545 44.4531 37.3623 45.2969 36.9639 45.5391C36.4639 45.8438 35.9326 45.4844 35.9326 45.4844C35.9014 45.4766 35.9014 45.5078 35.8857 45.5313C36.3701 46.1016 36.7998 46.7734 37.1279 47.6172C37.7217 49.1484 38.5889 51.4609 39.4717 53.8359C39.3076 54.0312 39.1279 54.2109 38.9951 54.4219C38.9951 54.4219 35.9717 58.7266 39.3076 63.1406C39.3076 63.1406 40.2998 64.7109 43.8701 65.7109C44.9014 69.4844 41.8779 71.0859 41.8779 71.0859C37.6436 73.2578 34.3311 68.8828 34.3311 68.8828C33.6514 68.2031 31.6123 64.3438 30.7842 62.7578L27.2607 55.4609C27.2607 55.4609 27.2295 56.2813 26.8232 56.5313C26.3232 56.8359 25.792 56.4766 25.792 56.4766C25.7764 56.4766 25.7764 56.5 25.7607 56.5078C26.0732 56.9063 26.3779 57.3438 26.6592 57.875C27.9717 60.3438 29.4482 63.5625 30.5654 66.0781V66.0469L31.0967 67.2734C33.1045 71.6563 32.5732 72.7891 32.5732 72.7891C31.9326 75.9141 28.2529 76.1484 28.2529 76.1484C24.7686 76.5313 22.3076 72.6953 22.3076 72.6953C21.4717 71.4219 18.3467 66.2031 18.3467 66.2031L19.8701 72.0078C21.6982 75.5703 23.8311 76.9063 23.8311 76.9063C28.2529 79.8828 32.3623 77.0938 32.3623 77.0938C33.8857 75.9766 34.2607 74.4766 34.2607 74.4766C34.5029 73.5938 34.5029 72.6719 34.3545 71.7734C38.417 75.3828 42.6514 73.4219 42.6514 73.4219C46.2451 71.5 46.3232 67.875 46.1357 66.1875C46.6592 66.2734 47.2139 66.3438 47.8232 66.3984C50.8467 66.6641 52.7373 66.8281 54.5889 67.3672C54.5889 67.3672 59.6826 68.8125 60.0889 72.1641C60.0889 72.1641 60.1436 73.6797 59.2373 75.5078C59.2373 75.5078 58.7686 77.0078 59.7217 77.3281C60.2139 77.4922 61.4092 77.1797 62.1279 76.4922C62.1279 76.4922 62.9873 75.8047 63.3232 74.0469C63.3232 74.0469 64.1436 71.4219 61.6123 68.6719C61.6123 68.6719 59.8857 66.6328 57.3779 65.7578C54.7061 64.8281 53.7529 64.4297 49.3232 63.9922C49.3232 63.9922 44.5576 63.6797 41.6592 61.6172C41.6592 61.6172 39.2529 59.7344 41.0654 56.6172C41.0498 56.6094 43.7451 51.8125 53.4561 53.2109Z"
                            fill="#E39E49"
                        />
                        <path
                            d="M72.9406 2.5C69.9562 1.53125 67.4328 2.16406 65.4328 4.39063C64.1125 5.85938 63.5343 8.8125 62.7297 12.8984C62.5031 14.0469 62.2609 15.2812 61.9797 16.5703C61.6125 18.2734 61.1203 20.625 60.589 23.1641C59.3781 28.9609 57.8703 36.1797 57.3 38.0391L57.1203 38.6406C56.3781 41.1484 55.6984 42.9609 53.7297 43.2969C51.8156 43.1406 50.925 41.4688 49.9015 39.1172L49.6437 38.5391C48.8468 36.7578 46.4484 29.7578 44.5187 24.1406C43.6828 21.7031 42.9093 19.4453 42.339 17.8125C41.9015 16.5703 41.5109 15.375 41.1437 14.2656C39.839 10.3125 38.9015 7.45313 37.4093 6.16406C35.1515 4.20313 32.5734 3.89063 29.7297 5.21875C24.964 7.46094 27.0422 14.25 28.2765 18.2969L28.6125 19.4219C30.7062 26.5547 36.1593 41.8438 36.8547 43.3594C37.4406 44.6328 38.4797 47.7109 39.2453 49.9609L39.8468 51.7188C40.0343 52.2578 40.7687 53.9219 40.7687 53.9219L40.8234 54.0391L39.7687 54.6094C38.7922 51.9609 37.7922 49.2969 37.1359 47.5938C35.5578 43.5312 31.9406 42.8203 28.7453 44.0234C25.1984 45.3438 24.9718 49.625 25.7843 52.0312C26.2218 53.3125 27.8468 56.8047 29.5422 60.1484L28.1672 60.8906C27.6593 59.8281 27.1437 58.7969 26.6515 57.875C24.7765 54.3359 22.0422 53.7813 19.1593 55.0234C15.964 56.3906 16.1125 61.0938 16.964 63.2656C17.214 63.9062 17.7218 64.9766 18.3468 66.2109C18.3468 66.2109 21.0656 76.8984 22.9797 82.7422L23.0422 82.9609L23.1672 83.3125C23.464 84.1953 23.7375 84.9531 23.9718 85.4922C24.4562 86.7656 24.4718 86.9688 24.8468 87.6953C28.5031 94.8281 35.7687 98.8359 43.6672 98.8359C44.6672 98.8359 63.0578 100.734 72.2453 87.5391C73.6515 85.5234 75.089 82.4453 75.5109 75.5547C75.6672 72.9609 75.6047 69.2969 74.9797 66.7344C73.8781 62.2656 70.8156 59.3828 67.0187 57.4141L69.0422 48.0938C69.5187 45.7656 70.175 42.5703 70.5968 41.2344C71.0968 39.6484 74.6125 23.7969 75.8078 16.4531L76.0031 15.2969C76.7297 11.125 77.9484 4.13281 72.9406 2.5Z"
                            fill="#FADCBC"
                        />
                        <path
                            d="M53.4561 53.2109C53.4561 53.2109 61.292 54.5625 67.0186 57.4141L67.5889 54.7891C67.5889 54.7891 62.3857 52.4609 56.5342 51.3594C54.5654 50.9922 52.0029 50.2813 50.0498 50.2813C46.7295 50.2813 43.5342 50.9766 41.2998 52.3281L37.3623 44.4531C37.3623 44.4531 37.3701 45.2969 36.9717 45.5391C36.4717 45.8438 35.9404 45.4844 35.9404 45.4844C35.9092 45.4766 35.9092 45.5078 35.8936 45.5313C36.3779 46.1016 36.8076 46.7734 37.1357 47.6172C37.7295 49.1484 38.5967 51.4609 39.4795 53.8359C39.3154 54.0312 39.1357 54.2109 39.0029 54.4219C39.0029 54.4219 35.9795 58.7266 39.3154 63.1406C39.3154 63.1406 40.3076 64.7109 43.8779 65.7109C44.9092 69.4844 41.8857 71.0859 41.8857 71.0859C37.6514 73.2578 34.3389 68.8828 34.3389 68.8828C33.6592 68.2031 31.6201 64.3438 30.792 62.7578L27.2686 55.4609C27.2686 55.4609 27.2373 56.2813 26.8311 56.5313C26.3311 56.8359 25.7998 56.4766 25.7998 56.4766C25.7842 56.4766 25.7842 56.5 25.7686 56.5078C26.0811 56.9063 26.3857 57.3438 26.667 57.875C27.9795 60.3438 29.4561 63.5625 30.5732 66.0781V66.0469L31.1045 67.2734C33.1123 71.6563 32.5811 72.7891 32.5811 72.7891C31.9404 75.9141 28.2607 76.1484 28.2607 76.1484C24.7764 76.5313 22.3154 72.6953 22.3154 72.6953C21.4795 71.4219 18.3545 66.2031 18.3545 66.2031L19.8779 72.0078C21.7061 75.5703 23.8389 76.9063 23.8389 76.9063C28.2607 79.8828 32.3701 77.0938 32.3701 77.0938C33.8936 75.9766 34.2686 74.4766 34.2686 74.4766C34.5107 73.5938 34.5107 72.6719 34.3623 71.7734C38.4248 75.3828 42.6592 73.4219 42.6592 73.4219C46.2529 71.5 46.3311 67.875 46.1436 66.1875C46.667 66.2734 47.2217 66.3438 47.8311 66.3984C50.8545 66.6641 52.7451 66.8281 54.5967 67.3672C54.5967 67.3672 59.6904 68.8125 60.0967 72.1641C60.0967 72.1641 60.1514 73.6797 59.2451 75.5078C59.2451 75.5078 58.7764 77.0078 59.7295 77.3281C60.2217 77.4922 61.417 77.1797 62.1357 76.4922C62.1357 76.4922 62.9951 75.8047 63.3311 74.0469C63.3311 74.0469 64.1514 71.4219 61.6201 68.6719C61.6201 68.6719 59.8936 66.6328 57.3857 65.7578C54.7139 64.8281 53.7607 64.4297 49.3311 63.9922C49.3311 63.9922 44.5654 63.6797 41.667 61.6172C41.667 61.6172 39.2607 59.7344 41.0732 56.6172C41.0498 56.6094 43.7451 51.8125 53.4561 53.2109Z"
                            fill="#DBA689"
                        />
                    </svg>

                    <h2
                        class="text-2xl text-center text-blue-300 font-medium mb-2.5"
                    >
                        Request submitted
                    </h2>
                    <p
                        class="mb-6 text-sm text-center text-gray-200 max-w-[410px]"
                    >
                        Thank you for appling to Muhandisin, Our team will send
                        an invitation link to your email asap.
                    </p>
                    <div class="flex items-center justify-center w-full">
                        <JetButton size="md" @click="closeConfirmationModal"
                            >Okay
                        </JetButton>
                    </div>
                </div>
            </Modal>
            <Modal ref="map_modal" size="2xl">
                <div class="w-full h-[400px]">
                    <BasicMap />
                </div>
                <div class="flex items-center justify-center w-full mt-6">
                    <JetButton size="md" @click="closeMapModal"
                        >Confirm location
                    </JetButton>
                </div>
            </Modal>
            <section class="flex flex-1 w-full pt-10">
                <FormKit
                    :actions="false"
                    name="register_engineer"
                    type="form"
                    @submit="submit"
                >
                    <div>
                        <FormKit :value="type" name="type" type="hidden" />
                        <section class="min-h-screen" v-show="step === 0">
                            <ul class="w-full px-8 mb-10 list-none">
                                <li
                                    class="before:content-['👍'] font-semibold text-2xl md:text-4xl text-gray-300 relative before:absolute before:top-1/2 before:-translate-y-1/2 before:right-full before:mx-1"
                                >
                                    {{ $t("Register.Select_cate") }}
                                </li>
                                <li
                                    class="text-sm font-medium text-gray-200 md:text-lg"
                                >
                                    {{ $t("Register.category") }}
                                </li>
                            </ul>
                            <div class="max-w-3xl mx-auto">
                                <FormKit name="categories" type="group">
                                    <template #default="{ state: { valid } }">
                                        <CategoriesRadioGroup
                                            :items="categories"
                                            :valid="valid"
                                            :buttonLabel="
                                                $t('Register.continue')
                                            "
                                            descriptionBy="description"
                                            name="categories"
                                            nameBy="name"
                                            @next="nextStep"
                                            @updated="updatedCategories"
                                        />
                                    </template>
                                </FormKit>
                            </div>
                        </section>

                        <section v-show="step === 1">
                            <ul class="w-full px-8 mb-10 list-none">
                                <li
                                    class="before:content-['👍'] font-semibold text-2xl md:text-4xl text-gray-300 relative before:absolute before:top-1/2 before:-translate-y-1/2 before:right-full before:mx-1"
                                >
                                    {{ $t("Register.Build") }}
                                </li>
                                <li
                                    class="text-sm font-medium text-gray-200 md:text-lg"
                                >
                                    {{ $t("Register.get_profile") }}
                                </li>
                            </ul>
                            <div class="max-w-3xl mx-auto">
                                <FormKit name="profile" type="group">
                                    <template #default="{ state: { valid } }">
                                        <template v-if="selectedCategory">
                                            <div
                                                v-if="
                                                    selectedCategory.sub_categories
                                                "
                                                class="bg-white border border-blue-300 rounded-[16px] p-[30px] mb-8"
                                            >
                                                <div
                                                    class="flex w-full items-start justify-between mb-2.5"
                                                >
                                                    <h4
                                                        class="text-lg font-medium text-blue-300"
                                                    >
                                                        {{
                                                            $t(
                                                                "Register.your_category"
                                                            )
                                                        }}
                                                    </h4>
                                                    <button
                                                        class="flex items-center justify-center gap-1 px-4 py-1 bg-white border border-gray-200 rounded-lg"
                                                        type="button"
                                                        @click="goToStep(0)"
                                                    >
                                                        <svg
                                                            fill="none"
                                                            height="16"
                                                            viewBox="0 0 17 16"
                                                            width="17"
                                                            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-linecap="round"
                                                                stroke-linejoin="round"
                                                                stroke-width="1.25"
                                                            />
                                                            <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-linecap="round"
                                                                stroke-linejoin="round"
                                                                stroke-width="1.25"
                                                            />
                                                            <path
                                                                d="M11.1665 3.33325L13.1665 5.33325"
                                                                stroke="#222222"
                                                                stroke-linecap="round"
                                                                stroke-linejoin="round"
                                                                stroke-width="1.25"
                                                            />
                                                        </svg>

                                                        {{
                                                            $t("Register.edit")
                                                        }}
                                                    </button>
                                                </div>
                                                <hr class="mb-5" />
                                                <div class="">
                                                    <div
                                                        class="border-[3px] border-blue-200 bg-blue-300 py-[12px] px-[15px] inline-flex rounded-2xl gap-2.5"
                                                    >
                                                        <svg
                                                            fill="none"
                                                            height="22"
                                                            viewBox="0 0 20 22"
                                                            width="20"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                        >
                                                            <circle
                                                                cx="10"
                                                                cy="11"
                                                                fill="#F5F7F9"
                                                                r="10"
                                                            />
                                                            <path
                                                                clip-rule="evenodd"
                                                                d="M14.6949 7.70519C14.8262 7.83646 14.8999 8.01448 14.8999 8.20009C14.8999 8.38571 14.8262 8.56372 14.6949 8.69499L9.09494 14.295C8.96367 14.4262 8.78566 14.4999 8.60004 14.4999C8.41443 14.4999 8.23641 14.4262 8.10514 14.295L5.30514 11.495C5.17763 11.363 5.10707 11.1862 5.10867 11.0026C5.11026 10.8191 5.18388 10.6435 5.31367 10.5137C5.44345 10.3839 5.61902 10.3103 5.80256 10.3087C5.9861 10.3071 6.16292 10.3777 6.29494 10.5052L8.60004 12.8103L13.7051 7.70519C13.8364 7.57397 14.0144 7.50024 14.2 7.50024C14.3857 7.50024 14.5637 7.57397 14.6949 7.70519Z"
                                                                fill="#29419B"
                                                                fill-rule="evenodd"
                                                            />
                                                        </svg>
                                                        <span
                                                            class="text-sm text-white"
                                                        >
                                                            {{
                                                                selectedCategory.name
                                                            }}
                                                        </span>
                                                    </div>
                                                    <div
                                                        class="flex w-full flex-wrap gap-2.5 mt-5"
                                                    >
                                                        <Badge
                                                            v-for="subCategory in selectedCategory.sub_categories"
                                                            :key="`selected_sub_category_${subCategory.id}`"
                                                            color="blue"
                                                        >
                                                            {{
                                                                subCategory.name
                                                            }}
                                                        </Badge>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>

                                        <ul class="muh-form-group">
                                            <li>
                                                <FormKit
                                                    id="name"
                                                    v-model="form.name"
                                                    :classes="{
                                                        outer: 'mb-0 max-w-[470px]',
                                                    }"
                                                    :label="
                                                        $t(
                                                            'Register.ente_Fullnam'
                                                        )
                                                    "
                                                    name="name"
                                                    placeholder="Ex. Ayman Salem ..."
                                                    required
                                                    type="text"
                                                    validation="required|length:2,100"
                                                    validation-label="full name"
                                                />
                                            </li>

                                            <li>
                                                <FormKit
                                                    id="email"
                                                    v-model="form.email"
                                                    :classes="{
                                                        outer: 'mb-0 max-w-[470px]',
                                                    }"
                                                    :label="
                                                        $t('Register.Email')
                                                    "
                                                    name="email"
                                                    placeholder="Ex. a.maged@gmail.com ..."
                                                    required
                                                    type="email"
                                                    validation="required|email"
                                                    validation-label="email"
                                                />
                                            </li>

                                            <li>
                                                <FormKit
                                                    id="tagline"
                                                    v-model="form.tagline"
                                                    :classes="{
                                                        outer: 'mb-0 max-w-[470px]',
                                                    }"
                                                    :help="
                                                        $t('Register.we_expect')
                                                    "
                                                    :label="
                                                        $t(
                                                            'Register.Profile_tagline'
                                                        )
                                                    "
                                                    name="Tagline"
                                                    placeholder="Ex, Senior software engineer  ..."
                                                    required
                                                    type="text"
                                                    validation="required|length:2,255"
                                                    validation-label="tagline"
                                                />
                                            </li>

                                            <li>
                                                <FormKit
                                                    id="about"
                                                    v-model="form.about"
                                                    :classes="{ outer: 'mb-0' }"
                                                    :label="
                                                        $t('Register.About_you')
                                                    "
                                                    name="About"
                                                    :placeholder="
                                                        $t('Register.let_me_')
                                                    "
                                                    required
                                                    rows="5"
                                                    type="textarea"
                                                    validation="required|length:2,3500"
                                                    validation-label="about"
                                                />
                                            </li>

                                            <li
                                                @click="getCurrentLocation"
                                                class="!cursor-pointer"
                                            >
                                                <FormKit
                                                    id="location"
                                                    v-model="
                                                        form.location.address
                                                    "
                                                    :classes="{
                                                        outer: 'mb-0',
                                                        input: '!cursor-pointer',
                                                    }"
                                                    disabled
                                                    :help="
                                                        $t(
                                                            'Register.your_locations'
                                                        )
                                                    "
                                                    :label="
                                                        $t(
                                                            'Register.your_location'
                                                        )
                                                    "
                                                    name="location"
                                                    placeholder="Ex. Alazizyah, Dammam ..."
                                                    required
                                                    type="text"
                                                    validation="required"
                                                    validation-label="address"
                                                >
                                                    <template #suffix>
                                                        <button
                                                            class="p-0.5"
                                                            type="button"
                                                            @click="
                                                                getCurrentLocation
                                                            "
                                                        >
                                                            <svg
                                                                fill="none"
                                                                height="16"
                                                                viewBox="0 0 16 16"
                                                                width="16"
                                                                xmlns="http://www.w3.org/2000/svg"
                                                            >
                                                                <path
                                                                    d="M8 9.33337C9.10457 9.33337 10 8.43794 10 7.33337C10 6.2288 9.10457 5.33337 8 5.33337C6.89543 5.33337 6 6.2288 6 7.33337C6 8.43794 6.89543 9.33337 8 9.33337Z"
                                                                    stroke="#AAAAAA"
                                                                    stroke-linecap="round"
                                                                    stroke-linejoin="round"
                                                                />
                                                                <path
                                                                    d="M11.7714 11.1047L8.94275 13.9334C8.69274 14.1831 8.35381 14.3234 8.00042 14.3234C7.64703 14.3234 7.30809 14.1831 7.05808 13.9334L4.22875 11.1047C3.4829 10.3588 2.97497 9.40852 2.76921 8.37396C2.56344 7.3394 2.66908 6.26706 3.07275 5.29254C3.47643 4.31801 4.16002 3.48508 5.03707 2.89905C5.91413 2.31303 6.94526 2.00024 8.00008 2.00024C9.05491 2.00024 10.086 2.31303 10.9631 2.89905C11.8402 3.48508 12.5237 4.31801 12.9274 5.29254C13.3311 6.26706 13.4367 7.3394 13.231 8.37396C13.0252 9.40852 12.5173 10.3588 11.7714 11.1047V11.1047Z"
                                                                    stroke="#AAAAAA"
                                                                    stroke-linecap="round"
                                                                    stroke-linejoin="round"
                                                                />
                                                            </svg>
                                                        </button>
                                                    </template>
                                                </FormKit>
                                            </li>

                                            <li>
                                                <Mobile
                                                    :placeholder="
                                                        $t(
                                                            'Register.ente_phone'
                                                        )
                                                    "
                                                    :label="
                                                        $t('Register.phone')
                                                    "
                                                    v-model:phone="form.phone"
                                                />
                                            </li>

                                            <li>
                                                <GeneralRadioGroupVue
                                                    v-model:selected="
                                                        form.experience
                                                    "
                                                    :items="levelsOfExperience"
                                                    :label="
                                                        $t(
                                                            'Register.Level_experience'
                                                        )
                                                    "
                                                    name="experience"
                                                />
                                            </li>

                                            <li>
                                                <ul
                                                    class="grid grid-cols-1 gap-5 mb-3 lg:grid-cols-3"
                                                >
                                                    <li>
                                                        <span
                                                            class="block mb-4 text-xs font-semibold text-gray-300"
                                                        >
                                                            {{
                                                                $t(
                                                                    "Register.rate_day"
                                                                )
                                                            }}
                                                        </span>
                                                        <FormKit
                                                            id="rates[daily]"
                                                            v-model="
                                                                form.rates.daily
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0',
                                                                input: 'text-[10px]',
                                                                label: '!text-gray-200',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.your_rate'
                                                                )
                                                            "
                                                            name="rates[daily]"
                                                            placeholder="5.00"
                                                            required
                                                            type="number"
                                                            validation="required|min:1.00"
                                                            validation-label="daily rate"
                                                        >
                                                            <template #prefix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{ "USD" }}
                                                                </span>
                                                            </template>
                                                            <template #suffix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{
                                                                        $t(
                                                                            "Register.day"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </template>
                                                        </FormKit>
                                                        <FormKit
                                                            v-model="
                                                                calculatedDailyRate
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0',
                                                                input: 'text-[10px]',
                                                                label: '!text-gray-200',
                                                            }"
                                                            disabled
                                                            :label="
                                                                $t(
                                                                    'Register.your_recieve'
                                                                )
                                                            "
                                                            placeholder="4.00"
                                                            required
                                                            type="number"
                                                        >
                                                            <template #prefix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{ "USD" }}
                                                                </span>
                                                            </template>
                                                            <template #suffix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{
                                                                        $t(
                                                                            "Register.day"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                    <li>
                                                        <span
                                                            class="block mb-4 text-xs font-semibold text-gray-300"
                                                        >
                                                            {{
                                                                $t(
                                                                    "Register.rate_month"
                                                                )
                                                            }}</span
                                                        >
                                                        <FormKit
                                                            id="rates[monthly]"
                                                            v-model="
                                                                form.rates
                                                                    .monthly
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0',
                                                                input: 'text-[10px]',
                                                                label: '!text-gray-200',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.your_rate'
                                                                )
                                                            "
                                                            name="rates[monthly]"
                                                            placeholder="1000.00"
                                                            required
                                                            type="number"
                                                            validation="required|min:1.00"
                                                            validation-label="monthly rate"
                                                        >
                                                            <template #prefix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{ "USD" }}
                                                                </span>
                                                            </template>
                                                            <template #suffix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{
                                                                        $t(
                                                                            "Register.month"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </template>
                                                        </FormKit>
                                                        <FormKit
                                                            v-model="
                                                                calculatedMonthlyRate
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0',
                                                                input: 'text-[10px]',
                                                                label: '!text-gray-200',
                                                            }"
                                                            disabled
                                                            :label="
                                                                $t(
                                                                    'Register.your_recieve'
                                                                )
                                                            "
                                                            placeholder="800.00"
                                                            required
                                                            type="number"
                                                        >
                                                            <template #prefix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{ "USD" }}
                                                                </span>
                                                            </template>
                                                            <template #suffix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{
                                                                        $t(
                                                                            "Register.month"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                    <li>
                                                        <span
                                                            class="block mb-4 text-xs font-semibold text-gray-300"
                                                        >
                                                            {{
                                                                $t(
                                                                    "Register.rate_year"
                                                                )
                                                            }}</span
                                                        >
                                                        <FormKit
                                                            id="rates[yearly]"
                                                            v-model="
                                                                form.rates
                                                                    .yearly
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0',
                                                                input: 'text-[10px]',
                                                                label: '!text-gray-200',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.your_rate'
                                                                )
                                                            "
                                                            name="rates[yearly]"
                                                            placeholder="20,000.00"
                                                            required
                                                            type="number"
                                                            validation="required|min:1.00"
                                                            validation-label="yearly rate"
                                                        >
                                                            <template #prefix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{ "USD" }}
                                                                </span>
                                                            </template>
                                                            <template #suffix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{
                                                                        $t(
                                                                            "Register.year"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </template>
                                                        </FormKit>
                                                        <FormKit
                                                            v-model="
                                                                calculatedYearlyRate
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0',
                                                                input: 'text-[10px]',
                                                                label: '!text-gray-200',
                                                            }"
                                                            disabled
                                                            :label="
                                                                $t(
                                                                    'Register.your_recieve'
                                                                )
                                                            "
                                                            placeholder="16,000.00"
                                                            required
                                                            type="number"
                                                        >
                                                            <template #prefix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{ "USD" }}
                                                                </span>
                                                            </template>
                                                            <template #suffix>
                                                                <span
                                                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                >
                                                                    {{
                                                                        $t(
                                                                            "Register.year"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                </ul>
                                                <a
                                                    class="text-[10px] font-medium underline"
                                                    rel="noopener noreferrer"
                                                    href="/terms"
                                                    target="_blank"
                                                >
                                                    {{
                                                        $t(
                                                            "Register.conditions"
                                                        )
                                                    }}
                                                </a>
                                            </li>

                                            <li>
                                                <Skills
                                                    v-model:value="form.skills"
                                                    :label="
                                                        $t('Register.set_skils')
                                                    "
                                                    :help="
                                                        $t(
                                                            'Register.first_fivesk'
                                                        )
                                                    "
                                                />
                                            </li>

                                            <li>
                                                <FormKit
                                                    id="engineering_licence_number"
                                                    v-model="
                                                        form.engineering_licence_number
                                                    "
                                                    :classes="{
                                                        outer: 'mb-0 max-w-[470px]',
                                                    }"
                                                    :label="
                                                        $t(
                                                            'Register.Engineering_lince'
                                                        )
                                                    "
                                                    name="engineering_licence_number"
                                                    :placeholder="
                                                        $t('Register.addlinces')
                                                    "
                                                    type="text"
                                                    validation="length:0,255"
                                                    validation-label="engineering licence number"
                                                />
                                            </li>

                                            <li>
                                                <span
                                                    class="block mb-4 text-xs font-semibold text-gray-300"
                                                    >{{
                                                        $t(
                                                            "Register.Verification_documents"
                                                        )
                                                    }}</span
                                                >
                                                <ul
                                                    class="flex flex-col w-full gap-4"
                                                >
                                                    <li
                                                        class="grid w-full grid-cols-3 gap-2 overflow-hidden auto-rows-auto"
                                                    >
                                                        <span
                                                            class="block my-auto text-xs font-semibold text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.license"
                                                                )
                                                            }}</span
                                                        >
                                                        <File
                                                            v-model:value="
                                                                form
                                                                    .verification_documents
                                                                    .engineering_licence
                                                            "
                                                            :maxFiles="1"
                                                            accept=".jpeg, .png, .doc, .docx, .pdf"
                                                            class="col-span-2"
                                                            name="engineering_license"
                                                        >
                                                            <template #noFiles>
                                                                <span
                                                                    class="formkit-no-files"
                                                                >
                                                                    <label
                                                                        class="!cursor-pointer min-w-[250px] items-center justify-start gap-2.5 flex p-[5px] rounded-[4px] border border-dashed border-gray-200 hover:brigtness-105"
                                                                        for="engineering_license"
                                                                    >
                                                                        <span
                                                                            class="h-8 flex text-xs items-center border rounded-[4px] border-gray-200 justify-center px-4 py-1.5 gap-2 text-gray-300 bg-white hover:brightness-95"
                                                                        >
                                                                            <svg
                                                                                fill="none"
                                                                                height="16"
                                                                                viewBox="0 0 14 16"
                                                                                width="14"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                            >
                                                                                <path
                                                                                    d="M4.24992 12.1667H9.74992V6.66667H13.4166L6.99992 0.25L0.583252 6.66667H4.24992V12.1667ZM6.99992 2.84417L8.98908 4.83333H7.91658V10.3333H6.08325V4.83333H5.01075L6.99992 2.84417ZM0.583252 14H13.4166V15.8333H0.583252V14Z"
                                                                                    fill="#AAAAAA"
                                                                                />
                                                                            </svg>
                                                                            Upload
                                                                            File
                                                                        </span>
                                                                        <span
                                                                            class="flex-1 text-xs text-gray-200 truncate whitespace-nowrap"
                                                                            >or
                                                                            Drop
                                                                            File
                                                                            here</span
                                                                        >
                                                                    </label>
                                                                </span>
                                                            </template>
                                                        </File>
                                                    </li>
                                                    <li
                                                        class="grid w-full grid-cols-3 gap-2 overflow-hidden auto-rows-auto"
                                                    >
                                                        <span
                                                            class="block my-auto text-xs font-semibold text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.degree"
                                                                )
                                                            }}</span
                                                        >
                                                        <File
                                                            v-model:value="
                                                                form
                                                                    .verification_documents
                                                                    .engineering_degree
                                                            "
                                                            :maxFiles="1"
                                                            accept=".jpeg, .png, .doc, .docx, .pdf"
                                                            class="col-span-2"
                                                            name="engineering_degree"
                                                        >
                                                            <template #noFiles>
                                                                <span
                                                                    class="formkit-no-files"
                                                                >
                                                                    <label
                                                                        class="!cursor-pointer min-w-[250px] items-center justify-start gap-2.5 flex p-[5px] rounded-[4px] border border-dashed border-gray-200 hover:brigtness-105"
                                                                        for="engineering_degree"
                                                                    >
                                                                        <span
                                                                            class="h-8 flex text-xs items-center border rounded-[4px] border-gray-200 justify-center px-4 py-1.5 gap-2 text-gray-300 bg-white hover:brightness-95"
                                                                        >
                                                                            <svg
                                                                                fill="none"
                                                                                height="16"
                                                                                viewBox="0 0 14 16"
                                                                                width="14"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                            >
                                                                                <path
                                                                                    d="M4.24992 12.1667H9.74992V6.66667H13.4166L6.99992 0.25L0.583252 6.66667H4.24992V12.1667ZM6.99992 2.84417L8.98908 4.83333H7.91658V10.3333H6.08325V4.83333H5.01075L6.99992 2.84417ZM0.583252 14H13.4166V15.8333H0.583252V14Z"
                                                                                    fill="#AAAAAA"
                                                                                />
                                                                            </svg>
                                                                            Upload
                                                                            File
                                                                        </span>
                                                                        <span
                                                                            class="flex-1 text-xs text-gray-200 truncate whitespace-nowrap"
                                                                            >or
                                                                            Drop
                                                                            File
                                                                            here</span
                                                                        >
                                                                    </label>
                                                                </span>
                                                            </template>
                                                        </File>
                                                    </li>
                                                    <li
                                                        class="grid w-full grid-cols-3 gap-2 overflow-hidden auto-rows-auto"
                                                    >
                                                        <span
                                                            class="block my-auto text-xs font-semibold text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.Passport"
                                                                )
                                                            }}</span
                                                        >
                                                        <File
                                                            v-model:value="
                                                                form
                                                                    .verification_documents
                                                                    .id
                                                            "
                                                            :maxFiles="1"
                                                            accept=".jpeg, .png, .doc, .docx, .pdf"
                                                            class="col-span-2"
                                                            name="engineer_id"
                                                            required
                                                        >
                                                            <template #noFiles>
                                                                <span
                                                                    class="formkit-no-files"
                                                                >
                                                                    <label
                                                                        class="!cursor-pointer min-w-[250px] items-center justify-start gap-2.5 flex p-[5px] rounded-[4px] border border-dashed border-gray-200 hover:brigtness-105"
                                                                        for="engineer_id"
                                                                    >
                                                                        <span
                                                                            class="h-8 flex text-xs items-center border rounded-[4px] border-gray-200 justify-center px-4 py-1.5 gap-2 text-gray-300 bg-white hover:brightness-95"
                                                                        >
                                                                            <svg
                                                                                fill="none"
                                                                                height="16"
                                                                                viewBox="0 0 14 16"
                                                                                width="14"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                            >
                                                                                <path
                                                                                    d="M4.24992 12.1667H9.74992V6.66667H13.4166L6.99992 0.25L0.583252 6.66667H4.24992V12.1667ZM6.99992 2.84417L8.98908 4.83333H7.91658V10.3333H6.08325V4.83333H5.01075L6.99992 2.84417ZM0.583252 14H13.4166V15.8333H0.583252V14Z"
                                                                                    fill="#AAAAAA"
                                                                                />
                                                                            </svg>
                                                                            Upload
                                                                            File
                                                                        </span>
                                                                        <span
                                                                            class="flex-1 text-xs text-gray-200 truncate whitespace-nowrap"
                                                                            >or
                                                                            Drop
                                                                            File
                                                                            here</span
                                                                        >
                                                                    </label>
                                                                </span>
                                                            </template>
                                                        </File>
                                                    </li>
                                                    <li
                                                        class="grid w-full grid-cols-3 gap-2 overflow-hidden auto-rows-auto"
                                                    >
                                                        <span
                                                            class="block my-auto text-xs font-semibold text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.upload_cv"
                                                                )
                                                            }}</span
                                                        >
                                                        <File
                                                            v-model:value="
                                                                form
                                                                    .verification_documents
                                                                    .cv
                                                            "
                                                            :maxFiles="1"
                                                            accept=".jpeg, .png, .doc, .docx, .pdf"
                                                            class="col-span-2"
                                                            name="cv"
                                                        >
                                                            <template #noFiles>
                                                                <span
                                                                    class="formkit-no-files"
                                                                >
                                                                    <label
                                                                        class="!cursor-pointer min-w-[250px] items-center justify-start gap-2.5 flex p-[5px] rounded-[4px] border border-dashed border-gray-200 hover:brigtness-105"
                                                                        for="cv"
                                                                    >
                                                                        <span
                                                                            class="h-8 flex text-xs items-center border rounded-[4px] border-gray-200 justify-center px-4 py-1.5 gap-2 text-gray-300 bg-white hover:brightness-95"
                                                                        >
                                                                            <svg
                                                                                fill="none"
                                                                                height="16"
                                                                                viewBox="0 0 14 16"
                                                                                width="14"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                            >
                                                                                <path
                                                                                    d="M4.24992 12.1667H9.74992V6.66667H13.4166L6.99992 0.25L0.583252 6.66667H4.24992V12.1667ZM6.99992 2.84417L8.98908 4.83333H7.91658V10.3333H6.08325V4.83333H5.01075L6.99992 2.84417ZM0.583252 14H13.4166V15.8333H0.583252V14Z"
                                                                                    fill="#AAAAAA"
                                                                                />
                                                                            </svg>
                                                                            Upload
                                                                            File
                                                                        </span>
                                                                        <span
                                                                            class="flex-1 text-xs text-gray-200 truncate whitespace-nowrap"
                                                                            >or
                                                                            Drop
                                                                            File
                                                                            here</span
                                                                        >
                                                                    </label>
                                                                </span>
                                                            </template>
                                                        </File>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <span
                                                    class="block mb-4 text-xs font-semibold text-gray-300"
                                                    >{{
                                                        $t(
                                                            "Register.social_links"
                                                        )
                                                    }}</span
                                                >
                                                <ul
                                                    class="opacity-75 flex flex-col gap-[5px] w-full"
                                                >
                                                    <li>
                                                        <FormKit
                                                            id="linkedin"
                                                            v-model="
                                                                form
                                                                    .social_links
                                                                    .linkedin
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0 max-w-[470px]',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.linkedin'
                                                                )
                                                            "
                                                            name="linkedin"
                                                            type="text"
                                                            validation="length:1,100"
                                                        >
                                                            <template #prefix>
                                                                <label
                                                                    class="text-xs text-gray-200 cursor-text"
                                                                    for="linkedin"
                                                                    >www.linkedin.com/in/</label
                                                                >
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                    <li>
                                                        <FormKit
                                                            id="facebook"
                                                            v-model="
                                                                form
                                                                    .social_links
                                                                    .facebook
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0 max-w-[470px]',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.facebook'
                                                                )
                                                            "
                                                            name="facebook"
                                                            type="text"
                                                            validation="length:1,100"
                                                        >
                                                            <template #prefix>
                                                                <label
                                                                    class="text-xs text-gray-200 cursor-text"
                                                                    for="facebook"
                                                                    >www.facebook.com/</label
                                                                >
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                    <li>
                                                        <FormKit
                                                            id="instagram"
                                                            v-model="
                                                                form
                                                                    .social_links
                                                                    .instagram
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0 max-w-[470px]',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.instagram'
                                                                )
                                                            "
                                                            name="instagram"
                                                            type="text"
                                                            validation="length:1,100"
                                                        >
                                                            <template #prefix>
                                                                <label
                                                                    class="text-xs text-gray-200 cursor-text"
                                                                    for="instagram"
                                                                    >www.instagram.com/</label
                                                                >
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                    <li>
                                                        <FormKit
                                                            id="twitter"
                                                            v-model="
                                                                form
                                                                    .social_links
                                                                    .twitter
                                                            "
                                                            :classes="{
                                                                outer: 'mb-0 max-w-[470px]',
                                                            }"
                                                            :label="
                                                                $t(
                                                                    'Register.twitter'
                                                                )
                                                            "
                                                            name="twitter"
                                                            type="text"
                                                            validation="length:1,100"
                                                        >
                                                            <template #prefix>
                                                                <label
                                                                    class="text-xs text-gray-200 cursor-text"
                                                                    for="twitter"
                                                                    >www.twitter.com/</label
                                                                >
                                                            </template>
                                                        </FormKit>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div
                                            class="flex items-center justify-end mt-5 gap-2.5"
                                        >
                                            <button
                                                class="px-2.5 py-2 gap-[5px] text-sm flex items-center justify-center font-medium text-gray-200"
                                                type="button"
                                                @click="previousStep"
                                            >
                                                <svg
                                                    fill="none"
                                                    height="16"
                                                    viewBox="0 0 16 16"
                                                    width="16"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <path
                                                        d="M12.6665 7.33332H4.75984L7.17984 4.42666C7.293 4.29051 7.34744 4.11499 7.33118 3.93871C7.31493 3.76242 7.22932 3.59982 7.09317 3.48666C6.95703 3.3735 6.78151 3.31906 6.60522 3.33531C6.42894 3.35156 6.26633 3.43718 6.15317 3.57332L2.81984 7.57332C2.79741 7.60514 2.77736 7.63856 2.75984 7.67332C2.75984 7.70666 2.75984 7.72666 2.71317 7.75999C2.68295 7.83643 2.66713 7.9178 2.6665 7.99999C2.66713 8.08218 2.68295 8.16355 2.71317 8.23999C2.71317 8.27332 2.71317 8.29332 2.75984 8.32666C2.77736 8.36142 2.79741 8.39484 2.81984 8.42666L6.15317 12.4267C6.21585 12.5019 6.29435 12.5624 6.38307 12.6039C6.47179 12.6454 6.56856 12.6668 6.6665 12.6667C6.82227 12.667 6.97323 12.6127 7.09317 12.5133C7.16068 12.4574 7.21648 12.3886 7.25738 12.3111C7.29828 12.2335 7.32348 12.1486 7.33153 12.0613C7.33958 11.974 7.33032 11.8859 7.30429 11.8022C7.27827 11.7185 7.23597 11.6407 7.17984 11.5733L4.75984 8.66666H12.6665C12.8433 8.66666 13.0129 8.59642 13.1379 8.4714C13.2629 8.34637 13.3332 8.1768 13.3332 7.99999C13.3332 7.82318 13.2629 7.65361 13.1379 7.52859C13.0129 7.40356 12.8433 7.33332 12.6665 7.33332Z"
                                                        fill="#AAAAAA"
                                                    />
                                                </svg>

                                                {{
                                                    $t(
                                                        "Register.back_to_categories"
                                                    )
                                                }}
                                            </button>
                                            <button
                                                :disabled="!valid"
                                                class="px-5 py-2 text-sm font-medium text-white bg-blue-300 border border-blue-200 rounded-lg disabled:bg-white disabled:text-gray-200 disabled:cursor-not-allowed"
                                                type="button"
                                                @click="nextStep"
                                            >
                                                {{ $t("Register.continue") }}
                                            </button>
                                        </div>
                                    </template>
                                </FormKit>
                            </div>
                        </section>

                        <section v-show="step === 2">
                            <ul class="w-full px-8 mb-10 list-none">
                                <li
                                    class="before:content-['👍'] font-semibold text-2xl md:text-4xl text-gray-300 relative before:absolute before:top-1/2 before:-translate-y-1/2 before:right-full before:mx-1"
                                >
                                    {{ $t("Register.submit_request") }}
                                </li>
                                <li
                                    class="text-sm font-medium text-gray-200 md:text-lg"
                                >
                                    {{ $t("Register.Our_team") }}
                                </li>
                            </ul>
                            <div class="max-w-3xl mx-auto">
                                <FormKit name="final_step" type="group">
                                    <template #default="{ state: { valid } }">
                                        <template v-if="selectedCategory">
                                            <div
                                                v-if="
                                                    selectedCategory.sub_categories
                                                "
                                                class="bg-white border border-blue-300 rounded-[16px] p-[30px] mb-8"
                                            >
                                                <div
                                                    class="flex w-full items-start justify-between mb-2.5"
                                                >
                                                    <h4
                                                        class="text-lg font-medium text-blue-300"
                                                    >
                                                        {{
                                                            $t(
                                                                "Register.your_category"
                                                            )
                                                        }}
                                                    </h4>
                                                    <button
                                                        class="flex items-center justify-center gap-1 px-4 py-1 bg-white border border-gray-200 rounded-lg"
                                                        type="button"
                                                        @click="goToStep(0)"
                                                    >
                                                        <svg
                                                            fill="none"
                                                            height="16"
                                                            viewBox="0 0 17 16"
                                                            width="17"
                                                            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-linecap="round"
                                                                stroke-linejoin="round"
                                                                stroke-width="1.25"
                                                            />
                                                            <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-linecap="round"
                                                                stroke-linejoin="round"
                                                                stroke-width="1.25"
                                                            />
                                                            <path
                                                                d="M11.1665 3.33325L13.1665 5.33325"
                                                                stroke="#222222"
                                                                stroke-linecap="round"
                                                                stroke-linejoin="round"
                                                                stroke-width="1.25"
                                                            />
                                                        </svg>

                                                        {{
                                                            $t("Register.edit")
                                                        }}
                                                    </button>
                                                </div>
                                                <hr class="mb-5" />
                                                <div class="">
                                                    <div
                                                        class="border-[3px] border-blue-200 bg-blue-300 py-[12px] px-[15px] inline-flex rounded-2xl gap-2.5"
                                                    >
                                                        <svg
                                                            fill="none"
                                                            height="22"
                                                            viewBox="0 0 20 22"
                                                            width="20"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                        >
                                                            <circle
                                                                cx="10"
                                                                cy="11"
                                                                fill="#F5F7F9"
                                                                r="10"
                                                            />
                                                            <path
                                                                clip-rule="evenodd"
                                                                d="M14.6949 7.70519C14.8262 7.83646 14.8999 8.01448 14.8999 8.20009C14.8999 8.38571 14.8262 8.56372 14.6949 8.69499L9.09494 14.295C8.96367 14.4262 8.78566 14.4999 8.60004 14.4999C8.41443 14.4999 8.23641 14.4262 8.10514 14.295L5.30514 11.495C5.17763 11.363 5.10707 11.1862 5.10867 11.0026C5.11026 10.8191 5.18388 10.6435 5.31367 10.5137C5.44345 10.3839 5.61902 10.3103 5.80256 10.3087C5.9861 10.3071 6.16292 10.3777 6.29494 10.5052L8.60004 12.8103L13.7051 7.70519C13.8364 7.57397 14.0144 7.50024 14.2 7.50024C14.3857 7.50024 14.5637 7.57397 14.6949 7.70519Z"
                                                                fill="#29419B"
                                                                fill-rule="evenodd"
                                                            />
                                                        </svg>
                                                        <span
                                                            class="text-sm text-white"
                                                        >
                                                            {{
                                                                selectedCategory.name
                                                            }}
                                                        </span>
                                                    </div>
                                                    <div
                                                        class="flex w-full flex-wrap gap-2.5 mt-5"
                                                    >
                                                        <Badge
                                                            v-for="subCategory in selectedCategory.sub_categories"
                                                            :key="`selected_sub_category_${subCategory.id}`"
                                                            color="blue"
                                                        >
                                                            {{
                                                                subCategory.name
                                                            }}
                                                        </Badge>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>

                                        <div
                                            class="bg-white border border-blue-300 rounded-[16px] p-[30px] mb-8"
                                        >
                                            <div
                                                class="flex w-full items-start justify-between mb-2.5"
                                            >
                                                <h4
                                                    class="text-lg font-medium text-blue-300"
                                                >
                                                    {{
                                                        $t(
                                                            "Register.profile_inf"
                                                        )
                                                    }}
                                                </h4>
                                                <button
                                                    class="flex items-center justify-center gap-1 px-4 py-1 bg-white border border-gray-200 rounded-lg"
                                                    type="button"
                                                    @click="goToStep(1)"
                                                >
                                                    <svg
                                                        fill="none"
                                                        height="16"
                                                        viewBox="0 0 17 16"
                                                        width="17"
                                                        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-linecap="round"
                                                            stroke-linejoin="round"
                                                            stroke-width="1.25"
                                                        />
                                                        <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-linecap="round"
                                                            stroke-linejoin="round"
                                                            stroke-width="1.25"
                                                        />
                                                        <path
                                                            d="M11.1665 3.33325L13.1665 5.33325"
                                                            stroke="#222222"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                            stroke-width="1.25"
                                                        />
                                                    </svg>

                                                    {{ $t("Register.edit") }}
                                                </button>
                                            </div>
                                            <hr class="mb-5" />
                                            <ul
                                                class="flex flex-col w-full gap-5"
                                            >
                                                <li
                                                    class="grid grid-cols-2 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.Full_name"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{ form.name }}
                                                        </p>
                                                    </div>
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.profile_tagline"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{ form.tagline }}
                                                        </p>
                                                    </div>
                                                </li>

                                                <li
                                                    class="grid grid-cols-1 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.about"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{ form.about }}
                                                        </p>
                                                    </div>
                                                </li>

                                                <li
                                                    class="grid grid-cols-2 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.location"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            :title="
                                                                form.location
                                                                    .address
                                                            "
                                                            class="block text-[14px] text-blue-300 line-clamp-1"
                                                        >
                                                            {{
                                                                form.location
                                                                    .address
                                                            }}
                                                        </p>
                                                    </div>
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.phone_number"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{
                                                                formattedPhoneNumber
                                                            }}
                                                        </p>
                                                    </div>
                                                </li>

                                                <li
                                                    class="grid grid-cols-2 gap-2.5"
                                                >
                                                    <div
                                                        v-if="
                                                            selectedLevelOfExperience
                                                        "
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.level_of"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{
                                                                selectedLevelOfExperience[
                                                                    `name_${$i18n.locale}`
                                                                ]
                                                            }}
                                                            ({{
                                                                selectedLevelOfExperience[
                                                                    `sub_${$i18n.locale}`
                                                                ]
                                                            }})
                                                        </p>
                                                    </div>
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.Email"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{ form.email }}
                                                        </p>
                                                    </div>
                                                </li>

                                                <li
                                                    class="grid grid-cols-3 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.daily_rate"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{
                                                                form.rates.daily
                                                            }}
                                                            {{ "USD" }}
                                                            {{
                                                                $t(
                                                                    "Register.day"
                                                                )
                                                            }}
                                                        </p>
                                                    </div>
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.monthly_rate"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{
                                                                form.rates
                                                                    .monthly
                                                            }}
                                                            {{ "USD" }}
                                                            {{
                                                                $t(
                                                                    "Register.month"
                                                                )
                                                            }}
                                                        </p>
                                                    </div>
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.yearly"
                                                                )
                                                            }}</span
                                                        >
                                                        <p
                                                            class="block text-[14px] text-blue-300"
                                                        >
                                                            {{
                                                                form.rates
                                                                    .yearly
                                                            }}
                                                            {{ "USD" }}
                                                            {{
                                                                $t(
                                                                    "Register.year"
                                                                )
                                                            }}
                                                        </p>
                                                    </div>
                                                </li>

                                                <li
                                                    class="grid grid-cols-1 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.skills"
                                                                )
                                                            }}</span
                                                        >
                                                        <div
                                                            class="flex w-full flex-wrap gap-2.5"
                                                        >
                                                            <Badge
                                                                v-for="skill in selectedSkills"
                                                                :key="`selected_skills_${skill.id}`"
                                                                color="blue"
                                                            >
                                                                {{
                                                                    skill[
                                                                        `name_${$i18n.locale}`
                                                                    ]
                                                                }}
                                                            </Badge>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li
                                                    v-if="
                                                        form
                                                            .verification_documents
                                                            .engineering_license ||
                                                        form
                                                            .verification_documents
                                                            .cv ||
                                                        form
                                                            .verification_documents
                                                            .engineering_degree ||
                                                        form
                                                            .verification_documents
                                                            .id
                                                    "
                                                    class="grid grid-cols-1 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.verification"
                                                                )
                                                            }}</span
                                                        >
                                                        <div
                                                            class="flex w-full flex-wrap gap-2.5"
                                                        >
                                                            <template
                                                                v-for="(
                                                                    document,
                                                                    index
                                                                ) in form.verification_documents"
                                                                :key="`selected_document_${index}`"
                                                            >
                                                                <a
                                                                    v-if="
                                                                        document
                                                                    "
                                                                    :href="
                                                                        getPreviewFromFile(
                                                                            document
                                                                        )
                                                                    "
                                                                    :title="
                                                                        document.name
                                                                    "
                                                                    class="rounded-lg gap-1 min-h-[30px] bg-blue-200 px-[12px] py-1 max-w-[200px] text-xs overflow-hidden flex items-center justify-center text-gray-300"
                                                                    rel="noopener noreferrer"
                                                                    target="_blank"
                                                                >
                                                                    <span
                                                                        class="flex-1 line-clamp-1"
                                                                    >
                                                                        {{
                                                                            document.name
                                                                        }}
                                                                    </span>
                                                                </a>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li
                                                    class="grid grid-cols-1 gap-2.5"
                                                >
                                                    <div
                                                        class="flex flex-col w-full gap-1"
                                                    >
                                                        <span
                                                            class="block text-[14px] text-gray-200"
                                                            >{{
                                                                $t(
                                                                    "Register.social_links"
                                                                )
                                                            }}</span
                                                        >
                                                        <div
                                                            class="flex flex-col w-full gap-1"
                                                        >
                                                            <a
                                                                v-if="
                                                                    form
                                                                        .social_links
                                                                        .facebook
                                                                "
                                                                :href="`https://www.facebook.com/${form.social_links.facebook}`"
                                                                class="flex items-center gap-2.5 text-gray-300 text-xs py-1 px-2"
                                                                rel="noopener noreferrer"
                                                                target="_blank"
                                                            >
                                                                <svg
                                                                    fill="none"
                                                                    height="16"
                                                                    viewBox="0 0 16 16"
                                                                    width="16"
                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                >
                                                                    <path
                                                                        d="M4.6665 6.66667V9.33333H6.6665V14H9.33317V9.33333H11.3332L11.9998 6.66667H9.33317V5.33333C9.33317 5.15652 9.40341 4.98695 9.52843 4.86193C9.65346 4.7369 9.82303 4.66667 9.99984 4.66667H11.9998V2H9.99984C9.11578 2 8.26794 2.35119 7.64281 2.97631C7.01769 3.60143 6.6665 4.44928 6.6665 5.33333V6.66667H4.6665Z"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                </svg>
                                                                {{
                                                                    $t(
                                                                        "Register.your_facebook"
                                                                    )
                                                                }}
                                                            </a>
                                                            <a
                                                                v-if="
                                                                    form
                                                                        .social_links
                                                                        .instagram
                                                                "
                                                                :href="`https://www.instagram.com/${form.social_links.instagram}`"
                                                                class="flex items-center gap-2.5 text-gray-300 text-xs py-1 px-2"
                                                                rel="noopener noreferrer"
                                                                target="_blank"
                                                            >
                                                                <svg
                                                                    fill="none"
                                                                    height="16"
                                                                    viewBox="0 0 16 16"
                                                                    width="16"
                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                >
                                                                    <path
                                                                        d="M10.6665 2.66663H5.33317C3.86041 2.66663 2.6665 3.86053 2.6665 5.33329V10.6666C2.6665 12.1394 3.86041 13.3333 5.33317 13.3333H10.6665C12.1393 13.3333 13.3332 12.1394 13.3332 10.6666V5.33329C13.3332 3.86053 12.1393 2.66663 10.6665 2.66663Z"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                    <path
                                                                        d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                    <path
                                                                        d="M11 5V5.001"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                </svg>

                                                                {{
                                                                    $t(
                                                                        "Register.your_instagram"
                                                                    )
                                                                }}
                                                            </a>
                                                            <a
                                                                v-if="
                                                                    form
                                                                        .social_links
                                                                        .twitter
                                                                "
                                                                :href="`https://www.twitter.com/${form.social_links.twitter}`"
                                                                class="flex items-center gap-2.5 text-gray-300 text-xs py-1 px-2"
                                                                rel="noopener noreferrer"
                                                                target="_blank"
                                                            >
                                                                <svg
                                                                    fill="none"
                                                                    height="16"
                                                                    viewBox="0 0 16 16"
                                                                    width="16"
                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                >
                                                                    <path
                                                                        d="M13.9255 3.31614C13.333 3.60649 12.7523 3.7244 12.1479 3.90276C11.4836 3.1532 10.4988 3.11172 9.55255 3.46606C8.60627 3.8204 7.98647 4.68669 8.0001 5.68038V6.27292C6.07731 6.3221 4.36487 5.44632 3.25979 3.90276C3.25979 3.90276 0.781787 8.3071 5.62994 10.4207C4.52071 11.1596 3.41444 11.6579 2.07471 11.6058C4.03483 12.6741 6.17093 13.0415 8.02024 12.5046C10.1415 11.8884 11.8848 10.2986 12.5538 7.91721C12.7533 7.19293 12.8524 6.44467 12.8483 5.69341C12.8471 5.54587 13.743 4.05149 13.9255 3.31614Z"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                </svg>

                                                                {{
                                                                    $t(
                                                                        "Register.your_twitter"
                                                                    )
                                                                }}
                                                            </a>
                                                            <a
                                                                v-if="
                                                                    form
                                                                        .social_links
                                                                        .linkedin
                                                                "
                                                                :href="`https://www.linkedin.com/in/${form.social_links.linkedin}`"
                                                                class="flex items-center gap-2.5 text-gray-300 text-xs py-1 px-2"
                                                                rel="noopener noreferrer"
                                                                target="_blank"
                                                            >
                                                                <svg
                                                                    fill="none"
                                                                    height="16"
                                                                    viewBox="0 0 16 16"
                                                                    width="16"
                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                >
                                                                    <path
                                                                        d="M11.9998 2.66663H3.99984C3.26346 2.66663 2.6665 3.26358 2.6665 3.99996V12C2.6665 12.7363 3.26346 13.3333 3.99984 13.3333H11.9998C12.7362 13.3333 13.3332 12.7363 13.3332 12V3.99996C13.3332 3.26358 12.7362 2.66663 11.9998 2.66663Z"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                    <path
                                                                        d="M5.3335 7.33337V10.6667"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                    <path
                                                                        d="M5.3335 5.33337V5.34004"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                    <path
                                                                        d="M8 10.6667V7.33337"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                    <path
                                                                        d="M10.6667 10.6667V8.66671C10.6667 8.31309 10.5262 7.97395 10.2761 7.7239C10.0261 7.47385 9.68696 7.33337 9.33333 7.33337C8.97971 7.33337 8.64057 7.47385 8.39052 7.7239C8.14048 7.97395 8 8.31309 8 8.66671"
                                                                        stroke="#222222"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                    />
                                                                </svg>

                                                                {{
                                                                    $t(
                                                                        "Register.your_linkedIn"
                                                                    )
                                                                }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <FormKit
                                            id="terms_and_conditions"
                                            v-model="form.terms_and_conditions"
                                            validation="accepted"
                                            required
                                            type="checkbox"
                                            validation-label="Terms and conditions"
                                        >
                                            <template #suffix>
                                                <label
                                                    class="text-xs transition-colors duration-200 ease-in-out select-none peer-checked:text-blue-300"
                                                    for="terms_and_conditions"
                                                >
                                                    {{
                                                        $t(
                                                            "Register.continuing"
                                                        )
                                                    }}

                                                    <a
                                                        class="font-bold"
                                                        href="/terms"
                                                        rel="noopener noreferrer"
                                                        target="_blank"
                                                        >{{
                                                            $t("Register.terms")
                                                        }}</a
                                                    >
                                                    {{
                                                        $t(
                                                            "Register.acknowledge"
                                                        )
                                                    }}
                                                    <a
                                                        class="font-bold"
                                                        href="/privacy"
                                                        rel="noopener noreferrer"
                                                        target="_blank"
                                                        >{{
                                                            $t(
                                                                "Register.Privacy"
                                                            )
                                                        }}</a
                                                    >
                                                </label>
                                            </template>
                                        </FormKit>

                                        <div
                                            class="flex items-center justify-end mt-5 gap-2.5 form-small-button"
                                        >
                                            <button
                                                class="px-2.5 py-2 gap-[5px] text-sm flex items-center justify-center font-medium text-gray-200"
                                                type="button"
                                                @click="previousStep"
                                            >
                                                <svg
                                                    fill="none"
                                                    height="16"
                                                    viewBox="0 0 16 16"
                                                    width="16"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <path
                                                        d="M12.6665 7.33332H4.75984L7.17984 4.42666C7.293 4.29051 7.34744 4.11499 7.33118 3.93871C7.31493 3.76242 7.22932 3.59982 7.09317 3.48666C6.95703 3.3735 6.78151 3.31906 6.60522 3.33531C6.42894 3.35156 6.26633 3.43718 6.15317 3.57332L2.81984 7.57332C2.79741 7.60514 2.77736 7.63856 2.75984 7.67332C2.75984 7.70666 2.75984 7.72666 2.71317 7.75999C2.68295 7.83643 2.66713 7.9178 2.6665 7.99999C2.66713 8.08218 2.68295 8.16355 2.71317 8.23999C2.71317 8.27332 2.71317 8.29332 2.75984 8.32666C2.77736 8.36142 2.79741 8.39484 2.81984 8.42666L6.15317 12.4267C6.21585 12.5019 6.29435 12.5624 6.38307 12.6039C6.47179 12.6454 6.56856 12.6668 6.6665 12.6667C6.82227 12.667 6.97323 12.6127 7.09317 12.5133C7.16068 12.4574 7.21648 12.3886 7.25738 12.3111C7.29828 12.2335 7.32348 12.1486 7.33153 12.0613C7.33958 11.974 7.33032 11.8859 7.30429 11.8022C7.27827 11.7185 7.23597 11.6407 7.17984 11.5733L4.75984 8.66666H12.6665C12.8433 8.66666 13.0129 8.59642 13.1379 8.4714C13.2629 8.34637 13.3332 8.1768 13.3332 7.99999C13.3332 7.82318 13.2629 7.65361 13.1379 7.52859C13.0129 7.40356 12.8433 7.33332 12.6665 7.33332Z"
                                                        fill="#AAAAAA"
                                                    />
                                                </svg>

                                                {{
                                                    $t(
                                                        "Register.Back_to_porofile"
                                                    )
                                                }}
                                            </button>
                                            <FormKit
                                                type="submit"
                                                class="px-5 py-2 text-sm font-medium text-white bg-blue-300 border border-blue-200 rounded-lg disabled:bg-white disabled:text-gray-200 disabled:cursor-not-allowed"
                                                :disabled="
                                                    !valid || form.processing
                                                "
                                                :loading="form.processing"
                                            >
                                                {{
                                                    $t(
                                                        "Register.submit_request"
                                                    )
                                                }}
                                            </FormKit>
                                        </div>
                                    </template>
                                </FormKit>
                            </div>
                        </section>
                    </div>
                </FormKit>
            </section>
        </div>
    </Layout>
</template>

<script>
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
import Card from "@/Jetstream/AuthenticationCard";
import JetValidationErrors from "@/Jetstream/ValidationErrors";
import Layout from "@/Layouts/PromoSidebar";
import Button from "@/components/Button";
import Seperator from "@/components/Seperator";
import AccountTypesRadioGroup from "@/components/AccountTypesRadioGroup";
import JetButton from "@/Jetstream/Button";
import Steps from "@/components/General/Steps";
import Mobile from "@/components/Inputs/Mobile";
import GeneralRadioGroupVue from "@/components/Inputs/Selects/Radios/GeneralRadioGroup";
import CategoriesRadioGroup from "@/components/Inputs/Selects/Radios/CategoriesRadioGroup";
import OptionGroup from "@/components/Inputs/Selects/Checkboxes/Pills/OptionGroup";
import File from "@/components/Inputs/FileUploads/File";
import { TransitionRoot } from "@headlessui/vue";
import Badge from "@/components/General/Badge.vue";
import Modal from "@/components/General/Modal.vue";
import BasicMap from "@/components/Maps/Basic.vue";
import { currentLocation } from "@/composables/location";
import Skills from "@/components/Inputs/Selects/Checkboxes/Pills/Skills.vue";

export default {
    props: {
        type: String,
        levelsOfExperience: Array,
        categories: Array,
        skills: Array,
    },
    methods: {
        async submit() {
            try {
                const data = this.getFormFormat();
                this.form
                    .transform((formdata) => ({
                        ...data,
                    }))
                    .post(route("pending_engineer.request"), {
                        onSuccess: (res) => {
                            // this.openConfirmationModal();
                        },
                        onError: (errors) => {
                            console.error("error", errors);
                        },
                    });
            } catch (error) {
                console.log(error);
            }
        },
        updateStep(newStep) {
            this.step = newStep;
        },
        nextStep() {
            this.step++;
        },
        previousStep() {
            this.step > 0 ? this.step-- : null;
        },
        goToStep(step) {
            if (step < this.steps.length && step >= 0) {
                this.step = step;
            }
        },
        getCurrentLocation() {
            currentLocation().then((location) => {
                this.form.location.address = location.address;
                this.form.location.geo.lat = location.lat;
                this.form.location.geo.lng = location.lng;
            });
        },
        updatedCategories(res) {
            this.form.category_id = res.category;
            this.form.selected_sub_categories = res.subCategories;
            this.sub_categories = res.subCategories;
        },
        async getCategoryById(id) {
            const category = this.categories.find((category) => {
                return category.id == id;
            });
            return category;
        },
        getSubCategoriesByIds(category, ids) {
            return category?.descendants?.filter((category) =>
                ids.includes(category.id)
            );
        },
        toTop: function () {
            this.$nextTick(() => {
                const main = document.querySelector("#main");
                main.scrollTop = 0;
            });
        },
        getPreviewFromFile(file) {
            return file.url ? file.url : URL.createObjectURL(file);
        },
        getFormFormat() {
            const formatted = {
                name: this.form.name,
                email: this.form.email,
                tag_line: this.form.tagline,
                about: this.form.about,
                phone: this.form.phone,
                level_of_experience_id: this.form.experience,
                daily_rate: this.form.rates.daily,
                monthly_rate: this.form.rates.monthly,
                yearly_rate: this.form.rates.yearly,
                category_id: this.form.category_id,
                engineering_licence_number:
                    this.form.engineering_licence_number,
                skills: this.form.skills,
                engineering_licence:
                    this.form.verification_documents.engineering_licence,
                engineering_degree:
                    this.form.verification_documents.engineering_degree,
                passport: this.form.verification_documents.id,
                cv: this.form.verification_documents.cv,
                sub_categories: this.form.selected_sub_categories,
                location: {
                    address: this.form.location.address,
                    lat: this.form.location.geo.lat,
                    long: this.form.location.geo.lng,
                },
            };
            formatted.social_links = {};
            Object.keys(this.form.social_links).forEach((key) => {
                if (this.form.social_links[key])
                    formatted.social_links[key] =
                        this.getFormattedSocialUrl(key);
            });

            return formatted;
        },
        openConfirmationModal() {
            this.$refs["confirmation_modal"].open();
        },
        closeConfirmationModal() {
            this.$refs["confirmation_modal"].close();
        },
        closedConfirmationModal() {
            window.location.href = `/`;
        },
        openMapModal() {
            this.$refs["map_modal"].open();
        },
        closeMapModal() {
            this.$refs["map_modal"].close();
        },
        initValues() {
            this.form = useForm({
                category_id: null,
                sub_categories: [],
                selected_sub_categories: [],
                name: "",
                email: "",
                tagline: "",
                about: "",
                phone: {
                    code: "eg",
                    number: "",
                },
                experience: null,
                rates: {
                    daily: null,
                    monthly: null,
                    yearly: null,
                },
                social_links: {
                    facebook: "",
                    instagram: "",
                    twitter: "",
                    linkedin: "",
                },
                skills: [],
                engineering_licence_number: "",
                verification_documents: {
                    engineering_licence: null,
                    engineering_degree: null,
                    id: null,
                    cv: null,
                },
                location: {
                    address: "",
                    geo: {
                        lat: "",
                        lng: "",
                    },
                },
                terms_and_conditions: false,
            });
        },
        getFormattedSocialUrl(key) {
            return this.baseUrls[key] + this.form.social_links[key];
        },
    },
    data() {
        return {
            form: useForm({
                category_id: null,
                sub_categories: [],
                selected_sub_categories: [],
                name: "",
                email: "",
                tagline: "",
                about: "",
                phone: {
                    code: "sa",
                    number: "",
                },
                experience: null,
                rates: {
                    daily: null,
                    monthly: null,
                    yearly: null,
                },
                social_links: {
                    facebook: "",
                    instagram: "",
                    twitter: "",
                    linkedin: "",
                },
                skills: [],
                engineering_licence_number: "",
                verification_documents: {
                    engineering_licence: null,
                    engineering_degree: null,
                    id: null,
                    cv: null,
                },
                location: {
                    address: "",
                    geo: {
                        lat: "",
                        lng: "",
                    },
                },
                terms_and_conditions: false,
            }),
            sub_categories: [],
            step: 0,
            steps: [
                "Register.your_category",
                "Register.create_profile",
                "Register.submit_request",
            ],
            options: [
                {
                    id: 1,
                    name: "Design and Manufacturing",
                },
                {
                    id: 2,
                    name: "Aerodynamics",
                },
                {
                    id: 3,
                    name: "Combustion and Energy Systems",
                },
                {
                    id: 4,
                    name: "Vibrations, Acoustic mechanics",
                },
                {
                    id: 5,
                    name: "Design and Manufacturing",
                },
                {
                    id: 6,
                    name: "Materials and Structures",
                },
            ],
            countryCodes: {
                eg: "+20",
                sa: "+966",
                us: "+1",
                ae: "+971",
            },
            baseUrls: {
                muhandisin: "https://www.muhandisin.com/",
                twitter: "https://www.twitter.com/",
                facebook: "https://www.facebook.com/",
                instagram: "https://www.instagram.com/",
                linkedin: "https://www.linkedin.com/",
            },
        };
    },
    computed: {
        calculatedDailyRate() {
            return this.calculateMuhandisinProfit(this.form.rates.daily);
        },
        calculatedMonthlyRate() {
            return this.calculateMuhandisinProfit(this.form.rates.monthly);
        },
        calculatedYearlyRate() {
            return this.calculateMuhandisinProfit(this.form.rates.yearly);
        },
        selectedCategory() {
            let category =
                this.categories.find((category) => {
                    return category.id == this.form.category_id;
                }) || null;

            const subs = this.sub_categories;
            // Filter/includes here causes framework issue
            if (category) {
                category["sub_categories"] = [];
                category?.descendants?.forEach((sub) => {
                    subs.forEach((s) => {
                        if (sub.id.toString() == s.toString()) {
                            category["sub_categories"].push(sub);
                        }
                    });
                });
            }
            return category;
        },
        selectedLevelOfExperience() {
            return this.levelsOfExperience.find((level) => {
                return level.id == this.form.experience;
            });
        },
        formattedPhoneNumber() {
            return `${this.countryCodes[this.form.phone?.code]} ${
                this.form.phone.number
            }`;
        },
        selectedSkills() {
            return this.skills.filter((skill) =>
                this.form.skills.includes(skill.id.toString())
            );
        },
    },

    components: {
        Head,
        Link,
        Card,
        JetValidationErrors,
        Layout,
        Button,
        Seperator,
        AccountTypesRadioGroup,
        JetButton,
        Steps,
        Mobile,
        GeneralRadioGroupVue,
        OptionGroup,
        TransitionRoot,
        File,
        CategoriesRadioGroup,
        Badge,
        Modal,
        BasicMap,
        Skills,
    },

    watch: {
        step: function (newVal, oldVal) {
            this.toTop();
        },
        form: {
            handler: function (newVal, oldVal) {},
            deep: true,
        },
    },
    mounted() {
        this.initValues();
    },
};
</script>

<style>
.muh-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.muh-form-group > li {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.muh-form-group > li:focus-within {
    @apply border border-blue-100;
}

.formkit-form {
    width: 100%;
    flex: 1 1 0%;
}
</style>
