<template>
  <v-app id="login">
    <v-content>
      <v-container fluid fill-height>
        <!-- SNACKBAR -->
        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          :color="snackbarColor"
        >
          {{ text }}
          <v-spacer></v-spacer>
          <v-btn flat text @click="snackbar = false">X</v-btn>
        </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 / PhoneNo</label>
                    <v-text-field
                      style="padding: 0px; margin: 0px;"
                      v-model.trim="userLogincredentials.email"
                      :rules="nameRules"
                      placeholder="Enter your email / phoneNo"
                      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";
import AllApiCalls from "@/Services/AllApiCalls.js";
export default {
  mixins: [AllApiCalls],
  data() {
    return {
      //SNACKBAR
      y: "top",
      x: "right",
      mode: "",
      timeout: 10000,
      text: "",
      snackbarColor: "",

      snackbar: false,
      append: "",
      e1: true,
      loading: false,
      remember: false,
      valid: false,
      userLogincredentials: {},
      nameRules: [(v) => !!v || "Field is required"],
      password: "",
      email: "",
      rules: {
        required: (value) => !!value || "password is Required.",
      },
      selectedStudent: {},
    };
  },
  methods: {
    async login() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        var userdata = {
          email: this.userLogincredentials.email,
          password: this.userLogincredentials.password,
        };
        if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) {
          userdata.fatherCellNo = this.userLogincredentials.email;
          delete userdata.email;
        }
        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);
              localStorage.setItem("teacherName", response.data.data.name);
              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");
            } else if (response.data.data.role === "PARENT") {
              this.$store.dispatch("setToken", response.data.data.token);
              this.$store.dispatch("Id", response.data.data.id);
              this.$store.dispatch("Role", response.data.data.role);
              localStorage.setItem("parentStudentId", response.data.data.id);

              http()
                .get("/parentStudentsList")
                .then((response) => {
                  /* set disabled students values */
                  console.log("students - ", response.data.data.students);
                  /* prepare an array of false status students */
                  var indexStatusFalse = [];
                  for (var i = 0; i < response.data.data.students.length; i++) {
                    if (response.data.data.students[i].status == false) {
                      indexStatusFalse.push(i);
                    }
                  }
                  /* introduce a property named disabled in response to make false staus students disbled */
                  for (var i = 0; i < indexStatusFalse.length; i++) {
                    response.data.data.students[
                      indexStatusFalse[i]
                    ].disabled = true;
                  }
                  /* make an array of students */
                  this.$store.dispatch(
                    "SET_STUDENTS_DATA",
                    response.data.data.students
                  );

                  /* counter to keep a track of number of students that are disabled or false */
                  var counter = 0;
                  /* if zero element of false students list is > 0 then make first student as defalut selected */
                  if (indexStatusFalse[0] > 0) {
                    this.selectedStudent = response.data.data.students[0]._id;
                  }
                  console.log("indexStatusFalse - ", indexStatusFalse);
                  /* if false student is the first one in the list then see if the next is also false */
                  if (indexStatusFalse[0] == 0) {
                    if (indexStatusFalse.length > 1) {
                      for (var i = 1; i < indexStatusFalse.length; i++) {
                        if (indexStatusFalse[i] == i) {
                          if (indexStatusFalse[i - 1] == i - 1) {
                            counter = i + 1;
                            continue;
                          }
                        } else {
                          counter = i;
                          break;
                        }
                      }
                    } else {
                      counter = 1;
                    }
                  }
                  console.log("counter - ", counter);
                  if (counter == response.data.data.students.length) {
                    this.seeSnackbar(
                      "Your wards have been removed ",
                      "warning"
                    );

                    this.$store.dispatch("setToken", null);
                    this.$store.dispatch("Id", null);
                  } else {
                    this.selectedStudent =
                      response.data.data.students[counter]._id;
                    var studentName = response.data.data.students[counter].name;
                    localStorage.setItem("studentName", studentName);
                    localStorage.setItem(
                      "parentStudentId",
                      this.selectedStudent
                    );
                    localStorage.setItem(
                      "parentClassId",
                      response.data.data.students[counter].classId
                    );
                    this.$router.push("/dashboard");
                  }
                  this.showLoader = false;
                })
                .catch((err) => {
                  console.log("err====>", err);
                  this.showLoader = false;
                });
            }
          })
          .catch((error) => {
            if (error.response.data.message) {
              this.text = error.response.data.message;
              this.snackbar = true;
              this.snackbarColor = "error";
              this.loading = false;
            } else {
              this.text = "Server appears to be offline";
              this.snackbar = true;
              this.snackbarColor = "error";
              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>