<div class="app-groups-wr" id="app">
  
<div class="row">
  
  <div class="col-md-4">
    <div class="list-group">
      
      <a v-on:click="setCategory(category)" href="#" v-bind:class="[((category.id === activeCategory) && (activeGroup !== 0)) ? 'active' : '', 'list-group-item']" v-for="category in categories">
        {{category.title}}
      </a>
     
    </div>
  
    <div class="list-group">
      <a v-on:click="setBasic()" v-bind:class="[((activeGroup === 0) && (activeCategory === 0)) ? 'active' : '', 'list-group-item']" href="#">Базовый</a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="list-group">
      <a v-on:click="setGroup(group)" v-bind:class="[(group.id === activeGroup) ? 'active' : '', 'list-group-item']" v-for="group in groups" href="#">{{group.title}}</a>
    </div>
  </div>
  <div class="col-md-4">
  
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
      
      <button v-on:click="switchLang(language)" v-for="language in languages" type="button" v-bind:class="[(language.id === activeLang) ? 'active': '', 'btn btn-default']">{{language.url}}</button>
   
    </div>
    
    <div v-if="activeTemplate !== null">
  
      <div class="form-group">
        <label for="title">Title</label>
        <input v-model="activeTemplate.title" type="text" class="form-control" id="title" placeholder="Title">
      </div>
  
      <div class="form-group">
        <label for="h1">H1</label>
        <input v-model="activeTemplate.h1" type="text" class="form-control" id="h1" placeholder="H1">
      </div>
  
      <div class="form-group">
        <label for="description">Description</label>
        <textarea v-model="activeTemplate.description" class="form-control" id="description" placeholder="Description"></textarea>
      </div>
  
      <div class="form-group">
        <label for="robots">Robots</label>
        <v-select id="robots" v-model="activeTemplate.robots" :options="['index,follow','noindex,nofollow']"></v-select>
      </div>
      
      <button v-on:click="save()" type="submit" class="btn btn-default">Save</button>
      
    </div>

  </div>
  
</div>

</div>

<script>
    var url = '/admin/catalog/seo';

    Vue.component('v-select', VueSelect.VueSelect);

    new Vue({
        el: '#app',

        data: {
            categories: null,
            groups: [],
            activeCategory: null,
            activeGroup: null,
            templates: [],
            languages: [],
            activeTemplate: null,
            activeLang: null
        },
        created: function() {
            this.fetchData();
        },
        methods: {
            fetchData: function() {
                var self = this;

                axios.get(url + '/categories')
                     .then(function(response) {
                         self.categories = response.data;
                     });

                axios.get(url + '/languages')
                     .then(function(response) {
                         self.languages = response.data;
                         self.languages.forEach(function(lang) {
                             if (lang.default) {
                                 self.activeLang = lang.id
                             }
                         })
                     });
            },
            setCategory: function(category) {
                var self = this;
                
                self.activeCategory = category.id;
                self.activeGroup = null;

                axios.get(url + '/groups?id=' + category.id)
                     .then(function(response) {
                         self.groups = response.data;
                     });
            },
            setGroup: function(group) {
                var self = this;
              
                self.activeGroup = group.id;

                axios.get(url + '/get-templates?categoryId=' + self.activeCategory + '&groupId=' + self.activeGroup)
                     .then(function(response) {
                         self.templates = response.data;
                         self.switchTemplate(self.activeLang);
                     });
            },
            setBasic: function() {
                var self = this;

                self.activeGroup = 0;
                self.activeCategory = 0;

                axios.get(url + '/get-templates?categoryId=' + self.activeCategory + '&groupId=' + self.activeGroup)
                     .then(function(response) {
                         self.templates = response.data;
                         self.switchTemplate(self.activeLang);
                     });
            },
            switchTemplate: function(lang) {
                var self = this;
                
                self.templates.forEach(function(element) {
                    if (element.language_id === lang) {
                        self.activeTemplate = element;
                    }
                });
            },
            switchLang: function(language) {
                this.activeLang = language.id;
                this.switchTemplate(language.id);
            },
            save: function() {
                var self = this;
                axios.post(url + '/save-templates?categoryId=' + self.activeCategory + '&groupId=' + self.activeGroup, this.templates)
                     .then(function(response) {
                     
                     });
            }
        }
    });
</script>