<template>
    <v-app id="login">
      <v-container fluid fill-height>
        <v-layout>
          <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">

            <v-toolbar class="card-styles mt-5" dark>

              <v-spacer></v-spacer>

              <v-toolbar-title>Change Password</v-toolbar-title>

              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card class="elevation-1 pa-3" id="form">
              <v-card-text>
                <v-flex xs12 sm8 md8 lg8 offset-sm2>

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

                    <!-- <v-select

                      :rules="userRule"
                      label="Select User"
                      :items="getRoles"
                      item-text="name"
                      item-value="name"
                      v-model="resetPassword.name"
                      @change="getUsers(resetPassword.name)"
                    ></v-select>
                    <v-select
                      :rules="userNameRule"
                      label="Select User Name"
                      :items="getUsersName"
                      item-text="email"
                      item-value="email"
                      v-model="resetPassword.email"

                    ></v-select>-->

                    <v-text-field
                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
                      :append-icon-cb="() => (e1 = !e1)"
                      :type="e1 ? 'password' : 'text'"
                      :rules="oldPasswordRule"
                      v-model="resetPassword.oldPassword"
                      :error-messages="errors.collect('resetPassword.oldPassword')"
                      v-validate="'required'"
                      data-vv-name="resetPassword.oldPassword"
                      label="Old Password"
                    ></v-text-field>

                    <v-text-field

                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
                      :append-icon-cb="() => (e1 = !e1)"
                      :type="e1 ? 'password' : 'text'"

                      :rules="newPasswordRule"
                      v-model="resetPassword.newPassword"
                      :error-messages="errors.collect('resetPassword.newPassword')"
                      v-validate="'required'"
                      data-vv-name="resetPassword.newPassword"

                      label="New Password"
                    ></v-text-field>
                    <v-text-field

                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
                      :append-icon-cb="() => (e1 = !e1)"
                      :type="e1 ? 'password' : 'text'"

                      v-model="resetPassword.confirmPassword"
                      :rules="rePasswordRule"
                      :error-messages="errors.collect('password2')"

                      v-validate="{ required: false, is: resetPassword.newPassword }"

                      data-vv-name="password2"
                      data-vv-as="password"

                      label="Re-enter New Password"

                    ></v-text-field>
                  </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

                    large
                    :loading="loading"
                    @click="reset"

                  >Change Password</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-app>
  </template>
  <script>
  import http from "@/Services/http.js";
  
  export default {
    data() {
      return {
        snackbar: false,
        y: "top",
        x: "right",
        mode: "",
        timeout: 4000,
        text: "",

        color: "",

        e1: true,

        password2: "",
        resetPassword: {},
        getUsersName: [],
        getRoles: [],
        valid: true,

        loading: false,

        text: "Password Changed",

        newPassword: "",

        oldPassword: "",

        userRule: [(v) => !!v || "User is required"],
        userNameRule: [(v) => !!v || "User Name is required"],
        oldPasswordRule: [(v) => !!v || "Old Password is required"],
        newPasswordRule: [(v) => !!v || "New Password is required"],
        rePasswordRule: [(v) => !!v || "Re-Password is required"],

      };
    },

    mounted() {
      this.token = this.$store.state.token;

      if (this.$store.state.role != "PARENT") {

        this.getRole();
      }

    },

    methods: {
      reset() {

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

          this.resetPassword.oldPassword === this.resetPassword.oldPassword

        ) {

          this.loading = true;

          this.resetPassword.newPassword = this.resetPassword.newPassword;

          http()

            .put("/change-password", this.resetPassword, {

              headers: { Authorization: "Bearer " + this.token },

            })

            .then((response) => {

              this.loading = false;
              this.snackbar = true;
              this.text = "Successfully Restet password !!";
              this.color = "green";
              this.clear();
            })

            .catch((error) => {

              // console.log("err====>",err);
              this.snackbar = true;
              this.text = "User Not Found or Incorrect currentPassword";
              this.color = "error";
              this.loading = false;
            });
        }
      },
      getRole() {
        this.showLoader = true;

        http()

          .get("/getRolesList", {

            headers: { Authorization: "Bearer " + this.token },

          })

          .then((response) => {

            for (let i = 0; i < response.data.data.length; i++) {
              if (
                response.data.data[i].name != "SUPERADMIN" &&
                response.data.data[i].name != "ADMIN"
              ) {
                this.getRoles.push(response.data.data[i]);
                this.showLoader = false;
              }

            }

          })

          .catch((error) => {

            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },
      clear() {
        this.$refs.form.reset();
      },
      getUsers(roles) {
        this.showLoader = true;
        http()
          .get("/getUserWithRole", {
            params: {

              name: roles,

            },

            headers: { Authorization: "Bearer " + this.token },

          })

          .then((response) => {

            this.getUsersName = response.data.data;
          })

          .catch((error) => {

            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }

          });

      },
    },

  };
  </script>
  <style scoped>

  .card-styles {
    background: #7f62f8 !important;
    border-color: #7f62f8 !important;

  }
  </style>