@model ExamManagementApplication.Models.BlanksTaskCreateViewModel
@{
    ViewBag.Title = "Create";
}

<section class="content-header">
    <h1>
        Zadania
        <small>Dodaj zadanie</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Przegląd</a></li>
        <li class="active">Zadania</li>
    </ol>
</section>
<section class="content">

    @using (Html.BeginForm())
    {
        <div class="form-horizontal">
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.TaskID)
            <div class="form-group">
                <div class="col-md-10">
                    <input data-bind='value: instruction' />
                </div>
            </div>
            <div class="col-md-12">
                <div class="questionsEditor">
                    <div data-bind="foreach: questions">
                        <div class="box box-primary">
                            <div class="box-header" data-toggle="tooltip" title="Header tooltip">
                                <div class="box-tools pull-right">
                                    <button class="btn btn-primary btn-xs" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                    <button id="deleteRow" data-bind='click: $root.removeQuestion' class="btn btn-primary btn-xs" data-widget="remove"><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <div class="box-body">

                                <dl class="dl-horizontal">
                                    <dt>
                                        <label>Pytanie</label>

                                    </dt>
                                    <dd>
                                        <input data-bind='value: question' class="form-control" />
                                    </dd>
                                    <dt>
                                        <label>Odpowiedzi</label>
                                    </dt>
                                    <dd>
                                        <div data-bind="foreach: answers">
                                            <div><input data-bind='value: answer' class="form-control" /></div>
                                            <div><a href='#' data-bind='click: $root.removeAnswer'><i class="glyphicon glyphicon-remove-sign"></i><span class="sr-only">Delete</span></a></div>
                                        </div>
                                    </dd>

                                </dl>
                                <button class="btn btn-primary" data-bind='click: $root.addAnswer'>Add answer</button>
                            </div><!-- /.box-body -->
                            <div class="box-footer">
                            </div><!-- /.box-footer-->
                        </div><!-- /.box -->
                    </div>
                </div>
            </div>
            <p>
                <button data-bind='click: addQuestion' class="btn btn-primary">Add a question</button>
            </p>
        </div>

    }
    <div>
        @Html.ActionLink("Powrót do listy", "Index", "BaseTasks", null, new { @class = "btn btn-default" })
        <button data-bind='click: save' class="btn btn-primary">Submit</button>
    </div>

</section>
<script type="text/javascript">
    var QuestionsModel = function (questions, instruction) {
        var self = this;
        self.TaskID = '@Model.TaskID';
        self.instruction = instruction;
        self.questions = ko.observableArray(ko.utils.arrayMap(questions, function (question) {
            return { question: question.question, answers: ko.observableArray(question.answers) };
        }));

        self.addQuestion = function () {
            self.questions.push({
                question: "",
                answers: ko.observableArray()
            });
        };

        self.removeQuestion = function (question) {
            self.questions.remove(question);
        };

        self.addAnswer = function (question) {
            question.answers.push({
                answer: ""
            });
        };

        self.removeAnswer = function (answer) {
            $.each(self.questions(), function () { this.answers.remove(answer) })
        };

        self.save = function () {
            var jsonString = ko.mapping.toJSON(self);
            $.ajax({
                url: "/BlanksTasks/Create",
                data: jsonString,
                type: 'POST',
                contentType: 'application/json',
                //       dataType: 'json',
                success: function () {
                    window.location = '/BaseTasks/Index';
                },
                error: function () {
                    alert('error');
                }
            });
        };

    };
    ko.applyBindings(new QuestionsModel());
</script>