<template>
<!-- meterials dshboarrd creation -->
    <section>
        <h4 class="text-uppercase mb-4">Study Materials</h4>
        <b-tabs content-class="mt-3">
            <b-tab title="Mathematics" active @click="getLessons(0)">
                <div class="row">
                    <div class="col-12">
                        <div class="card study-pic">
                            <div class="card-body">
                                <v-card-title><!-- mathematics dshboarrd creation -->
                                Mathematics
                                <v-spacer></v-spacer>
                                <v-text-field
                                v-model="search"
                                append-icon="search"
                                label="Search"
                                single-line
                                hide-details
                                ></v-text-field>
                            </v-card-title>
                            <v-data-table
                                :headers="headers"
                                :items="lessons"
                                :search="search"
                            ></v-data-table>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-4">
                        <div class="card">
                            <div class="card-body">
                                <b-form-input placeholder="Search..."></b-form-input>
                            </div>
                        </div>
                    </div> -->
                </div>
            </b-tab>
            <b-tab title="Science" @click="getLessons(1)">
                <div class="row">
                    <div class="col-12">
                        <div class="card study-pic">
                            <div class="card-body">
                                <v-card-title><!-- science dshboarrd creation -->
                                Science
                                <v-spacer></v-spacer>
                                <v-text-field
                                v-model="search"
                                append-icon="search"
                                label="Search"
                                single-line
                                hide-details
                                ></v-text-field>
                            </v-card-title>
                            <v-data-table
                                :headers="headers"
                                :items="lessons"
                                :search="search"
                            ></v-data-table>
                            </div>
                        </div>
                    </div>
                </div>
            </b-tab>
        </b-tabs>
    </section>
</template>
<script>
  import ApiService from '@/services/api.service';

  export default {
    data() {
      return {
        value: '',
        context: null,
        video_url:'',
        search: '',
      headers: [
        // {
        //   text: 'Dessert (100g serving)',
        //   align: 'left',
        //   sortable: false,
        //   value: 'name',
        // },
        // { text: 'ID', value: 'lessonid' },
        // { text: 'SUBJECT', value: 'subject' },
        { text: 'TOPIC', value: 'topic' },
        { text: 'CONTENT', value: 'content' },
      ],
        lessons: []
      }
    },
    created() {
      this.getLessons(0);
    },
    methods: {
      getLessons(type) {
        ApiService.get(`/lessons/${type}`)
        .then(({data}) => {
            this.lessons = data.lessons;
        });
      }
      
    },
    components: {
    },
  }
</script>