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

{% block title %}{{parent()}}: Adaptabilité d'activité{% endblock %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}
    <div class="container-fluid">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">
                    <div class="row">
                        <div class="col-lg-6 mx-auto">

                            <div class="card ">

                                <div class="card-header">
                                    <h4 class="d-inline-block m-0">Adaptabilité de l'activité n°{{ idActivite }}</h4>
                                </div>
                                <div class="card-body">
                                    {{ form_start(form, {'method': 'post', 'action': path('courses_activite_adaptabilite', { 'id': idActivite }) }) }}
                                        {{ form_label(form.notePlancher, 'Note plancher') }}
                                        {{ form_widget(form.notePlancher, {'attr': {'class': 'form-control', 'placeholder':'Déterminer la note plancher', 'min':'0', 'value':notePlancher }}) }}<br/>
                                        {{ form_errors(form.notePlancher) }}
                                        {{ form_label(form.activiteLiee, 'Activité liée') }}
                                        <button class="selectActivity btn btn-block btn-secondary mb-2" type="button" data-href="{{ path('courses_activite_adaptabilite_datatable') }}" data-title="Sélectionner une activité">Sélectionner une activité</button>
                                        <h4 id="selectedAct">{% if activite_liee != '' %}Sélectionnée : {{ activite_liee.id }} - {{ activite_liee.libelle }}{% endif %}</h4>
                                        {% if activite_liee != '' %}
                                            {{ form_widget(form.activiteLiee, {'attr': {'class': '', 'hidden': 'hidden', 'min': '0', 'value':activite_liee.id }}) }}
                                        {% else %}
                                            {{ form_widget(form.activiteLiee, {'attr': {'class': '', 'hidden': 'hidden', 'min': '0' }}) }}
                                        {% endif %}
                                        {{ form_errors(form.activiteLiee) }}<br/>
                                        <div>
                                            <input type="submit" value="Créer" class="btn btn-primary btn-flat col-md-3 m-b-30 m-t-30 float-right" />
                                        </div>
                                    {{ form_end(form) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% 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' : true,
        'wide': true
    } only %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script type="text/javascript">

        window.PATH_JSON_ACTIVITIES ="{{ path('courses_activite_jsonList', {'filtre_active':'true'})|raw }}";
        window.filtres = [];
        window.filtres_actifs = [];

        jQuery(document).ready(function () {
            //window.enableSelect2("form_activiteLiee", {placeholder:"Selectionnez une activitée liée", allowClear:true})
        });

        $('.selectActivity')
            .off('click')
            .on('click', function ouvrirPopinSelectActivity() { //APPEL OUVERTURE DU POP-IN

                var path = $(this).attr('data-href'),
                    titre = $(this).attr('data-title');

                //loader
                showLoader();

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

                    hideLoader();

                    //2. montrer popin
                    //$('#trigger_poppin_composant ').click();
                    window.modalBootstrap('trigger_poppin', 'show');

                    window.table_activities = $('#table_activities').DataTable({
                        select: 'single',
                        selected: true,
                        processing: true, //indique que la DataTable peut mettre longtemps à charger
                        serverSide: true, //ajax pour lsiter et chercher données
                        ajax: window.PATH_JSON_ACTIVITIES,
                        sAjaxDataProp: "data",
                        pageLength: 10, //valeur initiale
                        columns:[
                            {"data": "id", "width": "5%"}, //sert vraiement pour l'id
                            {"data": "libelle", "width": "30%"},
                            {"data": "langue", "width": "10%"},
                            {"data": "niveau", "width": "10%"},
                            {"data": "proprietaire", "width": "15%"},
                        ],

                        "createdRow": function( row, data, dataIndex ) {
                        },

                        drawCallback: function( settings ) {
                            window.filtres = this.api().context[0].json.filtres
                        },
                        initComplete: function(){
                            var colonnes_a_mettre_en_select = [2,3,4]; //[2,3,4] 4 était la colonne "active"
                            window.GENERER_FILTRES(window.table_activities, colonnes_a_mettre_en_select)
                        },

                        // pour se souvenir des filtres, même quand navigue sur autres pages
                        stateSave: true,
                        stateSaveCallback: function(settings,data) {
                            localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
                        },
                        stateLoadCallback: function(settings) {
                            var data = JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) );
                            return data;
                        }
                    });

                    //3. si valide le popin
                    $('.valider-popin').off('click').on('click', function PopinSelectActivity(eventValidClick) {
                        window.selected = table_activities.rows( { selected: true } ).data();
                        $('#form_activiteLiee').val(window.selected[0].id);
                        $('#selectedAct').text('Sélectionnée : '+window.selected[0].id+' - '+window.selected[0].libelle);
                        window.modalBootstrap('trigger_poppin', 'hide');
                    });
                });
            });

    </script>
{% endblock javascripts %}