{#
 # ExoOnLine
 # Copyright or © or Copr. Université Jean Monnet (France), 2012
 # dsi.dev@univ-st-etienne.fr
 #
 # This software is a computer program whose purpose is to [describe
 # functionalities and technical features of your software].
 #
 # This software is governed by the CeCILL license under French law and
 # abiding by the rules of distribution of free software.  You can  use,
 # modify and/ or redistribute the software under the terms of the CeCILL
 # license as circulated by CEA, CNRS and INRIA at the following URL
 # "http://www.cecill.info".
 #
 # As a counterpart to the access to the source code and  rights to copy,
 # modify and redistribute granted by the license, users are provided only
 # with a limited warranty  and the software's author,  the holder of the
 # economic rights,  and the successive licensors  have only  limited
 # liability.
 #
 # In this respect, the user's attention is drawn to the risks associated
 # with loading,  using,  modifying and/or developing or reproducing the
 # software by the user in light of its specific status of free software,
 # that may mean  that it is complicated to manipulate,  and  that  also
 # therefore means  that it is reserved for developers  and  experienced
 # professionals having in-depth computer knowledge. Users are therefore
 # encouraged to load and test the software's suitability as regards their
 # requirements in conditions enabling the security of their systems and/or
 # data to be ensured and,  more generally, to use and operate it in the
 # same conditions as regards security.
 #
 # The fact that you are presently reading this means that you have had
 # knowledge of the CeCILL license and that you accept its terms.
#}

{% set layout = "ClarolineCoreBundle:Workspace:layout.html.twig" %}

{% if isDesktop() %}
    {% set layout = "ClarolineCoreBundle:Desktop:layout.html.twig" %}
{% endif %}

{% extends layout %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/ujmexo/css/tableLayout.css') }}" type="text/css" rel="stylesheet"/>
{% endblock %}

{% block title %} {{ 'paper' | trans }} {% endblock %}

{% block resourceBreadcrumb %}
    <li><a href="{{ path('claro_resource_open', { 'resourceType': _resource.resourceNode.resourceType.name(), 'node': _resource.resourceNode.id }) }}">{{ _resource.getResourceNode().getName() }}</a></li>
    <li class="active">{{ 'nQuestion' | trans }}{{numQ}}</li>
{% endblock %}

{% block section_content %}
    <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/paper.js') }}"></script>

    <div class="panel-heading">
        <h3 class="panel-title">{{ _resource.getResourceNode().getName() }}
            <span style="float:right;">
                {% if(maxAttempsAllowed > 0) %}
                    {{ "attempt info1" | trans }} {{ maxAttempsAllowed }}
                    {% if(maxAttempsAllowed > 1) %}
                        {{ "attempt info2plur" | trans }}
                    {% else %}
                        {{ "attempt info2sing" | trans }}
                    {% endif %}
                     -
                {% endif %}
                {{ "attempt info3" | trans }} {{ numAttempt }}
            </span>
        </h3>
    </div>
    <div class="panel-body">
        <form action="{{ path('ujm_exercise_paper_nav') }}" method="post" name="formResponse" id="formResponse">
            <input type="hidden" name="numQuestionToDisplayed" id="numQuestionToDisplayed" value=""/>

            {#-------------------------------------------------- QCM ------------------------------------------------------------#}

            {% if interactionType == 'InteractionQCM' %}

                <!--<div class="panel-body">-->
                    <input class="form-control" type="hidden" name="interactionQCMToValidated" value="{{ interactionToDisplayed.id }}"/>
                    <input class="form-control" type="hidden" name="interactionToValidated" value="{{ interactionToDisplayed.interaction.id }}"/>
                    <input class="form-control" type="hidden" name="typeInteraction" value="InteractionQCM"/>

                    {% include "UJMExoBundle:Partial:interactionPaper.html.twig" %}

                    <table class="table-striped" cellspacing="5" cellpadding="2" border="0">
                        {% for choice in interactionToDisplayed.choices %}
                            {% set checked = "" %}
                            <tr>
                                {% if regexTwig('/' ~ choice.id ~ ';/', response) > 0 %}
                                    {% set checked = "checked" %}
                                {% endif %}
                                {% if interactionToDisplayed.typeQCM.code == 2 %}
                                    <td><p><INPUT type="radio" name="choice" value="{{ choice.id }}" {{ checked }}/></p></td>
                                {% else %}
                                    <td><p><INPUT type="checkbox" name="choice[]" value="{{ choice.id }}" {{ checked }}/></p></td>
                                {% endif %}
                                <td>{{ choice.label|raw }}</td>
                            </tr>
                        {% endfor %}
                    </table>

                    {% include "UJMExoBundle:Partial:hintPaper.html.twig" %}

                <!--</div>-->

                <input type="hidden" name="testQCM" value="testQCM" />
                <input type="hidden" name="interaction" value="{{ interactionToDisplayed.id }}"/>

            {#------------------------------------------------- Graphic ---------------------------------------------------------#}

            {% elseif interactionType == 'InteractionGraphic' %}

                <!--<div class="panel-body">-->
                    <input type="hidden" name="interactionToValidated" value="{{ interactionToDisplayed.interaction.id }}"/>
                    <input type="hidden" name="typeInteraction" value="InteractionGraphic"/>

                    {% include "UJMExoBundle:Partial:interactionPaper.html.twig" %}

                    <h5>{{ "consignes" | trans }} :</h5>
                    <h6><em>{{ "position" | trans }}<br/>{{ "selection" | trans }}<br/>{{ "raz" | trans }}<br/>
                        {{ "onlyOnce" | trans }}</em>
                    </h6>

                    <div style="position: relative;" id="Answer">
                        <p id="ContainerCursorPaper">
                            {% set i = 1 %}
                            {% for coords in listCoords %}
                                <img src="{{ asset('bundles/ujmexo/images/graphic/answer.png') }}" alt="AnswerZone{{ i }}"
                                    id="cursor{{ i }}" style="position: absolute;"/>
                                {% set i = i + 1 %}
                            {% endfor %}
                        </p><p>

                            {% if response is empty %}
                                {% set response = 'empty' %}
                            {% endif %}

                            <img src="{{ asset(interactionToDisplayed.document.url) }}" alt="AnswerImg" id="AnswerImg"
                                width="{{ interactionToDisplayed.width }}" height="{{ interactionToDisplayed.height }}"
                                style="margin-top: 30px" onload="displayAnswersGraph('{{ response }}');"/>
                        </p>
                    </div>

                    <input type="hidden" id="nbpointer" name="nbpointer" value="{{ i }}"/>
                    <input type="hidden" id="answers" name="answers" value=""/>
                    <input type="hidden" id="graphId" name="graphId" value="{{ interactionToDisplayed.id }}"/>

                    {% include "UJMExoBundle:Partial:hintPaper.html.twig" %}

                    <input type="hidden" name="interaction" value="{{ interactionToDisplayed.id }}"/>

                <!--</div>-->
            {#-------------------------------------------------- OPEN -----------------------------------------------------------#}

            {% elseif interactionType == 'InteractionOpen' %}

                <!--<div class="panel-body">-->
                    <input type="hidden" name="interactionOpenToValidated" value="{{ interactionToDisplayed.id }}"/>
                    <input type="hidden" name="interactionToValidated" value="{{ interactionToDisplayed.interaction.id }}"/>
                    <input type="hidden" name="typeInteraction" value="InteractionOpen"/>

                    {% include "UJMExoBundle:Partial:interactionPaper.html.twig" %}

                    {% if interactionToDisplayed.typeopenquestion == 'long' %}
                        <textarea name="interOpenLong" class="claroline-tiny-mce hide" data-theme="advanced" data-resource-picker="off" data-before-unload="off">
                            {{ response }}
                        </textarea>
                    {% endif %}

                    {% include "UJMExoBundle:Partial:hintPaper.html.twig" %}

                    <input type="hidden" name="testOpen" value="testOpen" />
                    <input type="hidden" name="interaction" value="{{ interactionToDisplayed.id }}"/>

                <!--</div>-->
            {#--------------------------------------------------- Hole ----------------------------------------------------------#}

            {% elseif interactionType == 'InteractionHole' %}

                    <!--<div class="panel-body">-->
                        <input class="form-control" type="hidden" name="interactionHoleToValidated" value="{{ interactionToDisplayed.id }}"/>
                        <input class="form-control" type="hidden" name="interactionToValidated" value="{{ interactionToDisplayed.interaction.id }}"/>
                        <input class="form-control" type="hidden" name="typeInteraction" value="InteractionHole"/>

                        {% include "UJMExoBundle:Partial:interactionPaper.html.twig" %}

                        <div id="interHoleResponse">
                            {{ interactionToDisplayed.htmlWithoutValue | raw }}
                            {% if response != '' %}
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        paperResponseHole('{{ response|raw }}');
                                    });
                                </script>
                            {% endif %}
                        </div>

                        {% include "UJMExoBundle:Partial:hintPaper.html.twig" %}

                    <!--</div>-->

                    <input type="hidden" name="testQCM" value="testQCM" />
                    <input type="hidden" name="interaction" value="{{ interactionToDisplayed.id }}"/>


            {% endif %}
        </form>
    </div>
    {#--------------------------------------------------- Pagination ----------------------------------------------------#}

    <!--div class="text-center panel-footer">
        {#% set indexMax = 1 %}
        <ul class="pagination">
            {% if numQ != 1 %}
                <li>
                    <a href="#" onClick="submitForm(1, '{{ interactionType }}');">
                        <i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i>
                    </a>
                </li>
                <li>
                    <a href="#" onClick="submitForm({{ numQ-1 }}, '{{ interactionType }}');">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                </li>
            {% else %}
                <li class="disabled"><a href="#"><i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i></a></li>
                <li class="disabled"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
            {% endif %}

            {% for interactionID in tabOrderInter %}
                {% if loop.index != numQ %}
                    <li><a href="#" onClick="submitForm({{ loop.index }}, '{{ interactionType }}');">{{ loop.index }}</a></li>
                    {% set indexMax = loop.index %}
                {% else %}
                    <li class="active"><a href="#">{{ loop.index }}</a></li>
                    {% set indexMax = loop.index %}
                {% endif %}
            {% endfor %}

            {% if numQ != indexMax %}
                <li>
                    <a href="#" onClick="submitForm({{ numQ+1 }}, '{{ interactionType }}');">
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#" onClick="submitForm({{ indexMax }}, '{{ interactionType }}');">
                        <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i>
                    </a>
                </li>
            {% else %}
                <li class="disabled"><a href="#"><i class="fa fa-chevron-right"></i></a></li>
                <li class="disabled"><a href="#"><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i></a></li>
            {% endif %}

            {% if dispButtonInterrupt %}
                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
                <li>
                    <input type="button" value="{{ "interupt" | trans }}" onClick="interupt('{{ interactionType }}');" class="btn btn-primary"/>
                </li>
            {% endif %}
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            {% if numQ == indexMax %}
                <li>
                    <input type="button" value="{{ "finish" | trans }}" onClick="finish('{{ interactionType }}', '{{ 'alert ending' | trans }}');"
                        class="btn btn-primary"/>
                </li>
            {% endif %#}
        </ul>
    </div-->

    <div class="text-center panel-footer">
        {% set indexMax = 1 %}

        {% for interactionID in tabOrderInter %}
            {% set indexMax = loop.index %}
        {% endfor %}

        <ul class="pagination">

            {% if numQ == indexMax and numQ == 1 %}
                <li>
                    <input type="button" value="{{ "finish" | trans }}" onClick="finish('{{ interactionType }}');"
                        class="btn btn-primary"/>
                </li>
            {% else %}

                {% if numQ == 1 %}
                    <li class="disabled"><a href="#" onclick="event.preventDefault();"><i class="fa fa-chevron-left"></i> &nbsp; {{ 'previous' | trans }}</a></li>
                    <li>
                        <a href="#" onClick="submitForm({{ numQ+1 }}, '{{ interactionType }}');">
                            {{ 'next' | trans }} &nbsp; <i class="fa fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}

                {% if numQ == indexMax %}
                    <li>
                        <a href="#" onClick="submitForm({{ numQ-1 }}, '{{ interactionType }}');">
                            <i class="fa fa-chevron-left"></i> &nbsp; {{ 'previous' | trans }}
                        </a>
                    </li>
                    <li class="disabled"><a href="#" onclick="event.preventDefault();">{{ 'next' | trans }} &nbsp; <i class="fa fa-chevron-right"></i></a></li>
                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
                    <li>
                        <input type="button" value="{{ "finish" | trans }}" onClick="finish('{{ interactionType }}');"
                            class="btn btn-primary"/>
                    </li>
                {% endif %}

                {% if numQ != indexMax and numQ != 1 %}
                    <li>
                        <a href="#" onClick="submitForm({{ numQ-1 }}, '{{ interactionType }}');">
                            <i class="fa fa-chevron-left"></i> &nbsp; {{ 'previous' | trans }}
                        </a>
                    </li>
                    <li>
                        <a href="#" onClick="submitForm({{ numQ+1 }}, '{{ interactionType }}');">
                            {{ 'next' | trans }} &nbsp; <i class="fa fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            {% endif %}

            {% if dispButtonInterrupt %}
                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
                <li>
                    <input type="button" value="{{ "interupt" | trans }}" onClick="interupt('{{ interactionType }}');" class="btn btn-primary"/>
                </li>
            {% endif %}
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>

            <li>
                <select id="Qnumber" onchange="submitForm(this.options[this.selectedIndex].value, '{{ interactionType }}');">
                    {% for interactionID in tabOrderInter %}
                        <option value="{{ loop.index }}">{{ 'nQuestion' | trans }}{{ loop.index }} / {{ tabOrderInter | length }}</option>
                    {% endfor %}
                </select>
            </li>
        </ul>
    </div>
{% endblock %}

{% block javascripts %}

    <script type="text/javascript">
        //$(document).ready(function() {
            $('#Qnumber option[value="' + {{ numQ }} + '"]').attr('selected', 'selected');
        //});
    </script>

    {{ parent() }}

    <script type="text/javascript">
        var mssg             = "{{ "exercise alert break" | trans }}";
        var allowToInterrupt = "{{ dispButtonInterrupt }}";
        var interType        = "{{ interactionType }}";
    </script>

    {% if interactionType == 'InteractionGraphic' %}
        <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/jquery-ui-1.9.2/jquery-ui-1.9.2.js') }}"></script>
        <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/ext/jquery-ui-touch-punch.js') }}"></script>
        <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/graphicdisplay.js') }}"></script>
    {% endif %}

    {% include "UJMExoBundle:Partial:modal/confirmFinishExercise.html.twig" %}

{% endblock %}
