<template>
    <form @submit.prevent="submit">
    <div class="col form-group">
      <div class="col-md-12">
            <label for="myPaybills">Select Business/Till No.<span class="text-danger">*</span></label>
            
             <multiselect id="myPaybills" name="myPaybills" v-model="fields.myPaybills" track-by="business_number_id" label="business_number" placeholder="Select Paybill/Till" :options="myPaybills"  :allow-empty="true" :multiple="false"  :max-height="150" @input="onChange" >
              
             </multiselect>
             <input type="hidden" v-model="fields.number" placeholder="Enter Business/Till No."  class="form-control">  
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div> 
      </div>
      <div class="col-md-12">
            <label for="myClient">Account Name</label>
             <input type="text" v-model="fields.account" placeholder="Enter Account Name."  class="form-control" readonly>  
            <div v-if="errors && errors.account" class="text-danger">{{ errors.account[0] }}</div>
      </div>
      <div class="col-md-12">
            <label for="amount">Enter Amount(Kes.)<span class="text-danger">*</span></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 class="col-md-12">
            <label for="myClient">Remarks</label>
             <textarea v-model="fields.remarks" placeholder="Enter Remarks."  class="form-control"></textarea>  
            <div v-if="errors && errors.remarks" class="text-danger">{{ errors.remarks[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 FormMixinBusiness from '../shared/FormMixinBusiness';

export default {
  mixins: [ FormMixinBusiness ],
  props: ['data'],
  
  data() {
    return {
      'action': '/bmp/user/paybusiness',
      'text': 'Payment initiated succesfully',
      'redirect': '',
      'fields': {
        number: '',
        account:'',
        },
        myPaybills:[]
      
       }
  },
   methods: {
      getMyPaybills: function() {
          axios.get('/bmp/getMyPaybills')
          .then(function(response){
              this.myPaybills = response.data;
             
          }.bind(this));
    },
    
  onChange (value) {
      this.value = value
      this.fields.account=value.account_name
      this.fields.number=value.business_number
      if (value.indexOf('Reset me!') !== -1) this.value = []
    }
  },
  created: function(){
      this.getMyPaybills()
  }
  
}

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