<template>
  <div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12   col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
        </div>
        <div class="col-12  col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5 ">
          <div class="pb-2 text-center">
            <img src="~/assets/image/Logo.png" style="width: 200px" />
          </div>
          <div class="text-center pt-1">
            <h2 class="fw-bolder display-6 text-center" >Sign Up</h2>
            <span class="fs-5 pt-2 text-muted">Helo , <span class="fw-bolder text-dark">Beautiful!</span></span>
            <p class="text-muted  pt-2 text-center fs-5  pb-0 mb-0">Mindboost helps you block out distracting noise with concentration-boosting music, increasing your productivity by up to 35%.</p>
          </div>
          <div class="row pt-3 pb-5">
            <div class="col-12">
              <form @submit.prevent="submitRegister" method="POST">
                <div class="row  px-0 px-md-4 pb-2">
                  <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                    <label class="form-label">First Name</label>
                    <input type="text" v-model="form.first_name" placeholder="First Name" class="form-control">
                    <div class="invalid-feedback d-block" v-if="errors.first_name">{{errors.first_name[0]}}</div>
                  </div>
                  <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                    <label class="form-label">Surname</label>
                    <input type="text" placeholder="Surname" v-model="form.surname" class="form-control">
                    <div class="invalid-feedback d-block" v-if="errors.surname">{{errors.surname[0]}}</div>
                  </div>
                </div>
                <div class="row  px-0 px-md-4  pb-2">
                  <div class="col-12 col-md-6 pt-2 col-lg-6 ">
                    <label class="form-label">Email</label>
                    <input type="text" placeholder="Email" v-model="form.email" class="form-control">
                    <div class="invalid-feedback d-block" v-if="errors.email">{{errors.email[0]}}</div>
                  </div>
                  <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                    <label class="form-label">Password</label>
                    <input type="password" v-model="form.password" placeholder="Password" class="form-control">
                    <div class="invalid-feedback d-block" v-if="errors.password">{{errors.password[0]}}</div>
                  </div>
                </div>
                <div class="row px-4 pt-3 pb-2">
                  <div class="col-10">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                      <label class="form-check-label" for="flexCheckIndeterminate">
                        I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.
                      </label>
                    </div>
                  </div>
                </div>
                <div class="row px-4 pt-3">
                  <div class="col-12">
                    <button :disabled="loading" type="submit" class="login-btn col-4">Signup
                      <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
                      <span class="sr-only">Loading...</span>
                    </div>
                    </button>
                    <p class="pt-3">Already have an Account? <NuxtLink class="signup-link" href="login">Log In</NuxtLink></p>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backgroundImagePath from '~/assets/image/login4.png'
import {useUserStore} from '@/stores/user';
import {mapState,mapActions} from "pinia";
export default {

  computed:{
    ...mapState(useUserStore,['user'])
  },
  name:'LoGin',
  data(){
    return{
      backgroundImagePath:backgroundImagePath,
      loading:false,
      errors:[],
      form:{
        first_name:'',
        surname:"",
        email:"",
        password:"",

      }
    }
  },
  methods:{
    ...mapActions(useUserStore,['login','logout']),

    submitRegister(){
      this.loading=true;
      this.$axios.post('/api/register',this.form).then(({data})=>{
        console.log(data);

        this.loading=false;
        this.login(data.user,data.authorisation.token)
      }).catch((error)=>{
        this.loading=false;
        if(error.response.status==422){
          this.errors = error.response.data.errors;
        }

      })
    }
  }
}
</script>