<template>
  <div class=" main-bg">
    <vue-snotify ></vue-snotify>
    <div class="lpanel">
        <ul class="menubar-list">
          <li class="brand">
            <a class="" href="#"><img :src="`/images/logo.png`" width="40"></a>
          </li>
        </ul>    
    </div>
    <div class="left">
    <div class="content_height">     
      <h1>Sign Up</h1>
      <div class="card-body px-0">
  
        <form autocomplete="off" @submit.prevent="register" v-if="!success" method="post">
          <div class="d-flex">
            <div class="w-50">
              <div class="mr-2 form-group" v-bind:class="{ 'has-error': has_error && errors.fname }">
                <label for="fname">First Name</label>
                <input type="text" id="fname" class="form-control" placeholder="First Name" v-model="fname">
                <span class="text-danger help-block" v-if="has_error && errors.fname">{{ errors.fname[0] }}</span>
              </div>
            </div>
            <div class="w-50">
              <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.lname }">
                <label for="lname">Last Name</label>
                <input type="text" id="lname" class="form-control" placeholder="Last name" v-model="lname">
                <span class="text-danger help-block" v-if="has_error && errors.lname">{{ errors.lname[0] }}</span>
              </div>
            </div>  
          </div>  

          <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.email }">
            <label for="email">E-mail</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="d-flex">
            <div class="w-35">
              <div class="mr-2 form-group signup_select" v-bind:class="{ 'has-error': has_error && errors.mobile_country_code }">
                <label for="mobile_country_code">Country Code</label>
                <multiselect   track-by="country_code_mobile"  label="country_code_mobile"  v-model="mobile_country_code" :options=countries
                placeholder="+91"
                selectLabel=''
                deselectLabel=''
                selectedLabel=''
                
                optionHeight:10
                ></multiselect>
                <span class="text-danger help-block" v-if="has_error && errors.mobile_country_code_id">{{ errors.mobile_country_code_id[0] }}</span>
              </div>
            </div>
            <div class="w-65">
              <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.mobile_no }">
                <label for="mobile_no">Mobile No</label>
                <input type="text" id="mobile_no" class="form-control" placeholder="Mobile no" v-model="mobile_no">
                <span class="text-danger help-block" v-if="has_error && errors.mobile_no">{{ errors.mobile_no[0] }}</span>
              </div>
            </div>
          </div>          

          <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.password }">
            <label for="password">Password</label>
            <input type="password" id="password" class="form-control" placeholder="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" v-bind:class="{ 'has-error': has_error && errors.password }">
            <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 w-100 mt-4" :loading="isLoading" :styled="isStyled" >
            Sign Up
          </VueLoadingButton>
        </form>

        <div class="mt-4 text-center">
          Existing user? <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>
import Multiselect from 'vue-multiselect';
  export default {
    components: { Multiselect  },
    data() {
      return {

        fname: '',
        lname: '',
        mobile_country_code: '',
        mobile_no: '',
        email: '',
        password: '',
        password_confirmation: '',
        has_error: false,
        error: '',
        errors: {},
        success: false,
        isLoading: false,
        isStyled: false,
        countries: []
      }
    },  
     mounted() {
      this.getCountries()
    },


    methods: {
      register() {
        this.isLoading = true
        var app = this
        this.$auth.register({
          data: {
            fname: app.fname,
            lname: app.lname,
            mobile_country_code_id: app.mobile_country_code.id,
            mobile_no: app.mobile_no,
            email: app.email,
            password: app.password,
            password_confirmation: app.password_confirmation
          },
          success: function () {
            this.isLoading = false
            app.success = true
            this.$router.push({name: 'welcome', params: {successRegistrationRedirect: true}})
          },
          error: function (res) {
            this.has_error = true
            app.success = false
            this.isLoading = false
            this.error = res.response.data.error
            this.errors = res.response.data.errors || {}
          }
        })
      },
      getCountries() {
        this.$http({
          url: `getCountries`,
          method: 'GET'
        })
          .then((res) => {
            this.countries = res.data.countrys
            
          }, () => {
            this.has_error = true
          })
      },
    }
  }
</script>