<template>
    <form @submit.prevent="submit">
        
<div class="form-group row">
    <div class="col-md-12">
        <label for="group">Select Group</label>
        <multiselect  name="group_id" v-model="fields.group_id" track-by="group_id" label="name" placeholder="-Select Group-" :options="groups"  :allow-empty="true" :multiple="false" :hide-selected="true" :max-height="150"> 
        </multiselect>
        <div v-if="errors && errors.group" class="text-danger">{{ errors.group[0] }}</div>
    </div>
    <div class="col-md-12">
        <label for="amount">Amount to Send</label>
        <input type="number" name="amount" v-model="fields.amount" class="form-control" placeholder="Ksh">
        <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">Submit</button>
            <button type="reset" class="btn btn-danger btn-round">Cancel</button>
        </div>       
        

        
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';

export default {
  mixins: [ FormMixin ],
  components: { Multiselect },
  props: ['groupdata'],
  data() {
    return {
      'action': '/at/topup/groups',
      'text': 'Topup made succesfully',
      'redirect': '',
       groups:[],
    }
  },
  mounted(){
          this.groups=this.groupdata;
  }
}

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