@include("lessons.lessons")
<template id="admin-item">
    <v-card flat mb-3 style="margin-bottom: 10px;" class="draggable">
        <v-toolbar
            flat

        >
            <v-icon style="cursor: move">drag_indicator</v-icon>
            <v-toolbar-title dark>
                <span v-if="!edit" @click="edit = true" style="cursor: text">@{{ item.name }}</span>
                <v-layout v-else>
                    <v-flex grow>
                        <v-text-field v-model="item.name"></v-text-field>
                    </v-flex>
                    <v-flex shrink>
                        <v-btn small icon :loading="loading"
                               @click="save">
                            <v-icon tile color="primary">check</v-icon>
                        </v-btn>
                    </v-flex>
                    <v-flex shrink>
                        <v-btn small icon @click="edit=false">
                            <v-icon color="red">close</v-icon>
                        </v-btn>
                    </v-flex>
                </v-layout>

            </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>
                {{--<ice-table--}}
                    {{--title="Lessons"--}}
                    {{--:delatable="true"--}}
                    {{--:editable="true"--}}
                    {{--:activatable="true"--}}
                    {{--:suspendable="true"--}}
                    {{--:item="lesson"--}}
                    {{--:items="lessons"--}}
                    {{--:headers="headers"--}}
                    {{--:url="'{{route("modules.lessons","")}}/'+item.id"--}}
                    {{--action_url="lessons/action/"--}}
                    {{--:event="eventListener"--}}
                {{--></ice-table>--}}
                <lessons :event="eventListener" :module="item"
                        :url="'{{route("modules.lessons","")}}/'+item.id"
                />
            </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" :module="item"/>
                </v-card-text>

            </v-card>

        </v-dialog>--}}


    </v-card>


</template>

<script>
    const AdminModule = {
        template: "#admin-item",
        components: {IceTable, Lessons},
        props: {
            item: Object,
            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 || true];

        },

        methods: {
            newLesson() {
                this.lesson = {type:""};
                this.lesson_dialog = true;
            },
            editLesson(lesson) {
                this.lesson = lesson;
                this.lesson_dialog = true;
            },
            eventListener(event, data) {
                switch (event) {
                    case "items":
                        this.lessons = data;
                        break;
                    case "lesson":
                        var ind = getIndex(this.lessons, "id", data.id);
                        if (ind > -1) {
                            Vue.set(this.lessons, ind, data);
                        } else {
                            this.lessons.unshift(data)
                        }

                        break;
                    case "remove_lesson":
                        this.lessons.splice(getIndex(this.lessons, "id", data.id), 1);
                        break;
                    case "new_lesson":
                        this.newLesson();
                        break;
                    case "edit_lesson":
                        this.editLesson(data);
                        break;
                    default:

                        (this.event)(event, data);
                        break;
                }
            },
            togglePanel() {
                this.panel = [!this.panel[0]]
            },
            remove() {

                this.loading = true;
                var IDS = [this.item.id];
                var _this = this;
                axios.post('/modules/action/delete', {ids: IDS})
                    .then(response => {

                        if (response.data) {

                            (_this.event)("remove_module", _this.item);

                            _this.loading = false;
                        } else {
                            (_this.event)("toast", {"message": "Couldn't remove item", "color": "red"});
                        }
                    });


            },
            save() {
                this.loading = true;
                axios["post"]('{{route("modules.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)("module", this.item);
                        }


                    }).catch(error => {


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