<template>
<div>
<button @click.prevent="deleteSelected" class="btn btn-danger btn-sm" style="margin-bottom:1%" title="Delete Selected"> <i class="fa fa-trash-alt"></i> Delete Selected </button>
<vue-good-table
:columns="columns"
:rows="rows"
:isLoading="false"
:search-options="{ enabled: true }"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 10,
position: 'bottom',
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page', // for 'pages' mode
allLabel: 'All',
}"
@on-selected-rows-change="selectionChanged"
:select-options="{ enabled: true }"
>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'action'">
<a href="#" data-toggle="modal" data-target="#add" @click="showModal(props.row.contact_id,props.row.fname,props.row.contact,props.row.group_id)" id="show-modal" title="Edit Contact"><i class="far fa-edit"></i></a>
<button @click.prevent="deleteContact(props.row.contact_id)" class="btn btn-danger btn-sm" title="Delete Contact"> <i class="fa fa-trash-alt"></i> </button>
</span>
<span v-else>
{{ props.formattedRow[props.column.field] }}
</span>
</template>
</vue-good-table>
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Edit Contact </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body panel-default bg-light">
<form @submit.prevent="update">

<div class="form-group row">

<div class="col-md-12">
<label for="name">Contact Name</label>
<input type="hidden" class="form-control" name="contact_id" id="contact_id" v-model="fields.contact_id" />
<input type="text" class="form-control" name="name" id="name" v-model="fields.name"/>
</div>

<div class="col-md-12">
<label for="phone">Phone</label>

<input type="text" class="form-control" name="phone" id="phone" v-model="fields.phone"/>
<div class="text-danger"></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">
      
            <input type="hidden" class="form-control" name="current_messages" id="current_messages" v-model="fields.current_messages" placeholder="Enter imcurrent_messagesei..."/>
            <div v-if="errors && errors.current_messages" class="text-danger">{{ errors.current_messages[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="false" :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 class="col-md-12">
<input type="hidden" class="form-control" name="group_id" id="group_id" v-model="fields.group_id"/>

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

<script>
import 'vue-good-table/dist/vue-good-table.css';
import FormMixin from '../shared/FormMixin';
import DeleteMixin from '../shared/DeleteMixin';
import Multiselect from 'vue-multiselect';
import { VueGoodTable } from 'vue-good-table';

export default {
mixins: [ FormMixin,DeleteMixin ],
components:{
VueGoodTable,Multiselect
},

data(){
return {
'text': 'Contacts Updated succesfully',
'redirect': '',
action2: '/at/bundles/updateContact',
group_names: [],
allgroup_names:[],
group_asso_contacts: { name: 'Some Name' },
fields:{
contact_id:'',
name:'',
phone:'',
ime:'',
group_names:'',
group_id:[],
group_asso_contacts:[],
},

columns: [
  {
    label: 'ID',
    field: 'contact_id',
  },
  {
    label: 'Name',
    field: 'fname',
  },
  {
    label: 'PhoneNumber',
    field: 'contact',
  },
  {
    label: 'IMEI',
    field: 'ime',
  },
  {
    label: 'Group',
    field: this.group_asso_contacts   
  },
  {
    label: 'Action',
    field: 'action',
}

],
rows: [],
rowdata:'',
selectedItems:[],
};
},
computed: {
isInvalid () {
return this.isTouched && this.value.length === 0
},
},
methods: {
getUsers:function(){
axios.get('/at/getbundlescontacts1').then(function(response){
this.rows=response.data;
this.rows.forEach((value, index) => {
  console.log(value.group_asso_contacts,'fffffffffff');
});
this.value.group_asso_contacts.forEach((value, index) => {
  console.log(value.name,'kkkkkkkk');
});


}.bind(this));


},    
getContacts: function(){
axios.get('/at/bundlescontactsdata/get')
.then(function(response){
this.rows = response.data;
console.log(response)
this.group_asso_contacts.forEach((value, index) => {
  console.log(value.name);
});
this.group_asso_contacts.forEach((value, index) => {
  console.log(value.name,'yyyyyyyyy');
});
}.bind(this));

},
  getGroups: function(){
        axios.get('/at/groups/get')
        .then(function(response){
          this.group_names = response.data;
        }.bind(this));
      },
getContactGroups: function(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
},
showModal:function(contact_id,fname,contact,ime,group_id,group_asso_contacts,name,group_names){
    axios.get('/at/contact/data/'+contact_id).then(function(response){
    console.log(response.data)
    //bind the data to the items
    this.fields.contact_id=response.data[0].contact_id
    this.fields.name=response.data[0].fname
    this.fields.phone=response.data[0].contact
    this.fields.ime=response.data[0].ime
    
    this.fields.current_messages=response.data[0].ime
   // this.fields.group_id=this.group_names;


    this.fields.group_id=group_asso_contacts
    this.fields.group_id=group_asso_contacts ? group_asso_contacts.name : '';

    //call the method and pass the groupid for the names
    }.bind(this));
},
selectionChanged:function(params){
let c=[];
params.selectedRows.forEach(function(value,index,array){
c.push(value.contact_id);

});
this.selectedItems=c;

},
deleteSelected:function(){
let self=this;
if(this.selectedItems.length<1){
swal({
title: 'Select Contact!',
text: 'Please select atleast one contact.',
type: 'alert',
buttons : {
confirm: {
className : 'btn btn-success'
}
}
});
}
else{
var contacts="";
if(this.selectedItems.length>1){
contacts="contacts";
}
else{
contacts="contact";
}
swal({
title:'Sure to delete '+this.selectedItems.length+' selected '+contacts+'?',
text: 'Delete ',
icon: 'warning',
type: 'warning',
buttons:{
confirm: {
text : 'Sure',
className : 'btn btn-success'
},
cancel: {
visible: true,
className: 'btn btn-info'
}
}
}).then((Delete) => {
if (Delete) {

axios.get('/at/delete/contact/'+this.selectedItems).then((response) => {

self.selectedItems.forEach(function(value,index,array){
self.rows= self.rows.filter(row=>row.contact_id!=value);

swal({
title: 'Deleted!',
text: 'contacts deleted.',
type: 'success',
buttons : {
confirm: {
className : 'btn btn-success'
}
}
});
});
});

} else {
swal.close();
}
});
}


},
deleteContact:function(id){
var self=this;
var fpath='/at/contacts/delete/';

swal({
title:'Sure to delete?',id,
text: 'Delete Contact',
icon: 'warning',
type: 'warning',
buttons:{
confirm: {
text : 'Sure',
className : 'btn btn-success'
},
cancel: {
visible: true,
className: 'btn btn-info'
}
}
}).then((Delete) => {
if (Delete) {

axios.get(fpath +id).then(function (response) {
self.selectedItems.forEach(function(value,index,array){
self.rows= self.rows.filter(row=>row.contact_id!=value);

swal({
title: 'Deleted!',
text: 'Contact has been deleted.',
type: 'success',
buttons : {
confirm: {
className : 'btn btn-success'
}
}
});
});

});
} else {
swal.close();
}
});
}


},
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.group_id=this.contactsdata.group_id;
        this.fields.group_id=this.group_asso_contacts;     
        this.fields.name=this.contactsdata.name;
        // this.fields.group_id=this.contactsdata.group_asso_contacts;   
        // this.fields.group_id=this.group_asso_contacts; 

        console.log(this.group_asso_contacts,'ddddddddddddww');
       // this.fields.group_id=group_asso_contacts


       },

created() {
this.getUsers()
this.getContacts()
},

};
</script>