<template>
  <v-app id="login">
    <v-toolbar color="grey lighten">
      <v-toolbar-items>
       <img src="/static/ana@2x.png" height="36" alt="ana" />
    </v-toolbar-items>
  </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md7 lg5>
          <v-toolbar color="black" dark>
          <v-spacer></v-spacer>
          <v-toolbar-title>Forget Password</v-toolbar-title>
          <v-spacer></v-spacer>  
        </v-toolbar>
            <v-card class="elevation-1 pa-1">
              <v-card-text>
                <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5>
                <h5 class="text-xs-center"> We'll send you a reset.</h5>
                <v-flex lg4 sm6 xs10 offset-sm3 offset-xs1 offset-lg4>                           
                <v-form class="mt-4">
                <div class="custom-input-align">
                <v-text-field 
                  class="text-md-center"
                  v-validate="'required|email'" 
                  v-model="changePassword" 
                  :error-messages="errors.collect('email')" 
                  label="Enter Your email ID" 
                  data-vv-name="email" 
                  required>
                </v-text-field>
                </div>  
                </v-form></v-flex>
                </v-card-text>
                <v-card-actions>
                <v-flex text-xs-center>
                <v-btn round class="mt-1" color="black" dark large @click="reset">Send Request</v-btn></v-flex>
                </v-card-actions>
                <v-snackbar
                 :timeout="timeout"
                 :top="y === 'top'"
                 :right="x === 'right'"
                 :vertical="mode === 'vertical'"
                 v-model="snackbar"
                 :color= color
                 >
                  {{ text }}
               </v-snackbar>
              </v-snackbar>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  <v-footer class="pa-4" color="grey darken-2"> 
  </v-footer>
  </v-app>
</template>
<script>
import http from '@/Services/http.js';

export default {
  data: () => ({
    changePassword:'',
    snackbar: false,
    y: 'top',
    x: 'right',
    mode: '',
    timeout: 4000,
    text: '',
    loading: false,
    email: ''
  }),

  methods: {
    reset () {

      http().get('/adminForgotPassword?email='+ this.changePassword)
        .then(response => {
          console.log("response=====>",response);
          this.loading = true;
          if(this.snackbar=true){
              this.text= "Please check your email and Copy your password!"              
          }
          setTimeout(() => {
          this.$router.push('/');
       }, 1000);
       }).catch(err => {
           this.text="User Not Found or Incorrect Email"
           this.snackbar= true;
           this.loading = false;
       })
    }
  },
  computed:{
  color(){
    return this.loading ? 'success' : 'error'
}
}

};
</script>
<style scoped lang="css">
  #login {
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 0;
  }
img{
position:absolute;
top:13px;
left:50px;
}
.v-btn--large {
    padding: 0px 74px;
}
@media screen and (max-width: 472px) {
.v-btn--large {
    padding:0px 20px !important;
    font-size:13px;
}
h5 {
    font-size: 11px;
}
}
@media screen and (max-width: 600px) {  
img{
top:16px;
left:10px;
height: 24px;
width: 66px;;
}
}
</style>