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

              <v-toolbar dense flat class="transparent mb-4">
                <v-toolbar-items class="mx-auto">
                  <img src="/static/icon.png" height="40" width="140" alt="logo" class="logo"/>
                  <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> -->
                </v-toolbar-items>

              </v-toolbar>

              <v-card class="elevation-1 pa-1 card" style="background-color: #7852cc" dark>
                <img
                  src="/static/intrackIllustration.png"
                  class="mx-auto logoSchool"
                  style="display:block"
                  width="400"
                />
                <v-card-text align-center justify-center>
                  <v-toolbar-title class="text-xs-center my-4 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

                        v-model.trim="userLogincredentials.email"

                        :rules="nameRules"

                        placeholder="Enter your email"

                        required
                      ></v-text-field>

                      <label class="title">Password</label>

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

                        placeholder="Enter Your 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">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;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() {

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

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

    img {
      left: 10px;
      height: 34px;
      width: 120px;
    }

    .logo {
      height: 56px;
      left: 10px;
      width: 120px;

    }

    .logoSchool {
      height: 87px;
      left: 10px;
      width: 120px;

    }

  }

  </style>