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

{% block title %}{{parent()}}: Leçon {{ lecon.libelle }}{% endblock %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}
    {% set counter_activite = 1 %}
    {% set counter = 1 %} {# compteur de composant #}

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-xl-9">

            {% for iter_module in parcours %}
                {% for iter_lecon in iter_module.lecons %}
                    {% if iter_lecon.lecon.id == lecon.id %}
                        {# ancre cachée, décalée en CSS pour ne pas être coincé and on navigue depuis "mon parcours" #}
                        <div class="ancre_cachee" id="lecon_id_{{ lecon.id }}"></div>

                        <div class="card lecon terminee" data-id="{{ lecon.id }}"
                             data-pointeur="lecon_id_{{ lecon.id }}">
                            <div class="card-header">
                                <h1 class="m-0"><i class="fa fa-folder-o fa-lg iconLecon mr-2" aria-hidden="true"></i> Leçon n°{{ lecon.id }} - {{ lecon.libelle }}</h1>
                            </div>
                            <div class="card-body">

                            {% for iter_activite in iter_lecon.activites %}
                                {% set activite = iter_activite.activite %}

                                {#{% for activite in activites %} -> faisait doublon avec la remontée du parcours #}
                                {# ancre cachée, décalée en CSS pour ne pas être coincé and on navigue depuis "mon parcours" #}
                                <div class="ancre_cachee" id="activite_id_{{ activite.id }}"></div>

                                <div class="card Activite{{ counter_activite }} activite border-danger"
                                     data-pointeur="activite_id_{{ activite.id }}"
                                     data-id="{{ activite.id }}"
                                     data-index="{{ counter_activite }}">
                                    <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 ajax_load_activite">
                                        {{ render(controller(
                                            'CoursesBundle:Activite:index', {
                                                'id': activite.id,
                                                'formation_id': formation_id,
                                                'module_id': module_id,
                                                'lecon_id': lecon.id,
                                                'with_session_reponse': 0,
                                                'counter_activite': counter_activite,
                                                'cacher_submit_individuel': true,
                                                'param_readonly': false,
                                            }
                                        )) }}
                                    </div>
                                </div>
                                {% set counter_activite = counter_activite+1 %}
                            {% else %}
                                <em>Leçon vide</em>
                            {% endfor %}
                            </div>
                        </div>

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

{% block body_before_end %}
    {{ parent() }}
    {{ tinymce_init() }}
{% endblock %}

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


{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('js/courses_media_gallery.js') }}?{{ date().timestamp }}"></script>
    <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>
        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true, 'simple_vue':true})|raw }}";
        window.PATH_RECAP_ACTIVITE = "{{ path('courses_activite_recap', {'id': '__id__', 'formation_id':'0', 'module_id':'0', 'lecon_id':'0'}) }}";

        window.notes_recap = {}; //pour chaque activité, liste les composants ; pour chaque composant, indique la note et si c'est réussi.
        window.PATH_CORRECTIONS = "{{ path('courses_reponse_corrections') }}"

        window.arr_to_click = [];
        window.arr_ready = []; // se remplira de $.deferred chaque" fois que nécessaire

        interval_fix_jsplumb = setInterval(window.ns_fix_jsplumb, 1000);

        $(function () {
            //window.activerAjaxLecon();//voir courses_lecon_showactivites.js
            //ce contrôle est levé par submitNoteToParcours, si tous les exercices sont effectués
            previewMedias()
            window.initTinyMCE();
            // et activer les exercices:
            if ('undefined' !== typeof window.jsPlumb) {
                window.bindAssociation() //brancher jsplumb que si tente de résoudre exercice, pas si juste create ou edit
            }
            window.bindGapfillSD();
            window.bindGapfillW();
            window.bindQCM();
            window.bindOpenQuestion();
            // et enfin retirer le loader
            window.hideLoader();

            //et montrer les corrections
            $.when.apply($, window.arr_ready).then(function(arg) {
                $('.composant').has('.contentRepJuste .soluce[data-soluce]').each(function(i, e) {
                    var jq_composant = $(e),
                        type_id = jq_composant.attr('data-type-id'),
                        regex = /%NALTAQUOTE%/gi,
                        str_json = jq_composant.find('.contentRepJuste .soluce').attr('data-soluce')
                            .replace(regex,'"'),
                        json = JSON.parse(str_json);

                    window.getCorrection(json, jq_composant, type_id);
                });
            });
        });
    </script>
{% endblock %}