<template>
    <form @submit.prevent="submit">
        
        <div class="form-group row">
          <div class="col-md-6 border">
            <label for="surname">Customer</label>
            <multiselect id="customer" name="customer" v-model="fields.customer" track-by="cust_id" label="cust_name" placeholder="Select Customer" :options="customers"  :allow-empty="true" :hide-selected="true" :max-height="150" @input="onChange" @close="onTouch" @select="onSelect">
            </multiselect>
            <span></span>
            
          </div> 
        
          <div class="col-md-6 border">
            <div class="d-flex flex-wrap justify-content-around pb-2 pt-4">
								<div class="px-2 pb-2 pb-md-0 text-center">
								<input type="text" class="knob" v-model="fields.users" data-skin="tron" data-thickness="0.2" data-width="90" data-height="90" data-fgColor="#ff9e27" data-readonly="true">
									<h6 class="fw-bold mt-3 mb-0">Users</h6>
								</div><br>
								<div class="px-2 pb-2 pb-md-0 text-center">
								<input type="text" class="knob" v-model="fields.clients" data-skin="tron" data-thickness="0.2" data-width="90" data-height="90" data-fgColor="#2bb930" data-readonly="true">
									<h6 class="fw-bold mt-3 mb-0">Contacts</h6>
								</div><br>
								<div class="px-2 pb-2 pb-md-0 text-center">
								<input type="text" class="knob" v-model="fields.batches" data-skin="tron" data-thickness="0.2" data-width="90" data-height="90" data-fgColor="#f25961" data-readonly="true">
									<h6 class="fw-bold mt-3 mb-0">Batches</h6>
								</div>
							</div>
          </div>
        </div>
        
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';
  // register globally
  Vue.component('multiselect', Multiselect)

export default {
  mixins: [ FormMixin ],
  components: { Multiselect },
  data() {
    return {
      customer: null,
      customers: [],
      users: [],
      user: null,
      clients: [],
      client: null,
      batches: [],
      batch: null,
    }
  },
  computed: {
    isInvalid () {
      return this.isTouched && this.value.length === 0
    }
  },
  methods: {
    getCustomers: function() {
      axios.get('/bmp/admin/getCustomers')
      .then(function(response){
          this.customers = response.data;
          console.log("Log",this.customers[0]['cust_name']);
          this.options = response.data;
      }.bind(this));
    },
    
    
    onChange (value) {
      this.value = value
      var id = this.value.cust_id;
      this.getUsers(id);
      this.getClients(id);
      this.getBatches(id);
    },
    getUsers: function(id) {
      axios.get('/bmp/admin/getUsers/'+id)
          .then(function(response){
            this.users = response.data;
            console.log("Log User",this.users);
            this.fields.users = this.users;            
        }.bind(this));
    },
    getClients: function(id) {
      axios.get('/bmp/admin/getClients/'+id)
          .then(function(response){
            this.clients = response.data;
            console.log("Log Contact",this.clients);
            this.fields.clients = this.clients;            
        }.bind(this));
    },
    getBatches: function(id) {
      axios.get('/bmp/admin/getBatches/'+id)
          .then(function(response){
            this.batches = response.data;
            console.log("Log Batch",this.batches);
            this.fields.batches = this.batches;            
        }.bind(this));
    },
    onSelect (option) {
      if (option === 'Disable me!') this.isDisabled = true
    },
    onTouch () {
      this.isTouched = true
    }
  },
   created: function(){
    this.getCustomers(), this.getUsers(),this.getClients(),this.getBatches()
   }
}

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