<template>
    <form @submit.prevent="submit">
        
        <div class="form-group row">
          <div class="col-md-6">
            <label for="fname">First name</label>
            <input type="text" class="form-control" name="fname" id="fname" v-model="fields.fname" placeholder="Enter first name..."/>
            <div v-if="errors && errors.fname" class="text-danger">{{ errors.fname[0] }}</div>
          </div>

          <div class="col-md-6">
            <label for="lname">Last name</label>
            <input type="text" class="form-control" name="lname" id="lname" v-model="fields.lname" placeholder="Enter first name..."/>
            <div v-if="errors && errors.lname" class="text-danger">{{ errors.lname[0] }}</div>
          </div>

          <div class="col-md-6">
            <label for="email">Email</label>
            <input type="text" class="form-control" email="email" id="email" v-model="fields.email" placeholder="Enter email..."/>
            <div v-if="errors && errors.email" class="text-danger">{{ errors.email[0] }}</div>
          </div>
	
          <div class="col-md-6">
            <label for="username">Username(s)</label>
            <input type="username" class="form-control" name="username" id="username" v-model="fields.username" placeholder="Enter username..."/>
            <div v-if="errors && errors.username" class="text-danger">{{ errors.username[0] }}</div>
          </div>

          <div class="col-md-6">
            <label for="role_id">Role</label>
            <multiselect id="role_id" name="role_id" v-model="fields.role_id" track-by="role_id" label="name" placeholder="Select role" :options="roles" :allow-empty="true" :multiple="false" :hide-selected="true" :max-height="150" @input="onChange" @close="onTouch" @select="onSelect">
              
                                        </multiselect>
            <div v-if="errors && errors.role_id" class="text-danger">{{ errors.role_id[0] }}</div>
          </div> 

          <div class="col-md-6">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" id="password" v-model="fields.password" placeholder="Enter password..."/>
            <div v-if="errors && errors.password" class="text-danger">{{ errors.password[0] }}</div>
          </div>

          <div class="col-md-6">
            <label for="status">Status</label>
            <input type="checkbox" class="form-control" name="status" id="status" v-model="fields.status" placeholder="Enter status..."/>
            <div v-if="errors && errors.status" class="text-danger">{{ errors.status[0] }}</div>
          </div>

          <div class="col-md-6">
              <label for="cpassword">Confirm Password</label>
              <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" v-model="fields.password_confirmation" placeholder="Confirm password..."/>
              <div v-if="errors && errors.password_confirmation" class="text-danger">{{ errors.password_confirmation[0] }}</div>
          </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-round">Save</button>
            <button type="reset" class="btn btn-danger btn-round">Clear</button>
        </div>       
        

        
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';
// register globally
Vue.component('multiselect', Multiselect)

export default {
  mixins: [ FormMixin ],
  components: { Multiselect },
  props: ['userdata'],
  data() {
    return {
      'action': '/fc/organization-users/update',
      'text': 'User updated succesfully',
      'redirect': '',
      role:0,
      roles:[],
      fields:{
        id:this.userdata.user_id,
        email:this.userdata.email,
        fname:this.userdata.fname,
        lname:this.userdata.lname,
        role_id:this.userdata.user_role,
        username:this.userdata.username,
        status:this.userdata.status,
      }
    }
  },
  methods: {
      nameWithphone ({ contact_name, contact_phone }) {
      return `${contact_name} — [${contact_phone}]`
    },
    onChange (value) {
    this.value = value
    if (value.indexOf('Reset me!') !== -1) this.value = []
    },
    onSelect (option) {
    if (option === 'Disable me!') this.isDisabled = true
    },
    onTouch () {
    this.isTouched = true
    }
  },
  mounted() {
            this.fields.id= this.userdata.user_id;
            this.fields.email=this.userdata.email;          
            this.fields.name=this.userdata.name;          
            this.fields.role_id=this.userdata.user_role;
            this.roles=this.userdata.user_role;
            this.fields.username==this.userdata.username;
            this.fields.status==this.userdata.status;
            console.log(this.userdata);
        }
}

</script>
<!--Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>