<script setup>
import { ref } from "vue";
import { Inertia } from "@inertiajs/inertia";
import { Link, useForm } from "@inertiajs/inertia-vue3";
import JetFormSection from "@/Jetstream/FormSection.vue";
import JetInput from "@/Jetstream/Input.vue";
import JetInputError from "@/Jetstream/InputError.vue";
import JetLabel from "@/Jetstream/Label.vue";
import JetActionMessage from "@/Jetstream/ActionMessage.vue";
import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
import { currentLocation } from "@/composables/location";
import Mobile from "@/components/Inputs/Mobile";
import GeneralRadioGroup from "@/components/Inputs/Selects/Radios/GeneralRadioGroup.vue";
import Modal from "@/components/General/FormModal.vue";
import Button from "@/Jetstream/Button";
import Listbox from "@/components/Listbox.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import Badge from "@/components/General/Badge";
import Multiselect from "@/components/Inputs/Multiselects/Basic";
import Images from "@/components/Inputs/FileUploads/Slider";

const props = defineProps({
    engineer: Object,
    languages: Array,
    proficiencies: Array,
});

const form = useForm({
    title: null,
    description: null,
    images: [],
    skills: [],
});

const modal = ref("modal");

const submit = async () => {
    form.post(route("engineer-profile-information.add.portfolio-project"), {
        preserveScroll: true,
        forceFormData: true,
        onSuccess: (res) => {
            form.reset();
            closeModal();
        },
        onError: (error) => {
            console.log(error);
        },
    });
};

const openModal = () => {
    modal.value.open();
};

const closeModal = () => {
    modal.value.close();
};

const editModal = ref("editModal");

const editForm = useForm({
    id: null,
    title: null,
    description: null,
    images: [],
    skills: [],
});

const openEditModal = (project) => {
    const skills = project.skills.map((skill) => {
        return skill.id;
    });

    editForm.id = project.id;
    editForm.title = project.title;
    editForm.description = project.description;
    editForm.images = JSON.parse(JSON.stringify(project.images));
    editForm.skills = skills;
    editModal.value.open();
};

const closeEditModal = () => {
    editModal.value.close();
};

const closedEditModal = () => {
    editForm.reset();
};

const editSubmit = async () => {
    editForm.post(
        route("engineer-profile-information.edit.portfolio-project", {
            id: editForm.id,
        }),
        {
            preserveScroll: true,
            forceFormData: true,
            onSuccess: (res) => {
                form.reset();
                closeEditModal();
            },
            onError: (error) => {
                console.log(error);
            },
        }
    );
};

const deleteSubmit = async () => {
    editForm.delete(
        route("engineer-profile-information.delete.portfolio-project", {
            id: editForm.id,
        }),
        {
            _method: "delete",
            preserveScroll: true,
            onSuccess: (res) => {
                editForm.reset();
                closeEditModal();
            },
            onError: (error) => {
                console.log(error);
            },
        }
    );
};
</script>

<template>
    <JetFormSection @submitted="submit">
        <template #title> {{ $t('profile.portfolio') }} </template>

        <template #description> {{ $t('profile.portfolio_text') }} </template>

        <template #form="{ valid }">
            <!-- portfolios -->
            <ul
                v-if="engineer.portfolio_projects.length > 0"
                class="flex flex-wrap gap-2.5 mt-1.5 col-span-6"
            >
                <li
                    v-for="(project, index) in engineer.portfolio_projects"
                    :key="`portfolio_project_${project.id}`"
                    class="flex w-full gap-2.5"
                >
                    <Button
                        @click="openEditModal(project)"
                        type="button"
                        size="xs"
                        buttonStyle="outline"
                        class="mb-auto"
                    >
                        <span class="flex items-center justify-center gap-1">
                            <svg
                                width="16"
                                height="17"
                                viewBox="0 0 16 17"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_917_36335)">
                                    <path
                                        d="M5.99984 5.16675H3.99984C3.64622 5.16675 3.30708 5.30722 3.05703 5.55727C2.80698 5.80732 2.6665 6.14646 2.6665 6.50008V12.5001C2.6665 12.8537 2.80698 13.1928 3.05703 13.4429C3.30708 13.6929 3.64622 13.8334 3.99984 13.8334H9.99984C10.3535 13.8334 10.6926 13.6929 10.9426 13.4429C11.1927 13.1928 11.3332 12.8537 11.3332 12.5001V10.5001"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M6 10.5001H8L13.6667 4.8334C13.9319 4.56819 14.0809 4.20848 14.0809 3.8334C14.0809 3.45833 13.9319 3.09862 13.6667 2.8334C13.4015 2.56819 13.0417 2.41919 12.6667 2.41919C12.2916 2.41919 11.9319 2.56819 11.6667 2.8334L6 8.50007V10.5001Z"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M10.6665 3.83325L12.6665 5.83325"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_917_36335">
                                        <rect
                                            width="16"
                                            height="16"
                                            fill="white"
                                            transform="translate(0 0.5)"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                        </span>
                    </Button>
                    <span class="flex flex-col w-full">
                        <h3 class="font-medium text-gray-300">
                            {{ project.title }}
                        </h3>
                        <h4 class="text-xs text-gray-200">
                            {{ project.description }}
                        </h4>
                        <ul class="flex w-full flex-wrap gap-2.5 mt-1.5">
                            <Badge
                                v-for="skill in project.skills"
                                :key="`portfolio_project_skill_${skill.id}`"
                                color="blue"
                            >
                                {{ skill[`name_${$i18n.locale}`] }}
                            </Badge>
                        </ul>
                        <ul class="flex w-full flex-wrap gap-2.5 mt-1.5">
                            <swiper
                                class="w-full"
                                :slides-per-view="4.5"
                                :space-between="10"
                            >
                                <SwiperSlide
                                    v-for="image in project.images"
                                    :key="`portfolio_project_image_${image.id}`"
                                >
                                    <img
                                        :src="image.url"
                                        class="w-[132px] h-[100px] rounded-[10px] overflow-hidden object-cover"
                                    />
                                </SwiperSlide>

                                <!-- <template #addons>
                            <navigation />
                            <pagination />
                        </template> -->
                            </swiper>
                        </ul>
                        <hr
                            v-if="
                                index < engineer.portfolio_projects.length - 1
                            "
                            class="mt-5"
                        />
                    </span>
                </li>
            </ul>

            <div
                v-else
                class="w-full flex flex-col gap-2.5 items-center justify-center py-4 col-span-6"
            >
                <svg
                    width="166"
                    height="151"
                    viewBox="0 0 166 151"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        opacity="0.2"
                        d="M4.23242 11.5337C4.23242 6.01085 8.70957 1.53369 14.2324 1.53369H130.709C136.232 1.53369 140.709 6.01084 140.709 11.5337V121.649C140.709 127.172 136.232 131.649 130.709 131.649H14.2324C8.70958 131.649 4.23242 127.172 4.23242 121.649V11.5337Z"
                        fill="#50CD89"
                    />
                    <path
                        d="M145.831 94.2049L142.138 98.8266C139.67 101.915 127.357 117.798 127.357 127.156C127.357 137.926 135.644 146.688 145.831 146.688C156.018 146.688 164.305 137.926 164.305 127.156C164.305 117.798 151.993 101.915 149.524 98.8266L145.831 94.2049ZM145.831 137.233C140.858 137.233 136.812 132.713 136.812 127.156C136.812 123.711 141.387 115.963 145.833 109.665C150.277 115.958 154.851 123.702 154.851 127.156C154.851 132.713 150.805 137.233 145.831 137.233ZM60.2607 22.4434L52.4203 43.985L32.9075 35.9499L29.3076 44.6941L49.1837 52.8785L31.9644 100.184C30.6825 103.719 30.855 107.618 32.4441 111.026C34.0332 114.433 36.9091 117.072 40.441 118.362L95.0187 138.226C96.7688 138.863 98.6273 139.149 100.488 139.068C102.349 138.987 104.175 138.54 105.863 137.753C107.551 136.966 109.067 135.854 110.326 134.481C111.584 133.108 112.56 131.5 113.197 129.75L141.493 52.0098L60.2607 22.4434ZM104.314 126.516C104.102 127.1 103.777 127.635 103.357 128.093C102.938 128.551 102.432 128.922 101.87 129.184C101.307 129.446 100.698 129.595 100.078 129.622C99.4578 129.649 98.8383 129.554 98.2549 129.342L43.6757 109.477C42.4976 109.048 41.538 108.169 41.0081 107.033C40.4782 105.896 40.4214 104.596 40.8502 103.418L45.7487 89.9591H117.619L104.314 126.516ZM49.1899 80.5043L57.9339 56.4799L68.669 60.9003C68.996 63.0074 70.012 64.9468 71.5582 66.4152C73.1045 67.8836 75.0937 68.7981 77.2149 69.0159C79.3361 69.2337 81.4697 68.7424 83.282 67.6189C85.0944 66.4953 86.4833 64.8029 87.2316 62.8062C87.98 60.8094 88.0455 58.621 87.4181 56.5831C86.7906 54.5451 85.5055 52.7726 83.7636 51.5425C82.0218 50.3125 79.9214 49.6944 77.791 49.7848C75.6606 49.8752 73.6202 50.6691 71.9888 52.0423L61.1704 47.5876L65.9114 34.5621L129.374 57.6605L120.928 80.8645V80.5043H49.1899Z"
                        fill="#50CD89"
                    />
                </svg>

                <p class="text-xs text-center text-gray-200">
                    {{ $t('profile.no_portfolios') }}
                </p>
            </div>
            <div class="flex items-center justify-start w-full col-span-6">
                <Button
                    @click="openModal"
                    type="button"
                    size="sm"
                    buttonStyle="outline"
                >
                    <span class="flex items-center justify-center gap-1">
                        <svg
                            width="16"
                            height="17"
                            viewBox="0 0 16 17"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_917_36344)">
                                <path
                                    d="M8 3.83325V13.1666"
                                    stroke="#222222"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M3.3335 8.5H12.6668"
                                    stroke="#222222"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_917_36344">
                                    <rect
                                        width="16"
                                        height="16"
                                        fill="white"
                                        transform="translate(0 0.5)"
                                    />
                                </clipPath>
                            </defs>
                        </svg>

                        {{ $t('profile.add_portfolios') }}
                    </span>
                </Button>
            </div>
        </template>

        <!-- <template #actions="{ valid }">
                <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
                    {{ $t('Register.saved') }}
                </JetActionMessage>
    
                <JetButton type="submit" :disabled="!valid || form.processing">
                    {{ $t('Register.save') }}
                </JetButton>
            </template> -->
    </JetFormSection>
    <Modal @closed="closedModal" ref="modal"  :title="$t('profile.add_portfolios')">
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="projects_form"
                type="form"
                @submit="submit"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <FormKit
                    id="title"
                    name="title"
                    v-model="form.title"
                    type="text"
                    required
                    :label="$t('profile.project_title')"
                    placeholder="Ex: Villa minimal interior design"
                    validation="required|length:2,255"
                    validation-label="title"
                />
                <FormKit
                    id="description"
                    name="description"
                    v-model="form.description"
                    type="textarea"
                    required
                    rows="5"
                    :label="$t('profile.project_description')"
                    placeholder="Ex: Minimalisim is the style followed in this design as we aimed to ..."
                    validation="required|length:2,3000"
                    validation-label="description"
                />
                <Multiselect
                :label="$t('profile.select_skills')"
                    v-model:value="form.skills"
                    :options="engineer.skills"
                    validation="required|min:1"
                />
                <Images
                    v-model:value="form.images"
                    :maxFiles="10"
                    accept=".jpeg, .png, .jpg, .gif, .bmp, "
                    name="project_images"
                    required
                    :label="$t('profile.media')"
                >
                    <template #upload>
                        <span class="formkit-no-files">
                            <label
                                class="!cursor-pointer w-[132px] h-[100px] bg-blue-200 items-center justify-center gap-2.5 flex flex-col p-[5px] rounded-[10px] hover:brigtness-105"
                                for="project_images"
                            >
                                <svg
                                    width="76"
                                    height="76"
                                    viewBox="0 0 76 76"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_917_36006)">
                                        <path
                                            d="M47.5 25.3333H47.5308"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M53.8334 12.6667H22.1667C16.92 12.6667 12.6667 16.92 12.6667 22.1667V53.8334C12.6667 59.0801 16.92 63.3334 22.1667 63.3334H53.8334C59.0801 63.3334 63.3334 59.0801 63.3334 53.8334V22.1667C63.3334 16.92 59.0801 12.6667 53.8334 12.6667Z"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M12.6667 47.5001L25.3334 34.8334C26.7775 33.4438 28.4158 32.7122 30.0834 32.7122C31.751 32.7122 33.3892 33.4438 34.8334 34.8334L50.6667 50.6668"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M44.3333 44.3333L47.5 41.1667C48.9442 39.777 50.5824 39.0454 52.25 39.0454C53.9176 39.0454 55.5558 39.777 57 41.1667L63.3333 47.5"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_917_36006">
                                            <rect
                                                width="76"
                                                height="76"
                                                fill="white"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                            </label>
                        </span>
                    </template>
                </Images>

                <div class="flex items-center justify-end w-full">
                    <FormKit
                        :loading="form.processing"
                        :disabled="!valid || form.processing"
                        type="submit"
                    >
                        {{ $t('Register.save') }}
                    </FormKit>
                </div>
            </FormKit>
        </div>
    </Modal>
    <Modal
        @closed="closedEditModal"
        ref="editModal"
        :title="$t('profile.edit_project')"
    >
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="projects_form"
                type="form"
                @submit="editSubmit"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <FormKit
                    id="title"
                    name="title"
                    v-model="editForm.title"
                    type="text"
                    required
                    :label="$t('profile.project_title')"
                    placeholder="Ex: Villa minimal interior design"
                    validation="required|length:2,255"
                    validation-label="title"
                />
                <FormKit
                    id="description"
                    name="description"
                    v-model="editForm.description"
                    type="textarea"
                    required
                    rows="5"
                    :label="$t('profile.project_description')"
                    placeholder="Ex: Minimalisim is the style followed in this design as we aimed to ..."
                    validation="required|length:2,3000"
                    validation-label="description"
                />
                <Multiselect
                :label="$t('profile.select_skills')"
                    v-model:value="editForm.skills"
                    :options="engineer.skills"
                    validation="required|min:1"
                />
                <Images
                    v-model:value="editForm.images"
                    :maxFiles="10"
                    accept=".jpeg, .png, .jpg, .gif, .bmp, "
                    name="project_images"
                    required
                    :label="$t('profile.media')"
                >
                    <template #upload>
                        <span class="formkit-no-files">
                            <label
                                class="!cursor-pointer w-[132px] h-[100px] bg-blue-200 items-center justify-center gap-2.5 flex flex-col p-[5px] rounded-[10px] hover:brigtness-105"
                                for="project_images"
                            >
                                <svg
                                    width="76"
                                    height="76"
                                    viewBox="0 0 76 76"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_917_36006)">
                                        <path
                                            d="M47.5 25.3333H47.5308"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M53.8334 12.6667H22.1667C16.92 12.6667 12.6667 16.92 12.6667 22.1667V53.8334C12.6667 59.0801 16.92 63.3334 22.1667 63.3334H53.8334C59.0801 63.3334 63.3334 59.0801 63.3334 53.8334V22.1667C63.3334 16.92 59.0801 12.6667 53.8334 12.6667Z"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M12.6667 47.5001L25.3334 34.8334C26.7775 33.4438 28.4158 32.7122 30.0834 32.7122C31.751 32.7122 33.3892 33.4438 34.8334 34.8334L50.6667 50.6668"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M44.3333 44.3333L47.5 41.1667C48.9442 39.777 50.5824 39.0454 52.25 39.0454C53.9176 39.0454 55.5558 39.777 57 41.1667L63.3333 47.5"
                                            stroke="#29419B"
                                            stroke-width="3.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_917_36006">
                                            <rect
                                                width="76"
                                                height="76"
                                                fill="white"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                            </label>
                        </span>
                    </template>
                </Images>

                <div class="flex items-center justify-end w-full gap-5">
                    <Button
                        @click="deleteSubmit"
                        type="button"
                        buttonStyle="danger"
                        :loading="editForm.processing"
                        :disabled="editForm.processing"
                        size="md"
                        >{{ $t('Register.delete') }}</Button
                    >
                    <Button
                        type="submit"
                        :loading="editForm.processing"
                        :disabled="editForm.processing || !valid"
                        size="md"
                        >{{ $t('Register.save') }}</Button
                    >
                </div>
            </FormKit>
        </div>
    </Modal>
</template>
