<template>
    <AppLayout title="Verify your email">
        <div class="container flex flex-col items-center justify-center flex-1">
            <JetAuthenticationCard class="mx-auto">
                <template #logo>
                    <JetAuthenticationCardLogo />
                </template>
                <div class="">
                    <div class="mx-auto col-md-5 col-sm-12">
                        <div class="py-4">
                            <div class="">
                                <div class="mb-5 text-center">
                                    <h3
                                        class="mb-4 text-xl font-medium text-blue-300"
                                    >
                                        {{ $t('CurrentStatus.verify_email') }}
                                    </h3>
                                    <p class="font-medium text-gray-200">
                                        {{ $t('CurrentStatus.verify_email_msg') }}
                                    </p>
                                </div>
                                <FormKit
                                    v-if="
                                        !(
                                            $page.props.flash.status ==
                                            'verification-link-sent'
                                        )
                                    "
                                    form-class="flex items-center justify-center w-full mt-5"
                                    name="resend_verification_form"
                                    type="form"
                                    @submit="resendVerification"
                                    :actions="false"
                                    #default="{ state: { valid } }"
                                    submit-behavior="live"
                                >
                                    <MuhButton
                                        :disabled="resend.processing"
                                        size="md"
                                        type="submit"
                                    >
                                    {{ $t('CurrentStatus.resend_verification') }}
                                    </MuhButton>
                                </FormKit>
                                <div
                                    v-if="
                                        $page.props.flash.status ==
                                        'verification-link-sent'
                                    "
                                    class="text-center alert alert-success"
                                >
                                {{ $t('CurrentStatus.new_email_sent') }}
                                </div>
                            </div>
                            <!-- <FormKit
                                form-class="w-full mt-5"
                                name="resend_verification_form"
                                type="form"
                                @submit="logout"
                                :actions="false"
                                #default="{ state: { valid } }"
                                submit-behavior="live"
                            >
                                <button type="submit" class="btn btn-primary">
                                    logout
                                </button>
                            </FormKit> -->
                        </div>
                    </div>
                </div>
            </JetAuthenticationCard>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import JetAuthenticationCard from "@/Jetstream/AuthenticationCard.vue";
import JetAuthenticationCardLogo from "@/Jetstream/AuthenticationCardLogo.vue";
import MuhButton from "@/Jetstream/Button.vue";
import { useForm } from "@inertiajs/inertia-vue3";

export default {
    components: {
        AppLayout,
        JetAuthenticationCard,
        JetAuthenticationCardLogo,
        MuhButton,
    },
    data() {
        return {
            resend: useForm({}),
            logout: useForm({}),
        };
    },
    methods: {
        resendVerification() {
            this.resend.post(route("verification.send"), {
                preserveScroll: true,
                onSuccess: (res) => {},
            });
        },
        logout() {
            this.logout.post(route("logout"));
        },
    },
};
</script>
