<template>
    <form @submit.prevent="submit">
        <div class="form-group row">
          <div class="col-md-12">
            <label for="name">Number</label>
            <input type="number" class="form-control" name="number" id="number" v-model="fields.number" placeholder="Enter number..."/>
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Type</label>
            
            <multiselect  name="type" v-model="fields.type" track-by="type" placeholder="Select Type" :options="types"  :allow-empty="true" :multiple="false" :max-height="150" @input="onchange">
              
            </multiselect>
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Question</label>
            <textarea class="form-control" name="question" id="question" v-model="fields.question" placeholder="Type question..."></textarea>
            <div v-if="errors && errors.question" class="text-danger">{{ errors.question[0] }}</div>
          </div>
          <div class="form-group row" :hidden="this.isHidden">
          <div class="col-md-12">
            <label for="name">Option</label>
            <input type="text" class="form-control" placeholder="Option" v-model="options.option">
          </div>
          <div class="col-md-12">
            <label for="name">Response</label>
            <textarea class="form-control" placeholder="Type Response here..." v-model="options.response"></textarea>
          </div>
          <div class="col-md-12">
            {{ JSON.stringify(this.choices, null, 2) }}
            <i class="fas fa-minus-circle" @click="remove(index)"></i>
            <i class="fas fa-plus-circle" @click="add()"></i>
            <!-- <span v-for="input in fields.options">
             Option: {{ input.option }} | Response: {{ input.response }}
            </span> -->
          </div>
        </div>
          <div class="col-md-12">
            <label for="name">Branching? </label>
            
            <multiselect  name="branching" v-model="fields.branching" track-by="branching" :options="branchings"  :allow-empty="true" :multiple="false" :max-height="150" @input="onchange1">
              
            </multiselect>
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div>
          </div>
          <div class="col-md-12" :hidden="this.isHidden1">
            <label for="name">If Response equals</label>
            <input type="text" class="form-control" placeholder="Type expected Response" v-model="fields.if">
          </div>
          <div class="col-md-12" :hidden="this.isHidden1">
            <label for="name">Next Question</label>
            <input type="text" class="form-control" placeholder="Type question to load next" v-model="fields.next">
          </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 ],
  props: ['data'],
  components: { Multiselect },
  data() {
    return {
      'action': '/fc/questions/update',
      'text': 'Question updated succesfully',
      'redirect': '',
      types: ['Open','Closed'],
      branchings: ['YES','NO'],
      choices:[],
      branches:[],
      options: {
        option: '',
        response: '',
      },
      branchs: {
        if: '',
        next: '',
      },
      fields: {
        id:this.data.id,
        survey:this.data.survey_id,
        number:this.data.number,
        type:this.data.type,
        question:this.data.question,
        branching:this.data.branching,
        if:this.data.if,
        next:this.data.next,
      },
      isHidden:true,
      isHidden1:true,
      isHidden2:true,
    }
  },
  methods: {
      add() {
            this.choices.push({...this.options});
            this.fields.thechoices = this.choices;
            console.log(this.choices);
            this.options.option = '';
            this.options.response = '';
        },
        remove(index) {
            this.options.splice(index, 1);
        },
        add1() {
            this.branches.push({...this.branchs});
            this.fields.thebranches = this.branches;
            console.log(this.branches);
            this.branchs.if = '';
            this.branchs.next = '';
        },
        remove1(index) {
            this.branchs.splice(index, 1);
        },
      onchange(value){
          if(value == 'Closed')
          {
            this.isHidden = false;
            this.isHidden2 = false;
          }
          else if(value == 'Open')
          {
            this.isHidden = true;
            this.isHidden2 = false;
          }
          else
          {
            this.isHidden = true;
            this.isHidden2 = true;   
          }
        },
    onchange1(value){
      if(value == 'YES')
      {
        this.isHidden1 = false;
      }
      else
      {
        this.isHidden1 = true;
      }
    }
  },
  mounted() {
    this.fields.id=this.data.id;
    this.fields.survey=this.data.survey_id;
    this.fields.number=this.data.number;
    this.fields.type=this.data.type;
    this.fields.question=this.data.question;
    this.fields.branching=this.data.branching;
    this.fields.if=this.data.if;
    this.fields.next=this.data.next;
    if(this.fields.branching == 'YES')
    {
      this.isHidden1 = false;
    }
    else
    {
      this.isHidden1 = true;
    }
    if(this.fields.type == 'Closed')
    {
      this.isHidden = false;
    }
    else
    {
      this.isHidden = true;
    }
  }
}

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