<template>
    <AppLayout :title="`Update ` + service.title">
        <div
            class="container flex flex-col items-center justify-start flex-1 py-5 overflow-hidden"
        >
            <Steps
                class="w-full max-w-5xl"
                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"
                        width="101"
                        height="100"
                        viewBox="0 0 101 100"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M73.2891 2.00024C70.3047 1.03149 67.7812 1.66431 65.7812 3.89087C64.4609 5.35962 63.8828 8.31274 63.0781 12.3987C62.8516 13.5471 62.6094 14.7815 62.3281 16.0706C61.9609 17.7737 61.4688 20.1252 60.9375 22.6643C59.7266 28.4612 58.2188 35.6799 57.6484 37.5393L57.4688 38.1409C56.7266 40.6487 56.0469 42.4612 54.0781 42.7971C52.1641 42.6409 51.2734 40.969 50.25 38.6174L49.9922 38.0393C49.1953 36.2581 46.7969 29.2581 44.8672 23.6409C44.0312 21.2034 43.2578 18.9456 42.6875 17.3127C42.25 16.0706 41.8594 14.8752 41.4922 13.7659C40.1875 9.81275 39.25 6.95337 37.7578 5.66431C35.5 3.70337 32.9219 3.39087 30.0781 4.71899C25.3125 6.96118 27.3906 13.7502 28.625 17.7971L28.9609 18.9221C31.0547 26.0549 36.5078 41.344 37.2031 42.8596C37.7891 44.1331 38.8281 47.2112 39.5937 49.4612L40.1953 51.219C40.3828 51.7581 41.1172 53.4221 41.1172 53.4221L41.1719 53.5393L40.1172 54.1096C39.1406 51.4612 38.1406 48.7971 37.4844 47.094C35.9062 43.0315 32.2891 42.3206 29.0937 43.5237C25.5469 44.844 25.3203 49.1252 26.1328 51.5315C26.5703 52.8127 28.1953 56.3049 29.8906 59.6487L28.5156 60.3909C28.0078 59.3284 27.4922 58.2971 27 57.3752C25.125 53.8362 22.3906 53.2815 19.5078 54.5237C16.3125 55.8909 16.4609 60.594 17.3125 62.7659C17.5625 63.4065 18.0703 64.4768 18.6953 65.7112C18.6953 65.7112 21.4141 76.3987 23.3281 82.2424L23.3906 82.4612L23.5156 82.8127C23.8125 83.6956 24.0859 84.4534 24.3203 84.9924C24.8047 86.2659 24.8203 86.469 25.1953 87.1956C28.8516 94.3284 36.1172 98.3362 44.0156 98.3362C45.0156 98.3362 63.4062 100.235 72.5938 87.0393C74 85.0237 75.4375 81.9456 75.8594 75.0549C76.0156 72.4612 75.9531 68.7971 75.3281 66.2346C74.2266 61.7659 71.1641 58.8831 67.3672 56.9143L68.3594 51.7502L68.375 51.7034C68.375 51.7034 68.8984 49.9612 69.0156 49.4065L69.3906 47.594C69.8672 45.2659 70.5234 42.0706 70.9453 40.7346C71.4453 39.1487 74.9609 23.2971 76.1562 15.9534L76.3516 14.7971C77.0781 10.6252 78.2969 3.63306 73.2891 2.00024Z"
                            fill="#FADCBC"
                        />
                        <path
                            d="M53.8047 52.7109C53.8047 52.7109 61.5703 54.0234 67.2969 56.8828L67.8359 54.2578C67.8359 54.2578 62.7344 51.9609 56.875 50.8594C54.9063 50.4922 52.3438 49.7813 50.3906 49.7813C47.0703 49.7813 43.875 50.4766 41.6406 51.8281L37.7031 43.9531C37.7031 43.9531 37.7109 44.7969 37.3125 45.0391C36.8125 45.3438 36.2812 44.9844 36.2812 44.9844C36.25 44.9766 36.25 45.0078 36.2344 45.0313C36.7188 45.6016 37.1484 46.2734 37.4766 47.1172C38.0703 48.6484 38.9375 50.9609 39.8203 53.3359C39.6562 53.5312 39.4766 53.7109 39.3438 53.9219C39.3438 53.9219 36.3203 58.2266 39.6562 62.6406C39.6562 62.6406 40.6484 64.2109 44.2187 65.2109C45.25 68.9844 42.2266 70.5859 42.2266 70.5859C37.9922 72.7578 34.6797 68.3828 34.6797 68.3828C34 67.7031 31.9609 63.8438 31.1328 62.2578L27.6094 54.9609C27.6094 54.9609 27.5781 55.7813 27.1719 56.0313C26.6719 56.3359 26.1406 55.9766 26.1406 55.9766C26.125 55.9766 26.125 56 26.1094 56.0078C26.4219 56.4063 26.7266 56.8438 27.0078 57.375C28.3203 59.8438 29.7969 63.0625 30.9141 65.5781V65.5469L31.4453 66.7734C33.4531 71.1563 32.9219 72.2891 32.9219 72.2891C32.2812 75.4141 28.6016 75.6484 28.6016 75.6484C25.1172 76.0313 22.6562 72.1953 22.6562 72.1953C21.8203 70.9219 18.6953 65.7031 18.6953 65.7031L20.2187 71.5078C22.0469 75.0703 24.1797 76.4063 24.1797 76.4063C28.6016 79.3828 32.7109 76.5938 32.7109 76.5938C34.2344 75.4766 34.6094 73.9766 34.6094 73.9766C34.8516 73.0938 34.8516 72.1719 34.7031 71.2734C38.7656 74.8828 43 72.9219 43 72.9219C46.5938 71 46.6719 67.375 46.4844 65.6875C47.0078 65.7734 47.5625 65.8438 48.1719 65.8984C51.1953 66.1641 53.0859 66.3281 54.9375 66.8672C54.9375 66.8672 60.0312 68.3125 60.4375 71.6641C60.4375 71.6641 60.4922 73.1797 59.5859 75.0078C59.5859 75.0078 59.1172 76.5078 60.0703 76.8281C60.5625 76.9922 61.7578 76.6797 62.4766 75.9922C62.4766 75.9922 63.3359 75.3047 63.6719 73.5469C63.6719 73.5469 64.4922 70.9219 61.9609 68.1719C61.9609 68.1719 60.2344 66.1328 57.7266 65.2578C55.0547 64.3281 54.1016 63.9297 49.6719 63.4922C49.6719 63.4922 44.9062 63.1797 42.0078 61.1172C42.0078 61.1172 39.6016 59.2344 41.4141 56.1172C41.3984 56.1094 44.0938 51.3125 53.8047 52.7109Z"
                            fill="#E39E49"
                        />
                        <path
                            d="M73.2891 2.00024C70.3047 1.03149 67.7812 1.66431 65.7812 3.89087C64.4609 5.35962 63.8828 8.31274 63.0781 12.3987C62.8516 13.5471 62.6094 14.7815 62.3281 16.0706C61.9609 17.7737 61.4688 20.1252 60.9375 22.6643C59.7266 28.4612 58.2188 35.6799 57.6484 37.5393L57.4688 38.1409C56.7266 40.6487 56.0469 42.4612 54.0781 42.7971C52.1641 42.6409 51.2734 40.969 50.25 38.6174L49.9922 38.0393C49.1953 36.2581 46.7969 29.2581 44.8672 23.6409C44.0312 21.2034 43.2578 18.9456 42.6875 17.3127C42.25 16.0706 41.8594 14.8752 41.4922 13.7659C40.1875 9.81275 39.25 6.95337 37.7578 5.66431C35.5 3.70337 32.9219 3.39087 30.0781 4.71899C25.3125 6.96118 27.3906 13.7502 28.625 17.7971L28.9609 18.9221C31.0547 26.0549 36.5078 41.344 37.2031 42.8596C37.7891 44.1331 38.8281 47.2112 39.5937 49.4612L40.1953 51.219C40.3828 51.7581 41.1172 53.4221 41.1172 53.4221L41.1719 53.5393L40.1172 54.1096C39.1406 51.4612 38.1406 48.7971 37.4844 47.094C35.9062 43.0315 32.2891 42.3206 29.0937 43.5237C25.5469 44.844 25.3203 49.1252 26.1328 51.5315C26.5703 52.8127 28.1953 56.3049 29.8906 59.6487L28.5156 60.3909C28.0078 59.3284 27.4922 58.2971 27 57.3752C25.125 53.8362 22.3906 53.2815 19.5078 54.5237C16.3125 55.8909 16.4609 60.594 17.3125 62.7659C17.5625 63.4065 18.0703 64.4768 18.6953 65.7112C18.6953 65.7112 21.4141 76.3987 23.3281 82.2424L23.3906 82.4612L23.5156 82.8127C23.8125 83.6956 24.0859 84.4534 24.3203 84.9924C24.8047 86.2659 24.8203 86.469 25.1953 87.1956C28.8516 94.3284 36.1172 98.3362 44.0156 98.3362C45.0156 98.3362 63.4062 100.235 72.5938 87.0393C74 85.0237 75.4375 81.9456 75.8594 75.0549C76.0156 72.4612 75.9531 68.7971 75.3281 66.2346C74.2266 61.7659 71.1641 58.8831 67.3672 56.9143L69.3906 47.594C69.8672 45.2659 70.5234 42.0706 70.9453 40.7346C71.4453 39.1487 74.9609 23.2971 76.1562 15.9534L76.3516 14.7971C77.0781 10.6252 78.2969 3.63306 73.2891 2.00024Z"
                            fill="#FADCBC"
                        />
                        <path
                            d="M53.8047 52.7109C53.8047 52.7109 61.6406 54.0625 67.3672 56.9141L67.9375 54.2891C67.9375 54.2891 62.7344 51.9609 56.8828 50.8594C54.9141 50.4922 52.3516 49.7813 50.3984 49.7813C47.0781 49.7813 43.8828 50.4766 41.6484 51.8281L37.7109 43.9531C37.7109 43.9531 37.7188 44.7969 37.3203 45.0391C36.8203 45.3438 36.2891 44.9844 36.2891 44.9844C36.2578 44.9766 36.2578 45.0078 36.2422 45.0313C36.7266 45.6016 37.1562 46.2734 37.4844 47.1172C38.0781 48.6484 38.9453 50.9609 39.8281 53.3359C39.6641 53.5312 39.4844 53.7109 39.3516 53.9219C39.3516 53.9219 36.3281 58.2266 39.6641 62.6406C39.6641 62.6406 40.6563 64.2109 44.2266 65.2109C45.2578 68.9844 42.2344 70.5859 42.2344 70.5859C38 72.7578 34.6875 68.3828 34.6875 68.3828C34.0078 67.7031 31.9688 63.8438 31.1406 62.2578L27.6172 54.9609C27.6172 54.9609 27.5859 55.7813 27.1797 56.0313C26.6797 56.3359 26.1484 55.9766 26.1484 55.9766C26.1328 55.9766 26.1328 56 26.1172 56.0078C26.4297 56.4063 26.7344 56.8438 27.0156 57.375C28.3281 59.8438 29.8047 63.0625 30.9219 65.5781V65.5469L31.4531 66.7734C33.4609 71.1563 32.9297 72.2891 32.9297 72.2891C32.2891 75.4141 28.6094 75.6484 28.6094 75.6484C25.125 76.0313 22.6641 72.1953 22.6641 72.1953C21.8281 70.9219 18.7031 65.7031 18.7031 65.7031L20.2266 71.5078C22.0547 75.0703 24.1875 76.4063 24.1875 76.4063C28.6094 79.3828 32.7188 76.5938 32.7188 76.5938C34.2422 75.4766 34.6172 73.9766 34.6172 73.9766C34.8594 73.0938 34.8594 72.1719 34.7109 71.2734C38.7734 74.8828 43.0078 72.9219 43.0078 72.9219C46.6016 71 46.6797 67.375 46.4922 65.6875C47.0156 65.7734 47.5703 65.8438 48.1797 65.8984C51.2031 66.1641 53.0938 66.3281 54.9453 66.8672C54.9453 66.8672 60.0391 68.3125 60.4453 71.6641C60.4453 71.6641 60.5 73.1797 59.5938 75.0078C59.5938 75.0078 59.125 76.5078 60.0781 76.8281C60.5703 76.9922 61.7656 76.6797 62.4844 75.9922C62.4844 75.9922 63.3438 75.3047 63.6797 73.5469C63.6797 73.5469 64.5 70.9219 61.9688 68.1719C61.9688 68.1719 60.2422 66.1328 57.7344 65.2578C55.0625 64.3281 54.1094 63.9297 49.6797 63.4922C49.6797 63.4922 44.9141 63.1797 42.0156 61.1172C42.0156 61.1172 39.6094 59.2344 41.4219 56.1172C41.3984 56.1094 44.0938 51.3125 53.8047 52.7109Z"
                            fill="#DBA689"
                        />
                    </svg>

                    <h2
                        class="text-2xl text-center text-blue-300 font-medium mb-2.5"
                    >
                        {{ $t("Register.service_updated") }}
                    </h2>

                    <div class="flex items-center justify-center w-full">
                        <Button size="md" @click="closeConfirmationModal"
                            >{{ $t("Register.okay") }}
                        </Button>
                    </div>
                </div>
            </Modal>
            <Modal ref="map_modal" size="2xl">
                <div class="w-full h-[400px]">
                    <BasicMap v-model:location="form.location" />
                </div>
                <div class="flex items-center justify-center w-full mt-6">
                    <Button size="md" @click="closeMapModal"
                        >Confirm location
                    </Button>
                </div>
            </Modal>
            <section class="container flex flex-1 w-full max-w-5xl pt-10">
                <FormKit
                    :actions="false"
                    name="register_firm"
                    type="form"
                    @submit="submit"
                >
                    <div>
                        <FormKit :value="type" name="type" type="hidden" />
                        <section v-if="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"
                                >
                                    Update {{ service.title }}
                                </li>
                            </ul>
                            <div class="max-w-3xl mx-auto">
                                <FormKit name="categories" type="group">
                                    <template #default="{ state: { valid } }">
                                        <ul class="muh-form-group">
                                            <li>
                                                <FormKit
                                                    id="title"
                                                    v-model="form.title"
                                                    :classes="{
                                                        outer: 'mb-0 max-w-[470px]',
                                                    }"
                                                    :label="
                                                        $t(
                                                            'Register.service_title'
                                                        )
                                                    "
                                                    name="title"
                                                    placeholder="Ex. Ayman Salem ..."
                                                    required
                                                    type="text"
                                                    validation="required|length:2,100"
                                                    validation-label="service title"
                                                />
                                            </li>

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

                                            <li
                                                class="grid w-full grid-cols-1 gap-5 md:grid-cols-2"
                                            >
                                                <Multiselect
                                                    :multiple="false"
                                                    :label="
                                                        $t(
                                                            'Register.service_category'
                                                        )
                                                    "
                                                    v-model:value="
                                                        form.category_id
                                                    "
                                                    placeholder="Select service category"
                                                    nameByEn="name"
                                                    nameByAr="name"
                                                    :options="categories"
                                                    validation="required"
                                                />

                                                <Multiselect
                                                    v-if="showSpecialities"
                                                    :label="
                                                        $t(
                                                            'Register.specialties'
                                                        )
                                                    "
                                                    v-model:value="
                                                        form.specialities
                                                    "
                                                    :disabled="
                                                        !form.category_id
                                                    "
                                                    :placeholder="
                                                        $t(
                                                            'Register.select_specialties'
                                                        )
                                                    "
                                                    nameByEn="name"
                                                    nameByAr="name"
                                                    :options="specialties"
                                                    validation="required|min:1"
                                                />
                                            </li>

                                            <li>
                                                <Images
                                                    v-model:value="form.files"
                                                    :maxFiles="10"
                                                    accept=".jpeg, .png, .jpg, .gif, .bmp, "
                                                    name="service_images"
                                                    :uploadInSlider="false"
                                                    label="Service media examples"
                                                    :slidesPerView="4.5"
                                                >
                                                    <template #upload>
                                                        <span
                                                            class="formkit-no-files"
                                                        >
                                                            <label
                                                                class="!cursor-pointer min-w-[250px] max-w-[250px] items-center justify-start gap-2.5 flex p-[5px] rounded-[4px] border border-dashed border-gray-200 hover:brigtness-105"
                                                                for="service_images"
                                                            >
                                                                <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"
                                                                    >{{
                                                                        $t(
                                                                            "Register.drop_file"
                                                                        )
                                                                    }}</span
                                                                >
                                                            </label>
                                                        </span>
                                                    </template>
                                                </Images>
                                            </li>

                                            <li>
                                                <button
                                                    type="button"
                                                    class="w-full text-start"
                                                    @click="openMapModal"
                                                >
                                                    <FormKit
                                                        id="location"
                                                        v-model="
                                                            form.location
                                                                .address
                                                        "
                                                        :classes="{
                                                            outer: 'mb-0 !cursor-pointer',
                                                            input: '!cursor-pointer',
                                                        }"
                                                        disabled
                                                        :help="
                                                            $t(
                                                                'Register.your_serv'
                                                            )
                                                        "
                                                        :label="
                                                            $t(
                                                                'Register.service_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="
                                                                    openMapModal
                                                                "
                                                            >
                                                                <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>
                                                </button>
                                            </li>

                                            <li>
                                                <Skills
                                                    v-model:value="form.skills"
                                                    :label="
                                                        $t('Register.set_skils')
                                                    "
                                                    :help="
                                                        $t(
                                                            'Register.first_fivesk'
                                                        )
                                                    "
                                                />
                                            </li>
                                        </ul>
                                        <div
                                            class="flex items-center justify-end mt-5 gap-2.5"
                                        >
                                            <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-else-if="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.sevice_scope") }}
                                </li>
                            </ul>
                            <div class="max-w-3xl mx-auto">
                                <FormKit name="profile" type="group">
                                    <template #default="{ state: { valid } }">
                                        <ul class="muh-form-group">
                                            <li>
                                                <section
                                                    class="flex flex-col w-full gap-5"
                                                >
                                                    <div
                                                        class="flex items-center justify-between w-full"
                                                    >
                                                        <div>
                                                            <p
                                                                class="text-xs font-semibold text-gray-300 mb-1.5"
                                                            >
                                                                {{
                                                                    $t(
                                                                        "Register.create_pricing"
                                                                    )
                                                                }}
                                                            </p>
                                                            <p
                                                                class="text-[10px] text-gray-200"
                                                            >
                                                                {{
                                                                    $t(
                                                                        "Register.divide_your"
                                                                    )
                                                                }}
                                                            </p>
                                                        </div>
                                                        <span
                                                            class="flex items-center justify-center gap-2"
                                                        >
                                                            <span
                                                                class="text-[10px] font-medium text-gray-200"
                                                                >{{
                                                                    $t(
                                                                        "Register.tiers"
                                                                    )
                                                                }}
                                                            </span>
                                                            <Switch
                                                                v-model:enabled="
                                                                    form.three_tiers
                                                                "
                                                            />
                                                        </span>
                                                    </div>
                                                    <hr />
                                                    <div
                                                        class="flex flex-col justify-between w-full gap-3 lg:gap-0 lg:items-center lg:flex-row"
                                                    >
                                                        <span
                                                            class="text-xs font-semibold text-gray-300"
                                                            >{{
                                                                $t(
                                                                    "Register.deliverydays"
                                                                )
                                                            }}</span
                                                        >
                                                        <div
                                                            class="flex flex-col items-start justify-start flex-1 max-w-lg gap-5 lg:flex-row"
                                                        >
                                                            <FormKit
                                                                id="basic_tier_days"
                                                                v-model="
                                                                    form.basic_tier_days
                                                                "
                                                                :classes="{
                                                                    outer: 'mb-0',
                                                                }"
                                                                :label="
                                                                    form.three_tiers
                                                                        ? 'Basic'
                                                                        : null
                                                                "
                                                                name="basic_tier_days"
                                                                required
                                                                type="number"
                                                                validation="required|number|min:1|max:1000"
                                                                :validation-label="
                                                                    form.three_tiers
                                                                        ? 'basic tier days'
                                                                        : 'delivery days'
                                                                "
                                                            />
                                                            <template
                                                                v-if="
                                                                    form.three_tiers
                                                                "
                                                            >
                                                                <FormKit
                                                                    id="standard_tier_days"
                                                                    v-model="
                                                                        form.standard_tier_days
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0',
                                                                    }"
                                                                    label="Standard"
                                                                    name="standard_tier_days"
                                                                    required
                                                                    type="number"
                                                                    validation="required|number|min:1|max:1000"
                                                                    validation-label="standard tier days"
                                                                />
                                                                <FormKit
                                                                    id="pro_tier_days"
                                                                    v-model="
                                                                        form.pro_tier_days
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0',
                                                                    }"
                                                                    label="Pro"
                                                                    name="pro_tier_days"
                                                                    required
                                                                    type="number"
                                                                    validation="required|number|min:1|max:1000"
                                                                    validation-label="pro tier days"
                                                                />
                                                            </template>
                                                        </div>
                                                    </div>
                                                    <hr />
                                                    <div
                                                        class="flex flex-col items-start justify-start w-full gap-5"
                                                    >
                                                        <p
                                                            class="text-xs font-semibold text-gray-300"
                                                        >
                                                            {{
                                                                $t(
                                                                    "Register.tier_options"
                                                                )
                                                            }}
                                                        </p>
                                                        <ul
                                                            v-if="
                                                                form
                                                                    .tier_options
                                                                    .length > 0
                                                            "
                                                            class="flex flex-col items-start justify-start flex-1 w-full gap-5"
                                                        >
                                                            <li
                                                                v-for="(
                                                                    option, i
                                                                ) in form.tier_options"
                                                                :key="
                                                                    'tier_option_' +
                                                                    i
                                                                "
                                                                class="flex flex-col items-start justify-between w-full gap-1 lg:flex-row"
                                                            >
                                                                <FormKit
                                                                    :id="`tier_option_${i}_title`"
                                                                    v-model="
                                                                        form
                                                                            .tier_options[
                                                                            i
                                                                        ].title
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0 lg:max-w-[180px]',
                                                                    }"
                                                                    :name="`tier_option_${i}_title`"
                                                                    placeholder="Ex. Mockup design"
                                                                    required
                                                                    type="text"
                                                                    validation="required|length:2,100"
                                                                    validation-label="perk title"
                                                                >
                                                                    <template
                                                                        #prefix
                                                                    >
                                                                        <button
                                                                            type="button"
                                                                            class="p-0.5 text-xs font-bold text-red-300 mr-1"
                                                                            @click="
                                                                                deletePerk(
                                                                                    i
                                                                                )
                                                                            "
                                                                        >
                                                                            <svg
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                class="icon icon-tabler icon-tabler-trash"
                                                                                width="20"
                                                                                height="20"
                                                                                viewBox="0 0 24 24"
                                                                                stroke-width="1.5"
                                                                                stroke="currentColor"
                                                                                fill="none"
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round"
                                                                            >
                                                                                <path
                                                                                    stroke="none"
                                                                                    d="M0 0h24v24H0z"
                                                                                    fill="none"
                                                                                />
                                                                                <line
                                                                                    x1="4"
                                                                                    y1="7"
                                                                                    x2="20"
                                                                                    y2="7"
                                                                                />
                                                                                <line
                                                                                    x1="10"
                                                                                    y1="11"
                                                                                    x2="10"
                                                                                    y2="17"
                                                                                />
                                                                                <line
                                                                                    x1="14"
                                                                                    y1="11"
                                                                                    x2="14"
                                                                                    y2="17"
                                                                                />
                                                                                <path
                                                                                    d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                                                                                />
                                                                                <path
                                                                                    d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"
                                                                                />
                                                                            </svg>
                                                                        </button>
                                                                    </template>
                                                                </FormKit>
                                                                <div
                                                                    class="flex items-start justify-start flex-1 w-full gap-1 lg:max-w-lg"
                                                                >
                                                                    <div
                                                                        class="flex items-center justify-between flex-1 gap-5 h-[44px] w-full"
                                                                    >
                                                                        <span
                                                                            class="flex-1"
                                                                        >
                                                                            <span>
                                                                                <FormKit
                                                                                    :id="`tier_option_${i}_basic`"
                                                                                    v-model="
                                                                                        form
                                                                                            .tier_options[
                                                                                            i
                                                                                        ]
                                                                                            .basic_enabled
                                                                                    "
                                                                                    :classes="{
                                                                                        outer: 'mb-0',
                                                                                    }"
                                                                                    label="Basic"
                                                                                    :name="`tier_option_${i}_basic`"
                                                                                    type="checkbox"
                                                                                />
                                                                            </span>
                                                                        </span>
                                                                        <template
                                                                            v-if="
                                                                                form.three_tiers
                                                                            "
                                                                        >
                                                                            <span
                                                                                class="flex-1"
                                                                            >
                                                                                <span>
                                                                                    <FormKit
                                                                                        :id="`tier_option_${i}_standard`"
                                                                                        v-model="
                                                                                            form
                                                                                                .tier_options[
                                                                                                i
                                                                                            ]
                                                                                                .standard_enabled
                                                                                        "
                                                                                        :classes="{
                                                                                            outer: 'mb-0',
                                                                                        }"
                                                                                        label="Standard"
                                                                                        :name="`tier_option_${i}_standard`"
                                                                                        type="checkbox"
                                                                                    />
                                                                                </span>
                                                                            </span>
                                                                            <span
                                                                                class="flex-1"
                                                                            >
                                                                                <span>
                                                                                    <FormKit
                                                                                        :id="`tier_option_${i}_pro`"
                                                                                        v-model="
                                                                                            form
                                                                                                .tier_options[
                                                                                                i
                                                                                            ]
                                                                                                .pro_enabled
                                                                                        "
                                                                                        :classes="{
                                                                                            outer: 'mb-0',
                                                                                        }"
                                                                                        label="Pro"
                                                                                        :name="`tier_option_${i}_pro`"
                                                                                        type="checkbox"
                                                                                    />
                                                                                </span>
                                                                            </span>
                                                                        </template>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <button
                                                            type="button"
                                                            @click="addPerk"
                                                            class="text-xs font-medium text-blue-300"
                                                        >
                                                            {{
                                                                $t(
                                                                    "Register.park_"
                                                                )
                                                            }}
                                                        </button>
                                                    </div>
                                                    <hr />
                                                    <div
                                                        class="flex flex-col justify-between w-full gap-3 lg:items-center lg:flex-row lg:gap-0"
                                                    >
                                                        <span
                                                            class="text-xs font-semibold text-gray-300"
                                                        >
                                                            {{
                                                                $t(
                                                                    "Register.service_price"
                                                                )
                                                            }}</span
                                                        >
                                                        <div
                                                            class="flex flex-col items-start justify-start flex-1 max-w-lg gap-5 lg:flex-row"
                                                        >
                                                            <FormKit
                                                                id="basic_tier_price"
                                                                v-model="
                                                                    form.basic_tier_price
                                                                "
                                                                :classes="{
                                                                    outer: 'mb-0',
                                                                }"
                                                                name="basic_tier_price"
                                                                required
                                                                label="Basic"
                                                                type="number"
                                                                validation="required|number|min:1|max:9999999999"
                                                                :validation-label="
                                                                    form.three_tiers
                                                                        ? 'basic tier price'
                                                                        : 'delivery price'
                                                                "
                                                            >
                                                                <template
                                                                    #suffix
                                                                >
                                                                    <span
                                                                        class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                    >
                                                                        {{
                                                                            currency.code_en
                                                                        }}
                                                                    </span>
                                                                </template>
                                                            </FormKit>
                                                            <template
                                                                v-if="
                                                                    form.three_tiers
                                                                "
                                                            >
                                                                <FormKit
                                                                    v-model="
                                                                        form.standard_tier_price
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0',
                                                                    }"
                                                                    name="standard_tier_price"
                                                                    required
                                                                    type="number"
                                                                    label="Standard"
                                                                    validation="required|number|min:1|max:9999999999"
                                                                    :validation-label="'standard tier price'"
                                                                    ><template
                                                                        #suffix
                                                                    >
                                                                        <span
                                                                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                        >
                                                                            {{
                                                                                currency.code_en
                                                                            }}
                                                                        </span>
                                                                    </template></FormKit
                                                                >
                                                                <FormKit
                                                                    v-model="
                                                                        form.pro_tier_price
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0',
                                                                    }"
                                                                    name="pro_tier_price"
                                                                    required
                                                                    type="number"
                                                                    label="Pro"
                                                                    validation="required|number|min:1|max:9999999999"
                                                                    :validation-label="'pro tier price'"
                                                                    ><template
                                                                        #suffix
                                                                    >
                                                                        <span
                                                                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                        >
                                                                            {{
                                                                                currency.code_en
                                                                            }}
                                                                        </span>
                                                                    </template></FormKit
                                                                >
                                                            </template>
                                                        </div>
                                                    </div>
                                                    <div
                                                        v-if="
                                                            form.basic_tier_price ||
                                                            form.standard_tier_price ||
                                                            form.pro_tier_price
                                                        "
                                                        class="flex flex-col justify-between w-full gap-3 lg:items-center lg:flex-row lg:gap-0"
                                                    >
                                                        <span
                                                            class="text-xs font-semibold text-gray-300"
                                                            >You'll
                                                            receive</span
                                                        >
                                                        <div
                                                            class="flex flex-col items-start justify-start flex-1 max-w-lg gap-5 lg:flex-row"
                                                        >
                                                            <FormKit
                                                                id="basic_tier_days_cut"
                                                                v-model="
                                                                    calculatedBasicRate
                                                                "
                                                                :classes="{
                                                                    outer: 'mb-0 opacity-50',
                                                                }"
                                                                label="Basic tier cut"
                                                                name="basic_tier_days_cut"
                                                                disabled
                                                                type="number"
                                                            >
                                                                <template
                                                                    #suffix
                                                                >
                                                                    <span
                                                                        class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                    >
                                                                        {{
                                                                            currency.code_en
                                                                        }}
                                                                    </span>
                                                                </template>
                                                            </FormKit>
                                                            <template
                                                                v-if="
                                                                    form.three_tiers
                                                                "
                                                            >
                                                                <FormKit
                                                                    id="standard_tier_days_cut"
                                                                    v-model="
                                                                        calculatedStandardRate
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0 opacity-50',
                                                                    }"
                                                                    label="Standard tier cut"
                                                                    name="standard_tier_days_cut"
                                                                    disabled
                                                                    type="number"
                                                                >
                                                                    <template
                                                                        #suffix
                                                                    >
                                                                        <span
                                                                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                        >
                                                                            {{
                                                                                currency.code_en
                                                                            }}
                                                                        </span>
                                                                    </template>
                                                                </FormKit>
                                                                <FormKit
                                                                    id="pro_tier_days_cut"
                                                                    v-model="
                                                                        calculatedProRate
                                                                    "
                                                                    :classes="{
                                                                        outer: 'mb-0 opacity-50',
                                                                    }"
                                                                    label="Pro tier cut"
                                                                    name="pro_tier_days_cut"
                                                                    disabled
                                                                    type="number"
                                                                >
                                                                    <template
                                                                        #suffix
                                                                    >
                                                                        <span
                                                                            class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                                                        >
                                                                            {{
                                                                                currency.code_en
                                                                            }}
                                                                        </span>
                                                                    </template>
                                                                </FormKit>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </section>
                                            </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.bac_details") }}
                                            </button>
                                            <button
                                                class="px-2.5 py-2 gap-[5px] text-sm flex items-center justify-center font-medium text-blue-300 underline"
                                                type="button"
                                                @click="submitDraft"
                                                :disabled="form.processing"
                                                :loading="form.processing"
                                            >
                                                {{ $t("Register.save_draft") }}
                                            </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-else-if="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.service_preview") }}
                                </li>
                            </ul>
                            <div class="max-w-3xl mx-auto">
                                <FormKit name="final_step" type="group">
                                    <template #default="{ state: { valid } }">
                                        <Service
                                            preview
                                            v-if="service"
                                            :service="service"
                                        />

                                        <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_pricin") }}
                                            </button>
                                            <Button
                                                type="submit"
                                                size="md"
                                                :disabled="
                                                    !valid || form.processing
                                                "
                                                :loading="form.processing"
                                            >
                                                {{ $t("Register.update_serv") }}
                                            </Button>
                                        </div>
                                    </template>
                                </FormKit>
                            </div>
                        </section>
                    </div>
                </FormKit>
            </section>
        </div>
    </AppLayout>
</template>

<script>
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";
import Card from "@/Jetstream/AuthenticationCard";
import JetValidationErrors from "@/Jetstream/ValidationErrors";
import AppLayout from "@/Layouts/AppLayout.vue";
import Button from "@/Jetstream/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 Multiselect from "@/components/Inputs/Multiselects/Basic";
import Listbox from "@/components/Listbox.vue";
import Images from "@/components/Inputs/FileUploads/Slider";
import Switch from "@/components/Inputs/Switch.vue";
import Service from "@/components/Services/SingleService.vue";
import Skills from "@/components/Inputs/Selects/Checkboxes/Pills/Skills.vue";

export default {
    props: {
        categories: {
            type: Array,
            required: true,
        },
        firm: {
            type: Object,
            required: true,
        },
        service: {
            type: Object,
            required: true,
        },
    },
    methods: {
        async submit() {
            try {
                this.form
                    .transform((data) => ({
                        ...data,
                        location: {
                            address: data.location.address,
                            long: data.location.geo.lng,
                            lat: data.location.geo.lat,
                        },
                    }))
                    .post(route("firm.services.update", this.service.slug), {
                        onSuccess: (res) => {
                            this.openConfirmationModal();
                        },
                        onError: (errors) => {
                            console.error("error", errors);
                        },
                    });
            } catch (error) {
                console.log(error);
            }
        },
        async submitDraft() {
            try {
                this.form
                    .transform((data) => ({
                        ...data,
                        location: {
                            address: data.location.address,
                            long: data.location.geo?.lng,
                            lat: data.location.geo?.lat,
                        },
                    }))
                    .post(route("firm.services.draft"), {
                        onSuccess: (res) => {
                            // this.openConfirmationDraftModal();
                        },
                        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;
            }
        },
        toTop: function () {
            this.$nextTick(() => {
                const main = document.querySelector("#main");
                main.scrollTop = 0;
            });
        },
        getCurrentLocation() {
            currentLocation().then((location) => {
                this.form.location.address = location.address;
                this.form.location.geo.lat = location.lat;
                this.form.location.geo.lng = location.lng;
            });
        },
        addPerk() {
            this.form.tier_options.push({
                title: null,
                basic_enabled: false,
                standard_enabled: false,
                pro_enabled: false,
            });
        },
        deletePerk(index) {
            this.form.tier_options.splice(index, 1);
        },
        getSkillsFromIds(ids) {
            let skills = this.skills.filter((skill) => ids.includes(skill.id));
            skills.forEach((skill, i) => {
                // Hack to convert from proxy to object
                skills[i] = JSON.parse(JSON.stringify(skill));
            });
            return skills;
        },
        openConfirmationModal() {
            this.$refs["confirmation_modal"].open();
        },
        closeConfirmationModal() {
            this.$refs["confirmation_modal"].close();
        },
        closedConfirmationModal() {
            Inertia.visit("/f/my-services");
        },
        openMapModal() {
            this.$refs["map_modal"].open();
        },
        closeMapModal() {
            this.$refs["map_modal"].close();
        },
        init() {
            this.form = useForm({
                engineer: false,
                title: this.service.title,
                description: this.service.description,
                three_tiers: !!this.service.three_tiers,
                basic_tier_price: this.service.basic_tier_price,
                standard_tier_price: this.service.standard_tier_price,
                pro_tier_price: this.service.pro_tier_price,
                basic_tier_days: this.service.basic_tier_days,
                standard_tier_days: this.service.standard_tier_days,
                pro_tier_days: this.service.pro_tier_days,
                category_id: this.service.category_id ?? null,
                firm_id: this.firm.id,
                tier_options: [],
                files: [],
                specialities: [],
                skills: [],
                location: {
                    address: this.service.location?.address,
                    geo: {
                        lat: this.service.location?.lat,
                        lng: this.service.location?.long,
                    },
                },
            });
            this.service.tier_options.forEach((option) => {
                this.form.tier_options.push({
                    title: option.title,
                    basic_enabled: !!option.basic_enabled,
                    standard_enabled: !!option.standard_enabled,
                    pro_enabled: !!option.pro_enabled,
                });
            });

            this.$nextTick(() => {
                this.form.specialities =
                    this.service.hierarchicalCategories.sub_categories.map(
                        (speciality) => speciality.id
                    );
                this.form.skills = this.service.skills.map((skill) => skill.id);
                this.form.files = JSON.parse(
                    JSON.stringify(this.service.images)
                );
            });
        },
    },
    data() {
        return {
            form: useForm({
                engineer: false,
                title: null,
                description: null,
                three_tiers: true,
                basic_tier_price: null,
                standard_tier_price: null,
                pro_tier_price: null,
                basic_tier_days: null,
                standard_tier_days: null,
                pro_tier_days: null,
                category_id: null,
                firm_id: null,
                tier_options: [],
                files: [],
                specialities: [],
                skills: [],
                location: {
                    address: null,
                    geo: {
                        lat: null,
                        lng: null,
                    },
                },
            }),
            step: 0,
            steps: [
                "Register.service_details",
                "Register.pricing_and_scope",
                "Register.submit_service",
            ],
            skills: [
                {
                    id: 1,
                    name: "Design and Manufacturing",
                    name_en: "Design and Manufacturing",
                },
                {
                    id: 2,
                    name: "Aerodynamics",
                    name_en: "Aerodynamics",
                },
                {
                    id: 3,
                    name: "Combustion and Energy Systems",
                    name_en: "Combustion and Energy Systems",
                },
                {
                    id: 4,
                    name: "Vibrations, Acoustic mechanics",
                    name_en: "Vibrations, Acoustic mechanics",
                },
                {
                    id: 5,
                    name: "Design and Manufacturing",
                    name_en: "Design and Manufacturing",
                },
                {
                    id: 6,
                    name: "Materials and Structures",
                    name_en: "Materials and Structures",
                },
            ],
            showSpecialities: false,
            showCategories: false,
        };
    },
    computed: {
        specialties() {
            const category = this.categories.find(
                (category) => category.id == this.form.category_id
            );
            return category?.descendants || [];
        },
        calculatedBasicRate() {
            return this.calculateMuhandisinProfit(this.form.basic_tier_price);
        },
        calculatedStandardRate() {
            return this.calculateMuhandisinProfit(
                this.form.standard_tier_price
            );
        },
        calculatedProRate() {
            return this.calculateMuhandisinProfit(this.form.pro_tier_price);
        },
        service() {
            const service = {
                title: this.form.title,
                description: this.form.description,
                location: this.form.location,
                images: this.form.files,
                three_tiers: this.form.three_tiers,
                basic_tier_price: this.form.basic_tier_price,
                standard_tier_price: this.form.standard_tier_price,
                pro_tier_price: this.form.pro_tier_price,
                basic_tier_days: this.form.basic_tier_days,
                standard_tier_days: this.form.standard_tier_days,
                pro_tier_days: this.form.pro_tier_days,
                tier_options: this.form.tier_options,
            };

            const category =
                this.categories.find((category) => {
                    return category.id == this.form.category_id;
                }) || null;
            const sub_categories = [];
            const subs = this.form.specialities;
            if (category) {
                category?.descendants?.forEach((sub) => {
                    if (typeof subs.forEach == "function")
                        subs?.forEach((s) => {
                            if (sub.id.toString() == s.toString()) {
                                sub_categories.push(
                                    JSON.parse(JSON.stringify(sub))
                                );
                            }
                        });
                });
            }
            service.hierarchicalCategories = {
                category: category,
                sub_categories: sub_categories,
            };
            service.skills = this.getSkillsFromIds(this.form.skills);
            return service;
        },
    },
    components: {
        Head,
        Link,
        Card,
        JetValidationErrors,
        AppLayout,
        Button,
        Seperator,
        AccountTypesRadioGroup,
        JetButton,
        Steps,
        Mobile,
        GeneralRadioGroupVue,
        OptionGroup,
        TransitionRoot,
        File,
        CategoriesRadioGroup,
        Badge,
        Modal,
        BasicMap,
        Multiselect,
        Listbox,
        Images,
        Switch,
        Service,
        Skills,
    },
    watch: {
        step: function (newVal, oldVal) {
            this.toTop();
        },
        "form.category_id": {
            handler: function (newVal, oldVal) {
                let changed = true;
                if (typeof newVal == "object") {
                    this.form.category_id = oldVal;
                    changed = false;
                }
                if (typeof newVal != "object" && changed)
                    this.form.specialities = [];
            },
            deep: true,
        },
    },
    mounted() {
        this.init();

        setTimeout(() => {
            this.showCategories = true;
            this.showSpecialities = true;
        }, 200);
    },
};
</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>
