<script setup>
import { onMounted, ref } from "vue";
import { useForm } from "@inertiajs/inertia-vue3";
import JetFormSection from "@/Jetstream/FormSection";
import JetButton from "@/Jetstream/Button.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";

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

const form = useForm({
    slug: props.engineer.slug,
});

const updateSocialLinks = () => {
    form.post(route("engineer-profile-information.update"), {
        errorBag: "updateProfileInformation",
        preserveScroll: true,
        onSuccess: () => {
            form.slug = props.engineer.slug;
        },
        onError: (error) => {
            console.log(error);
        },
    });
};
</script>
<template>
    <JetFormSection @submitted="updateSocialLinks">
        <template #title>{{ $t("Register.mohndswn_url") }} </template>

        <template #description>
            {{ $t("Register.update_url") }}
        </template>

        <template #form>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    outer-class="mb-0"
                    id="slug"
                    v-model="form.slug"
                    type="text"
                    :label="$t('Register.url_mohandsen')"
                    validation="required|matches:/^[a-zA-Z0-9-_.]+$/|length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.muhandisin.com/e/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.slug" class="mt-2" />
            </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>
</template>