<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:[],
    all_product_owners:[],
    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:{




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



      } ,
     created: function(){
      this.getContactsGroups()

  },



    };



</script>

