<script setup>
import { useAppAbility } from '@/plugins/casl/useAppAbility';
import axios from '@axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const ability = useAppAbility()
const errors = ref({
  name: undefined,
  email: undefined,
})
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 name = ref(null)
const email = ref(null)
const phone = ref(null)
const password = ref(null)
const getIsTonalSnackbarVisible = ref(false);
const getIsTonalSnackbarVisibleError = ref(false);

const state = ref('CA')
const successMessage = ref(null)
const errorMessage = ref(null)
const seetingPlanLogo = ref();
onMounted(async () => {
  let pageShow = localStorage.getItem('thank-you-page')
  console.log(pageShow)
  if (pageShow == 'yes') {
    router.push('/provider/thank-you')
  } else {
    router.push('/provider/register')
  }
  let setting = await axios.post('/api/settings', {})
  console.log(setting.data)
  seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
})

</script>

<template>
  <VSnackbar v-model="getIsTonalSnackbarVisibleError" :timeout="5000" location="top end" variant="flat" color="red">
    {{ errorMessage }}
  </VSnackbar>
  <VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="green">
    {{ successMessage }}
  </VSnackbar>
  <div class=" d-flex align-center justify-center pa-4">
    <VCard class="auth-card pa-2 pt-0 rounded-5" max-width="600">
      <VCardItem class="justify-center pb-0">
        <span class="text-center">
          <VImg :src="seetingPlanLogo" width="250" height="50" class="logo-img" />
        </span>
      </VCardItem>
      <VCardText>
        <VRow>
          <VCol cols="12">
            <div class="text-center mt-2 mb-6">
              <v-icon color="success" size="50">mdi-check-circle</v-icon>
            </div>

            <h1 class="text-center mb-5">Thank You for Joining</h1>


            <p>
              We are thrilled to welcome you to our esteemed network of healthcare professionals. Thank you for taking
              the time to complete your registration and joining our mission to deliver exceptional care and improve
              patient outcomes.
              Your expertise and commitment to healthcare make you a valuable addition to our community, and we look
              forward to collaborating with you.</p><br>
            <h4 class="mb-3">What's Next ?</h4>
            <p>
              <b>Profile Verification:</b> Our team will review your registration details and credentials. Once
              verified, your
              profile will be activated, and you'll receive a confirmation email.
            </p>
            <p>
              <b>Onboarding Resources:</b> Within the next 24hrs, you will gain access to our online portal, where
              you'll find
              a comprehensive set of onboarding resources, including guidelines, best practices, and tools to help you
              get started seamlessly.
            </p>
            <p><b>Patient Assignments:</b> After completing the onboarding process, you will begin receiving patient
              assignments based on your specialties, availability, and preferences</p>
            <p>We understand the importance of a smooth transition and are dedicated to supporting you every step of the
              way. Our team is available to assist you with any questions or concerns you may have during the onboarding
              process or beyond.</p>

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

            <RouterLink class="text-primary" to="/provider/login">
              <v-icon class="mr-2">mdi-login</v-icon>
              <span class="ml-1">Go to Login</span>

            </RouterLink>
          </VCol>
        </VRow>

      </VCardText>
    </VCard>

  </div>
</template>

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

.error-message {
  color: #ff2f2f;
  font-size: 15px;
}
</style>
