<script setup>
import { 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({
    firm: Object,
});

const form = useForm({
    social_links: {
        facebook: props.firm.socials.facebook?.link,
        twitter: props.firm.socials.twitter?.link,
        linkedin: props.firm.socials.linkedin?.link,
        instagram: props.firm.socials.instagram?.link,
    },
});

const submit = () => {
    form.post(route("firm-profile-information.update"), {
        errorBag: "updateSocialLinks",
        preserveScroll: true,
        // onSuccess: () => form.reset(),
        onError: (err) => {
            console.log(err);
        },
    });
};
</script>

<template>
    <JetFormSection @submitted="submit">
        <template #title>{{ $t("Register.social_links") }} </template>

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

        <template #form>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="Facebook"
                    v-model="form.social_links.facebook"
                    label="Facebook"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.facebook.com/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.facebook" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="instagram"
                    v-model="form.social_links.instagram"
                    label="Instagram"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.instagram.com/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.instagram" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="twitter"
                    v-model="form.social_links.twitter"
                    label="Twitter"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.twitter.com/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.twitter" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <FormKit
                    id="linkedin"
                    v-model="form.social_links.linkedin"
                    label="LinkedIn"
                    outer-class="mb-0"
                    type="text"
                    validation="length:1,100"
                >
                    <template #prefix>
                        <span class="text-xs text-gray-200"
                            >www.linkedin.com/in/</span
                        >
                    </template>
                </FormKit>
                <JetInputError :message="form.errors.linkedin" class="mt-2" />
            </div>
        </template>

        <template #actions>
            <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
                {{ $t('Register.saved') }}
            </JetActionMessage>

            <JetButton
                @click="submit"
                :class="{ 'opacity-25': form.processing }"
                :disabled="form.processing"
            >
                {{ $t('Register.save') }}
            </JetButton>
        </template>
    </JetFormSection>
</template>
