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