<template>
  <div>
  

    <div class="modal fade" id="ContactEditModal" 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="fname">Contact Name</label>

          <input type="text" class="form-control" name="contact_id" id="contact_id" v-model="fields.contact_id" placeholder="Enter contact_id..."/>


          <input type="text" class="form-control" name="fname" id="fname" v-model="fields.fname" placeholder="Enter name..."/>
          <div v-if="errors && errors.fname" class="text-danger">{{ errors.fname[0] }}</div>
        </div>
      
        <div class="col-md-12">
          <label for="contact">Mobile Number </label>
          <input type="text" class="form-control" name="contact" id="contact" v-model="fields.contact" placeholder="Enter phone..."/>
          <div v-if="errors && errors.contact" class="text-danger">{{ errors.contact[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>




                <div class="table-responsive">
                  <table ref="tablex" id="tablex" class="display table table-striped table-hover" >
											<thead>
												<tr>
                          <th>Desigination</th>
                                             <th>Destination</th>
                                                <th>SMS</th>
                                                <th>Source</th>
                                                <th>Status</th>
                                             <th class="text-center">SMS Cont</th>
                                                      <th>Date</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
                          <th>Desigination</th>
                                             <th>Destination</th>
                                                <th>SMS</th>
                                                <th>Source</th>
                                                <th>Status</th>
                                             <th class="text-center">SMS Cont</th>
                                                      <th>Date</th>
												</tr>
											</tfoot>
											<tbody>
												<tr v-for="(category,index) in all_product_owners" :key="index">
													<td>{{category.description}}</td>
														<td>{{category.destination}}</td>
													<td>{{category.sms}}</td>
													<td>{{category.source}}</td>
													<td>{{category.status}}</td>
													<td>{{category.sms_size}}</td>
													<td>{{category.date_time}}</td>
												
												</tr>
												
											</tbody>
										</table>


             
              </div>
  </div>
  
</template>


<script>

import FormMixin from '../shared/FormMixin';
import DeleteMixin from '../shared/DeleteMixin';
import Multiselect from 'vue-multiselect';

export default {
mixins: [ FormMixin,DeleteMixin ],
component:{
  Multiselect

},

data() {

  return {
    all_locationcategories:[],
    contactsgroup_names:[],
    all_drecords:[],
    group_names: [],
allgroup_names:[],
fields:{
contact_id:'',  
fname:'',
contact:'',
group_id:[],
group_names:null,
'text': 'Contacts Updated succesfully',
'redirect': '',
action2: '/at/contacts/updateContact',
},
}  },

 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));

},

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));
},


   getContactsGroups: function (){
    axios.get('/fc/get_smssent')
          .then(function(response){
            this.all_product_owners = response.data


      }.bind(this));
      },




      getGroups: function (){
      axios.get('/at/getgroups1')
      .then(function(response){
      this.allgroup_names = response.data;

      console.log(this.allgroup_names, 'qqqqqqqqssssssssssssssssssdddd');
      //console.log(this.asdddddd=response.data);
      }.bind(this));
      },


      getlocationcategories: async function(){
        axios.get('/at/contactsdata/get')
        .then(function(response){
          this.all_locationcategories = response.data

          let arr = [];
          this.all_locationcategories.forEach((value, index) => {
            let groupids=value.group_id;
            console.log(value,'bbbbbbbbbbbbbbbbbbbbbbbbbbvvv');
            console.log(value.fname,'ccccccccccccccccccccccccccccccccccccccc');
         let group1= this.allgroup_names.filter(function(Group){
          console.log(value.name,'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
console.log(group1,'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr')
                 return groupids.indexOf(Group.group_id) !==-1;
             
            })
        
              arr.push(value);
          
          const withoutFirstAndLast = value.group_id.substring(1, value.group_id.length - 1);
          console.log(withoutFirstAndLast,'eeeeeeeeeeeeeeeeeeeeeee'); // 👉️ bc
          
     

          console.log(this.allgroup_names.group_id,'kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk'); // 👉️ bc     
         if (withoutFirstAndLast == this.allgroup_names.group_id) {
          console.log('bbbvvvvvvvvvvvvvvvvbbbbbb'); // 👉️ bc
          withoutFirstAndLast===this.allgroup_names.name
        
          console.log(this.allgroup_names.name,'33333333333333333333333333333')
        }
        else {
          console.log("else running");
        }
          

          });



     
          $(function() {
          $("#tablex").DataTable()
          });
        }.bind(this));
      },
     


      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();
}
});
},
editContact: function(contact_id,fname,contact){
        axios.get('/at/contact/data/'+contact_id)
      .then(function(response){
        this.fields = response.data 
        console.log(fields,'ooooooooooo77777777777777777');

      }.bind(this));
    },
    deleteProduct: function(contact_id,fname,contact){
      var delproduct = confirm("Want to delete product "+fname+"?");
      if (delproduct) {
         axios.post('/admin/product/del-category-id/'+productid)
          .then(function(response){
            if(response.data == 'success'){                  
             $.notify({
                  icon: 'flaticon-check',
                  title: 'Product',
                  message: 'Product Deleted successfully',
                },{
                  type: 'secondary',
                  placement: {
                    from: "bottom",
                    align: "right"
                  },
                  time: 2000,
                });
            this.dt = true;
            }
          }.bind(this)); 
          }
      
    },
   
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));
},


      } ,
     created: function(){  
      this.editContact();
      this.getlocationcategories()
      this.getContactsGroups()
      this.getGroups()
      this.getContactGroups()
      this.getContacts()
  },
  
   

    };
 


</script>

