<script setup>
import { useAppAbility } from '@/plugins/casl/useAppAbility';
import axios from '@axios';
import {
    emailValidator,
    requiredEmail
} from '@validators';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const ability = useAppAbility()
const errors = ref({

    email: undefined,
})
const seetingPlanLogo = ref();
const inavlid = ref(false);
const InvalidCredential = ref()
const isLoadingVisible = ref(false)
const isPasswordVisible = ref(false)
const isPolicy = ref(false)
const isDisabled = ref(true)
const isDialogVisible = ref(false)
const refVForm = ref()
const password = ref()
const email = ref()
const isContent = ref()
const emailError = ref(false);
const emailMessage = ref('');
const succesMessage = ref('');
const isSuccess = ref(false);
const isSentLink = ref(false);
const isCardVisible = ref(true);

onMounted(async () => {
    const baseUrl = window.location.hostname;
    // alert(baseUrl);
    if (baseUrl === 'localhost') {
        isContent.value = 'd-block';
    } else {
        isContent.value = 'd-none';
    }
    let setting = await axios.post('/api/settings', {})
    // console.log(setting.data)
    seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
})
const onSubmit = () => {

    refVForm.value?.validate().then(({ valid: isValid }) => {
        if (isValid)
            forgotPassword()
    })
}

const forgotPassword = () => {
    emailError.value = false;
    emailMessage.value = '';
    isLoadingVisible.value = true;
    axios.post('/api/forgot-password', {
        email: email.value,
    }).then(r => {
        // console.log("Response", r.data.message);

        isCardVisible.value = false; // Corrected this line

        isSentLink.value = true;
        succesMessage.value = r.data.message;
        isSuccess.value = true;
        isLoadingVisible.value = false;
        console.log("isForgotCard", isCardVisible.value);
        // let patientData = r.data.data;

    }).catch(error => {
        console.log('error', error.response.data.message);
        emailMessage.value = error.response.data.message;
        if (emailMessage.value)
            emailError.value = true;
        isLoadingVisible.value = false;
    });
};

const textField = () => {
    emailError.value = false;
    emailMessage.value = '';
    isSuccess.value = false;
    succesMessage.value = '';
}

</script>

<template>
    <div class="auth-wrapper d-flex align-center justify-center">
        <VCard class="auth-card pt-0 rounded-5" max-width="320" v-if="isCardVisible">
            <VCardText>
                <div class="text-center mb-0 cursor-pointer"
                    style="width: 100%;position: relative;display: block; padding-top: 0px;">
                    <span class="text-center">
                        <VImg :src='seetingPlanLogo' width="250" height="50" class="logo-img"
                            @click="isUserAuthenticate" />
                    </span>
                    <h5 class="mb-2 mt-2">
                        Forgot Password ?
                    </h5>
                </div>
                <p class="mb-0">To reset your password, enter your email and we'll send you instructions.</p>


            </VCardText>

            <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
                <VCardText class="" style="color: white !important;">
                    <div class="demo-space-x">
                        <VProgressCircular :size="40" color="primary" indeterminate />
                    </div>
                </VCardText>
            </VDialog>
            <VCardText>
                <VForm ref="refVForm" @submit.prevent="onSubmit">
                    <VRow>
                        <VCol cols="12">
                            <VTextField v-model="email" label="Email Address" type="email" @click="textField()"
                                :rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
                                density="compact" />
                            <p v-if="emailError" class="email-error error">{{ emailMessage }}</p>
                        </VCol>


                        <VCol cols="12">
                            <!-- <p class="error-message" v-if="inavlid">{{ InvalidCredential }}</p> -->
                            <!-- login button -->
                            <VBtn block type="submit" class="text-capitalize">
                                Send instructions
                            </VBtn>
                        </VCol>

                        <VCol cols="12" class="text-center px-0 py-0 mb-3">

                            <RouterLink to="/login">
                                <h>Return to Login</h>
                            </RouterLink>
                        </VCol>
                    </VRow>
                </VForm>

            </VCardText>
        </VCard>

        <!-- <VDialog  refs="myDialog" persistent width="500"> -->

        <!-- <template v-slot:default="{ isActive }"> -->
        <VCard v-if="isSentLink" width="400">
            <VCardText class="text-center">
                <div class="text-center mb-2 cursor-pointer"
                    style="width: 100%;position: relative;display: block; padding-top: 5px;">
                    <span class="text-center">
                        <VImg :src='seetingPlanLogo' width="250" height="50" class="logo-img"
                            @click="isUserAuthenticate" />
                    </span>
                </div>
            </VCardText>
            <v-card-text class="text-center">
                <span v-if="isSuccess" class="text-center">{{ succesMessage
                    }} to your email.</span>
            </v-card-text>
            <VCol cols="12" class="text-center px-0 py-0 mb-3">

                <RouterLink to="/login">
                    <h>Return to Login</h>
                </RouterLink>
            </VCol>
            <!-- <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn text="Close" @click="openNotesModel = false"></v-btn>
                </v-card-actions> -->
        </VCard>
        <!-- </template> -->
        <!-- </VDialog> -->

    </div>
    <!-- <Footer></Footer> -->
</template>

<style lang="scss">
@use "@core/scss/template/pages/page-auth.scss";
@import "@vendor/fonts/fontawesome.css";
@import "@vendor/fonts/tabler-icons.css";
@import "@vendor/css/rtl/core.css";
@import "@vendor/css/rtl/theme-default.css";
@import "@styles/css/demo.css";
@import "@vendor/libs/node-waves/node-waves.css";
@import "@vendor/css/pages/front-page-help-center.css";
@import "@vendor/css/pages/help-center-front-page.css";

.error-message {
    color: #ff2f2f;
    font-size: 15px;
}

.v-card.v-card--flat.v-theme--light.v-card--density-default.v-card--variant-elevated.text-center.search-header.rounded-0 {
    block-size: 357px;
    inset-block-start: -185px;
}

.logo-img {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
}

body {
    display: block !important;
}

.bg-primary {
    background-color: rgb(var(--v-theme-yellow-theme-button)) !important;
}

a.nav-link.fw-medium {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.light-style .layout-navbar .menu-text {
    color: #5d596c !important;
}

span.app-brand-text.demo.menu-text.fw-bold.ms-2.ps-1 {
    color: #5d596c !important;
}

.navbar.landing-navbar {
    border-color: rgba(255, 255, 255, 68%) !important;
    background: white;
    margin: 0;
    border-radius: 0;
    box-shadow: 0px 10px 10px #00000029;
}

.landing-footer .footer-top {
    background-color: #1C5580;
    border-radius: none !important;
    /* background: url("/assets/img/front-pages/backgrounds/footer-bg-dark.png"); */
}

.footer-bottom.py-3 {
    background-color: #282c3e;
}

.light-style .landing-footer .footer-link,
.light-style .landing-footer .footer-text {
    color: #d3d4dc !important;
}

.light-style .landing-footer .footer-link,
.light-style .landing-footer .footer-text {
    color: #d3d4dc;
}

a.footer-link {
    color: #d3d4dc;
}

.light-style .landing-footer .footer-title {
    color: #fff;
}

.footer-title {
    color: #fff;
}

.footer-text {
    color: #d3d4dc;
}

@media (max-width: 355px) {
    .first-section-pt {
        margin-block-start: -121px !important;
    }
}

/* // @use "@core/scss/template/pages/page-auth.scss"; */
</style>
