<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
                                    v-on:submit.prevent="reset"
                                  >
                                    <!-- <div style="margin-top:10%">
                                      <label for="isEmail" v-if="isEmail">Email</label>
                                      <label for="isEmail" v-if="!isEmail">Phone Number</label>
                                      <v-switch class="pl-3" v-model="isEmail"></v-switch>
                                    </div>-->
                                    <!-- <v-switch class="pl-3" v-model="isEmail" label="Email"></v-switch> -->
                                    <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>
                                    <!-- <div class="custom-input-align" v-if="!isEmail">
                                      <v-text-field
                                        class="text-md-center"
                                        :rules="numberRules"
                                        v-model="phoneNumber"
                                        label="Enter Your Phone Number"
                                        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,
    isEmail: true,
    // phoneNumber: null,
    emailRules: [
      (v) => !!v || "E-mail is required",
      (v) =>
        /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
        "E-mail must be valid",
    ],
    // numberRules: [
    //   (v) => !!v || " Phone Number  is required",
    //   (v) => v <= 10000000000 || "Max 10 characters is required",
    // ],

    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>