<template >
  <v-container class="fill-height" id="signInListen">
    <v-row align="center" justify="center">
      <v-col cols="12">
        <v-card elevation="0">
          <v-window v-model="step">
            <v-window-item :value="1">
              <v-row>
                <v-col cols="12" md="8" class="main">
                  <v-card-text class="mt-1">
                    <h1 class="text-center display-2 logowhite--text">Sign in</h1>

                    <v-form> 
                      <v-text-field
                        label="Username"
                        v-model="username"
                        name="Username"
                        prepend-icon="mdi-account"
                        type="text"
                        color="primary"
                      />
                      <v-text-field
                        id="password"
                        label="Password"
                        v-model="password"
                        name="Password"
                        prepend-icon="mdi-key"
                        type="password"
                        color="primary"
                      />
                    </v-form>
                    <p id="missing"></p>
                  </v-card-text>
                  <div class="text-center mt-3">
                    <v-btn rounded color="logowhite" outlined dark  v-on:click="signin()" >Sign In</v-btn>
                  </div>
                </v-col>
                <v-col cols="12" md="4" class="main">
                  <v-card-text class="white--text mt-1">
                    <h1 class="text-center display-1 primary--text">No account yet?</h1>
                    <div class="text-center ma-12">
                      <v-avatar min-width="100" size="230">
                        <img src="../assets/logo_gt.svg" alt="John" />
                      </v-avatar>
                    </div>

                    <div class="text-center mt-10">
                      <v-btn
                        class="primary--text"
                        rounded
                        outlined
                        dark
                        @click="step++"
                      >Create Account</v-btn>
                    </div>
                  </v-card-text>
                </v-col>
              </v-row>
            </v-window-item>
            <v-window-item :value="2">
              <v-row class="fill-heigth">
                <v-col cols="12" md="4" class="main">
                  <v-card-text class="white--text mt-1">
                    <h1 class="text-center display-1 primary--text">Welcome Back</h1>
                  </v-card-text>
                  <div class="text-center ma-12">
                    <v-avatar min-width="100" size="230">
                      <img src="../assets/logo_gt.svg" alt="John" />
                    </v-avatar>
                  </div>
                  <div class="text-center mt-3">
                    <v-btn class="primary--text" rounded outlined dark @click="step--">Sign In</v-btn>
                  </div>
                </v-col>
                <v-col cols="12" md="8" class="main">
                  <v-card-text class="mt-12">
                    <h1 class="text-center display-2 logowhite--text">Create Account</h1>
                    <v-form>
                      <v-text-field
                        label="Firstname"
                        name="FirstnameR"
                        v-model="firstname"
                        prepend-icon="mdi-account-box"
                        type="text"
                        color="primary "
                      />
                      <v-text-field
                        label="Lastname"
                        name="LastnameR"
                        v-model="lastname"
                        prepend-icon="mdi-account-box"
                        type="text"
                        color="primary"
                      />
                      <v-text-field
                        label="Username"
                        name="UsernameR"
                        v-model="usernameR"
                        prepend-icon="mdi-account"
                        type="text"
                        color="primary"
                      />
                      <v-text-field
                        label="Password"
                        name="PasswordR"
                        v-model="passwordR"
                        prepend-icon="mdi-key"
                        type="password"
                        color="primary"
                      />
                    </v-form>
                    <p id="missingR"></p>
                  </v-card-text>
                  <div class="text-center mt-n5">
                    <v-btn color="logowhite" rounded outlined v-on:click="signup()" >Sign Up</v-btn>
                  </div>
                </v-col>
              </v-row>
            </v-window-item>
          </v-window>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

export default {
  data: () => ({
    step: 1,
    username: "",
    password: "",
    firstname: "",
    lastname: "",
    usernameR: "",
    passwordR: ""
   
  }),
  props: {
    source: String
  },
  methods: {
    signin() {
      if (this.username != "" && this.password != "") {
         document.getElementById("missing").innerHTML= "";
        const loginData = {
          username: this.username,
          password: this. password
        }
        this.$emit('signIn', loginData);
      }else {
        document.getElementById("missing").innerHTML= "Please fill out all fields";
      }

     
    },
    signup(){
      if (this.usernameR != "" && this.passwordR != "") {
         document.getElementById("missingR").innerHTML= "";
        const signupData = {
          firstname: this.firstname,
          lastname: this.lastname,
          username: this.usernameR,
          password: this. passwordR
        }
        this.$emit('signUp', signupData);
      }else {
        document.getElementById("missingR").innerHTML= "Please fill out all fields";
      }
    }
  },
  mounted(){
    var listen =  document.getElementById('signInListen');
   listen.addEventListener('keyup', (e) => {
  if (e.keyCode === 13) {
   e.preventDefault();
   if(this.step==1){
     this.signin();
   }else{
     this.signup();
   }
   
  } 

});
  }
};
</script>

<style lang="css" scoped>
</style>
