<template>
    <form @submit.prevent="update">
        <div class="form-group row">
          <div class="col-md-12">
            <label for="name">Survey Name</label>
            <input type="text" class="form-control" name="name" id="name" v-model="fields.name" placeholder="Enter name..."/>
            <div v-if="errors && errors.name" class="text-danger">{{ errors.name[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Participants preloaded? </label>
            
            <multiselect  name="participant_preloaded" v-model="fields.participant_preloaded" track-by="participant_preloaded" :options="participant_preloaded"  :allow-empty="true" :multiple="false" :max-height="150">
              
            </multiselect>
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Shortcode</label>
            <input type="text" class="form-control" name="shortcode" id="shortcode" v-model="fields.shortcode" placeholder="Enter shortcode..."/>
            <div v-if="errors && errors.shortcode" class="text-danger">{{ errors.shortcode[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Status</label>
            <input type="checkbox" class="form-control" name="status" id="status" v-model="fields.status" placeholder="Enter status..."/>
            <div v-if="errors && errors.status" class="text-danger">{{ errors.status[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 },
  props:['data'],
  data() {
    return {
      'action2': '/fc/surveys/update',
      'text': 'Survey updated succesfully',
      'redirect': '',
      participant_preloaded: ['YES','NO'],
      fields: {
        id:this.data.id,
        name:this.data.name,
        status:this.data.status,
        participant_preloaded:this.data.participant_preloaded,
        shortcode:this.data.shortcode,
      }
    }
  },
  methods: {

  },
  mounted() {
    this.fields.id=this.data.id;
    this.fields.name=this.data.name;
    this.fields.status=this.data.status;
    this.fields.participant_preloaded=this.data.participant_preloaded;
    this.fields.shortcode=this.data.shortcode;
  }
}

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