{% extends 'base.html.twig' %}

{% block title %}{{parent()}}: Elève dans la formation{% endblock %}

{% set tentative_id = tentative.id %}
{% set activite = tentative.eleveActivite.activite %}
{% set lecon = tentative.eleveActivite.eleveLecon.lecon %}
{% set module = tentative.eleveActivite.eleveLecon.module %}
{% set eleve = tentative.eleveActivite.eleveLecon.formationEleve.eleve %}
{% set formation_eleve = tentative.eleveActivite.eleveLecon.formationEleve %}
{% set formation = formation_eleve.formation %}
{% set formation_id = formation.id %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}

    <div class="container-fluid eleve_lecon_parcours lecon">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">

                    <div class="card Activite0 activite border-danger"
                         data-pointeur="activite_id_{{ activite.id }}"
                         data-index="0">
                        <div class="card-header">
                            <h2 class="m-0">
                                <i class="fa fa-files-o fa-lg mr-2" aria-hidden="true"></i>
                                Activité n°{{ activite.id }} - {{ activite.libelle }}
                            </h2>
                        </div>
                        <div class="card-body">

                            <div class="tableTentatives">
                                    <div class="row col-12 header">
                                        <div class="col-5 th">Composant</div>
                                        <div class="col-2 th">note</div>
                                        <div class="col-5 th">Correction</div>
                                    </div>

                                    {% set prefix = 0 %}
                                    {% set counter = 0 %}
                                    {% set counter_activite = 0 %}

                                    {% for r in reponses %}

                                        {% set composant = r.exercice %}

                                        <div class="row col-12 td" data-id-reponse="{{ r.id }}">
                                            <div class="col-5 d-inline-flex p-3">
                                                <div class="composant_{{ prefix }}_{{ counter }} composant rounded col-12 my-auto {% if composant.type.id == 13 %}transcriptComp mb-2{% endif %}"
                                                     data-index="{{ counter }}"
                                                     data-pointeur="composant_id_{{ activite.id }}_{{ composant.id }}"
                                                     data-ordre="{{ counter }}"
                                                     data-id="{{ composant.id }}"
                                                     data-type="{{ composant.type.libelle }}"
                                                     data-type-id="{{ composant.type.id }}">

                                                    <div class="header d-flex align-items-center">
                                                        <h1 title="Composant n°{{ composant.id }} de type #{{ composant.type.id }}">
                                                            {{ composant.type.logohtml|raw }}
                                                            {% if composant.titre %}
                                                                {{ composant.titre }}
                                                            {% else %}
                                                                <em>sans titre</em>
                                                            {% endif %}
                                                        </h1>
                                                    </div>

                                                    {{ render(controller(
                                                        'CoursesBundle:Exercice:show', {
                                                            'id': composant.id,
                                                            'eleve_id': eleve.id,
                                                            'formation_id': formation.id,
                                                            'module_id': module.id,
                                                            'lecon_id': lecon.id,
                                                            'activite_id': activite.id,
                                                            'prefix': prefix ~ "_" ~ counter,
                                                            'counter': counter,
                                                            'counter_activite': counter_activite,
                                                            'render_inner': true,
                                                            'with_session_reponse': true,
                                                            'cacher_submit_individuel': true,
                                                            'param_readonly': true,
                                                        } ))
                                                    }}
                                                </div>
                                            </div>
                                            <div class="col-2 boxNote d-inline-flex">
                                                <div class="content m-auto">
                                                    {% if r.exercice.type.id == "5" %}
                                                    <label for="note{{ r.exercice.id }}">Note /10</label>
                                                    <input type="number" step="0.1" class="inputNote form-control" id="note{{ r.exercice.id }}" name="note{{ r.exercice.id }}" min="0" max="10" value="{{ r.note|number_format(2) }}"><br/>
                                                    {% else %}
                                                        {{ r.note|raw }}
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="col-5 d-inline-flex">
                                                {% if r.exercice.type.id == "5" %}
                                                    <div class="col-12 my-auto">
                                                        <label class="mx-auto" for="comm{{ r.exercice.id }}">Commentaire</label>
                                                        <input type="text" class="inputComm form-control col-12" id="comm{{ r.exercice.id }}" name="comm{{ r.exercice.id }}" required minlength="0" maxlength="280" value="{{ r.commentaire }}"><br/>
                                                        <label for="correction{{ r.exercice.id }}" class="required mx-auto">Correction</label>

                                                        <textarea class="tinymce editme form-control inputCorrection col-12"
                                                                  id="correction{{ r.exercice.id }}"
                                                                  name="correction{{ r.exercice.id }}"
                                                                  data-theme="prof"
                                                                  data-fontcolor-default="#FF0000"
                                                                  data-trigger-change-callback="1"
                                                        >
                                                            {% if jsonContent[r.id] %}
                                                                {{ jsonContent[r.id].reponse|raw }}
                                                            {% endif %}
                                                        </textarea>
                                                    </div>
                                                {% else %}
                                                    <div class="contentRAF m-auto">
                                                        <em>Rien à faire</em>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% if not loop.last %}<hr class="tentative_line"/>{% endif %}

                                        {% set counter = counter+1 %}

                                    {% endfor %}
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="col-3 float-right mb-4 btn btn-block btn-success validation" type="button" data-id="{{ tentative.id }}" data-href="{{ path('formation_formationeleve_details_lecon', {'formation_eleve_id': formation_eleve.id, 'module_id': module.id, 'lecon_id': lecon.id}) }}">Validation terminée</button>
    </div>
{% endblock body %}

{% block body_before_end %}
    {{ parent() }}
    {{ tinymce_init() }}
    <!-- temporaire -->
    <script src="{{ asset('js/ns_rustine_tinymceinline.js') }}?{{ date().timestamp }}"></script>
{% endblock %}


{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/ns_module_activite.css') }}" rel="stylesheet" >
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/courses_media_createedit.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lecon_showactivites.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_multipleChoice.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_gappFillSD.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_gappFillW.js') }}?{{ date().timestamp }}"></script>

    <script type="text/javascript" src="{{ asset('js/jsplumb.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_association.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lecon_showactivites_openQuestion.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script>

        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true}) }}";
        window.PATH_SETTING_CORRECTION = "{{ path('courses_reponse_setting_correction')|raw }}";
        window.PATH_VALIDATION = "{{ path('courses_reponse_tentative_corrigee')|raw }}";

        interval_fix_jsplumb = setInterval(window.ns_fix_jsplumb, 1000);

        $(document).ready(function() {

            previewMedias('.activite');
            callbackActivites();

            $(".inputNote").change(function () {
                $.post(PATH_SETTING_CORRECTION, {
                    idReponse: $(this).closest('.td').attr('data-id-reponse'),
                    note: $(this).val()
                }, function success(data) {
                });
            });

            $(".inputComm").change(function () {
                $.post(PATH_SETTING_CORRECTION, {
                    idReponse: $(this).closest('.td').attr('data-id-reponse'),
                    comm: $(this).val()
                }, function success(data) {
                });
            });

            $("textarea.tinymce").change(function () {
                $.post(PATH_SETTING_CORRECTION, {
                    idReponse: $(this).closest('.td').attr('data-id-reponse'),
                    correction: $(this).val()
                }, function success(data) {
                });
            });

            $(".validation").click(function () {
                var href = $(this).attr('data-href');
                $.post(PATH_VALIDATION, {
                    idTentative: $(this).attr('data-id'),
                }, function success(data) {
                    window.location.replace(href);
                });
            });
        });

    </script>
{% endblock %}