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

{% block title %}{{parent()}}: Configuration d'un module{% endblock %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}
    <div id="dialog-confirm" style="z-index:99999 !important;"></div>
    <div class="container-fluid page page_module_settings">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">
                    <div class="row">
                        <div class="col-xl-7 col-lg-8 col-md-12 col-sm-12">

                            <div class="card module">
                                <div class="card-header dataModule" data-module-id="{{ module.id }}" data-langue-id="{{ module.langue.id }}" data-langue-libelle="{{ module.langue.libelle }}" {% if module.niveau is defined %}data-niveau="{{ module.niveau.id }}"{% endif %}>
                                    <h4 class="d-inline-block m-0">Configuration du module "{{ module.libelle }}"</h4>

                                    <div class="card-header-actions">
                                        <ul class="d-flex list-unstyled m-0">

                                            {% if formations|length > 0 %}
                                            <li class="mr-2">
                                                <a class="btn btn-outline-primary"
                                                   href="#"
                                                   data-toggle="modal"
                                                   data-target="#modal-listing-formation">
                                                   Inclus dans {{ formations|length }} formation{% if formations|length > 1 %}s{% endif %}
                                                </a>
                                            </li>
                                            {% else %}
                                                <li class="mr-2">
                                                    <a class="btn btn-outline-info disabled"
                                                       href="#">
                                                        Inclus dans aucune formation
                                                    </a>
                                                </li>
                                            {% endif %}

                                            <li class="mr-2">
                                                <a class="btn btn-outline-primary"
                                                   title="Modifier"
                                                   href="{{ path('courses_module_edit', {'id': module.id}) }}">
                                                    {#<i class="fa fa-edit"></i>#}
                                                    Modifier
                                                </a>
                                            </li>
                                            {% if est_connecte %}
                                            <li class="">
                                                {% set title = 'Réactiver' %}
                                                {#{% set logo_html = '<i class="fa fa-recycle"></i>' %}#}
                                                {% if module.active %}
                                                    {% set title = 'Supprimer' %}
                                                {#{% set logo_html = '<i class="fa fa-trash"></i>' %}#}
                                                {% endif %}
                                                <a class="btn btn-dark"
                                                   title="{{ title }}"
                                                   href="{{ path('courses_module_active', {'id': module.id}) }}">
                                                    {#{{ logo_html|raw }}#}
                                                    {{ title }}
                                                </a>
                                            </li>
                                            {% endif %}
                                        </ul>
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="d-flex align-items-center m-2">
                                        <h3>Liste des leçons</h3>
                                        <span class="fa-stack fa-lg buttonToggleAllShow ml-auto" onclick="toggleAllShow();">
                                            <i class="fa fa-circle fa-stack-2x m-0"></i>
                                            <i class="fa fa-eye fa-stack-1x m-0  fa-lg" style="color:white; cursor:pointer;"></i>
                                        </span>
                                        <span class="fa-stack fa-lg buttonToggleAllHide" onclick="toggleAllHide();">
                                            <i class="fa fa-circle fa-stack-2x m-0"></i>
                                            <i class="fa fa-eye-slash fa-stack-1x m-0  fa-lg" style="color:white; cursor:pointer;"></i>
                                        </span>
                                    </div>
                                    <div id="listeLecons" class="listeLecons"
                                         data-path="{{ path('courses_module_list_lessons', {'id': module.id}) }}"
                                         data-path-order="{{ path('courses_module_lesson_order_update', {'id': module.id }) }}"
                                         data-pattern-add-exo="{{ path('courses_activite_add_composant', {'id': '_id_'}) }}"
                                         data-pattern-remove-exo="{{ path('lesson_remove_composant', {'id': '_id_'}) }}"
                                         data-pattern-add-act="{{ path('courses_lesson_add_one_activity', {'id': '_id_'}) }}"
                                         data-pattern-remove-act="{{ path('courses_lesson_remove_activity', {'id': '_id_'}) }}"
                                         data-set-retry="{{ path('courses_module_setting_retry') }}"
                                         data-set-duration="{{ path('courses_module_setting_duration') }}"
                                         data-set-adaptabilite="{{ path('courses_activite_adaptabilite_settings') }}">
                                        {{ render(controller(
                                            'CoursesBundle:Module:listLessons',
                                            { 'id': module.id }
                                        )) }}
                                    </div>
                                    <div class="elementAddLesson d-flex align-items-center">
                                        <div class="rotating-dashed lessons"></div>
                                        <i class="fa fa-files-o fa-lg iconAddLesson my-auto" aria-hidden="true"></i>
                                        <div class="inputNewLesson">
                                            <label for="inp" class="inp">
                                                <input type="text" class="input" placeholder="&nbsp;" maxlength="250">
                                                <span class="label ellipsis"><i>Nouvelle leçon</i></span>
                                                <span class="border"></span>
                                            </label>
                                        </div>
                                        <i class="fa fa-plus fa-lg iconPlus my-auto" aria-hidden="true" data-href="{{ path('courses_module_add_lesson', {'id': module.id}) }}"></i>
                                        <i class="fa fa-search fa-lg fa-flip-horizontal iconSearch popinRechercherLecon ml-auto my-auto" aria-hidden="true" data-href="{{ path('courses_module_list_freelessons', {'id': module.id}) }}" data-valid="{{ path('courses_module_add_lessons', {'id': module.id}) }}"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {#<div class="col-xl-4 col-lg-3 col-md-12 col-sm-12 offset-md-1 newPopin">#}
                        <div class="col-xl-5 col-lg-4 col-md-12 col-sm-12 newPopin">
                            <div class="card" id="settings-window" style="display:none">
                                <div class="card-header header">
                                    <h4 class="d-inline-block m-0 title">Fenêtre de paramétrage</h4>
                                    <i class="fa fa-window-close fa-lg closeWindow" aria-hidden="true" onclick="closeWindow();" style="cursor:pointer; color:#555555;"></i>
                                </div>
                                <div class="card-body body p-2"></div>
                                <button type="button" class="btn btn-secondary valid col-md-11 mx-auto my-2">Valider</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade poppin"
         id="modal-listing-formation"
         style="pointer-events:none;overflow:auto!important;background: rgba(0, 0, 0, 0.5);"
         role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-medium-dialog modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Listing des formations incluant ce module</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {% for f in formations %}
                        <p class="ml-2 mb-2">- {{ f.formation.designation }} (#{{ f.formation.id }})</p>
                    {% endfor %}
                </div>

            </div>
        </div>
    </div>

{% endblock body %}

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

    <!-- temporaire -->
    <script src="{{ asset('js/ns_rustine_tinymceinline.js') }}?{{ date().timestamp }}"></script>

    <!-- HTML POUR POPPIN -->

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

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

{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <!-- test css -->
    <link href="{{ asset('css/btn_toggle.css') }}" rel="stylesheet" >
    <link href="{{ asset('css/ns_courses_module_settings.css') }}" rel="stylesheet" >
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
    <link href="{{ asset('css/ns_courses_composants.css') }}" rel="stylesheet" >
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
    <style>
        .ui-dialog{
            z-index: 9999 !important;
        }

        #myModal_composant #qcmBlock .tinymce {
            min-height: 100px;
        }
        #myModal_composant .inlinetinymce {
            min-width: 200px;
            min-height: 40px;
            background-clip: padding-box;
            border: 1px solid #e4e7ea;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        #myModal_composant .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            line-height: 1.5;
            color: #5c6873;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #e4e7ea;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        #myModal_composant .modal-footer .btn {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        #myModal_composant .modal-footer .btn-primary {
            color: #fff;
            background-color: #20a8d8;
            border-color: #20a8d8;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script> {# pour la galerie de media, filtre par catégorie #}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_description.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_module_settings.js') }}?{{ date().timestamp }}"></script>
    {#<script src="{{ asset('js/courses_module_list-lesson.js') }}?{{ date().timestamp }}"></script>#}
    <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_composants_createedit.js') }}?{{ date().timestamp }}"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script type="text/javascript">

        window.PATH_SELECT_TYPES_COMPOSANTS = "{{ path('courses_typecomposant_select') }}";
        window.exercice = {};

        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true}) }}";
        window.PATH_MEDIA_CATEGORY_FILTER = "{{ path('courses_mediacategorie_jstreedata') }}";
        window.PATH_COMPOSANT_APERCU = "{{ path('courses_composant_show',{
            'id': '__composant_id__',
            'render_inner':'0',
            'cacher_submit_individuel': true,
            'param_readonly': false,
        })|raw }}";
        window.PATH_ACTIVITY_APERCU = "{{ path('courses_activite_index', {
            'id': '_id_activity_',
            'formation_id': 0,
            'module_id': 0,
            'lecon_id': 0,
            'counter_activite': 0,
            'ajax':false,
            'pleine_page': true,
            'session': 0
        }) |raw }}";
        window.PATH_LECON_APERCU = "{{  path('courses_lesson_show_activities_apercu', {
            'id': '__lecon_id__',
            'formation_id': 0,
            'module_id': 0,
            'ajax':false,
            'pleine_page': true,
            'avec_parcours': false,
            'session': 0,
            'duree': 0
        })|raw }}";
        window.PATH_NOMBRE_PARENT = "{{ path('courses_nombre_parents') }}";

        window.PATH_DUPLICATION = "{{ path('courses_popin_edit_composant_duplication_module', {'module': module.id, 'lecon': '__lecon_id__', 'activite': '__activite_id__', 'exercice': '__exercice_id__'}) }}";
        window.PATH_DUPLICATION2 = "{{ path('courses_popin_edit_composant_duplication', {'module': module.id, 'lecon': '__lecon_id__', 'activite': '__activite_id__', 'exercice': '__exercice_id__'}) }}";

        $(function() {

            var $sidebar   = $("#settings-window"),
                $window    = $(window),
                offset     = $sidebar.offset(),
                topPadding = -60;

            $window.scroll(function() {
                if($(window).width()>972){
                    if ($window.scrollTop() > offset.top) {
                        $sidebar.stop().animate({
                            marginTop: $window.scrollTop() - offset.top + topPadding
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: 0
                        });
                    }
                }
            });
        });
    </script>
{% endblock %}