@include("modules.admin_module")
<template id="course-syllabus">
    <v-card flat>
        <v-card-text>
            <v-layout justify-space-around rows wrap>
                <v-flex xs12>

                    <v-radio-group :row="true" label="Learner must complete" v-model="course.completion_order" inline>
                        <v-radio label="Lessons in order" value="order"></v-radio>
                        <v-radio label="Lessons in any order" value="any_order"></v-radio>
                        <v-radio label="Exams" value="exams"></v-radio>
                    </v-radio-group>
                </v-flex>
                <v-flex xs12>
                    <draggable v-model="course.modules" @end="order" draggable=".draggable">

                        <admin-module  v-for="(module,index) in course.modules" :item="module" :event="eventListener">

                        </admin-module>


                    </draggable>
                </v-flex>
                <v-flex x12 md6 mx-auto>
                    <v-btn outline block @click="newModule" :loading="loading">Add another module to the course</v-btn>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-divider></v-divider>

        <v-card-actions>

            <v-spacer></v-spacer>
            <v-btn
                outline
                flat
                depressed
                @click="goto(-1)"
            >
                Back
            </v-btn>
            <v-btn
                {{--   :disabled="!course.thumbnail && !course.image"--}}
                color="success"
                depressed
                @click="goto(1)"
            >
                Continue
            </v-btn>
        </v-card-actions>
    </v-card>
</template>
<script>
    const CourseSyllabus = {
        template: "#course-syllabus",
        components: {AdminModule},
        props: {
            url: String,
            context: Object,
            course: Object,
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
            goto: {
                type: Function,
                default: function (val) {
                }
            },
            valueChanged: {
                type: Function,
                default: function (val) {
                }
            }


        },
        data: () => ({
            loading: false,
            module: {
                id: null,
                name: "",
                rank: 0
            },
            panel: [true],
            lesson_dialog: false,
            lesson: {},
        }),
        computed: {},
        watch: {},
        mounted() {

        },
        methods: {
            eventListener(event,data){
                switch (event) {
                    case "module":
                        Vue.set(this.course.modules, getIndex(this.course.modules,"id",data.id), data);
                        break;
                    case "remove_module":
                        this.course.modules.splice(getIndex(this.course.modules,"id",data.id), 1);
                        break;
                    default:

                        (this.event)(event,data);
                        break;
                }
            },

            newModule() {
                //this.course.modules.push();

                this.saveModule({
                    id: null,
                    name: "Module #" + (this.course.modules.length+1),
                    course_id:this.course.id,
                    panel: true,
                    edit: true,
                    loading: false
                },this.course.modules.length);


            },
            removeModule(module,index) {
                if (!module.id) {

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

                            if (response.data) {

                                _this.course.modules.splice(index, 1);

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

            },
            togglePanel(module) {
                module.panel = [!module.panel[0]]
            },
            saveModule(module, index) {
                this.loading = true;
                module.rank = index;
                module.course_id = this.course.id;
                module.loading = true;
                axios["post"]('{{route("modules.store")}}', module)
                    .then(response => {
                        module.loading = false;
                        this.loading = false;
                        if (response.data.error) {
                            (this.event)("toast", {message: response.data.message, color: 'red'});
                        } else {

                            module = response.data;
                            Vue.set(this.course.modules, index, module);

                        }


                    }).catch(error => {


                    (this.event)("error", error);
                    module.loading = false
                    this.loading = false;
                });
            },

            async order() {


                var mos = [];
                for(var i = 0;i<this.course.modules.length;i++){
                    if(this.course.modules[i].id)
                    mos.push(this.course.modules[i].id);
                }
                axios.post("{{route("courses.order","")}}/" + this.course.id, {modules:mos})
                    .then(res => {
                    })
                    .catch(err => {
                        (this.event)("toast", {"message": "Ordering Failed", color: "red"})
                    })
                    .finally(() => this.loading = false);


            },
        }
    }
</script>