<?php
/**
 * Question answers template.
 *
 * @since 3.0.0
 */

learn_press_admin_view( 'quiz/question-answer-option' );
?>

<script type="text/x-template" id="tmpl-lp-quiz-question-answers">
    <div class="quiz-question-data">
        <div class="lp-list-questions">
            <table class="lp-list-options">
                <thead>
                <tr>
                    <th class="sort"></th>
                    <th class="order">#</th>
                    <th class="answer-text"><?php esc_html_e( 'Answer Text', 'learnpress' ); ?></th>
                    <th class="answer-correct"><?php esc_html_e( 'Correct?', 'learnpress' ); ?></th>
                    <th class="actions"></th>
                </tr>
                </thead>
                <tbody>
                <lp-quiz-question-answer-option v-for="(answer, index) in question.answers"
                                                :question="question" :answer="answer" :index="index" :key="index"
                                                @changeCorrect="changeCorrect"
                                                @nav="navItem"></lp-quiz-question-answer-option>
                </tbody>
            </table>
        </div>
        <p class="question-button-actions" v-if="addableAnswer">
            <button class="button add-question-option-button" type="button"
                    @click="newAnswer"><?php esc_html_e( 'Add option', 'learnpress' ); ?></button>
        </p>
    </div>
</script>

<script type="text/javascript">
    jQuery(function ($) {
        var $Vue = window.$Vue || Vue;
        var $store = window.LP_Quiz_Store;

        $Vue.component('lp-quiz-question-answers', {
            template: '#tmpl-lp-quiz-question-answers',
            props: ['question'],
            computed: {
                // addable answer option
                addableAnswer: function () {
                    return !(String(this.question.type.key) === 'true_or_false');
                }
            },
            mounted: function () {
                var _self = this;
                //setTimeout(function () {
                    var $el = $(_self.$el).find('.lp-list-options tbody');
                    $el.sortable({
                        handle: '.sort',
                        axis: 'y',
                        helper: function (e, ui) {
                            var $tr = $('<tr />'),
                                $row = $(e.target).closest('tr');
                            $row.children().each(function () {
                                var $td = $(this).clone().width($(this).width())
                                $tr.append($td);
                            });

                            return $tr;
                        },
                        update: function () {
                            _self.sort();
                        }
                    });
                //}, 1000)

            },
            methods: {
                // sort answer options
                sort: function () {

                    var _items = $('.question-item[data-item-id="' + this.question.id + '"] .quiz-question-data .lp-list-questions>.lp-list-options tbody tr');
                    var _order = [];
                    _items.each(function (index, item) {
                        $(item).find('.order').text((index + 1) + '.');
                        _order.push($(item).data('answer-id'));
                    });

                    $store.dispatch('lqs/updateQuestionAnswersOrder', {
                        question_id: this.question.id,
                        order: _order
                    });
                },
                // change correct answer
                changeCorrect: function (correct) {
                    $store.dispatch('lqs/updateQuestionCorrectAnswer', {
                        question_id: this.question.id,
                        correct: correct
                    });
                },
                // new answer option
                newAnswer: function () {
                    $store.dispatch('lqs/newQuestionAnswer', {
                        question_id: this.question.id, success: function (answer) {
                            $(this.$el).find('tr[data-answer-id="' + answer.question_answer_id + '"] .answer-text input').focus();
                        }, context: this
                    });
                },
                // navigation course items
                navItem: function (payload) {

                    var keyCode = payload.key,
                        order = payload.order;

                    if (keyCode === 38 && order > 0) {
                        this.nav(order - 1);
                    }
                    if (keyCode === 40 || keyCode === 13) {
                        if (order === this.question.answers.length) {
                            // code
                        } else {
                            this.nav(order + 1);
                        }
                    }

                },
                // focus item
                nav: function (position) {
                    var element = 'div[data-item-id=' + this.question.id + '] tr[data-order-answer=' + position + ']';
                    ($(element).find('.answer-text input')).focus();
                }
            }
        })
    })
</script>
