<template>
  <v-app id="login">
    <v-toolbar  class="fixcolor">
      <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 class="fixcolor" 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;b" class="fixcolor" 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"  style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></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 >= 6) ||
        //   "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;
          setTimeout(() => {
            this.$router.push("/teachers");
          }, 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>