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