<template>
  <div class="main-bg">
    <div class="left">
      <div class="content_height">
      <img :src="`/images/logo.png`" width="60"> 
      <h1 v-if="this.isTokenValid == true">New Password</h1>

      <div class="card-body  px-0">
        <div v-if="this.isTokenValid == true">
          <form autocomplete="off" @submit.prevent="resetPassword" method="post">

            <div class="form-group">
              <label for="email">Email address</label>
              <input type="text" id="email" class="form-control" placeholder="Enter email" v-model="email">
              <span class="text-danger help-block" v-if="has_error && errors.email">{{ errors.email[0] }}</span>
            </div>

            <div class="form-group">
              <label for="password">New password</label>
              <input type="password" id="password" class="form-control" placeholder="New password" v-model="password">
              <span class="text-danger help-block" v-if="has_error && errors.password">{{ errors.password[0] }}</span>
            </div>

            <div class="form-group">
              <label for="password_confirmation">Confirm Password</label>
              <input type="password" id="password_confirmation" class="form-control" placeholder="Confirm Password" v-model="password_confirmation">
            </div>
            <VueLoadingButton type="submit" aria-label="Submit" class="btn btn-primary 
              btn-imp  btn-block mt-5" :loading="isLoading" :styled="isStyled" >
              Submit
            </VueLoadingButton>

          </form>
        </div>
        
        <div v-else>
	        <div class="alert alert-danger reset-pass-alert" role="alert">
	  			Your password reset link has expired!
			</div>
			<div class="mt-5 text-center" style="margin-top: 1rem !important;">
	          <a class="btn btn-primary" :href="`/reset-password`">Reset Password</a>
	        </div>
	    </div>
      
      
        <div class="mt-4 text-center reset-login">
           Or<br><a :href="`/`">Login</a> 
        </div>

              
        
        </div>
      </div>
      <div class="left-footer">
          © Copyright 2020 ArabEasy®. All Rights Reserved.
          <a href="">Privacy Policy</a>
        </div>
    </div>

    <div class="card card-default right" :style="{backgroundImage: `url(images/bg-2.jpg)`}" >
      
    </div>
  
  </div>
</template>

<script>
export default {
    data() {
      return {
        token: null,
        email: null,
        password: null,
        password_confirmation: null,

        has_error: false,
        error: '',
        errors: {},
        isLoading: false,
        isStyled: false,
        isTokenValid : false,
      }
    },
    mounted() {
      this.resetValidation() 
    },
    methods: {
        resetPassword() {
            this.isLoading = true
            this.$http.post("/auth/reset/password", {
                token: this.$route.params.token,
                email: this.email,
                password: this.password,
                password_confirmation: this.password_confirmation
            })
            .then(result => {
                this.isLoading = false
                this.has_error = false
                this.error = ''
                this.errors = {}
              console.log(result.data);
              this.$router.push({name: 'login'})
            }, error => {
              this.isLoading = false
              this.has_error = true
              this.error = error.response.data.error
              this.errors = error.response.data.errors || {}
              console.error(error);
            });
        },

        resetValidation() {
            this.isLoading = true
            this.$http.post("resetValidation", {
                token: this.$route.params.token,
                /*email: this.email,
                password: this.password,
                password_confirmation: this.password_confirmation*/
            })
            .then(result => {
                if(result.data.status == true)
                {
                  this.isTokenValid = true ;
                }
                this.isLoading = false
                this.has_error = false
                this.error = ''
                this.errors = {}
              console.log(result.data);
              /*this.$router.push({name: 'login'})*/
            }, error => {
              this.isLoading = false
              this.has_error = true
              this.error = error.response.data.error
              this.errors = error.response.data.errors || {}
              console.error(error);
            });
        }
    }
}
</script>