<template>
  <v-app id="login">
    <v-content>
      <v-container fluid fill-height>
        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          :color="color"
        >{{ text }}</v-snackbar>
        <v-layout align-center justify-center>
          <v-flex xs12 sm10 md5 lg4>
            <img
              src="/static/icon.png"
              height="40"
              width="140"
              alt="logo"
              class="logo mx-auto mb-2"
            />
            <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark>
              <img
                src="/static/intrackIllustration.png"
                class="mx-auto logoSchool"
                style="display:block"
                width="280"
              />
              <v-card-text align-center justify-center>
                <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title>
                <v-flex xs12 sm12 md12 lg12>
                  <v-form ref="form" v-model="valid" lazy-validation>
                    <label class="title">Email</label>
                    <v-text-field
                      style="padding: 0px; margin: 0px;"
                      v-model.trim="userLogincredentials.email"
                      :rules="nameRules"
                      placeholder="Enter your email"
                      required
                    ></v-text-field>
                    <label class="title">Password</label>
                    <v-text-field
                      style="padding: 0px; margin: 0px;"
                      :rules="[rules.required]"
                      v-model.trim="userLogincredentials.password"
                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
                      :append-icon-cb="() => (e1 = !e1)"
                      :type="e1 ? 'password' : 'text'"
                      name="input-10-1"
                      placeholder="Enter Your password"
                      @keyup.enter="login"
                    ></v-text-field>
                  </v-form>
                  <v-layout>
                    <v-flex xs12 class="pa-0 ma-0">
                      <h5 class="right mt-4">
                        <router-link class="link" to="/forgetpassword">Forgot password</router-link>
                      </h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-card-text>
              <v-layout>
                <v-flex sm12>
                  <v-btn
                    style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
                    dark
                    flat
                    @click="login"
                    :loading="loading"
                  >Login</v-btn>
                </v-flex>
              </v-layout>
              <v-layout></v-layout>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import http from "@/Services/http.js";
export default {
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      append: "",
      e1: true,
      loading: false,
      remember: false,
      valid: false,
      userLogincredentials: {},
      nameRules: [v => !!v || "Username is required"],
      password: "",
      email: "",
      rules: {
        required: value => !!value || "password is Required."
      }
    };
  },
  methods: {
    login() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        var userdata = {
          email: this.userLogincredentials.email,
          password: this.userLogincredentials.password
        };
        http()
          .post("/schoolLogin", userdata)
          .then(response => {
            // console.log("token",response.data.data);
            this.loading = false;
            if (response.data.data.role === "ADMIN") {
              this.$store.dispatch("setToken", response.data.data.token);
              this.$store.dispatch("Id", response.data.data.id);
              this.$store.dispatch("Role", response.data.data.role);
              this.$router.push("/dashboard");
            } else if (response.data.data.role === "SUPERADMIN") {
              this.$store.dispatch("setSchoolRole", response.data.data.role);
              this.$store.dispatch("setSchoolToken", response.data.data.token);
              this.$router.push("/schooldashboard");
            } else if (response.data.data.role === "TEACHER") {
              // console.log("teacher", response.data.data.role);
              this.$store.dispatch("setToken", response.data.data.token);
              this.$store.dispatch("Id", response.data.data.id);
              this.$store.dispatch("Role", response.data.data.role);
              this.$router.push("/dashboard");
            } else if (response.data.data.role === "LIBRARIAN") {
              this.$store.dispatch("setToken", response.data.data.token);
              this.$store.dispatch("Id", response.data.data.id);
              this.$store.dispatch("Role", response.data.data.role);
              this.$router.push("/dashboard");
            } else if (response.data.data.role === "ACCOUNTANT") {
              this.$store.dispatch("setToken", response.data.data.token);
              this.$store.dispatch("Id", response.data.data.id);
              this.$store.dispatch("Role", response.data.data.role);
              this.$router.push("/dashboard");
            }
          })
          .catch(error => {
            if (error.response.data.message) {
              this.text = error.response.data.message;
              this.snackbar = true;
              this.loading = false;
            } else {
              this.text = "Server appears to be offline";
              this.snackbar = true;
              this.loading = false;
            }
          });
      }
    }
  },
  mounted() {
    if (this.$store.state.isUserLoggedIn == true) {
      this.$router.push("/dashboard");
    } else if (this.$store.state.isSchoolLoggedIn == true) {
      this.$router.push("/dashboard");
    }
  },
  computed: {
    color() {
      return this.loading ? "success" : "error";
    }
  }
};
</script>

<style scoped lang="css">
#login {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  z-index: 0;
}
</style>
<style scoped>
.schoolLogo {
  height: 60%;
  padding-left: 31%;
}
/* img {
  position: absolute;
  top: 13px;
  left: 8px;
} */
.v-btn--large {
  padding: 0px 84px;
}
.link {
  text-decoration: none;
}
a {
  color: #fff;
}
.mt-4 {
  margin-top: 21px !important;
}
.logo {
  display: block;
}
@media screen and (max-width: 600px) {
  img {
    left: 10px;
    height: 34px;
    width: 120px;
  }
  .logo {
    height: 56px;
    left: 10px;
    width: 120px;
    display: block;
  }
  .logoSchool {
    height: 87px;
    left: 10px;
    width: 120px;
  }
}
</style>