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

      <v-toolbar dense flat class="transparent mb-4">
        <v-toolbar-items class="mx-auto">
         <img src="/static/icon.png" height="50"  width="140" alt="logo" style=" margin-top: 15%">

        </v-toolbar-items>
      </v-toolbar>
      <v-container fluid>
        <v-layout align-center justify-center fill-height>

          <v-flex xs12 sm10 md6 lg4>

            <div>
              <v-app>
                <v-stepper v-model="e2">
                  <v-stepper-header>
                    <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
                    <v-divider></v-divider>
                    <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
                  </v-stepper-header>
                  <v-stepper-items>
                    <v-stepper-content step="1">
                      <v-content>

                        <v-container fluid class="content">

                          <v-layout align-center justify-center fill-height>

                            <v-flex>
                              <v-toolbar style="background-color: #7852cc" 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 lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>

                                   <v-form ref="form" v-model="valid" lazy-validation>

                                      <div class="custom-input-align">
                                        <v-text-field 
                                         class="text-md-center"
                                         :rules="emailRules"
                                         v-model="forgetemail" 
                                         label="Enter Your email ID" 
                                         required></v-text-field>
                                      </div>
                                    </v-form>
                                  </v-flex>
                                </v-card-text>
                                <v-card-actions>
                                  <v-flex text-xs-center>

                                    <v-btn style="background-color: #71d9ea; color: #0c0754;" dark flat @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-card>
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-content>
                  </v-stepper-content>
                  <v-stepper-content step="2">
                    <v-content>
                      <v-container fluid fill-height>
                        <v-layout align-center justify-center>

                          <v-flex>
                            <v-toolbar style="background-color: #7852cc" 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 And New Password. </h5>
                                <h5 class="text-xs-center"> We'll send you a reset.</h5>

                                <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>

                                  <v-form class="mt-4">
                                    <div class="custom-input-align">
                                      <v-text-field 

                                        class="text-md-center"
                                        v-model="uniqueCode" 
                                        type="text"
                                        label="Enter Unique Code" 
                                        required>
                                      </v-text-field>

                                      <v-text-field
                                      :rules="[rules.required,rules.min]"
                                      v-model="changepassword"
                                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
                                      :append-icon-cb="() => (e1 = !e1)"
                                      :type="e1 ? 'password' : 'text'"
                                      name="input-10-1"

                                      label="New Password"

                                      counter
                                     ></v-text-field>
                                    </div>
                                  </v-form>
                                </v-flex>
                              </v-card-text>
                              <v-card-actions>
                                <v-flex text-xs-center>

                                  <v-btn style="background-color: #71d9ea; color: #0c0754;" dark flat @click="resetPassword">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-card>
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-content>
                    <v-btn
                      color="#7852cc"
                      dark
                      @click="e2 = 1"
                    >Back</v-btn>
                  </v-stepper-content>
                </v-stepper-items>
              </v-stepper>
            </v-app>
          </div>

        </v-flex>

      </v-layout>
    </v-container>
    <!-- <v-footer class="pa-4 fixcolors">
    </v-footer>  -->

   </v-app>

  </template>

  <script>

  import http from '@/Services/http.js';

  export default {
    data: () => ({

      e1: true,
      e2:0,

      snackbar: false,

      y: 'top',
      x: 'right',
      mode: '',
      timeout: 4000,
      text: '',

      loading: false,

      forgetemail:'',

      uniqueCode: '',

      password:'',
      changepassword:'',

      valid: true,

      emailRules: [

        v => !!v || "E-mail is required",
        v =>
          /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
          "E-mail must be valid"

      ],

      rules: {
          required: value => !!value || "password is Required.",
          min: v =>
            (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
              v
            ) &&
              v.length >= 6) ||
            "Min 4 characters upper case lower case symbol required"
        }

    }),
  
    methods: {

      reset () {

        if (this.$refs.form.validate()) {

        http().get('/forgot-password?email='+ this.forgetemail)

          .then(response => {
            // console.log("response=====>",response.data.data.token);
            this.$store.dispatch("setToken", response.data.data.token);
            this.loading = true;

            this.e2 = 2 ;

            if(this.snackbar=true){

                this.text= "Please Fill your Last Step of Forget Password!"              

            }
         }).catch(err => {
             this.text="User Not Found or Incorrect Email"
             this.snackbar= true;
             this.loading = false;
         })

       }

      },
      resetPassword(){
        let forgotPassword = {

          email: this.forgetemail,
          uniqueCode: this.uniqueCode,

          password: this.changepassword
        }

        http().post('/reset-password',forgotPassword)

          .then(response => {

            console.log("response=====>",response);
            this.loading = true;
            if(this.snackbar=true){

                this.text= "Successfully Change 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">
  .content {
      padding: 100px 0px 100px 0px !important;
  }

    #login {
      height: 50%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      z-index: 0;
    }

  img{

      /* position:absolute; */

      top:13px;
      left:8px;

  }
  .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) {  

  .theme--light .v-btn, .application .theme--light.v-btn {
      color: white !important;
  }

  .logoSchool{
  font-size: 18px;
  margin-top: 20px !important;
  }
  .content {
      padding: 0px 0px 0px 0px !important;

  }
  }

  </style>