<template>
  <main class="landing-page">
    <div class="container-fluid main-wrp">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javascript:void(0);"
          ><img src="../assets/images/logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample03"
          aria-controls="navbarsExample03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExample03">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="javascript:void(0);">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0);">Masterclass</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0);">Stories</a>
            </li>
            <li class="nav-item spotLight-img">
              <a class="nav-link" href="javascript:void(0);"
                ><img src="../assets/images/SPOTLight.svg"
              /></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0);">Library</a>
            </li>
          </ul>
        </div>
      </nav>
      <!-- menu wrapper -->
         <div class="sign-wrp">
      <div class="row col-reverse">
        <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
        <!-- users land image -->
        <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
          <h1 class="welcome-hd-back">
            we’re stoked 
you’re back!
          </h1>
        </div>
        <!-- users land image -->
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-layout signup-frm-spc">
            <form v-on:keyup.enter="loginWIthEmail">
              <h5>Log In using</h5>
              <div class="social-login">
                <ul>
                  <li>
                    <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
                  </li>
                  <li>
                    <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
                  </li>
                  <li>
                    <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
                  </li>
                </ul>
              </div>
              <h5>or Log In with email</h5>
              <div class="fill-form">
                <label for="inputEmail" class="sr-only">Email address</label>
                <input
                  type="email"
                  id="inputEmail"
                  class="form-control"
                  placeholder="Your Email ID"
                  v-model="userData.email"
                />
                <label for="inputPassword" class="sr-only">Password</label>
                <input
                  type="password"
                  id="inputPassword"
                  class="form-control"
                  placeholder="Password"
                  v-model="userData.password"
                />

                <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" 
 @click="loginWIthEmail">
                  <img src="../assets/images/key.svg" /> Log In to your account
                </a>
                <p class="forget-pass light-font-weight">
                 Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a>
                </p>
                <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3>
              </div>
            </form>
          </div>
        </div>
        <!-- sign up -->
      </div>  </div>
      <!-- body wrapper -->
    </div>
  </main>
</template>

<script>

import Vue from "vue";
import router from "../router";
import $ from "jquery";
import axios from "axios";

export default {
  name: "LandingPage",

  data() {
    return {
      loggedinFlag: false,
      userData:{},
    };
  },
   mounted() {
    // this.$auth.logout();
    localStorage.removeItem("spotlight_usertoken");
    localStorage.removeItem("spotlight_email");
  },
  methods: {
     login() {
      this.$auth.loginWithRedirect();
    },
    goToSignUp(){
      this.$router.push("/");
    },
    goToReset() {
      this.$router.push("/reset");
    },
     loginWIthEmail(){
         axios
        .post("/login", this.userData)
        .then((response) => {
           console.log("login- response",response)
           this.$toaster.success(response.data.message)
            if(response.data.status == 'success'){
                localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
                this.$router.push("/profile");
            }
        })
        .catch( (error) =>{
          if (error.response) {
            this.$toaster.error(error.response.data.message)
            if(error.response.data.message == 'Email Not Verified'){
               localStorage.setItem('spotlight_email', this.userData.email);
                this.$router.push({ name: 'Otp', params: { flag: true }});
            }
          }
        });
    }
  },
};
</script>
<style>
.light-font-weight {
  font-weight: 500 !important;
}
.no-underline{
  text-decoration: none;
}

</style>