@include("categories.category_form")
<style>
    .quill-editor,
    .content {
        background-color: white;
    }
</style>
<template id="course-general-form">

    <v-card flat>
        <v-card-text>
            <v-form ref="form" v-model="valid" lazy-validation>
            <v-layout row wrap>
                <v-flex md3 pa-1>
                    <v-text-field label="Course Name" v-model="course.name" :rules="nameRules" placeholder="Course Name"></v-text-field>
                </v-flex>
                <v-flex md3 pa-1>
                    <v-text-field label="Course Code" v-model="course.code" :rules="codeRules" placeholder="Course Code"></v-text-field>
                </v-flex>
                <v-flex md3 pa-1>
                    <v-autocomplete
                        v-model="course.category_id"
                        :items="categories"
                        :rules="categoryRules"
                        :search-input.sync="search_cat"
                        item-text="name"
                        item-value="id"
                        label="{{__("Course Category")}}"
                        placeholder="{{__("Course Category")}}"
                        persistent-hint
                        :loading="category_loading"
                    >
                        <template v-slot:no-data>
                            <v-list-tile @click="saveCategory(search_cat)">
                                <v-list-tile-content>
                                    <v-list-tile-title>
                                        <v-icon small>add</v-icon> Create a new Option named "<strong>@{{ search_cat }}</strong>"
                                    </v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                        </template>
                    </v-autocomplete>
                </v-flex>
                <v-flex md3 pa-1>
                    <v-autocomplete
                        v-model="course.level_id"
                        :items="levels"
                        :search-input.sync="search_level"
                        item-text="name"
                        item-value="id"
                        label="{{__("Course Level")}}"
                        placeholder="{{__("Course Level")}}"
                        persistent-hint
                        :loading="level_loading"
                    >
                        <template v-slot:no-data>
                            <v-list-tile @click="saveLevel(search_level)">
                                <v-list-tile-content>
                                    <v-list-tile-title>
                                        <v-icon small>add</v-icon> Create a new Level named "<strong>@{{ search_level }}</strong>"
                                    </v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                        </template>
                    </v-autocomplete>
                </v-flex>
                <v-flex md12 pa-1>
                </v-flex>
                <v-flex xs12 >
                    <v-label>Tags</v-label>


                    <v-combobox
                        v-model="course.tags"
                        placehold="Enter tags"
                        chips
                        clearable
                        :clear-icon-cb="removeAllTags"
                        label="Enter tags"
                        hint="Separate tags by pressing enter"
                        solo
                        multiple
                    >
                        <template slot="selection" slot-scope="data">I
                            <v-chip
                                :selected="data.selected"
                                close
                                @input="removeTag(data.item)"
                            >
                                <strong>@{{ data.item }}</strong>
                            </v-chip>
                        </template>
                    </v-combobox>




                </v-flex>
                <v-flex md12 >
                    <v-label>Course Description</v-label>
                    <quill-editor v-model="course.description"
                                  ref="quillEditorA"></quill-editor>
                </v-flex>



            </v-layout>

            </v-form>


        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                :disabled="!valid"
                color="success"
                depressed
                @click="save"
                :loading="loading"
            >
                Continue
            </v-btn>
        </v-card-actions>
        <v-dialog v-model="category_dialog" width="450px">
            <v-card>
                <v-card-title
                    class="grey lighten-4 py-4 title"
                >
                    <span >{{__("New Category")}}</span>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <category-form :category="{}" :event="eventListner"/>
                </v-container>

            </v-card>
        </v-dialog>
        <v-dialog v-model="confirm_remove_tag" width="300px">
            <v-card>
                <v-card-title
                    class="grey lighten-4 py-4 title"
                >
                    {{__("components.Confirm")}}
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <v-layout row wrap>
                        <v-flex xs12 align-center justify-space-between>
                            <v-layout align-center>
                                Are you sure you want to remove all tags
                            </v-layout>
                        </v-flex>

                    </v-layout>
                </v-container>
                <v-card-actions>


                    <v-btn flat @click="confirm_remove_tag = !confirm_remove_tag">{{__("components.Cancel")}}</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn flat color="primary" :loading="loading"
                           @click="deleteAllTags">{{__("Remove All")}}
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-card>

</template>
<script>

    const CourseGeneralForm = {
        template: "#course-general-form",
        components: {CategoryForm},
        props: {
            url: String,
            context: Object,
            course: Object,
            event: {
                type: Function,
                defualt: function (event, data) {
                }
            },
            goto: {
                type: Function,
                defualt: function (data) {
                }
            },


            message: 'Hi from Vue.',
            content: '<h2>I am Example A</h2>',
            content2: '<h2>I am Example B</h2>',
            editorOption: {
                theme: 'snow'
            }

        },
        data: () => ({
            loading: false,
            categories:{!! \App\Category::all() !!},
            levels:{!! \App\Level::all() !!},
            tags:["Bible","Finance","Relationships"],
            category_dialog:false,
            confirm_remove_tag:false,
            category_loading:false,
            level_loading:false,
            search_cat:"",
            search_level:"",
            valid:false,
            descRules: [
                v => !!v || '{{__("Description of course is required")}}',
                (v) => v && v.split(" ").length >= 1 || '{{("Description should be more than 10 words")}}'
            ],
            nameRules: [
                v => !!v || '{{__("Name of course is required")}}',
                (v) => v && v.length <= 255 || '{{("Name of course should be less than 255 letters")}}'
            ],
            codeRules: [
                v => !!v || '{{__("Code of course is required")}}',
                (v) => v && v.length <= 255 || '{{("Code of course should be less than 255 letters")}}'
            ],
            categoryRules: [
                v => !!v || '{{__("Course category is required")}}',
            ],
        }),
        computed: {


        },
        watch: {


        },
        mounted() {
            if(this.course.id){
                this.valid = true;
            }else{
                this.valid = false;
            }

            //console.log('this is quill A instance object', this.editorA, 'B instance', this.editorB)
        },
        methods: {

            removeAllTags(){
                this.confirm_remove_tag = true;
            },
            deleteAllTags(){
                this.course.tags = [];
                this.confirm_remove_tag = false;
            },
            removeTag(tag){
                this.course.tags.splice(this.course.tags.indexOf(tag), 1);
            },
            fileChanged(){
                (this.event)("toast","file change","blue");
            },
            eventListner(event,data){
                switch (event) {
                    case "toast":
                        (this.event)("toast",data);
                        break;
                    case "category":
                        this.course.category_id = data.id;
                        this.categories.unshift(data);

                        break;
                    default:
                        (this.event)(event,data);
                        break;
                }
            },
            save(){

                if (this.$refs.form.validate()) {

                    if(!this.course.id){
                        var _this = this;
                        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 {

                                    var object = response.data;
                                    this.course = object;
                                    (this.event)("general_course",object);

                                }


                            }).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
                        });
                    }else{
                        (this.goto)(1)
                    }

                }



            },
            saveCategory(name){



                        this.category_loading = true;
                        axios["post"]('{{route("categories.store")}}', {name:name})
                            .then(response => {
                                this.category_loading = false;

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

                                    var object = response.data;
                                    this.course.category_id = object.id;
                                    this.categories.unshift(object);


                                }


                            }).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.category_loading = false
                        });






            },
            saveLevel(name){



                        this.level_loading = true;
                        axios["post"]('{{route("levels.store")}}', {name:name})
                            .then(response => {
                                this.level_loading = false;

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

                                    var object = response.data;
                                    this.course.level_id = object.id;
                                    this.levels.unshift(object);


                                }


                            }).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.level_loading = false
                        });






            },


            onEditorBlur(quill) {
                console.log('editor blur!', quill)
            },
            onEditorFocus(quill) {
                console.log('editor focus!', quill)
            },
            onEditorReady(quill) {
                console.log('editor ready!', quill)
            }
        }
    }
</script>