<template>
    <v-app id="login">

      <v-toolbar color="grey lighten">

        <v-toolbar-items>

         <!-- <img src="/static/ana@2x.png" height="36" alt="ana" /> -->
         <h3 class="white--text my-3 ml-4">School-Management</h3>

      </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 button" 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('/schoolForgotPassword?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;
  }

  .button{
    text-transform: none;
  }

  @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>