<template>

    <v-app id="login">

      <v-toolbar color="grey lighten">
        <v-toolbar-items>

          <!-- <img src="/static/ana@2x.png" height="36" alt="ana"> -->
          <h3 class="white--text my-3 ml-4">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 color="black" 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="userLogincredentials.email"

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

                        :rules="[rules.required]"

                        v-model="userLogincredentials.password"
                        :append-icon="e1 ? 'visibility_off' : 'visibility'"
                        :append-icon-cb="() => (e1 = !e1)"
                        :type="e1 ? 'password' : 'text'"
                        name="input-10-1"
                        label="Password"
                        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;" round color="black" 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" color="grey darken-2"></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.",

          // min: v =>
          //   (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
          //     v
          //   ) &&
          //     v.length >= 4) ||
          //   "Min 4 characters upper case lower case symbol required"

        }

      };
    },
    methods: {

      login() {

        var userdata = {

          email: this.userLogincredentials.email,
          password: this.userLogincredentials.password,
          role:"ADMIN"
          

        };
        http()

          .post("/schoolLogin", userdata)

          .then(response => {

            this.$store.dispatch("setToken", response.data.data.token);

            this.$store.dispatch("Id", response.data.data.id);

            this.loading = true;
            if ((this.snackbar = true)) {
              this.text = "Successfully Login";
            }
            setTimeout(() => {
              this.$router.push("/dashboard");
            }, 2000);
          })
          .catch(err => {
            this.text = "Email or Password not matched !!";
            this.snackbar = true;
            this.loading = false;
          });
      }
    },
    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: 50px;

  }
  .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{
  top:16px;
  left:10px;
  height: 24px;
  width: 66px;;
  }

  }

  </style>