<template>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="category_id">
          Product Category
        </label>

        <select
          name="category_id"
          id="category_id"
          :class="form.errors.has('category_id') ? 'form-control is-invalid' : 'form-control'"
          v-model="form.sharedState.category_id">

          <option value="" disabled hidden>Select Category</option>
          <option
            v-for="category in categories"
            :key="category.id"
            v-text="category.name"
            :value="category.id"
            @click="$emit('category-selected', category.sub_categories)">
          </option>

        </select>

        <small
          class="form-text text-danger"
          v-if="form.errors.has('category_id')"
          v-text="form.errors.get('category_id')"></small>

      </div>
    </div>
    <div class="col-md-6">
      <div
        class="form-group"
        v-if="revealSubCategory"
        @category-selected="show">

        <label for="category_id">
          Sub Category
        </label>

        <select
          name="sub_category_id"
          id="sub_category_id"
          :class="form.errors.has('sub_category_id') ? 'form-control is-invalid' : 'form-control'"
          v-model="form.sharedState.sub_category_id">

          <option value="" disabled hidden>Select Sub Category</option>

          <option
            v-for="subcategory in subcategories"
            :key="subcategory.id"
            v-text="subcategory.name"
            :value="subcategory.id">
          </option>

        </select>

        <small
          class="form-text text-danger"
          v-if="form.errors.has('category_id')"
          v-text="form.errors.get('category_id')"></small>

      </div>
    </div>
  </div>
</template>
<script>
import BaseCard from './BaseCard.vue';

export default {
  components: {
    BaseCard
  },
  data() {
    return {
      categories: [],
      revealSubCategory: false,
      subcategories: [],

      form: new Form({
        sharedState: product.data
      })
    }
  },
  mounted() {
    this.getCategories();
  },
  methods: {
    getCategories() {
      axios.get('categories')
        .then(({data}) => this.categories = data);
    },
    show(subcategories) {
      this.revealSubCategory = true;
      this.subcategories = subcategories
    }
  }
}
</script>