@include("courses.general_form")
@include("courses.course_media")
@include("courses.course_syllabus")
@include("courses.course_availability")
@include("courses.course_completion")
@include("courses.course_messages")
{{--@include("courses.course_more")--}}
@include("masterminds.masterminds")
<template id="course-form">

    <v-stepper v-model="step">
        <v-stepper-header>
            <v-stepper-step :editable="course.id" :complete="course.id" step="1">General</v-stepper-step>

            <v-divider></v-divider>
            <v-stepper-step :editable="course.id" :complete="course.thumbnail" step="2">Media</v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step :editable="course.id" :complete="course.modules && course.modules.length>0" step="3">
                Syllabus
            </v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step :editable="course.id" :complete="course.id"  step="4">Availability</v-stepper-step>
            <v-divider></v-divider>

            <v-stepper-step :editable="course.id" :complete="course.id"  step="5">Completion</v-stepper-step>
            <v-divider></v-divider>

            <v-stepper-step :editable="course.id" :complete="course.id" step="6">Messages</v-stepper-step>
            <v-divider></v-divider>

            <v-stepper-step :editable="course.id" :complete="course.id"  step="7">More</v-stepper-step>
            <v-divider></v-divider>

        </v-stepper-header>

        <v-stepper-items>
            <v-stepper-content step="1">
                <course-general-form :course="course" :event="eventListener" :goto="goto"/>
            </v-stepper-content>

            <v-stepper-content step="2">

                <course-media :goto="goto" :course="course"  :event="eventListener" />

            </v-stepper-content>

            <v-stepper-content step="3">

                <course-syllabus :goto="goto" :course="course"  :event="eventListener" />

            </v-stepper-content>

            <v-stepper-content step="4">
                <course-availability :goto="goto" :course="course"   :event="eventListener" />

            </v-stepper-content>
            <v-stepper-content step="5">

                <course-completion :goto="goto" :course="course"  :event="eventListener" />

            </v-stepper-content>
            <v-stepper-content step="6">

                <course-messages :goto="goto" :course="course"  :event="eventListener" />

            </v-stepper-content>
            <v-stepper-content  step="7">

                <course-more :goto="goto" :course="course"  :event="eventListener" :loading="loading" />

            </v-stepper-content>
            {{--<v-stepper-content  step="8">


                <v-card flat>
                    <v-card-text>
                        <masterminds v-if="course  && course.id"  :course="course" :url="'{{route("courses.masterminds","")}}/'+course.id"  :event="eventListener" />
                    </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>

            </v-stepper-content>--}}
        </v-stepper-items>
    </v-stepper>
</template>

<script>
    const CourseForm = {
        template: "#course-form",
        components: {
            CourseGeneralForm, CourseMedia, CourseSyllabus,
            CourseAvailability, CourseCompletion, CourseMessages, CourseMore,Masterminds
        },
        props: {
            url: String,
            context: Object,
            course: Object,
            event: {
                type: Function,
                defualt: function (event, data) {
                }
            },


        },
        data() {
            return {
                step: 1,
                loading: false,
            }
        },
        computed: {},
        watch: {
            course() {
                if (!this.course.id) {
                    this.step = 1
                }
            }

        },
        mounted() {

        },
        updated(){



        },
        methods: {

            eventListener(event, data) {
                switch (event) {
                    case "general_course":
                        this.course = data;
                        this.goto(1);
                        (this.event)("item", data);

                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            },
            goto(val) {
                this.save();
                var step = parseInt(this.step) + parseInt(val);

                if (step < 1) {
                    this.step = 7;
                    return true;
                }
                if (step > 7) {
                    this.step = 7;
                    return true;
                }
                if (step > 0 && step < 9) {
                    this.step = step;
                    return true;
                }
            },
            valueChanged(val) {

            },
            save(){



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

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


                                this.course = response.data;

                                (this.event)("toast",{message:"Course saved successfully",color:'success'});
                            }


                        }).catch(error => {

                        // if (typeof error.response.data === 'object') {
                        //     form.errors = _.flatten(_.toArray(error.response.data));
                        // } else {
                        //     form.errors = ['Something went wrong. Please try again.'];
                        // }


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




        }
    }
</script>