<template>
    <form @submit.prevent="submit">
        
        <div class="form-group row">
     
          <div class="col-md-12">
            <label for="name">Group</label>
            <multiselect id="group" name="group" v-model="fields.group" track-by="group_id" label="group_name" placeholder="Select group(s)" :options="groups" :allow-empty="true" :multiple="true" :hide-selected="true" :max-height="150" @input="onChange" @close="onTouch" @select="onSelect">
              
            </multiselect>
            <div v-if="errors && errors.group" class="text-danger">{{ errors.group[0] }}</div>
          </div>
	

          <div class="col-md-12">
            <label for="phone">Compose SMS</label>

             <textarea name="message" value="" id="message" class="form-control" required="" v-model="fields.message" placeholder="Type SMS..."></textarea>

            <div v-if="errors && errors.message" class="text-danger">{{ errors.message[0] }}</div>
          </div>

         </div>
     
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-round">Send</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 },
  data() {
    return {
      'text': 'SMS sent succesfully',
      'redirect': '',
      action: '/fc/sms-group',
      group:0,
      groups:[],
    }
    
  },
  computed: {
    isInvalid () {
      return this.isTouched && this.value.length === 0
    }
  },
methods: {
      getGroups: function() {
      axios.get('/fc/getgroups')
      .then(function(response){
          this.groups = response.data;
      }.bind(this));
    },
    nameWithphone ({ cust_group_fullname, cust_group_phone }) {
      return `${cust_group_fullname} — [${cust_group_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() {
  
        },
created: function(){
    this.getGroups()
   }
}
</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>