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

{% block title %}{{parent()}}: Création d'un planning{% endblock %}
{% block body %}
    <div id="dialog-confirm" style="z-index:99999 !important;"></div>
    <div class="container-fluid page page_planning_settings">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">
                    <div class="row mt-5">
                        <div class="col-xl-7 col-lg-8 col-md-12 col-sm-12">

                            <div class="card planning">
                                <div class="card-header dataPlanning" data-planning-id="{{ planning.id }}">

                                    <h4 class="d-inline-block m-0">Configuration du Planning "{{ planning.libelle }}"</h4>

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

                                             <li class="mr-2">
                                                <a class="btn btn-primary"
                                                    title="Retour"
                                                     href="{{ path('cursus_show', {'id': planning.id}) }}" 
                                                   >
                                                    Retour au cursus
                                                </a>
                                            </li> 
                                        </ul>
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="d-flex align-items-center m-2">
                                        <h3>Liste des semestres</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="listeSemestres" class="listeSemestres"
                                        data-path="{{ path('planning_liste_semestre', {'id': planning.id}) }}"
                                        data-path-order="{{ path('planning_order_semestre', {'id': planning.id }) }}"
                                        data-pattern-add-cours="{{ path('semestre_order_cours', {'id': '_id_'}) }}"
                                        data-pattern-add-module="{{ path('cours_order_module', {'id': '_id_'}) }}"
                                        data-pattern-add-horaire="{{ path('cours_order_horaire', {'id': '_id_'}) }}"
                                        data-pattern-add-groupe="{{ path('horaire_order_groupe', {'id': '_id_'}) }}"
                                    >

                                        {% include '@Formation/Planning/listeSemestre.html.twig' %}

                                    </div>
                                    <div class="elementAddSemestre d-flex align-items-center">
                                        <div class="rotating-dashed semestres"></div>
                                        <i class="fa fa-files-o fa-lg iconAddSemestre my-auto" aria-hidden="true"></i>
                                        <div class="inputNewSemestre">
                                            <label for="inp" class="inp">
                                                <input type="text" class="input" placeholder="&nbsp;" maxlength="250">
                                                <span class="label ellipsis"><i>Nouveau semestre</i></span>
                                                <span class="border"></span>
                                            </label>
                                        </div>
                                        <i class="fa fa-plus fa-lg iconPlus my-auto" aria-hidden="true" data-href="{{ path('planning_add_semestre', {'id': planning.id}) }}"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <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>

{% endblock body %}

{% block body_before_end %}

    {# {{ 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': '_module'
    } 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 %}
    <!-- 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_module #qcmBlock .tinymce {
            min-height: 100px;
        }
        #myModal_module .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_module .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_module .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_module .modal-footer .btn-primary {
            color: #fff;
            background-color: #20a8d8;
            border-color: #20a8d8;
        }

        .elementAddSemestre{
            background-color: #ef7d2e;
        }

        .elementAjoutCours{
            background-color: #18af2a;
        }

        .elementAjoutModule{
            background-color: #25c1d8;
        }

        .elementAjoutHoraire{
            background-color: #ffeb3b;
        }

        .elementAjoutGroupe{
            background-color: #b0413e;
        }

        .semestre{
            border-color: #ef7d2e !important;
        }
        
        .cours{
            border-color: #18af2a !important;
        }
        
        .horaire{
            border-color: #ffeb3b !important;
        }

        .module {
            background-color: #25c1d8b8 !important;
            border-color: #fff !important;
            color: #fff !important;
        }

        .groupe {
            background-color: #b0413eb8 !important;
            border-color: #fff !important;
            color: #fff !important;
        }

        .windowGroupe .header, .windowGroupe .valid {
            background-color: #ffeb3b;
            color: #000;
        }

        /* 4acc7f */
        
        .elementAddSemestre, 
        .elementAjoutCours,
        .elementAjoutModule,
        .elementAjoutHoraire,
        .elementAjoutGroupe {
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
            position: relative;
            display: inherit;
            padding: 0.75rem 1.10rem;
            margin-bottom: -1px;
        }

        .removeIconModule{
            cursor: pointer;
        }

        .elementModule{
            display: flex !important;
            justify-content: space-between;
        }

        .inputNewSemestre .label, .inputNewLesson .label {
            color: #c4c4c4 !important;
        }

        .headerHoraire h3{
            margin-top: 14px;
            margin-right: 15px;
        }
        
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/planning/planning_settings.js') }}?{{ date().timestamp }}"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    
    {#
    <script src="{{ asset('js/planning_list-lesson.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/media_gallery.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/media_createedit.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/modules_createedit.js') }}?{{ date().timestamp }}"></script>
    #}
    <script type="text/javascript">

        window.PATH_SELECT_TYPES_COMPOSANTS = "{{ path('courses_typecomposant_select') }}";
        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.exercice = {};

        window.PATH_MEDIA_PREVIEW = "{{ path('media_show', {'id': '__media_id__', 'preview': true}) }}";
        window.PATH_MEDIA_CATEGORY_FILTER = "{{ path('mediacategorie_jstreedata') }}";
        window.PATH_ACTIVITY_APERCU = "{{ path('cours_index', {
            'id': '_id_activity_',
            'formation_id': 0,
            'planning_id': 0,
            'semestre_id': 0,
            'counter_cours': 0,
            'ajax':false,
            'pleine_page': true,
            'session': 0
        }) |raw }}";
        window.PATH_LECON_APERCU = "{{  path('lesson_show_activities_apercu', {
            'id': '__semestre_id__',
            'formation_id': 0,
            'planning_id': 0,
            'ajax':false,
            'pleine_page': true,
            'avec_parcours': false,
            'session': 0,
            'duree': 0
        })|raw }}";
        window.PATH_NOMBRE_PARENT = "{{ path('nombre_parents') }}";

        window.PATH_DUPLICATION = "{{ path('popin_edit_module_duplication_planning', {'planning': planning.id, 'semestre': '__semestre_id__', 'cours': '__cours_id__', 'exercice': '__exercice_id__'}) }}";
        window.PATH_DUPLICATION2 = "{{ path('popin_edit_module_duplication', {'planning': planning.id, 'semestre': '__semestre_id__', 'cours': '__cours_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
                        });
                    }
                }
            });

            // tri des entitées en fonction de l'ordre
            semestres = $(".sortable-semestres .connected-semestre");
            semestres.sort(sort_li).appendTo('.sortable-semestres');
            
            semestres.each( function(semestre){
                
                cours = $(this).find('.sortable-cours .connected-cours');

                cours.sort(sort_li).appendTo($(this).find('.sortable-cours'));

                cours.each( function(cour){

                    contenus = $(this).find('.sortable-modules .connected-activite');
                    contenus.sort(sort_li).appendTo($(this).find('.sortable-modules'));

                    horaires = $(this).find('.sortable-horaires .connected-horaire');
                    horaires.sort(sort_li).appendTo($(this).find('.sortable-horaires'));

                    horaires.each( function(horaire){

                        groupes = $(this).find('.sortable-groupes .connected-groupe');
                        groupes.sort(sort_li).appendTo($(this).find('.sortable-groupes'));
                    });
                });
            });
        });

        function sort_li(a, b){
            // console.log($(a).attr('data-ordre'))
            // console.log((parseInt($(b).attr('data-ordre'))) < (parseInt($(a).attr('data-ordre'))) ? 1 : -1)

            return (parseInt($(b).attr('data-ordre'))) < (parseInt($(a).attr('data-ordre'))) ? 1 : -1;    
        }
    </script>
{% endblock %}