<template>
  <main class="landing-page">
    <div class="container-fluid main-wrp">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="#"
          ><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="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Masterclass</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Stories</a>
            </li>
            <li class="nav-item spotLight-img">
              <a class="nav-link" href="#"
                ><img src="../assets/images/SPOTLight.svg"
              /></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">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">
              Welcome <br />
              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>
                <!-- <h5>SignUp Using</h5> -->
                <div class="social-login" style="visibility: hidden">
                  <ul>
                    <li>
                      <a href="#"><img src="../assets/images/google.svg" /></a>
                    </li>
                    <li>
                      <a href="#"><img src="../assets/images/linkdin.svg" /></a>
                    </li>
                    <li>
                      <a href="#"><img src="../assets/images/twitter.svg" /></a>
                    </li>
                  </ul>
                </div>
                <h5>
                  Please enter the OTP shared to {{email}} to confirm
                  your email address
                </h5>
                <div class="fill-form">
                  <label for="inputEmail" class="sr-only">OTP</label>
                  <input
                    type="text"
                    id="inputEmail"
                    class="form-control"
                    placeholder="Your OTP"
                    v-model="otp"

                  />
                  <!-- <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> -->

                  <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="verifyOtp">
                    <img src="../assets/images/check-circle.png" /> Verify Email
                    Address
                  </a>
                  <p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail(true)">Resend</a></p>
                  <!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</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 axios from "axios";

export default {
  name: "Otp",

  data() {
    return {
        email:null,
        otp:null,
    };
  },
  mounted() {
    this.email = localStorage.getItem("spotlight_email");
    console.log("this.$route.params.flag",this.$route.params.flag)
    if(this.$route.params.flag == true){
        this.ResendEmail(false);
    }

  },
  methods: {
    goToLogin() {
      this.$router.push("/");
    },
    verifyOtp(){
        axios
        .get(`/verifyEmail?email=${this.email}&otp=${this.otp}`, this.userData)
        .then((response) => {
            console.log("otp 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)
          }
        });

    },
    ResendEmail(req){
         axios
        .post("/forgotPassword", {'email':this.email,'forgotPassword':false})
        .then((response) => {
           console.log("forgotPassword- response",response)
           if(req){
                this.$toaster.success(response.data.message)
           }
        })
        .catch( (error) =>{
          if (error.response) {
            this.$toaster.error(error.response.data.message)
          }
        });
    }
  },
};
</script>
