{% extends '::base.html.twig' %}
{% block body -%}
    <style >
        .question_container{
            border: 2px solid #b1b3b8;
            border-radius: 3px;
            margin-left: 3px;
            margin-right: 3px;
            margin-top: 10px;
            padding: 16px;
        }
        .correct_answer-label{
            color: green;
        }
        .wrong_answer-label{
            color: red;
        }
        .bottom_border{
            border-bottom: 1px dotted #c9c1c1;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        canvas:hover{
            cursor: crosshair;
        }
    </style>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h6> Exam Result </h6>
                </div>
                <div class="panel-body">
                    {% if examResultOverall %}
                        <div class="row question_container">
                            <div class="row">
                                <div class="col-sm-3">
                                    <strong >Name : </strong> {{ candidateProfile.name }}
                                </div>
                                <div class="col-sm-3">
                                    <strong >Surname : </strong> {{ candidateProfile.surname }}
                                </div>
                                <div class="col-sm-3">
                                    <strong >Institution : </strong> {{ candidateProfile.institution }}
                                </div>
                                <div class="col-sm-3">
                                    <strong >Qualfication : </strong> {{ candidateProfile.qualification }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <strong >Exam Name : </strong> {{ examResultOverall.examName }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Start Date & Time : </strong> {{ examResultOverall.startedAt|date('d/m/Y h:i A') }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Finish Date & Time : </strong> {{ examResultOverall.tobeFinishedAt|date('d/m/Y h:i A') }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <strong >Mark (Obj Questions)  : </strong> {{ examResultOverall.obj_mark_scored }}/{{ examResultOverall.obj_mark }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Minus Mark (Obj Questions)  : </strong> {{ examResultOverall.obj_mark_minus_scored }}/{{ examResultOverall.obj_mark_minus }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Mark (Desc Questions)  : </strong><span id="overall_disc_score">{{ examResultOverall.desc_mark_scored }}</span>/{{ examResultOverall.desc_mark }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Mark (All)  : </strong><span id="overall_max_score">{{ examResultOverall.mark_scored }}</span>/{{ examResultOverall.total_mark }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Is Final Result  : </strong>
                                    <span id="overall_finalize">
                                        {% if examResultOverall.finalize_result %}
                                            Y
                                        {% else %}
                                            N
                                        {% endif %}
                                    </span>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% set first_rendered = 0 %}
                    {% for entity in entities %}
                        {% if first_rendered == 0 %}
                            <div id="details_holder">
                                {{ include('AppBundle:Result:candidate_result_valuation_inner.html.twig',{'entity':entity}) }}
                            </div>
                            {% set div_start = "<div class='row question_container'>" %}
                            {% set first_rendered = 1 %}
                            {{ div_start|raw }}
                            <h4>Navigate between questions</h4>
                            <button class="btn btn-sm btn-info" onclick="__loadQuestions('{{ path('candidate_exam_result_desc_valuation',{'candExam':candExam,'candidateProfileId':candidateProfileId,'qst':entity.question_no}) }}')">Question {{ entity.question_no }}</button>
                        {% else %}
                            <button class="btn btn-sm btn-info" onclick="__loadQuestions('{{ path('candidate_exam_result_desc_valuation',{'candExam':candExam,'candidateProfileId':candidateProfileId,'qst':entity.question_no}) }}')">Question {{ entity.question_no }}</button>
                        {% endif %}
                    {% endfor %}
                    {% if first_rendered == 1 %}
                        {% set div_end = "</div>" %}
                        {{ div_end|raw }}
                    {% endif %}
                    {% if false == examResultOverall['finalize_result'] %}
                        <div class="row question_container">
                            <div class="col-lg-12">
                                <button class="btn btn-success btn-block btn-lg" id="finalize-exam" data-candexam="{{ examResultOverall['caid'] }}">Finalize Result</button>
                            </div>
                        </div>
                    {% endif %}
                </div>

            </div>
        </div>
    </div>
{% endblock %}
{% block userscripts %}
    <script type="text/javascript" src="{{ asset('bundles/app/html2canvas/JsCode.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/app/html2canvas/html2canvas.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#details_holder").on("click", ".view-note-btn", function () {
                var ths = $(this);


                var candexam = ths.data("candexam");
                var candquestion = ths.data("candquestion");
                var path = "{{ path('valuation-view-note') }}";
                $.ajax({
                    url: path,
                    data: {candexam: candexam, candquestion: candquestion},
                    type: "POST",
                    beforeSend: function () {
                        ths.find(".fa-spin").remove();
                        alertify.success("Please wait!!!");
                        var loader = $("<i>").addClass("fa fa-spin fa-spinner fa-3x");
                        ths.append(loader);
                    }
                }).done(function (data) {

                    if ("error" == data.status) {
                        alertify.error(data.message);
                    } else if ("success" == data.status) {
                        if ("" === data.image_encoded) {
                            alertify.success("No note is available!!");
                        } else {

                            var image = atob(data.image_encoded);

                            var img = $("<img>").attr("src", image);
                            var container = ths.parent().parent().siblings(".disc_answer_valuation_note_container");
                            container.html("");
                            container.append(img);
                        }
                    } else {
                        alertify.error("Some error found!!");
                    }

                }).error(function () {
                    alertify.error("Some error found!!");
                }).complete(function () {
                    ths.find(".fa-spin").remove();
                });
            });
            $("#details_holder").on("click", ".add-note-btn", function () {

                var ths = $(this);

                /* Initiate loader */
                ths.find(".fa-spin").remove();
                alertify.success("Please wait!!!");
                var loader = $("<i>").addClass("fa fa-spin fa-spinner fa-3x");
                ths.append(loader);

                var answer_area = $(this).parent().parent();

                $(".disc_answer_valuation_note_container").html("");

                var valuation_note_container = answer_area.siblings(".disc_answer_valuation_note_container");

                var html_ob = answer_area.children(".disc_answer_valuation_content");

                html2canvas(html_ob, {
                    onrendered: function (canvas) {
                        var cnv = $(canvas);
                        InitThis(cnv);
                        valuation_note_container.append("<br/>");
                        valuation_note_container.append(canvas);

                        valuation_note_container.append("<br/>");
                        valuation_note_container.append("<br/>");
        {#                valuation_note_container.append('<button onclick="javascript:clearArea();return false;">Clear Area</button>');#}
                            valuation_note_container.append('Line width : <select id="selWidth" class="form-control">' +
                                    '<option value="1">1</option>' +
                                    '<option value="3" selected="selected">3</option>' +
                                    '<option value="5">5</option>' +
                                    '<option value="7">7</option>' +
                                    '<option value="9">9</option>' +
                                    '<option value="11">11</option>' +
                                    '</select>');
                            valuation_note_container.append('Color : <select id="selColor" class="form-control">' +
                                    '<option value="black">black</option>' +
                                    '<option value="blue">blue</option>' +
                                    '<option value="red" selected="selected">red</option>' +
                                    '<option value="green">green</option>' +
                                    '<option value="yellow">yellow</option>' +
                                    '<option value="gray">gray</option>' +
                                    '</select> ');
                            valuation_note_container.append("<br/>");
                            valuation_note_container.append("<br/>");
                            /*  Remove Loader */
                            ths.find(".fa-spin").remove();

                        }
                    });
                });

                $(function () {
                    $('body').on('keydown', '.mark-scored-text', function (e) {
                        -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
                    });
                });
                $('body').on('click', '.update-score', function (e) {

                    var ths = $(this);

                    var desc_score_container = ths.parent().parent();
                    var score = parseFloat(desc_score_container.find(".mark-scored-text").val());
                    var max_score = parseInt(desc_score_container.find(".max-score").text());

                    if (isNaN(score)) {
                        alertify.error("Invalid data is entered for mark");
                        return false;
                    } else if (score > max_score) {
                        alertify.error("Mark can not be greater than maximum mark for the question");
                        return false;
                    } else {
                        var canvas_obj = ths.parent().parent().siblings(".disc_answer_valuation_note_container").find("canvas");
                        var note_image = null;
                        var canvas = canvas_obj.get(0);
                        if (undefined != canvas) {
                            note_image = canvas.toDataURL();
                        }

                        var candexam = ths.data("candexam");
                        var candquestion = ths.data("candquestion");
                        var path = "{{ path('valuation-desc') }}";
                        $.ajax({
                            url: path,
                            data: {candexam: candexam, candquestion: candquestion, score: score, note_image: note_image},
                            type: "POST",
                            beforeSend: function () {
                                ths.find(".fa-spin").remove();
                                alertify.success("Please wait!!!");
                                var loader = $("<i>").addClass("fa fa-spin fa-spinner fa-3x");
                                ths.append(loader);
                            }
                        }).done(function (data) {

                            if ("success" == data.status) {
                                alertify.alert('Success', data.message);
                                $("#overall_disc_score").text(data.total_desc_mark);
                                $("#overall_max_score").text(data.total_mark);
                            } else {
                                alertify.error(data.message);
                            }

                        }).error(function () {
                            alertify.error("Some error found!!");
                        }).complete(function () {
                            ths.find(".fa-spin").remove();
                        });
                    }
                });

                $("#finalize-exam").click(function () {
                    var candexam = $(this).data("candexam");
                    alertify.confirm("Are you sure to finalize result ?",
                            function () {
                                finalize_result(candexam);
                            },
                            function () {

                            });
                });

                function finalize_result(candexam) {

                    var path = "{{ path('finalize-exam') }}";
                    $.ajax({
                        url: path,
                        data: {candexam: candexam},
                        type: "POST",
                        beforeSend: function () {
                            $("#finalize-exam").find(".fa-spin").remove();
                            alertify.success("Please wait!!!");
                            var loader = $("<i>").addClass("fa fa-spin fa-spinner fa-3x");
                            $("#finalize-exam").append(loader);
                        }
                    }).done(function (data) {

                        if ("success" == data.status) {
                            alertify.alert('Success', data.message);
                            $("#overall_finalize").text(data.finalize);
                            $("#finalize-exam").parent().parent().remove();
                            $(".add-note-btn").remove();
                            $(".update-score").remove();
                        } else {
                            alertify.error(data.message);
                        }

                    }).error(function () {
                        alertify.error("Some error found!!");
                    }).complete(function () {
                        $("#finalize-exam").find(".fa-spin").remove();
                    });
                }

            });


            function __loadQuestions(path) {
                $.ajax({
                    type: "POST",
                    url: path,
                    beforeSend: function () {
        {#                        $("#ajax_loader_div").show();#}
                    },
                    success: function (html) {
                        $("#details_holder").html(html);
                    },
                    complete: function () {
        {#                        $("#ajax_loader_div").hide();#}
                    }

                });
            }
    </script>

{% endblock %}