@include("questions.admin_question")
@include("questions.select_questions")
<template id="assessment-form">

    <v-layout row wrap>
        <v-flex xs12>
            <v-stepper
                v-model="step"
                color="primary"
            >
                <v-stepper-header>
                    <v-stepper-step :complete="assessment.id" :editable="true" step="1">Details</v-stepper-step>

                    <v-divider></v-divider>

                    <v-stepper-step :editable="assessment.id" step="2">Options</v-stepper-step>

                    <v-divider></v-divider>

                    <v-stepper-step :editable="assessment.id" step="3">Messages</v-stepper-step>

                    <v-divider></v-divider>

                    <v-stepper-step :editable="assessment.id" step="4">Questions</v-stepper-step>


                </v-stepper-header>

                <v-stepper-items>
                    <v-stepper-content step="1">
                        <v-card flat>
                            <v-card-text>
                                <v-layout row wrap>

                                    <v-flex xs12 sm6 align-center justify-space-between>
                                        <v-layout align-center>
                                            <v-text-field v-model="assessment.name"
                                                          placeholder="Name"
                                                          label="Name"
                                            ></v-text-field>
                                        </v-layout>
                                    </v-flex>
                                    <v-flex xs12 sm6>

                                            <v-text-field v-model="assessment.duration"
                                                          placeholder="Duration"
                                                          label="Duration"
                                                          type="number"
                                                          suffix="minutes"
                                            ></v-text-field>

                                    </v-flex>
                                    <v-flex xs12>

                                        <v-radio-group :row="true" label="How to complete it:*"
                                                       v-model="assessment.assessment_type" inline>
                                            <v-radio label="Quiz" value="Quiz"></v-radio>
                                            <v-radio label="Exam" value="Exam"></v-radio>
                                        </v-radio-group>

                                    </v-flex>
                                    <v-flex xs12 v-if="assessment.assessment_type === 'Exam'">
                                        <v-layout row wrap>
                                            <v-flex shrink>
                                                <v-text-field type="number" label="Assessment Weight" outline
                                                              v-model="assessment.weight" suffix="#"
                                                              hint="Assign a weight value for this assessment"
                                                ></v-text-field>
                                            </v-flex>
                                            <v-flex shrink>
                                                <v-text-field type="number" label="Grade To Pass" outline
                                                              v-model="assessment.pass_grade" suffix="%"
                                                              hint="Percentage grade required to complete the assessment"
                                                ></v-text-field>
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>

                                    <v-flex xs12>
                                        <v-label>Description</v-label>
                                        <quill-editor
                                            v-model="assessment.description"
                                            placeholder="Assessment template"
                                            rows="3"
                                            box
                                        ></quill-editor>
                                    </v-flex>


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

                                {{--<v-btn flat @click="assessment = {questions:[]}; step = 1">Cancel</v-btn>--}}
                                <v-spacer></v-spacer>
                                <v-btn
                                    color="primary"
                                    @click="save"

                                    :loading="loading"
                                >
                                    Continue
                                </v-btn>


                            </v-card-actions>
                        </v-card>

                    </v-stepper-content>

                    <v-stepper-content step="2">
                        <v-card flat>
                            <v-card-text>
                                <v-layout row wrap>
                                    <v-flex xs12>
                                        <v-switch value v-model="assessment.pass_required"
                                                  hint="Course will remain in-progress until passed"
                                                  label="Pass required to complete lesson"></v-switch>
                                    </v-flex>
                                    <v-flex xs12>
                                        <v-switch value v-model="assessment.randomize_question_order"
                                                  hint="Questions are asked in random order"
                                                  label="Randomise question order"></v-switch>
                                    </v-flex>
                                    <v-flex xs12>
                                        <v-switch value v-model="assessment.grade_quiz_automatically"
                                                  label="Grade quiz automatically"></v-switch>
                                    </v-flex>

                                    <v-flex xs12>
                                        <v-text-field type="number" v-model="assessment.number_of_question_per_page"
                                                      label="Number of questions per page"></v-text-field>
                                    </v-flex>
                                    <v-flex xs12>
                                        <v-switch v-model="assessment.allow_retake"
                                                  label="Allow Multiple Attemps"></v-switch>
                                    </v-flex>
                                    <v-flex xs12 v-if="assessment.allow_retake">
                                        <v-layout row wrap>
                                            <v-flex xs6 sm4 shrink>
                                                <v-text-field type="number" label="Maximum number of attempts"
                                                              v-model="assessment.max_attempts" suffix="#"
                                                              hint="The maximum number of attempts a user has to complete the learning object. Leaving the value blank allows unlimited attempts"
                                                ></v-text-field>
                                            </v-flex>
                                            <v-flex xs12 shrink>
                                                <v-switch v-model="assessment.allow_additional_attempts"
                                                          label="Allow the user to attempt the learning object multiple times after pass"></v-switch>
                                            </v-flex>
                                            <v-flex shrink>
                                                <v-radio-group :row="true" label="Grade Based on"
                                                               v-model="assessment.grade_on" inline>
                                                    <v-radio value="highest_grade" label="Highest Grade"></v-radio>
                                                    <v-radio value="First_passing_grade"
                                                             label="First Passing Grade"></v-radio>
                                                </v-radio-group>
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                            <v-card-actions>
                                <v-btn
                                    color="default"
                                    @click="step = 1"
                                >
                                    Back
                                </v-btn>
                                {{--<v-btn flat @click="assessment = {questions:[]}; step = 1">Cancel</v-btn>--}}
                                <v-spacer></v-spacer>
                                <v-btn
                                    color="primary"
                                    @click="step = 3"

                                    :loading="loading"
                                >
                                    Continue
                                </v-btn>


                            </v-card-actions>
                        </v-card>


                    </v-stepper-content>
                    <v-stepper-content step="3">
                        <v-card flat>
                            <v-card-text>
                                <v-layout row wrap>

                                    <v-flex xs12 pl-1 mt-0>
                                        <v-switch mt-0 value
                                                  v-model="assessment.use_custom_failed_template" label="Use custom failed message"></v-switch>
                                        <v-label v-if="assessment.use_custom_failed_template">Custom Fail Message</v-label>
                                        <quill-editor v-if="assessment.use_custom_failed_template"
                                                      v-model="assessment.failed_template"
                                                      rows="1"></quill-editor>
                                    </v-flex>
                                    <v-flex xs12 pl-1 mt-0>
                                        <v-switch mt-0 value
                                                  v-model="assessment.use_custom_already_completed_template" label="Use custom already completed message"></v-switch>
                                        <v-label v-if="assessment.use_custom_already_completed_template">Custom already completed message</v-label>
                                        <quill-editor v-if="assessment.use_custom_already_completed_template"
                                                      v-model="assessment.already_completed_template"

                                                      rows="1"></quill-editor>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                            <v-card-actions>
                                <v-btn
                                    color="default"
                                    @click="step = 2"
                                >
                                    Back
                                </v-btn>
                                {{--<v-btn flat @click="assessment = {questions:[]}; step = 1">Cancel</v-btn>--}}
                                <v-spacer></v-spacer>
                                <v-btn
                                    color="primary"
                                    @click="step = 4"

                                    :loading="loading"
                                >
                                    Continue
                                </v-btn>


                            </v-card-actions>
                        </v-card>

                    </v-stepper-content>
                    <v-stepper-content step="4">
                        <v-card flat>
                            <v-card-text>

                                <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-card-text>
                            <v-card-actions>
                                <v-btn
                                    color="default"
                                    @click="step = 3"
                                >
                                    Back
                                </v-btn>
                                {{--<v-btn flat @click="assessment = {questions:[]}; step = 1">Cancel</v-btn>--}}
                                <v-spacer></v-spacer>

                                <v-btn
                                    color="primary"
                                    @click="save"
                                    :loading="loading"
                                >
                                    Save and Close
                                </v-btn>


                            </v-card-actions>
                        </v-card>

                    </v-stepper-content>

                </v-stepper-items>
            </v-stepper>

        </v-flex>

    </v-layout>


</template>
<script>

    const AssessmentForm = {
        template: "#assessment-form",
        components: {AdminQuestion,SelectQuestion},
        props: {
            loading: false,
            source: String,
            context: Object,
            step:{
                type: Number,
                default:1
            },
            assessment: {
                type: Object,
                default: {questions:[]},
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },

        },
        data: () => ({

        }),
        computed: {},
        mounted() {

        },
        methods: {
            back(){
              this.step -=1;
            },
            next(){
              this.step +=1;
            },
            eventListener(event,data){
                switch (event) {
                    case "question":


                      //  this.$nextTick(function () {
                            var inde = getIndex(this.assessment['questions'] || [], "id", data.id);
                            if (inde < 0) {
                                data.panel = false;
                                this.assessment['questions'].push(data);
                            }
                            (this.event)(event, data);
                       // })
                        this.step = 3;
                        this.step = 4;
                        break;
                    case "question_selected":
                        //this.$nextTick(function () {
                            let ind = getIndex(this.assessment['questions'] || [], "id", data.id);
                            if (ind < 0) {
                                data.panel = false;
                                this.assessment['questions'].push(data);
                            }

                        //})

                        //(this.event)(event,data);
                        this.step = 3;
                        this.step = 4;
                        break;
                    case "questions_selected":
                      /*  this.$nextTick(function () {*/
                            for (var i = 0; i < data.length; i++) {
                                let d = data[i];
                                let ind = getIndex(this.assessment['questions'] || [], "id", d.id);
                                if (ind < 0) {
                                    d.panel = false;
                                    this.assessment['questions'].push(d);
                                } else {
                                    Vue.set(this.assessment['questions'], ind, d);
                                }
                            }
                        //})


                        //this.assessment['questions'] = data;

                        //(this.event)(event,data);
                        this.step = 3;
                        this.step = 4;
                        break;
                    case "remove_question":
                        this.assessment['questions'].splice(data, 1);
                        this.step = 3;
                        this.step = 4;
                        break;
                    default:
                        (this.event)(event,data);
                        break;
                }
            },
            save: function () {
                this.persist('post', "{{route("assessments.store")}}", this.assessment);
            },
            persist(method, uri, object) {


                this.form = {};
                var errors = false;
                if (!object.name || object.name.trim() === "") {

                    (_this.event)("toast", {message: "Please enter the name field", color: 'red'});
                    return false;
                }


                var _this = this;
                this.loading = true;
                axios[method](uri, object)
                    .then(response => {
                        _this.loading = false;

                        if (response.data.error) {


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

                            _this.assessment = response.data;
                            object = response.data;

                            //notification of assessment object
                            (_this.event)("lesson", this.assessment);

                            (_this.event)("toast", {message: "Success", color: 'success'});

                            if(this.step === 1){
                                this.step = 2;
                                this.step = 2;
                            }else{

                                    (_this.event)("close_assessment", true);

                            }



                        }


                    }).catch(error => {

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

                    (_this.event)("toast", {message: "Something happened", color: 'red'});
                    _this.loading = false
                });


            },
            async order() {


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


            },
            selectQuestion() {
                //this.assessment['questions'].push();

               /* this.saveQuestion({
                    id: null,
                    name: "Question #" + (this.assessment['questions'].length + 1),
                    assessment_id: this.assessment.id,
                    panel: true,
                    edit: true,
                    loading: false
                }, this.assessment['questions'].length);*/


            },
            newQuestion() {
                if(!this.assessment['questions']){
                    this.assessment['questions'] = [];
                }

                //this.$nextTick(function () {
                    this.assessment['questions'].push({
                       id: null,
                        panel: true,
                        edit: true,
                        loading: false
                    });
                //});

                /*this.step = 3;
                this.step = 4;*/
                /*  this.saveQuestion({
                      id: null,
                      name: "Question #" + (this.assessment['questions'].length+1),
                      assessment_id:this.assessment.id,
                      panel: true,
                      edit: true,
                      loading: false
                  },this.assessment['questions'].length);*/


            },
            removeQuestion(question, index) {
                if (!question.id) {
                    this.assessment['questions'].splice(index, 1);
                } else {
                    question.loading = true;
                    var IDS = [question.id];
                    var _this = this;
                    axios.post('/questions/action/delete', {ids: IDS})
                        .then(response => {

                            if (response.data) {
                                _this.assessment['questions'].splice(index, 1);
                                _this.loading = false;
                            } else {
                                (_this.event)("toast", {"message": "Couldn't remove question", "color": "red"});
                            }
                        });
                }

            },
            togglePanel(question) {
                question.panel = [!question.panel[0]]
            },
            saveQuestion(question, index) {
                this.loading = true;
                question.rank = index;
                question.assessment_id = this.assessment.id;
                question.loading = true;
                axios["post"]('{{route("questions.store")}}', question)
                    .then(response => {
                        question.loading = false;
                        this.loading = false;
                        if (response.data.error) {
                            (this.event)("toast", {message: response.data.message, color: 'red'});
                        } else {
                            question = response.data;
                            Vue.set(this.assessment['questions'], index, question);
                        }


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