{% extends '::base.html.twig' %}
{#{% block usercss %}
    {{ parent() }}
    <style>
        @media
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  { 

            /*
            Label the data
            */
            td:nth-of-type(1):before { content: "#"; }
            td:nth-of-type(2):before { content: "UserId"; }
            td:nth-of-type(2):before { content: "Name"; }
            td:nth-of-type(2):before { content: "Surname"; }
            td:nth-of-type(2):before { content: "Institution"; }
            td:nth-of-type(2):before { content: "Obj Mark Scored"; }
            td:nth-of-type(2):before { content: "Obj Minus Mark Scored"; }
            td:nth-of-type(2):before { content: "Desc Mark Scored"; }
            td:nth-of-type(2):before { content: "Total Scored"; }
            td:nth-of-type(2):before { content: "Is Attended"; }
            td:nth-of-type(2):before { content: "Is Final Result"; }
            td:nth-of-type(3):before { content: "View"; }
        }
    </style>
{% endblock %}#}
{% 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;
        }
    </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> {{ examResultOverall.desc_mark_scored }}/{{ examResultOverall.desc_mark }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Mark (All)  : </strong> {{ examResultOverall.mark_scored }}/{{ examResultOverall.total_mark }}
                                </div>
                                <div class="col-sm-4">
                                    <strong >Is Final Result  : </strong>
                                    {% if examResultOverall.finalize_result %}
                                        Y
                                    {% else %}
                                        N
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% for entity in entities %}
                        {#                                                {{ dump(entity) }}#}
                        <div class="row question_container">
                            <div class="row">
                                <div class="col-lg-12 bottom_border">
                                    <div class="huge"> {{ entity['question_no'] }} .</div>
                                    {{ entity['question']|raw }}
                                </div>
                            </div>
                            {% if entity.is_objective %}
                                <div class="row">
                                    <div class="col-lg-6 bottom_border">
                                        <strong> Option 1.</strong>
                                        {{ entity['option' ~ entity.qset_a ]|raw }}
                                    </div>
                                    <div class="col-lg-6 bottom_border">
                                        <strong> Option 2.</strong>
                                        {{ entity['option' ~ entity.qset_b ]|raw }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 bottom_border">
                                        <strong> Option 3.</strong>
                                        {{ entity['option' ~ entity.qset_c ]|raw }}
                                    </div>
                                    <div class="col-lg-6 bottom_border">
                                        <strong> Option 4.</strong>
                                        {{ entity['option' ~ entity.qset_d ]|raw }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <strong> Correct Answer</strong>
                                        {% for answer in entity['set_answer'] %}
                                            <br /> Option {{ answer }}
                                        {% endfor %}
                                        <br />
                                    </div>
                                    <div class="col-lg-4">
                                        {% if entity['ca_answer'] %}
                                            {% if entity.is_correct_objective_question %}
                                                <i class="fa fa-check fa-1x correct_answer-label"></i> 
                                            {% else %}
                                                <i class="fa fa-close fa-1x wrong_answer-label"></i> 
                                            {% endif %}
                                        {% endif %}
                                        {% if entity['ca_answer'] %}
                                            <strong> Answer Entered </strong>
                                            {% if entity['ca_answer'] is iterable %}
                                                {% for en_answer in entity['ca_answer'] %}
                                                    <br />&nbsp;&nbsp;&nbsp;&nbsp;Option {{ en_answer }} 
                                                {% endfor %}
                                            {% else %}
                                                <br /> Option {{ entity['ca_answer'] }} 
                                            {% endif %}
                                            <br />
                                        {% endif %}
                                    </div>

                                    <div class="col-lg-4">
                                        <strong> Mark :
                                            {% if entity['ca_answer'] %}
                                                {% if entity.answer %}
                                                    {% if entity.is_correct_objective_question %}
                                                        {{ entity.obj_question_mark }}
                                                    {% else %}
                                                        0
                                                    {% endif %}
                                                {% else %}
                                                    0
                                                {% endif %}
                                            {% else %}
                                                0
                                            {% endif %}
                                        </strong>
                                        <br />
                                        <strong> Minus Mark : 
                                            {% if entity['ca_answer'] %}
                                                {% if entity.answer %}
                                                    {% if entity.is_correct_objective_question %}
                                                        0
                                                    {% else %}
                                                        {{ entity.obj_question_minus_mark }}
                                                    {% endif %}
                                                {% else %}
                                                    0
                                                {% endif %}
                                            {% else %}
                                                0
                                            {% endif %}
                                        </strong>
                                    </div>
                                </div>
                                <div class="row" style="font-family: Verdana;font-size: 15px; margin-top: 10px;">
                                    <div class="col-lg-12">
                                        {% if entity.is_correct_objective_question %}
                                            {{ entity.positive_feedback }}
                                        {% else %}
                                            {{ entity.negative_feedback }}
                                        {% endif %}
                                    </div>

                                </div>
                            {% else %}
                                <div class="row">
                                    <div class="col-lg-12 bottom_border">
                                        {{ entity['ca_answer_descriptive']|raw }}
                                    </div>
                                    <div class="col-lg-12" style="padding: 20px">
                                        <h3>
                                            Mark Scored: {{ entity['desc_question_mark_scored'] }}
                                        </h3>
                                        <h3>
                                            Maximum Mark: {{ entity['desc_question_mark'] }}
                                        </h3>
                                        {% if entity.desc_answer_note is not null %}
                                            <button class="btn btn-lg btn-primary view-note-btn" data-candexam="{{ entity['caid'] }}" data-candquestion="{{ entity['question_no'] }}">View Note</button>
                                            <div class="note_holder">
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}

                            {#                                                            {{ dump(entity) }}#}

                        </div>

                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block userscripts %}
    <script type="text/javascript">
        $(document).ready(function () {

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

                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);
                            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();
                });
            });

        });
    </script>

{% endblock %}