<template>
  <v-app id="login">
    <v-toolbar class="fixcolors">
      <v-toolbar-items>
       <img src="/static/icon.jpeg" height="36" alt="logo">
        <h3 class="white--text my-3 ml-5 logoSchool">Technology Succes</h3>
      </v-toolbar-items>
    </v-toolbar>
    <v-container fluid>
      <v-layout align-center justify-center fill-height>
        <v-flex xs12 sm8 md7 lg8>
          <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 xs12 sm8 md7 lg8>
                            <v-toolbar class="fixcolors" 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 round class="mt-1 button fixcolors" 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-stepper-content>
                <v-stepper-content step="2">
                  <v-content>
                    <v-container fluid fill-height>
                      <v-layout align-center justify-center>
                        <v-flex xs12 sm8 md7 lg8>
                          <v-toolbar class="fixcolors" 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="email" 
                                     :rules="emailRules"
                                     label="Enter Your email ID" 
                                     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="Password"
                                    counter
                                   ></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 fixcolors" dark large @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-snackbar>
                        </v-card>
                      </v-flex>
                    </v-layout>
                  </v-container>
                </v-content>
                <v-btn
            color="primary"
            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,
    email: '',
    forgetemail:'',
    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('/schoolForgotPassword?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 you Fill Last Step of Forget Password!"              
          }
       }).catch(err => {
           this.text="User Not Found or Incorrect Email"
           this.snackbar= true;
           this.loading = false;
       })
     }
    },
    resetPassword(){
      let forgotPassword = {
        resetToken: this.$store.state.token,
        email: this.email,
        password: this.changepassword
      }
      http().post('/schoolResetPassword',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;
}
img{
top: 21px;
left: 10px;
height: 24px;
width: 33px;
}
.logoSchool{
font-size: 18px;
margin-top: 20px !important;
}
.content {
    padding: 0px 0px 0px 0px !important;
}
}
</style>