@include("questions.form")
<template id="admin-question">
    <v-card flat mb-3 style="margin-bottom: 10px;" class="draggable">
        <v-toolbar
            flat
            py-1
        >
            <v-icon style="cursor: move">drag_indicator</v-icon>
            <v-toolbar-title dark>
                <span v-html="item.question"></span>
            </v-toolbar-title>

            <v-spacer></v-spacer>
            <v-toolbar-items>

                <v-btn elevation="0" small flat v-if="!panel[0]" @click="togglePanel">
                    <v-icon>expand_more</v-icon>
                </v-btn>
                <v-btn color="white" small elevation="0" v-if="panel[0]" @click="togglePanel">
                    <v-icon>expand_less</v-icon>
                </v-btn>
                <v-btn :loading="loading" icon @click="remove">
                    <v-icon color="red">delete</v-icon>
                </v-btn>
            </v-toolbar-items>
        </v-toolbar>

        <v-expansion-panel mb-3 v-model="panel" expand>

            <v-expansion-panel-content hide-actions>
                {{--Question goes here--}}

                <question-form :question="item" :event="eventListener"></question-form>
            </v-expansion-panel-content>


        </v-expansion-panel>
       {{-- <v-dialog v-model="lesson_dialog" transition="dialog-bottom-transition" >
            <v-card>
                <v-card-title
                    v-if="lesson.type !== ''"
                    class="grey lighten-4 title"
                >
                    @{{ lesson.type }}
                    <v-spacer></v-spacer>
                    <v-btn small icon @click="lesson_dialog=false">
                        <v-icon small>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-card-text>
                    <lesson :lesson="lesson" :event="eventListener" :question="item"/>
                </v-card-text>

            </v-card>

        </v-dialog>--}}


    </v-card>


</template>

<script>
    const AdminQuestion = {
        template: "#admin-question",
        components: {QuestionForm},
        props: {
            item: Object,
            index: Number,
            event: {
                type: Function,
                default: function (event, data) {
                }
            }
        },
        data() {
            return {
                loading: false,
                panel: [false],
                lesson_dialog: false,
                lesson: {type:''},
                video_dialog: true,
                edit: false,
                lessons:[],
                headers:[
                    {text: '{{__("Name")}}', value: 'name'},
                    {text: '{{__("Type")}}', value: 'type'},
                ]
            };
        },
        watch: {},
        mounted() {
            this.panel = [this.item.panel || false];

        },

        methods: {
            newLesson() {
                this.lesson = {type:""};
                this.lesson_dialog = true;
            },
            editLesson(lesson) {
                this.lesson = lesson;
                this.lesson_dialog = true;
            },
            eventListener(event, data) {
                switch (event) {
                    case "bla":
                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            },
            togglePanel() {
                this.panel = [!this.panel[0]]
            },
            remove() {

                (this.event)("remove_question", this.index);


            },
            save() {
                this.loading = true;
                axios["post"]('{{route("questions.store")}}', this.item)
                    .then(response => {
                        this.loading = false;

                        if (response.data.error) {
                            (this.event)("toast", {message: response.data.message, color: 'red'});
                        } else {
                            this.item = response.data;
                           // (this.event)("question", this.item);
                        }


                    }).catch(error => {


                    (this.event)("error", error);
                    this.loading = false
                });
            },
        }
    }
</script>