<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="group_id"> Group Name</label>
<multiselect name="group_id" v-model="fields.group_names" track-by="group_id" label="name" placeholder="Select Group name" :options="allgroup_names" :allow-empty="true" :multiple="true" :hide-selected="true" :max-height="150" @input="onChange" @close="onTouch" @select="onSelect">
</multiselect>
</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/contacts/updateContact',
group_names: [],
allgroup_names:[],
fields:{
contact_id:'',
name:'',
phone:'',
group_id:[],
group_names:null,
},

columns: [
{
label: 'ID',
field: 'contact_id',
},
{
label: 'Name',
field: 'fname',
},
{
label: 'PhoneNumber',
field: 'contact',
},

{
label: 'Action',
field: 'action',
}

],
rows: [],
rowdata:'',
selectedItems:[],
};
},
computed: {
isInvalid () {
return this.isTouched && this.value.length === 0
},
},
methods: {
getUsers:function(){
axios.get('/at/getcontacts1').then(function(response){
this.rows=response.data;
}.bind(this));
},
getContacts: function(){
axios.get('/at/contactsdata/get')
.then(function(response){
this.rows = response.data;
console.log(response)
}.bind(this));

},
getGroups: function(){
axios.get('/at/getgroups1')
.then(function(response){
this.allgroup_names = response.data;
console.log(this.allgroup_names,'hhhhhhhhhhhhhhhhhhhhhhhh')
console.log(this.group_names,'xxxxxxxxxxxxxxxxxxxxxxxxxaaaaaaaa')

}.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,group_id){
    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
    let k=JSON.parse(response.data[0].group_id);
    for(var i=0;i<=k.length;i++){
    this.fields.group_id.push(k[i])
    }
    //call the method and pass the groupid for the names
    this.getContactGroups(this.fields.group_id);
    }.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();
}
});
}


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

};
</script>