<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 Modal from "@/components/General/FormModal.vue";
import Button from "@/Jetstream/Button";
const moment = require("moment");

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

const form = useForm({
    title: null,
    company_name: null,
    location: null,
    currently_working_here: false,
    start_date: null,
    end_date: null,
});

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

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

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

const editModal = ref("editModal");

const editForm = useForm({
    id: null,
    title: null,
    company_name: null,
    location: null,
    currently_working_here: false,
    start_date: null,
    end_date: null,
});

const openEditModal = (experience) => {
    editForm.id = experience.id;
    editForm.title = experience.title;
    editForm.company_name = experience.company_name;
    editForm.location = experience.location;
    editForm.currently_working_here = !!experience.currently_working_here;
    editForm.start_date = moment(experience.start_date).format("YYYY-MM");
    editForm.end_date = moment(experience.end_date).format("YYYY-MM");
    editModal.value.open();
};

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

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

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

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

<template>
    <JetFormSection @submitted="submit">
        <template #title> Your Experience </template>

        <template #description> Add your previous job postions here </template>

        <template #form="{ valid }">
            <!-- portfolios -->
            <ul
                v-if="firm.experiences.length > 0"
                class="flex flex-wrap gap-7 mt-1.5 col-span-6"
            >
                <li
                    v-for="experience in firm.experiences"
                    :key="`exp_${experience.id}`"
                    class="flex w-full gap-2.5"
                >
                    <Button
                        @click="openEditModal(experience)"
                        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">
                            {{ experience.title }}
                        </h3>
                        <h4 class="text-sm text-blue-300">
                            {{ experience.company_name }}
                        </h4>
                        <h5 class="text-xs text-gray-200">
                            {{
                                moment(experience.start_date).format(
                                    "MMMM YYYY"
                                )
                            }}
                            -
                            {{
                                experience.currently_working_here
                                    ? "Present"
                                    : moment(experience.end_date).format(
                                          "MMMM YYYY"
                                      )
                            }}
                            ·
                            {{
                                formattedDateDiff(
                                    experience.start_date,
                                    experience.end_date
                                )
                            }}
                        </h5>
                        <h6 class="text-xs text-gray-200">
                            {{ experience.location }}
                        </h6>
                        <hr
                            v-if="index < firm.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="150"
                    viewBox="0 0 166 150"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        opacity="0.2"
                        d="M4.23242 11.0338C4.23242 5.51097 8.70957 1.03381 14.2324 1.03381H130.709C136.232 1.03381 140.709 5.51097 140.709 11.0338V121.15C140.709 126.672 136.232 131.15 130.709 131.15H14.2324C8.70958 131.15 4.23242 126.672 4.23242 121.15V11.0338Z"
                        fill="#50CD89"
                    />
                    <path
                        d="M159.917 93.3141C139.204 101.689 117.068 105.981 94.7263 105.954C71.6705 105.954 49.6723 101.463 29.5356 93.3141M123.7 40.7632V26.2764C123.7 22.4342 122.174 18.7494 119.457 16.0326C116.74 13.3158 113.055 11.7896 109.213 11.7896H80.2395C76.3973 11.7896 72.7126 13.3158 69.9958 16.0326C67.279 18.7494 65.7527 22.4342 65.7527 26.2764V40.7632M94.7263 84.2236H94.7987M44.0225 142.171H145.43C149.272 142.171 152.957 140.645 155.674 137.928C158.391 135.211 159.917 131.526 159.917 127.684V55.25C159.917 51.4078 158.391 47.7231 155.674 45.0063C152.957 42.2895 149.272 40.7632 145.43 40.7632H44.0225C40.1803 40.7632 36.4955 42.2895 33.7787 45.0063C31.0619 47.7231 29.5356 51.4078 29.5356 55.25V127.684C29.5356 131.526 31.0619 135.211 33.7787 137.928C36.4955 140.645 40.1803 142.171 44.0225 142.171Z"
                        stroke="#50CD89"
                        stroke-width="8"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>

                <p class="text-xs text-center text-gray-200">
                    You don’t have experience listed in your profile, Start
                    adding!
                </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>

                        Add Position
                    </span>
                </Button>
            </div>
        </template>
    </JetFormSection>

    <Modal @closed="closedModal" ref="modal" title="Add Experience">
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="tagline_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="Title*"
                    placeholder="Ex: Sales Manager"
                    validation="required|length:2,255"
                    validation-label="title"
                />
                <FormKit
                    id="company_name"
                    name="company_name"
                    v-model="form.company_name"
                    type="text"
                    required
                    label="Company Name*"
                    placeholder="Ex: Apple"
                    validation="required|length:2,255"
                    validation-label="company name"
                />
                <FormKit
                    id="location"
                    name="location"
                    v-model="form.location"
                    type="text"
                    required
                    label="Location*"
                    placeholder="Ex: London, United Kingdom"
                    validation="required|length:2,255"
                    validation-label="location"
                />
                <FormKit
                    id="currently_working_here"
                    name="currently_working_here"
                    v-model="form.currently_working_here"
                    type="checkbox"
                    label="I’m currently working in this role"
                    validation="required"
                    validation-label="currently working here"
                />
                <FormKit
                    id="start_date"
                    name="start_date"
                    v-model="form.start_date"
                    type="month"
                    required
                    label="Start date*"
                    placeholder="Ex: October 2010"
                    validation="required"
                    validation-label="start date"
                />
                <FormKit
                    :disabled="form.currently_working_here"
                    id="end_date"
                    name="end_date"
                    v-model="form.end_date"
                    type="month"
                    required
                    label="End date*"
                    placeholder="Ex: May 2014"
                    :validation="form.currently_working_here ? '' : 'required'"
                    validation-label="end date"
                />
                <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="Edit Experience">
        <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="Title*"
                    placeholder="Ex: Sales Manager"
                    validation="required|length:2,255"
                    validation-label="title"
                />
                <FormKit
                    id="company_name"
                    name="company_name"
                    v-model="editForm.company_name"
                    type="text"
                    required
                    label="Company Name*"
                    placeholder="Ex: Apple"
                    validation="required|length:2,255"
                    validation-label="company name"
                />
                <FormKit
                    id="location"
                    name="location"
                    v-model="editForm.location"
                    type="text"
                    required
                    label="Location*"
                    placeholder="Ex: London, United Kingdom"
                    validation="required|length:2,255"
                    validation-label="location"
                />
                <FormKit
                    id="currently_working_here"
                    name="currently_working_here"
                    v-model="editForm.currently_working_here"
                    :checked="editForm.currently_working_here"
                    type="checkbox"
                    label="I’m currently working in this role"
                    validation="required"
                    validation-label="currently working here"
                />
                <FormKit
                    id="start_date"
                    name="start_date"
                    v-model="editForm.start_date"
                    type="month"
                    required
                    label="Start date*"
                    placeholder="Ex: October 2010"
                    validation="required"
                    validation-label="start date"
                />
                <FormKit
                    :disabled="editForm.currently_working_here"
                    id="end_date"
                    name="end_date"
                    v-model="editForm.end_date"
                    type="month"
                    required
                    label="End date*"
                    placeholder="Ex: May 2014"
                    :validation="
                        editForm.currently_working_here ? '' : 'required'
                    "
                    validation-label="end date"
                />

                <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"
                        >Delete</Button
                    >
                    <Button
                        type="submit"
                        :loading="editForm.processing"
                        :disabled="editForm.processing || !valid"
                        size="md"
                        >{{ $t('Register.save') }}</Button
                    >
                </div>
            </FormKit>
        </div>
    </Modal>
</template>
