<template>
     <div class="modal fade" id="taxEditModal" tabindex="-1" role="dialog" aria-hidden="true">
										<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header border-0">
													<h5 class="modal-title">
														<span class="fw-mediumbold">
														Contact</span> 
														<span class="fw-light">
															Edit
														</span>
													</h5>
													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<div class="modal-body">
                          <form @submit.prevent="update">
        
        <div class="form-group row">
          <div class="col-md-12">
            <label for="name">Contact Name</label>
            <input type="text" class="form-control" name="name" id="name" v-model="fields.name" placeholder="Enter name..."/>
            <div v-if="errors && errors.name" class="text-danger">{{ errors.name[0] }}</div>
          </div>
        
          <div class="col-md-12">
            <label for="phone">Mobile Number </label>
            <input type="text" class="form-control" name="phone" id="phone" v-model="fields.phone" placeholder="Enter phone..."/>
            <div v-if="errors && errors.phone" class="text-danger">{{ errors.phone[0] }}</div>
          </div>


        
          <div class="col-md-12">
            <label for="ime">IMEI </label>
            <input type="text" class="form-control" name="ime" id="ime" v-model="fields.ime" placeholder="Enter imei..."/>
            <div v-if="errors && errors.ime" class="text-danger">{{ errors.ime[0] }}</div>
          </div>

        
          <div class="col-md-12">
            <label for="previous_ime">Previous IME </label>
            <input type="text" class="form-control" name="previous_ime" id="previous_ime" v-model="fields.previous_ime" placeholder="Enter previous_ime..."/>
            <div v-if="errors && errors.previous_ime" class="text-danger">{{ errors.previous_ime[0] }}</div>
          </div>




        <div class="col-md-12">
            <label for="group_id"> Select Group </label>        
            <multiselect  name="group_id" v-model="fields.group_id" track-by="group_id" label="name" placeholder="Assign Group" :options="group_names"  :allow-empty="true" :multiple="true" :hide-selected="true" :max-height="150" @input="onChange" @close="onTouch" @select="onSelect">
              
            </multiselect>
            <div v-if="errors && errors.group_id" class="text-danger">{{ errors.group_id[0] }}</div>
        </div>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-success btn-round">Save</button>
            <button type="reset" class="btn btn-danger btn-round">Clear</button>
        </div>       
    </form>									
												</div>												
											</div>
										</div>
									</div>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';
export default {
  mixins: [ FormMixin ],
   components: { Multiselect },
   props: [
            'contactsdata',              
          ],
        
  data() {
    return {
      'text': 'Contacts Updated succesfully',
      'redirect': '',
      action2: '/at/bundles/updateContact',
       group_names: [],
       allgroup_names:[],
        fields:{
            contact_id:this.contactsdata.contact_id,
            name:this.contactsdata.fname,
            phone:this.contactsdata.contact,
            ime:this.contactsdata.ime,
            previous_ime:this.contactsdata.ime,

            
             group_id:this.contactsdata.group_id,
              group_names:null,
           // group_id:this.contactsdata.contact_group,
      }
    }
    }, 
     computed: {
    isInvalid () {
      return this.isTouched && this.value.length === 0
    },
  },
    methods: {

      getGroups: function(){
        axios.get('/at/groups/get')
        .then(function(response){
          this.allgroup_names = response.data;
        }.bind(this));
      },


      getContactGroups: function(id){
        console.log(id)
        axios.get('/at/contactgroup/get/'+id)
        .then(function(response){
          this.group_names = response.data;
          this.fields.group_names=this.group_names;
        }.bind(this));
      },

    
    onChange (value) {
      this.value = value
      if (value.indexOf('Reset me!') !== -1) this.value = []
    },
    onSelect (option) {
      if (option === 'Disable me!') this.isDisabled = false
    },
    onTouch () {
      this.isTouched = true
    },

    }, 
  mounted() {
        this.fields.contact_id=this.contactsdata.contact_id;        
        this.fields.name=this.contactsdata.fname;   
        this.fields.phone=this.contactsdata.contact;    
        this.fields.ime=this.contactsdata.ime;  
        this.fields.previous_ime=this.contactsdata.ime;  
        
        this.fields.group_id=this.contactsdata.group_names;     
        this.getContactGroups(this.fields.group_id);
        console.log(this.contactsdata,'yyyyyyyyyyyyyyyyyyyy');
       },
            created: function(){
           //   this.getContactGroups()
    }
   
}
</script>