<template>
    <form @submit.prevent="submit">
    <div class="col form-group">
      <div class="col-md-12">
            <label for="myGroup">Select Group(s)</label>
            <multiselect id="myGroup" name="myGroup" v-model="fields.myGroup" track-by="cust_group_id" label="cust_group_name" placeholder="Select group" :options="myGroups"  :allow-empty="true" :multiple="false" :hide-selected="true" :max-height="150" @input="onChange" @close="onTouch" @select="onSelect">
              
            </multiselect>
            <div v-if="errors && errors.myGroup" class="text-danger">{{ errors.myGroup[0] }}</div>
      </div>
      <div class="col-md-12">
            <label for="amount">Enter Amount(Kes.)</label>
             <input type="text" id="amount" name="amount" v-model="fields.amount" placeholder="Enter amount"  class="form-control" >
            <div v-if="errors && errors.amount" class="text-danger">{{ errors.amount[0] }}</div>
      </div>
    </div>
    <div class="form-group">
    <button type="submit" class="btn btn-success btn-round btn-md"><i class="fa fa-check"></i> Save</button>
    <button type="button" class="btn btn-danger btn-round btn-md" data-dismiss="modal">Close</button>
    </div>
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';

export default {
  mixins: [ FormMixin ],
  props: ['data'],
  
  data() {
    return {
      'action': '/bmp/user/paygroup',
      'text': 'Payment Initiated succesfully',
      'redirect': '',
    }
  },
  methods: {
  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
    }
  }
}

</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>