{% 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 #}

    {% set lecon_validee = false %}
    {% if eleve_lecon.datevalidation %}
        {% set lecon_validee = true %}
    {% endif %}

    <input type="hidden" id="formation_id" value="{{ formation_id }}" />
    <input type="hidden" id="module_id" value="{{ module_id }}" />
    {# mesure le temps passé en secondes, RAZ à chaque soumission d'exercice #}
    <input type="hidden" id="session_duree" value="{{ duree }}">
    
    <div class="mt-5 container-fluid eleve_lecon_parcours {% if lecon_validee %}lecon_validee terminee{% endif %}">
        <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" 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 #{{ lecon.id }} - #}{{ lecon.libelle }}</h1>
                            </div>
                            <div class="card-body">

                            {% set note_prev_activite = 0  %}
                            {% set etat_prev_activite = 0  %}

                            {% 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>

                                {% set class_activite_terminee = '' %}
                                {% if sessions_tentatives[activite.id].etat>=1 %}
                                    {% set class_activite_terminee = 'terminee' %}
                                {% endif %}
                                
        
                                {# Chercher si l'activité est une activité d'adaptabillité #}
                                {% set is_activite_adaptabilite = false %}
                                {% set note_plancher_adaptabilite = 0  %}
                                {% for la in iter_activite.activite.leconactivites.getValues %}
                                    {% if lecon.id == la.lecon.id %} 
                                        {% if la.adaptabilite == true  %} 
                                            {% set is_activite_adaptabilite = true %}
                                            {# On mémorise la note plancher #}
                                            {% set note_plancher_adaptabilite = la.notePlancher %}
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}

                                {# Si c'est un exercice d'adaptabilité, on rajoute une classe #}
                                <div class="card Activite{{ counter_activite }} activite border-danger {{ class_activite_terminee }} {% if is_activite_adaptabilite == true %}adaptabilite {% if adaptabiliteStatus[lecon.id][activite.id] %}actif{% endif %}{% endif %}"
                                    data-pointeur="activite_id_{{ activite.id }}"
                                    data-id="{{ activite.id }}"
                                    data-index="{{ counter_activite }}"
                                    {% if is_activite_adaptabilite == true %}   {# Activité d'adaptabilité #}
                                        {% if adaptabiliteStatus[lecon.id][activite.id] == false  %}        
                                            style="display:none"
                                        {% endif %}
                                    {% endif %}
                                    >
                                    <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"
                                        data-cle="activite_{{ formation_id ~ '_' ~ module_id ~ '_' ~ lecon.id ~ '_' ~ activite.id }}"
                                        data-href="{{ path('courses_activite_index', {
                                            'id':activite.id,
                                            'formation_id': formation_id,
                                            'module_id': module_id,
                                            'lecon_id': lecon.id,
                                            'counter_activite': counter_activite,
                                            'ajax':true,
                                            'with_session_reponse': '__with_session_reponse__'
                                        }) }}">
                                        {# lister tous les composants de cette activité #
                                        {{ render(controller(
                                            'CoursesBundle:Activite:index', {
                                                'id': activite.id,
                                                'formation_id': formation_id,
                                                'module_id': module_id,
                                                'lecon_id': lecon.id,
                                                'counter_activite': counter_activite
                                            }
                                        )) }}
                                        #}
                                    </div>
                                </div>
                                {% set counter_activite = counter_activite+1 %}
                                
                                {# On mémorise la note et l'état pour l'activité suivante #}
                                {% set note_prev_activite = iter_activite.note|number_format  %}
                                {% set etat_prev_activite = iter_activite.etat|number_format  %}
                            
                            {% endfor %}
                                <div class="footer-lecon d-flex">
                                    
                                    <input type="button" class="ns_btn_lesson_validated lesson_validee btn btn-inline-block btn-dark p-2 px-5 mb-3 mx-2 ml-auto"
                                    disabled="disabled"
                                        {% if not lecon_validee %}
                                            hidden="hidden"
                                        {% endif %}
                                    value="Leçon validée le {{ eleve_lecon.datevalidation|date('d/m/Y à H:i') }}" />

                                    {#<input type="button" class="lesson_submit btn btn-inline-block btn-success p-2 px-5 mb-3"
                                        value="&#xf114 valider la leçon" />#}

                                    <button type="button"
                                    {% if lecon_validee %}
                                        hidden="hidden"
                                    {% endif %}
                                            class="ns_btn_lesson_submit lesson_submit btn btn-inline-block btn-success active p-2 px-5 mb-3 mx-2 ml-auto">
                                        <i class="fa fa-folder-o fa-lg mr-2" aria-hidden="true"></i>
                                        valider la leçon
                                    </button>
                                
                                </div>
                            </div>
                        </div>

                    {% endif %}
                {% endfor %}
            {% endfor %}
            </div>
            <div class="col-sm-12 col-xl-3 super_wrapper_texte" style="display:none;">
                <div class="card wrapper_texte">
                    <div class="card-header">
                        <button class="ml-auto d-flex pip_btn_close_text btn btn-primary" data-id="">
                            <i class="fa fa-close"></i>
                        </button>
                    </div>
                    <div class="card-body">
                    </div>
                </div>
            </div>

            {# partie de droite : "mon parcours" #}
        {% if avec_parcours %}
            <div class="col-sm-12 col-xl-3 super_wrapper_parcours">
                {# pour rechargement javascript, au cas où #}
                {% set parcours_href = path('courses_lesson_show_lesson', {
                    'id': lecon.id,
                    'module_id': module_id,
                    'formation_id': formation_id,
                    'duree': duree
                }) %} {# cette durée est incrémentée par javascript #}
                <div id="loaderParcours" style="display:none"><div class="loader_content"></div></div>
                <div class="card wrapper_parcours"
                     data-href="{{ parcours_href }}">
                    <div class="card-header d-flex align-items-center bg-secondary text-white p-3">
                        <h3 class="d-inline-block m-0">Mon parcours</h3>
                        {#
                        <div class="card-header-actions ml-auto">
                            <ul class="d-flex list-unstyled m-0">
                                {% if est_connecte %}
                                    <li class="">
                                        <button class="btn btn-outline-primary btn-new"
                                                title="Recharger/Nouvelle session"
                                                onclick="rechargerParcours()">
                                            <i class="fa fa-repeat"></i>
                                        </button>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                        #}
                    </div>
                    <div class="card-body">
                        {% include '@Courses/Lecon/parcours_lesson.html.twig' with {
                            'lecon': lecon,
                            'parcours': parcours,
                            'formation_id': formation_id,
                            'module_id': module_id,
                            'duree': duree
                        } %}
                    </div>
                </div>
                   
            </div>
        {% endif %} {# fin si avec_parcours #}
        </div>

    <!-- TIMER -->
    <div id="myTimerDiv" class="{% if lecon_validee == true %}d-none{% else %}d-flex{% endif %} {% if moduleLecon.retry == false %}timeLimitedMode{% endif %} ">
        <p id="timer_lesson" class="m-auto"></p>
    </div>
  
       
    </div>
     

{% endblock %}

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

    <!-- temporaire -->
    <script src="{{ asset('js/ns_rustine_tinymceinline.js') }}?{{ date().timestamp }}"></script>
    {# {theme: {'advanced':{'height': 300 }}} #}

    <!-- HTML POUR POPPIN -->
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'wide': true,
        'suffixe_id': '_default'
    } only %}

    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'narrow': true,
        'suffixe_id': '_recap'
    } only %}

    {# ce popin devant pouvoir apparaître au-dessus des autres, il est placé plus bas dans HTML: #}
    {# et ton cul il pète plus bas ou plus haut ? #}   
    {# {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'medium': true,
        'suffixe_id': '_idle'
    } only %} #}

     {% include '@Courses/Lecon/idlePopin.html.twig' %}
{% endblock %}

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


{% block javascripts %}
    {{ parent() }}
    
  
    <script>
        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true, 'simple_vue':true})|raw }}";
        window.PATH_RECAP_LECON = "{{ path('courses_lesson_recap', {
            'id': lecon.id,
            'formation_id': formation_id,
            'module_id': module_id}) }}";
        window.PATH_RECAP_ACTIVITE = "{{ path('courses_activite_recap', {
            'id': '__id__',
            'formation_id': formation_id,
            'module_id': module_id,
            'lecon_id': lecon.id}) }}";
        window.PATH_CORRECTIONS = "{{ path('courses_reponse_corrections') }}"
        window.PATH_LECON_END = "{{ path('courses_lesson_finir_session', {
            'id': lecon.id,
            'formation_id': formation_id,
            'module_id': module_id
        }) }}";
        window.PATH_ACTIVITE_RETRY = "{{ path('courses_activite_recommencer', {
            'id': '__id__',
            'formation_id': formation_id,
            'module_id': module_id,
            'lecon_id': lecon.id,
            'counter_activite': '__counter_activite__',
            'with_session_reponse': '__with_session_reponse__'
        }) }}";
        window.notes_recap = {}; //pour chaque activité, liste les composants ; pour chaque composant, indique la note et si c'est réussi.

        window.pathMajDureeTr = "{{ path('courses_lesson_majdureetr', {'formation_id': formation_id,'module_id': module_id, 'lecon_id': lecon.id, 'eleve_id': app.user.id,}) }}";

    // rempli par twig
    {% for iter_module in parcours %}
        {% for iter_lecon in iter_module.lecons if iter_lecon.lecon.id == lecon.id %}
            {% for iter_activite in iter_lecon.activites %}
                {% for iter_composant in iter_activite.composants %}

                    {% set type_id = iter_composant.composant.type.id %}
                    {% set est_exo = (type_id == 1) or (type_id == 2) or (type_id == 3) or (type_id == 4) or (type_id == 5) %}
                    {% if est_exo %}
                        {# en croisant les doigts très fort, on espère que les loop.index coïncideront avec counter_activite et counter #}
                        {# Je pense qu'il faut aussi serrer les fesses #}
                        {% set counter = loop.index %}
                        {% set counter_activite = loop.parent.loop.index %}
                        {% set pos_cle = counter_activite ~ '_' ~ counter %}
                        {% set note_pc = 0 %}
                        {% if iter_composant.denominateur != 0 %}
                            {% set note_pc = ((100*iter_composant.numerateur/iter_composant.denominateur) |round |number_format ) ~ '%' %}
                        {% endif %}
                        
                        window.notes_recap['{{ pos_cle }}'] = {
                            'note': '{{ note_pc }}',
                            //'succes': data.success, //comment savoir? la stocker aussi dans parcours?
                            'composant_id': {{ iter_composant.id }},
                            'activite_id': {{ iter_activite.id }},
                        };
                    {% endif %}
                {% endfor %}
            {% endfor %}
        {% endfor %}
    {% endfor %}

    var debug = false   // Affiche tous les console.log
    var jsPlumbInstances = {} // Stocke les instances de jsPlumb, une par composant

    window.arr_to_click = [];
    window.arr_ready = [];


    window.lecon_validee = false;
    {% if eleve_lecon.datevalidation %}
        window.lecon_validee = true;
    {% endif %}

    
    {% if dureeLecon %}
        var duree_limite = {{ dureeLecon }}
    {% else %}
        var duree_limite = 0
    {% endif %}

    var current_duree_lesson = {{ current_duree_lesson }}
    var total_time_lesson = {{ current_duree_lesson }}
    var one_try = {% if moduleLecon.retry == false %}true{% else %}false{% endif %}

    </script>

    <script src="{{ asset('js/idle-timer.1.1.0.min.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lesson.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_lesson_jsplumb.js') }}?{{ date().timestamp }}"></script>
    
    <script src="{{ asset('js/courses_lecon_showactivites_openQuestion.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_timer.js') }}?{{ date().timestamp }}"></script>

        
    <script>
        $(document).on('click', '.pip_btn_close', function(){
            mediaid = $(this).data('id');
            $(this).hide();
            
            var pipMedia = $('#pip_media_'+mediaid);
            var pipInfo = $('#pip_info_'+mediaid);
            var pipBtn = $('#pip_btn_'+mediaid);
            var iframe = pipMedia.find('iframe');
            pipBtn.find('.action').html('Fixer')
            pipInfo.hide();
            {# pipMedia.css('width', 'auto');
            pipMedia.css('height', 'auto');
            pipMedia.css('position', 'static');
            pipMedia.css('left', 'auto');
            pipMedia.css('bottom', 'auto');
            pipMedia.css('z-index', 'auto'); #}
            pipMedia.removeClass('fixed');
            if (iframe != undefined) {
                iframe.css('width', '560');
                iframe.css('height', '315');
            }
        })
        $(document).on('click', '.pip_btn_close_text', function(){
            mediaid = $(this).data('id');
            btn.find('.action').html('Fixer')
           
            $('.super_wrapper_texte').hide();
            $('.wrapper_texte .card-body').html('');
            $('.super_wrapper_parcours').show();
            $('.wrapper_texte .pip_btn_close').data('id', '');
        })
        $(document).on('click', '.pip_texte_btn', function(){
            mediaid = $(this).data('id');
            btn = $(this);
            if ($('.super_wrapper_texte').is(":visible")) {
                btn.find('.action').html('Fixer')
                $('.super_wrapper_texte').hide();
                $('.wrapper_texte .card-body').html('');
                $('.super_wrapper_parcours').show();
                $('.wrapper_texte .pip_btn_close').data('id', '');

            }
            else {
                btn.find('.action').html('Fermer')
                data = $('#pip_media_'+mediaid).html();
                $('.super_wrapper_texte').show();
                $('.wrapper_texte .card-body').html(data);
                $('.super_wrapper_parcours').hide();
                $('.wrapper_texte .pip_btn_close').data('id', mediaid);
            }
        })
        $(document).on('click', '.pip_btn', function(){
            mediaid = $(this).data('id');
            btn = $(this);
            
            var pipMedia = $('#pip_media_'+mediaid);
            var pipInfo = $('#pip_info_'+mediaid);
            var iframe = pipMedia.find('iframe');
            var pipTexte = pipMedia.find('.pip_texte');

            position = pipMedia.css('position');
            if (position == 'static') {
                $('.pip_media').each(function() {
                    iframeTmp = $(this).find('iframe');
                    if (iframeTmp != undefined) {
                        iframeTmp.css('width', '560');
                        iframeTmp.css('height', '315');
                    }
                    pipTexteTmp = $(this).find('.pip_texte');
                    if (pipTexteTmp != undefined) {
                        pipTexteTmp.hide();
                    }
                    $(this).find('.pip_btn_close').hide();
                    $(this).siblings('.pip_btn').find('.action').html('Fixer')
                    $(this).siblings('.pip_info').hide();
                    {# $(this).css('width', 'auto');
                    $(this).css('height', 'auto');
                    $(this).css('position', 'static');
                    $(this).css('left', 'auto');
                    $(this).css('bottom', 'auto');
                    $(this).css('z-index', 'auto'); #}
                })
                if (iframe != undefined) {
                    iframe.css('width', 'auto');
                    iframe.css('height', 'auto');
                }
                if (pipTexte != undefined) {
                    pipTexte.show();
                }
                $('#pip_media_'+mediaid+ ' .pip_btn_close').show()
                btn.find('.action').html('Fermer')
                pipInfo.show();
                {# pipMedia.css('width', '400px');
                pipMedia.css('height', 'auto');
                pipMedia.css('position', 'fixed');
                pipMedia.css('left', '1em');
                pipMedia.css('bottom', '1em');
                pipMedia.css('z-index', '99'); #}
                pipMedia.addClass('fixed');

            }
            else {
                if (iframe != undefined) {
                    iframe.css('width', '560');
                    iframe.css('height', '315');
                }
                if (pipTexte != undefined) {
                    pipTexte.hide();
                }
                $('#pip_media_'+mediaid+ ' .pip_btn_close').hide()
                btn.find('.action').html('Fixer')
                pipInfo.hide();
                {# pipMedia.css('width', 'auto');
                pipMedia.css('height', 'auto');
                pipMedia.css('position', 'static');
                pipMedia.css('left', 'auto');
                pipMedia.css('bottom', 'auto');
                pipMedia.css('z-index', 'auto'); #}
                pipMedia.removeClass('fixed');
            }
        })
        

    function checkQuestionOuverteSansReponse(activite){
        let nbQo = activite.find('textarea.reponse_open_question').length;
        if(nbQo > 0) {

            let pb = 0;
            $.each(activite.find('textarea.reponse_open_question'), function(i, v){
                if($(v).val().length == 0){
                    pb++
                }
            })
    
            if(pb >= nbQo){
                return true
            }
        }

        return false

    }

    $(function () {
        showLoaderEleve()
        loadAllActivities().then((data) => {

            loadAllMedia().then((data) => {

                _bindGapfillSD()
                _bindGapfillW()
                _bindQCM()

                $('.ajax_load_activite').each(function(i, v){
                    initJsPlumb($(v).data('cle')) 
                })

                initTinyMCE()           
                
                _bindOpenQuestion()

                fixResponsiveTable()
                hideLoaderEleve()


                run_timer = true

            }).catch((error) => {
                if(debug){
                    console.log("Error loadAllMedia() ", error)
                }
            })

        }).catch((error) => {
            if(debug){
                console.log("Error loadAllActivities() ", error)
            }
        })

        /*  SAUVEGARDE DU COMPOSANT */
        $(document).on('click', '.submitExercice', function(e){    
            showLoader()

            // Maj du timer
            setTimeSession()

            submitComposant($(this), 0).then((data) => {
                hideLoader()                                
            }).catch((error) => {
                if(debug){
                    console.log("Error submitComposant() ", error)
                }
            })
        })

        /* VALIDATION DE L'ACTIVITE */ 
        $(document).on('click', '.activite_submit', function () {

            let go = true
            if(checkQuestionOuverteSansReponse($(this).closest('.activite')) == true){
                go = false
                if(confirm("Attention, vous allez valider une activité alors qu'il vous reste des questions ouvertes non répondues. Etes vous sûr(e) de vouloir continuer ?")){
                    go = true
                }
            }

            if(go === true) {

                showLoaderEleve()
                let activite = $(this).closest('.activite')
    
                // Maj du timer
                setTimeSession()
                
                valideActivite(activite).then((data) => {
                    _popinRecapActivite(activite.attr('data-pointeur').replace('activite_id_',''), data)
                    hideLoaderParcours()
                    hideLoaderEleve()
                }).catch((error) => {
                    if(debug){
                        console.log("Error valideActivite() ", error)
                    }
                })   
            }

        });

        /* VALIDATION DE LA LECON */  
        $(document).on('click', '.lesson_submit', function() {
            showLoaderEleve()
            

            setTimeSession()
            window.lecon_validee = true

            valideLesson().then((data) => {

                // Popin recap Leçon
                _popinRecapLesson(data)

                hideLoaderParcours()
                hideLoaderEleve()

            }).catch((error) => {
                if(debug){
                    console.log("Error valideLesson() ", error)
                }
            })    

            $('.eleve_lecon_parcours').addClass('lecon_validee terminee')

            $('.ns_btn_lesson_submit').prop('hidden', true)
            $('.ns_btn_lesson_validated').prop('hidden', false)

        })
        /* GapFillSd */

        // Set
        $(document).on('click', '.non-dropped', function(){
            if(!$(this).hasClass('isDisabled')){
                let destinations = $(this).closest('.composant_wrapper').find('.gapfield-list')
                
                if($(this).hasClass('gapfill_active')){
                    $(this).removeClass('gapfill_active')
                    destinations.removeClass('gapfield-hint')
                }
                else
                {
                    $('.non-dropped').removeClass('gapfill_active')
                    $(this).addClass('gapfill_active')
                    destinations.addClass('gapfield-hint')
                }
            }
        })

        // Drop & Reset
        $(document).on('click', '.gapfield-list', function(){
            if(!$(this).children().hasClass('isDisabled')){
                let source = $(this).closest('.composant_wrapper').find('.gapfill_active')
                let liste = $(this).closest('.composant_wrapper').find('.gap_fill_main_list')
                if($(this).children().length>0){
                    // Reset
                    if($(this).children().hasClass('dropped')){
                        $(this).children().parent().attr('data-sub-question-index', '')
                        
                        $(this).children()
                            .removeClass('dropped')
                            .addClass('non-dropped')
                        liste
                            .removeClass('gapfield-hint')
                            .prepend($(this).children())
                    }
                }
                else
                {
                    // Drop             
                    source
                        .removeClass('non-dropped')
                        .removeClass('gapfill_active')
                        .addClass('dropped')
                        .attr('data-destname', $(this).attr('name'))
        
                    $(this)
                        .attr('data-sub-question-index', source.attr('tabindex'))
                        .prepend(source)

                    $('.gapfield-hint').removeClass('gapfield-hint');
                }
            }
        })

        // Re-ORG Interractions-------------------------------------
        
        $('.popin').on('click', function() { //APPEL OUVERTURE DU POP-IN
            var path = $(this).attr('data-href'),
                titre = $(this).attr('data-title');

            //1. renseigner popin avec contenu de $(this).attr('data-href')
            $.post(path, function success(data) {
                $('.modal_default .modal-body').html(data);
                $('.modal_default .modal-title').html(titre);

                window.previewMedias('.modal_default'); //au cas où (point grammaire/vocabulaire/transcript en popin devant aussi montrer un composant image qui s'y est greffé)

                //2. montrer popin (au besoin)
                if ('block' !== $('.modal_default.poppin').css('display')) {
                    $('#trigger_poppin_default').click();
                }
            });
        });
        


        $("a[href*='#']:not([href='#'])").on('click', function() {
            //console.log('debug bindButtonsAct a[href ', location);
            if ( true
            //location.hostname === this.hostname //&& this.pathname.replace(/^\//,"") === location.pathname.replace(/^\//,"")
            ) {
                var anchor = $(this.hash);
                anchor = anchor.length ? anchor : $("[name=" + this.hash.slice(1) +"]");
                //console.log('debug before scrollTo eval ',anchor);

                if ( anchor.length ) {
                    //$("html, body").animate( { scrollTop: anchor.offset().top }, 1500);
                    scrollTo($(anchor), function callback(){
                        //retirer le hash
                        removeHash() //afin de ne pas refaire ce scroll à chaque fois
                    });
                }
            }
        });
        idLecon = '#'+$('.ancre_cachee').attr('id')
        window.target = $("a[href='" + idLecon + "']");
        var Start =  window.target.position().top - $('.wrapper_parcours .card-body').position().top;
        if(typeof Start !== 'undefined'){
            $('.wrapper_parcours').animate({
                scrollTop: Start
            }, 200);
        }
        $(window).bind('scroll', function() {

            if($('.tableTentatives').length>0) {
                return false; //ne rien faire sur la vue prof
            } else {

                if (typeof window.target !== 'undefined') {
                    window.oldTarget = window.target;
                } else {
                    window.oldTarget = $("a[href='#" + $('.ancre_cachee')[0].attributes.id.value + "']");
                }
                window.target = '';

                $('.ancre_cachee[id^=activite], .ancre_cachee[id^=lecon]').each(function () {
                    var ancre = $(this);
                    var position = ancre.position().top - $(window).scrollTop();

                    if (position < 0) {
                        window.target = $("a[href='#" + ancre.attr('id') + "']");
                    } else {
                        return false;
                    }
                });

                if(window.oldTarget[0] !== window.target[0]){
                    if(typeof window.target !== 'undefined' && window.target !== ''){
                        var Top =  window.target.position().top - $('.wrapper_parcours .card-body').position().top;
                        if(typeof Top !== 'undefined'){
                            $('.wrapper_parcours').animate({
                                scrollTop: Top
                            }, 200);
                        }
                    } else{
                        $('.wrapper_parcours').animate({
                            scrollTop: Start
                        }, 200);
                    }
                }
            } //fin si vue élève
        }); //fin event scroll

        $( window ).resize(function() {
            $( '.wrapper_parcours' ).css('width', $( '.super_wrapper_parcours' ).width());

            // Obligé de repaint les Associations sur resize, sinon ils sont mal placées
            for (const [key, value] of Object.entries(jsPlumbInstances)) {
                value.repaintEverything()
            }
        });
        
        // Transcript
        $(document).on('click', '.transcriptComp', function() {
            $(this).closest('.composant').find('.transcript_info').toggle(400);
            $(this).closest('.composant').find('.content').toggle(400);
        });

        // Ctrl+ clic pour annuler les boutons radios  
        // --> Ne fonctionne pas selon mes tests
        $(document).on('click', '.btnRadio label', function(e) {
            if (e.ctrlKey) {
                $(this).siblings('input').prop('checked', false);
            }
        });

    })



</script>
{% endblock %}