<template>
  <q-layout class="bg-grey-4 q-pt-md">
    <transition appear enter-active-class="animated slideInLeft" leave-active-class="hidden">
      <div class="row flex flex-center">
        <div class="col-12 col-md-8 col-sm-12 col-xs-12">
          <q-card class="q-ma-sm" elevated bordered>
            <q-card-section>
              <div class="text-grey-8 text-bold text-center">
                <div class="text-h4 text-bold">Forgot Your Password?</div>
                <div class="text-body1 q-py-md">Input your registered email to reset your password</div>
              </div>
              <q-form ref="forgotPassword" @submit="onSubmitForm">
                <div class="row">
                  <div class="col-12 col-md-12 q-pa-sm">
                    <q-input
                      outlined
                      v-model="newRecord.email"
                      dense
                      type="email"
                      label="Email"
                      hint="Enter email adress i.e ( abc@domain.com)"
                    />
                  </div>
                  <div class=" hidden col-12 col-md-12 q-pa-sm">
                    <q-input
                      v-model="newRecord.password"
                      outlined
                      dense
                      :type="isPwd ? 'password' : 'text'"
                      hint="Password with toggle"
                    >
                      <template v-slot:append>
                        <q-icon
                          :name="isPwd ? 'visibility_off' : 'visibility'"
                          class="cursor-pointer"
                          @click="isPwd = !isPwd"
                        />
                      </template>
                    </q-input>
                  </div>
                </div>
                <div class="row justify-between">
                  <div class="q-pa-sm">
                    Need Help?
                    <a href="/#/forgot">Forgot pasword</a>
                  </div>
                 
                </div>
                <div class="col-12">
                  <q-btn color="secondary" class="full-width" type="submit">Send</q-btn>
                </div>
              </q-form>
            </q-card-section>

            <q-card-section>
              <div class="row flex-center">
                <div class="q-pa-sm">
                  Don't have an accouunt?
                  <a href="/#/signup">Sign up</a>
                </div>
                <div class="q-pa-sm">
                  OR
                </div>
                <div class="q-pa-sm"> 
                  Have an account?
                  <a href="/#/login">Login</a>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
     
      <q-page-container>
        <keep-alive>
          <router-view />
        </keep-alive>
      </q-page-container>
    </transition>
  </q-layout>
</template>

<script>
import { fabGithub } from "@quasar/extras/fontawesome-v5";

export default {
  data() {
    return {
      newRecord: {
        email: "",
        password: ""
      },
      isPwd: true,
    };
  },
  methods: {
     forgotPassword: function () {
      this.$refs.forgotPassword.validate().then(success => {
        if (success) {
          alert('Register button has clicked!')
          this.$router.push('/dashboards')
        } else {
          alert('SignUp failed! ')

          this.$router.push('/tutor-create')
        }
      });
      this.$refs.forgotPassword.resetValidation();
    },
   
    //  onSubmitForm() {
    //   if (this.label == "login") {
    //     alert("login the user");
    //   } else {
    //     alert("Password Chanded");
    //   }
    // },
  }
};
</script>

<style lang="css" scoped>
.show {
  display: inline !important;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .show {
    display: none !important;
  }
}
</style>

