<template>

    <v-app id="login">

      <v-toolbar class="fixcolors">

        <v-toolbar-items>

          <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" />

          <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> -->

        </v-toolbar-items>
      </v-toolbar>

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

              <v-toolbar class="fixcolors" dark>

                <v-spacer></v-spacer>

                <v-toolbar-title>School Login</v-toolbar-title>

                <v-spacer></v-spacer>
              </v-toolbar>

              <v-card class="elevation-1 pa-1">

                <v-card-text>
                  <v-flex xs12 sm12 md12 lg12>
                    <v-form ref="form" v-model="valid" lazy-validation>
                      <v-text-field

                        v-model.trim="userLogincredentials.email"

                        :rules="nameRules"
                        label="Username"
                        required
                      ></v-text-field>
                      <v-text-field

                        :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"
                        label="Password"

                        @keyup.enter="login"

                        counter
                      ></v-text-field>
                    </v-form>

                    <v-layout row wrap>
                      <v-flex xs6>

                        <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->

                      </v-flex>
                      <v-flex xs6>

                        <h5 class="right mt-4">
                          <router-link
                            class="link"
                            to="/forgetpassword"
                            style="border-bottom: 2px solid #aaa;"
                          >Forgot Password</router-link>
                        </h5>
                      </v-flex>
                    </v-layout>

                  </v-flex>

                </v-card-text>
                <v-layout>

                  <v-flex sm12 class="my-3">
                    <v-btn
                      style="margin: auto;display: block;b"
                      class="fixcolors"
                      round
                      dark
                      large
                      @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-footer class="pa-4 fixcolors"></v-footer>

    </v-app>

  </template>
  
  <script>

  import http from "@/Services/http.js";

  export default {

    data() {

      return {

        snackbar: false,
        y: "top",
        x: "right",
        mode: "",
        timeout: 3000,
        text: "",

        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() {

        this.loading = true;

        var userdata = {

          email: this.userLogincredentials.email,

          password: this.userLogincredentials.password

        };
        http()

          .post("/schoolLogin", userdata)

          .then(response => {

            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("/school");

            } 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("/libraryMember");

            } 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("/feeTypes");

            }

          })

          .catch(error => {

            if (error) {
              this.text = "Server appears to be offline";
              this.snackbar = true;

              this.loading = false;

            }
            if (error.response.data.message) {
              this.text = error.response.data.message;
              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("/school");
      // }

    },

    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>

  img {
    position: absolute;
    top: 13px;

    left: 8px;

  }
  .v-btn--large {

    padding: 0px 84px;

  }

  .link {
    text-decoration: none;

  }

  a {
    color: #696969;
  }

  .forget {
    margin-top: 20px;
  }

  .mt-4 {

    margin-top: 21px !important;

  }
  @media screen and (max-width: 600px) {

    .forget {
      margin-top: none;
      margin-left: 18px;
    }
    img {
      left: 10px;
      height: 34px;
      width: 120px;
    }
    .logoSchool {
      font-size: 18px;
      margin-top: 20px !important;
    }
    h5 {

      font-size: 14px !important;

    }

  }

  </style>