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

                    {{ $t('Register.edit') }}
                </span>
            </Button>
        </template>
        <ul
            v-if="engineer.skills.length > 0"
            class="flex w-full flex-wrap gap-2.5 mt-1.5"
        >
            <Badge
                v-for="skill in engineer.skills"
                :key="`skill_${skill.id}`"
                color="blue"
            >
                {{ skill[`name_${$i18n.locale}`] }}
            </Badge>
        </ul>
        <div
            v-else
            class="w-full flex flex-col gap-2.5 items-center justify-center py-4"
        >
            <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">
                {{ $t('profile.no_languages') }}
            </p>
        </div>
    </Card>
    <Modal @closed="closedModal" ref="modal" title="Add Skills">
        <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="name"
                    name="name"
                    v-model="form.name"
                    type="text"
                    required
                    label="Name*"
                    placeholder="Ex: Google Certified network associate"
                    validation="required|length:2,255"
                    validation-label="name"
                />
                <FormKit
                    id="issuing_org"
                    name="issuing_org"
                    v-model="form.issuing_org"
                    type="text"
                    required
                    label="Issuing organization*"
                    placeholder="Ex: Google"
                    validation="required|length:2,255"
                    validation-label="company name"
                />
                <FormKit
                    id="does_not_expire"
                    name="does_not_expire"
                    v-model="form.does_not_expire"
                    type="checkbox"
                    label="This credential does not expire"
                    validation="required"
                    validation-label="This credential does not expire"
                />
                <FormKit
                    id="start_date"
                    name="start_date"
                    v-model="form.start_date"
                    type="month"
                    required
                    label="Issue date*"
                    placeholder="Ex: October 2010"
                    validation="required"
                    validation-label="start date"
                />
                <FormKit
                    :disabled="form.does_not_expire"
                    id="end_date"
                    name="end_date"
                    v-model="form.end_date"
                    type="month"
                    required
                    label="Expiration date*"
                    placeholder="Ex: May 2014"
                    :validation="form.does_not_expire ? '' : 'required'"
                    validation-label="end date"
                />
                <!-- <FormKit
                    id="credential_url"
                    name="credential_url"
                    v-model="form.credential_url"
                    type="text"
                    required
                    label="Credential URL*"
                    validation="required|length:2,255"
                    validation-label="company name"
                /> -->
                <FormKit
                    id="credential_url"
                    name="credential_url"
                    v-model="form.credential_url"
                    type="text"
                    required
                    label="Credential URL*"
                    validation="required|length:2,255"
                    validation-label="company name"
                />
                <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>
</template>

<script setup>
import Card from "@/components/Containers/ContentCard";
import Modal from "@/components/General/FormModal.vue";
import Button from "@/Jetstream/Button";
import Badge from "@/components/General/Badge";
import { useForm } from "@inertiajs/inertia-vue3";
import { reactive, ref } from "@vue/reactivity";

const props = defineProps({
    engineer: {
        type: Object,
        required: true,
    },
    closedModal: {
        type: Function,
        default: () => {},
    },
});
const form = useForm({
    name: null,
    issuing_org: null,
    credential_url: null,
    does_not_expire: 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("engineer-profile-information.add.certificate"), {
        preserveScroll: true,
        onSuccess: (res) => {
            form.reset();
            closeModal();
        },
        onError: (error) => {
            console.log(error);
        },
    });
};
</script>
