@include("menus.menuitems")
<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 shrink pr-2>
                        <v-text-field label="Name" v-model="item.name"></v-text-field>
                    </v-flex>
                    <v-flex shrink pr-2>
                        <v-text-field label="Code" v-model="item.code"></v-text-field>
                    </v-flex>
                    <v-flex shrink>

                        <v-radio-group :row="true"  v-model="item.lang" inline>
                            <v-radio value="en" label="English"></v-radio>
                            <v-radio value="fr"  label="French"></v-radio>
                        </v-radio-group>
                    </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>
                <menuitems :event="eventListener" :menu="item"
                        :url="'{{route("menus.menuitems","")}}/'+item.id"
                ></menuitems>
                {{--<v-layout row wrap>
                    <v-flex xs12>

                        <draggable v-model="assessment['questions']"
                                   draggable=".draggable">

                            <admin-question v-for="(question,index) in assessment['questions']"
                                            :item="question" :index="index" :event="eventListener">

                            </admin-question>


                        </draggable>

                    </v-flex>
                    <v-flex xs6>
                        <v-btn color="primary" block @click="newQuestion" :loading="loading">Create
                            Question
                        </v-btn>
                    </v-flex>
                    <v-flex xs6>
                        <select-question :block="true" :assessment="assessment" :loading="loading" :event="eventListener">
                        </select-question>
                    </v-flex>
                </v-layout>--}}
            </v-expansion-panel-content>


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

            </v-card>

        </v-dialog>--}}


    </v-card>


</template>

<script>
    const AdminMenu = {
        template: "#admin-item",
        components: {Menuitems},
        props: {
            item: Object,
            event: {
                type: Function,
                default: function (event, data) {

                }
            }
        },
        data() {
            return {
                loading: false,
                panel: [false],
                menuitem_dialog: false,
                menuitem: {type:''},
                video_dialog: true,
                edit: false,
                menuitems:[],
                headers:[
                    {text: '{{__("Name")}}', value: 'name'},
                    {text: '{{__("Type")}}', value: 'type'},
                ]
            };
        },
        watch: {},
        mounted() {
            this.panel = [this.item.panel || false];

        },

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

                        break;
                    case "remove_menuitem":
                        this.menuitems.splice(getIndex(this.menuitems, "id", data.id), 1);
                        break;
                    case "new_menuitem":
                        this.newLesson();
                        break;
                    case "edit_menuitem":
                        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('/menus/action/delete', {ids: IDS})
                    .then(response => {

                        if (response.data) {

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

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


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


                    }).catch(error => {


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