<template>
    <form @submit.prevent="submit">
        
     <validation-errors :errors="validationErrors" v-if="validationErrors"></validation-errors>   
    
        
        
<div class="form-group row">
    <div class="col-md-12">
        <label for="group">Select Contact(s)</label>
        <multiselect  name="contact" v-model="fields.contact" track-by="contact" :custom-label="customLabelName" placeholder="-Select Contact(s)-" :options="contacts"  :allow-empty="true" :multiple="true" :hide-selected="true" :max-height="150"> 
        </multiselect>
        <div v-if="errors && errors.contact" class="text-danger">{{ errors.contact[0] }}</div>
    </div>
    
    
          <div class="col-md-12">
        <label for="group">Select Period</label>
        <multiselect  name="data_category_id" v-model="fields.data_category_id" label="data_category_name" placeholder="-Select Data Period-" :options="category_names"  :allow-empty="true" :multiple="false" :hide-selected="true" :max-height="150"  @input="onChange"> 
        </multiselect>
        <div v-if="errors && errors.data_category_id" class="text-danger">{{ errors.data_category_id[0] }}</div>
    </div>
   
     <div class="col-md-12">   
        <label for="group">Select Data</label>
        <multiselect  name="databandles_id" v-model="fields.databandles_id" label="databandles_package" placeholder="-Select Data-" :options="databandles_names"  :allow-empty="true" :multiple="false" :hide-selected="false" :max-height="150" @input="onChange2"> 
        </multiselect>
        <div v-if="errors && errors.databandles_id" class="text-danger">{{ errors.databandles_id[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" :disabled="validated ? false : true" 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: ['errors'],
  props: ['contactdata'],
  data() {
    return {
      'action': '/at/topup/topupContactbundles',
      'text': 'Data sent succesfully',
      'redirect': '',
       contacts:[],
       databandles_names:[],
       category_names: [],
    }
  },
  
  
  methods: {
    customLabelName ({ fname, contact, ime }) {
                return `${fname}, ${contact}, ${ime}`
            },

      
      getdatabandlescategory: function(){   
        axios.get('/at/getdatabandlescategory/get')
        .then(function(response){
          this.category_names = response.data;        
        }.bind(this));
      },
      
       getdatabandles: function(data_category_id){
        axios.get('/at/getdatabandles/get/'+data_category_id)
        .then(function(response){
          this.databandles_names = response.data;         
        }.bind(this));
      },
      
      
              onChange (value) {
      this.value = value
         this.getdatabandles(value.data_category_id)
        // this.fields.databandles_id = value.data_category_id;
    // this.fields.data_category_id=this.value.data_category_id;
    //   this.fields.cost=this.value.cost;
    //   getdatabandles();
    console.log(value); 
    },
      
              onChange2 (value) {
      this.value = value

     this.fields.amount=this.value.cost;
    //   getdatabandles();
    console.log(value); 
    }, 
      
      
      
    },
  

  
  
        created: function(){  
     this.getdatabandlescategory()  
    // this.getdatabandles()
    },
  mounted(){
          this.contacts=this.contactdata;
  }
}

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