<template>
    <form @submit.prevent="submit">
        
        <div class="form-group row">
	

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


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

      <div class="col-md-12">
            <label for="temp_sms">Template Message</label>
            <input type="text" class="form-control" temp_name="temp_sms" id="temp_sms" v-model="fields.temp_sms" placeholder="Enter temp_name..."/>
            <div v-if="errors && errors.temp_sms" class="text-danger">{{ errors.temp_sms[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>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';

// register globally
Vue.component('multiselect', Multiselect)

export default {
  mixins: [ FormMixin ],
  components: { Multiselect },
  data() {
    return {
      
      'action': '/Accounts/public/fc/sms_template/storeSmstemplate',
      'text': 'Template added succesfully',
      'redirect': '/Accounts/public/fc/sms_template',
  columns_name: [],
    }
  },

   computed: {
    isInvalid () {
      return this.isTouched && this.value.length === 0
    },
  },
    methods: {
      getSms_template_columns: function(){
        axios.get('/Accounts/public/fc/Sms_template_columns/get')
        .then(function(response){
            this.columns_name = response.data;
        }.bind(this));
      },
    
    nameWithphone ({ cust_client_fullname, cust_client_phone }) {
      return `${cust_client_fullname} — [${cust_client_phone}]`
    },
    onChange (value) {
      this.value = value
      if (value.indexOf('Reset me!') !== -1) this.value = []
    },
    onSelect (option) {
      if (option === 'Disable me!') this.isDisabled = true
    },
    onTouch () {
      this.isTouched = true
    },
    },
    created: function(){
      this.getSms_template_columns()
    }
}

</script>


<!--Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>