<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"  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>       
        
        <div v-if="contactsgroup_names.length == 0">
            <p>No Data Found</p>
        </div>
        <div v-else>

            <table class="table table-bordered">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Group</th>
                </tr>
                <tr v-for="(category, index) in filteredContacts" :key="index">
                    <td>{{ index + 1 }}</td>
                <td>{{ category.fname }}</td>
                <td>{{ category.contact }}</td>
             <td v-if="category.group_asso_contacts.name !== null">{{ category.group_asso_contacts.name }}</td>
<td v-else>Null Value</td>

                </tr>

            </table>
            <pagination :data="groups" @pagination-change-page="getGroups" :limit=3 align="right">
                <span slot="prev-nav">&lt; Previous</span>
                <span slot="next-nav">Next &gt;</span>
            </pagination>
        </div>
        
    </form>
</template>

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

export default {
  mixins: [ FormMixin ],
  components: { Multiselect },
  props: ['groupdata'],
  data() {
    return {
        contactsgroup_names:[],
      'action': '/at/topup/groups',
      'text': 'Topup made succesfully',
      'redirect': '',
       groups:[],
    }
  },
  methods:{
        getGroups: function(page = 1){
        //  axios.get('/getcontactsgroups1?page='+page+'&search='+this.filter.search).then(function(response){
          axios.get('/at/getcontactsgroups1').then(function(response){

          //.then(function(response){
            this.contactsgroup_names = response.data;
            console.log(this.contactsgroup_names);
          }.bind(this));
        },
    },

    computed: {
  filteredContacts() {
    if (this.fields.group_id && this.fields.group_id.group_id) {
      return this.contactsgroup_names.filter(
        (category) => category.group_asso_contacts.group_id === this.fields.group_id.group_id
      );
    } else {
        return 'No Data';
     // return this.contactsgroup_names;
    }
  },
},



  mounted(){
          this.groups=this.groupdata;
          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>