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

{% block title %}{{parent()}}: Cursus {{ cursus.libelle }}{% endblock %}
{% block stylesheets %}
    <link href="{{ asset('css/ns_courses_module_settings.css') }}" rel="stylesheet" >
{% endblock %}

{% block body %}

    {% include 'breadcrumb.html.twig' %}

    <div class="container-fluid">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">
                    <div class="row">

                    {% set onglet_actif='formation' %}
                    {% if onglet is defined %}
                        {% if onglet %}
                            {% set onglet_actif=onglet %}
                        {% endif %}
                    {% endif %}

                    <div class="col-lg-12">
                            <ul class="nav nav-tabs">
                                <li class="nav-item"><a class="nav-link {% if onglet_actif=='formation' %}active{% endif %}" data-toggle="tab" href="#tab_formations">Formations</a></li>
                                <li class="nav-item"><a class="nav-link {% if onglet_actif=='eleve' %}active{% endif %}" data-toggle="tab" href="#tab_eleves">Elèves</a></li>
                                <li class="nav-item"><a class="nav-link {% if onglet_actif=='prof' %}active{% endif %}" data-toggle="tab" href="#tab_profs">Profs</a></li>
                                <li class="nav-item"><a class="nav-link {% if onglet_actif=='group' %}active{% endif %}" data-toggle="tab" href="#tab_group">Groupes</a></li>
                                <li class="nav-item"><a class="nav-link {% if onglet_actif=='parametre' %}active{% endif %}" data-toggle="tab" href="#tab_parametre">Parcours</a></li>
                            </ul>

                            <div class="tab-content">
                                <div id="tab_formations" class="tab-pane fade {% if onglet_actif=='formation' %}in active show{% endif %}">
                                    <div class="card prof">
                                        <div class="card-header">
                                            <h4 class="d-inline-block m-0">Les formations du cursus</h4>
                                            <div class="card-header-actions">
                                                <ul class="d-flex list-unstyled m-0">
                                                    <li class="">
                                                        <a class="btn btn-outline-primary btn-new popin popin_autres_formations"
                                                            data-title="Choisissez des Formations à ajouter au cursus [{{ cursus.id }}] {{ cursus.libelle }}"
                                                            href="#"
                                                            data-href="{{ path('cursus_autres_formation_index',{id: cursus.id}) }}" 
                                                        >
                                                            Ajouter des formations
                                                        </a>
                                                        {% if est_admin %}
                                                            {#{% if cursus.active == true %}
                                                                <a class="btn btn-dark btn-delete" href="{{ path('cursus_active', {id: cursus.id})|raw }}">
                                                                    <i class="fa fa-trash "></i> Désactiver le cursus
                                                                </a>
                                                            {% else %}
                                                                <a class="btn btn-dark btn-delete" href="{{ path('cursus_active', {id: cursus.id})|raw }}">
                                                                    <i class="fa fa-recycle "></i> Ré-activer le cursus
                                                                </a>
                                                            {% endif %}#}
                                                                <a onclick="return confirm('Supprimer définitivement tout le cursus ?')" class="btn btn-dark btn-delete" href="{{ path('cursus_delete', {id: cursus.id})|raw }}">
                                                                    <i class="fa fa-trash "></i> Supprimer le cursus
                                                                </a>
                                                        {% endif %} 
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="card-body">

                                            {% include '@Formation/Cursus/table_cursus_formations.html.twig' %}

                                            <button type="button"
                                                    class="btn btn-dark massaction formation suppression">
                                                Retirer les formations sélectionnés
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab_eleves" class="tab-pane fade {% if onglet_actif=='eleve' %}in active show{% endif %}">
                                    <div class="card eleve">
                                        <div class="card-header">
                                            <h4 class="d-inline-block m-0">Les élèves de la formation</h4>

                                            <div class="card-header-actions">
                                                <ul class="d-flex list-unstyled">
                                                
                                                    <li class="">
                                                        <a class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                                                            Notifier les élèves
                                                        </a>
                                                        <a class="btn btn-outline-primary btn-new popin popin_autres_eleves"
                                                            data-title="Choisissez des élèves à ajouter au cursus [{{ cursus.id }}] {{ cursus.libelle }}"
                                                            href="#"
                                                            data-href="{{ path('cursus_autres_eleve_index',{id: cursus.id}) }}" 
                                                            >
                                                            Ajouter des élèves
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="card-body">

                                            {% include '@Formation/Cursus/table_cursus_eleve.html.twig' %}

                                            <button type="button"
                                                    class="btn btn-dark massaction eleve suppression">
                                                Retirer les élèves sélectionnés
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab_profs" class="tab-pane fade {% if onglet_actif=='prof' %}in active show{% endif %}">
                                    <div class="card prof">
                                        <div class="card-header">
                                            <h4 class="d-inline-block m-0">Les professeurs du cursus</h4>

                                            <div class="card-header-actions">
                                                <ul class="d-flex list-unstyled m-0">
                                                
                                                        <li class="">
                                                            <a class="btn btn-outline-primary btn-new popin popin_autres_profs"
                                                                data-title="Choisissez des Professeurs à ajouter au cursus [{{ cursus.id }}] {{ cursus.libelle }}"
                                                                href="#"
                                                                data-href="{{ path('cursus_autres_prof_index',{id: cursus.id}) }}" 
                                                                >
                                                                Ajouter des professeurs
                                                            </a>
                                                        </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="card-body">

                                            {% include '@Formation/Cursus/table_cursus_prof.html.twig' %}

                                            
                                            <button type="button"
                                                    class="btn btn-dark massaction prof suppression">
                                                Retirer les professeurs sélectionnés
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab_group" class="tab-pane fade {% if onglet_actif=='group' %}in active show{% endif %}">
                                    <div class="card group">
                                        <div class="card-header">
                                            <h4 class="d-inline-block m-0">Les Groupes de la formation</h4>

                                            <div class="card-header-actions">
                                                <ul class="d-flex list-unstyled m-0">
                                                    <li class="mr-2">
                                                         <a class="btn btn-primary btn-new popin popin_add_groupe_formation"
                                                                data-title="Créer depuis une formation"
                                                                href="#"
                                                                data-href="{{ path('cursus_cree_groupe_formation_index',{id: cursus.id}) }}" 
                                                                >
                                                                Importer depuis une formation
                                                            </a>
                                                    </li>
                                                    <li class="">
                                                         <a class="btn btn-outline-primary btn-new popin popin_add_groupe"
                                                                data-title="Créer un groupe au cursus [{{ cursus.id }}] {{ cursus.libelle }}"
                                                                href="#"
                                                                data-href="{{ path('cursus_cree_groupe_index',{id: cursus.id}) }}" 
                                                                >
                                                                Créer un groupe
                                                            </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="ns_table_wrapper table-responsive">
                                                <table id="table_groupes" class="table ns_fullwidth ns_selectable">
                                                    <thead>
                                                        <tr class="tri_line">
                                                            <th class="col-header select">Sélection</th>
                                                            <th class="col-header nom">Libellé</th>
                                                            <th class="col-header prenom">Nombre d'élèves</th>
                                                            <th class="col-header username">Nombre de professeurs</th>
                                                             <th class="col-header username">Modifier</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <button type="button"
                                                    class="btn btn-dark massaction groupe suppression">
                                                Retirer un groupe
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab_parametre" class="tab-pane fade {% if onglet_actif=='parametre' %}in active show{% endif %}">

                                    <div class="card group">
                                        <div class="card-header">
                                            <h4 class="d-inline-block m-0">Informations du cursus</h4>

                                            <div class="card-header-actions">
                                                <ul class="d-flex list-unstyled m-0">
                                                    <li class="mr-2">
                                                        <a class="btn btn-primary"
                                                            data-title="Créer depuis une formation"
                                                            target="_blank"
                                                            href="{{ path('cursus_planning',{id: cursus.id}) }}" 
                                                            >
                                                            Aperçu du planning
                                                        </a>
                                                        <a class="btn btn-primary"
                                                            data-title="Créer depuis une formation"
                                                            href="{{ path('planning_index',{id: cursus.id}) }}" 
                                                            >
                                                            Gérer le planning
                                                        </a>
                                                        <a class="btn btn-danger getExportPdf"
                                                            data-title="Créer depuis une formation"
                                                            data-type="pdf"
                                                            data-href="{{ path('cursus_planning_pdf_export',{id: cursus.id}) }}" 
                                                            >
                                                            Export PDF
                                                        </a>
                                                        <a class="btn btn-success" data-toggle="modal" data-target="#exportExcelModal">
                                                            Export Excel
                                                        </a>
                                                        {# <a class="btn btn-success getExport"
                                                            data-title="Créer depuis une formation"
                                                            data-type="xlsx"
                                                            data-href="{{ path('cursus_planning_excel_export',{id: cursus.id}) }}" 
                                                            >
                                                            Export Excel
                                                        </a> #}
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <form class="row">
                                                <div class="form-group col-12">
                                                    <libelle for="libelleCursus" class="h5">Libellé</libelle>
                                                    <input type="text" class="form-control form-control" id="libelleCursus" name="libelleCursus" value="{{ cursus.libelle }}">
                                                </div>
                                                <div class="form-group col-6" style="height:250px;">
                                                    <libelle for="objectifCursus" class="h5">Objectifs</libelle>
                                                    <textarea id="objectifCursus"  name="objectifCursus" class="tinymce editme form-control">
                                                        {{ cursus.objectif }}
                                                    </textarea>
                                                </div>
                                                <div class="form-group col-6">
                                                    <libelle for="formationsCursus" class="h5">Formations</libelle>
                                                    <textarea id="formationsCursus" name="formationsCursus" class="tinymce editme form-control">
                                                        {{ cursus.infoFormations }}
                                                    </textarea>
                                                </div>
                                                <div class="form-group col-6">
                                                    <libelle for="heuresCursus" class="h5">Détails nombre d'heures</libelle>
                                                    <textarea id="heuresCursus" name="heuresCursus" class="tinymce editme form-control">
                                                        {{ cursus.infoHeures }}
                                                    </textarea>
                                                </div>
                                            </form>
                                            <button type="button"
                                                    class="btn btn-dark massaction save-modification"
                                                    data-href="{{ path('cursus_edit',{id: cursus.id}) }}">
                                                Enregistrer les modifications
                                            </button>
                                            <button type="button"
                                                    class="btn btn-dark massaction import-objectif"
                                                    data-href="{{ path('import_info_cursus',{id: cursus.id}) }}"
                                                    >
                                                Importer les objectifs des formations
                                            </button>
                                        </div>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exportExcelModal" tabindex="-1" role="dialog" aria-labelledby="exportExcelModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Export Excel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body">
                        <form class="row">
                            <div class="form-group col-12 mb-3">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="date-filter">
                                    <label class="custom-control-label" for="date-filter">filtrer par date</label>
                                </div>
                            </div>
                            <div class="form-group col-6 dateDebut">
                                <label for="inp" class="inp">
                                    <input type="date" class="input date-pikr" placeholder="&nbsp;" disabled>
                                    <span class="label ellipsis "><i> a partir de :</i></span>
                                    <span class="border"></span>
                                </label>
                            </div>
                            <div class="form-group col-6 dateFin">
                                <label for="inp" class="inp">
                                    <input type="date" class="input date-pikr" placeholder="&nbsp;" disabled>
                                    <span class="label ellipsis"><i> à :</i></span>
                                    <span class="border"></span>
                                </label>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary getExportExcel" data-title="Notifier les élèves" data-href="{{ path('cursus_planning_excel_export',{id: cursus.id}) }}" >
                        Génerer l'export
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Notifier les élèves</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body">
                        <form class="row">
                            <div class="form-group col-12">
                                <libelle for="objectEmail" class="h5">Objet</libelle>
                                <input type="text" class="form-control form-control" id="objectEmail" name="objectEmail" value="Votre planning pour '{{ cursus.libelle }}'">
                            </div>
                            <div class="form-group col-12">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="piece-joint" checked>
                                    <label class="custom-control-label" for="piece-joint">Joindre PDF</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="send-prof" checked>
                                    <label class="custom-control-label" for="send-prof">Notifier les profs</label>
                                </div>
                            </div>
                            <div class="form-group col-12">
                                <libelle for="autresDest" class="h5">Autres destinataires (séparés par ;)</libelle>
                                <input type="text" id="autresDest"  name="corpEmail" class="form-control">
                            </div>
                            <div class="form-group col-12" style="height:250px;">
                                <libelle for="corpEmail" class="h5">Corps</libelle>
                                <textarea id="corpEmail"  name="corpEmail" class="tinymce editme form-control">
                                    <p>Bonjour _nom_ _prenom_,</p>
                                    <br>
                                    <p>Le planning de votre formation test cursus est désormais disponible.</p>
                                    <p>Vous trouverez un exemplaire de celui-ci en pièce-jointe au format PDF.</p>
                                    <br>
                                    <p>Cordialement,</p>
                                    <p>L'équipe LinguaNomad.</p>
									{#<img src="https://plateforme.linguanomad.com/images/signatureLN/1.jpg" alt="signature LN" width="90" height="50" style="display: block; margin:auto;">#}
                                    <img src="https://i.imgur.com/TZooOI0.jpeg" alt="signature LN" width="90" height="50" style="display: block; margin:auto;">
									<br>
                                    <a href="http://plateforme.linguanomad.com" style="text-align: center;display: block;margin-top: 5px;">http://plateforme.linguanomad.com</a>
									<div style="display: flex;">
										<img src="https://i.imgur.com/qufcKYE.png" alt="Partenaire 1" width="70" height="35" style="display: block; margin:auto;">
										<img src="https://i.imgur.com/qEsfJaP.jpeg" alt="Partenaire 2" width="75" height="40" style="display: block; margin:auto;">
										<img src="https://i.imgur.com/ewnlxYh.jpeg" alt="Partenaire 3" width="50" height="40" style="display: block; margin:auto;">
									</div>
                                </textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary sendMail" data-title="Notifier les élèves" data-href="{{ path('cursus_notif',{id: cursus.id}) }}" >Envoyer le(s) email(s)</button>
                    
                </div>
            </div>
        </div>
    </div>
{% endblock body %}

{% block body_before_end %}
    <!-- HTML POUR POPPIN-I-FIEUR -->
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : true,
        'show_cancel_popin' : true,
        'wide': true
    } only %}
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : true,
        'show_cancel_popin' : true,
        'wide': true,
        'tall': true,
        'suffixe_id': '_eleve'
    } only %}
{% endblock %}

{% block javascripts %}
    {# {{ parent() }} #}
    {{ tinymce_init() }}
    <!-- temporaire -->
    <script src="{{ asset('js/ns_rustine_tinymceinline.js') }}?{{ date().timestamp }}"></script>
    <script>
        // routes gestions formation
        window.PATH_FORMATIONS_JSONLIST ="{{ path('liste_formation_json',{'cursus':cursus.id,'filtre_active':'true', 'enforce_order_by':['ordre___asc'] })|raw }}"
        window.PATH_AUTRES_FORMATION_JSONLIST = "{{ path('liste_formation_json',{'notincursus': cursus.id,'role':'admin','filtre_active':'both'})|raw }}"
        window.PATH_ADD_FORMATION = "{{ path('cursus_add_formation', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"
        window.PATH_REMOVE_FORMATION = "{{ path('cursus_remove_formation', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"

        // routes gestions élèves
        window.PATH_ELEVES_JSONLIST ="{{ path('liste_eleve_json',{'cursus':cursus.id,'filtre_active':'true', 'enforce_order_by':['ordre___asc'] })|raw }}"
        window.PATH_AUTRES_ELEVE_JSONLIST = "{{ path('liste_eleve_json',{'notincursus': cursus.id,'role':'admin','filtre_active':'both'})|raw }}"
        window.PATH_ADD_ELEVE = "{{ path('cursus_add_eleve', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"
        window.PATH_REMOVE_ELEVE = "{{ path('cursus_remove_eleve', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"

        // routes gestions professeurs
        window.PATH_PROFS_JSONLIST = "{{ path('liste_prof_json',{'cursus':cursus.id,'filtre_active':'true', 'enforce_order_by':['ordre___asc'] })|raw }}"
        window.PATH_AUTRES_PROF_JSONLIST = "{{ path('liste_prof_json',{'notincursus': cursus.id,'role':'admin','filtre_active':'both'})|raw }}"
        window.PATH_ADD_PROF = "{{ path('cursus_add_prof', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"
        window.PATH_REMOVE_PROF = "{{ path('cursus_remove_prof', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"

        // routes gestions groupes d'élèves
        window.PATH_ADD_GROUPE = "{{ path('cursus_add_groupe',{'id':cursus.id}) }}"
        window.PATH_GROUPES_JSONLIST = "{{ path('liste_groupe_json',{'cursus':cursus.id,'filtre_active':'true', 'enforce_order_by':['ordre___asc'] })|raw }}"
        window.PATH_ADD_GROUPE_FORMATION = "{{ path('cursus_add_groupe_formation',{'id':cursus.id}) }}"
        window.PATH_REMOVE_GROUPE = "{{ path('cursus_remove_groupe', {'id':cursus.id, 'arrayid': '__str_array_pr_ids__'}) }}"

        window.PATH_GET_GROUPE = "{{ path('cursus_get_groupe', {'id': '__id__'}) }}"
    </script>

    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/cursus_formation.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/cursus_eleve.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/cursus_prof.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/cursus_groupe.js') }}?{{ date().timestamp }}"></script>

    <script>
        $(function(){

            $('.date-pikr').each(function () {
                $(this).flatpickr({
                    dateFormat: "Y-m-d",
                    showTimepicker: false,
                    defaultDate: $(this).attr('value')
                })
            });


            $('.save-modification').click(function(){

                showLoader()
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('data-href'),
                    data: {
                        libelle: $('#libelleCursus').val(),
                        objectif: $('#objectifCursus').val(),
                        infoFormations: $('#formationsCursus').val(),
                        infoHeures: $('#heuresCursus').val(),
                    },
                    success: function (data) {
                    hideLoader()
                    },
                });
            });
            
            $('.import-objectif').click(function(){

                showLoader();

                $.post($(this).attr('data-href'))
                    .done(function( data ) {

                        hideLoader();

                        tinymce.get('objectifCursus').execCommand('mceInsertContent', false, data.objectifs);
                        tinymce.get('formationsCursus').execCommand('mceInsertContent', false, data.formations);
                        tinymce.get('heuresCursus').execCommand('mceInsertContent', false, data.heures);
                    });
            });

            $('.getExportPdf').on("click", function () {

                showLoader();
                $.ajax({
                    type: 'POST',
                    xhrFields: {
                        responseType: 'blob'
                    },
                    url: $(this).attr('data-href'),
                    success: function(data) {
                        hideLoader();
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(data);
                        a.href = url;
                        a.download = "{{ file }}";
                        document.body.append(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);
                    }
                })
            });

            $('.sendMail').on("click", function () {

                if(selected_eleve.length > 0){

                    showLoader();

                    data = {
                        eleveIds: window.selected_eleve,
                        objet: $('#objectEmail').val(),
                        corps: $('#corpEmail').val(),
                        pdf: $('#piece-joint').is(":checked"),
                        profs: $('#send-prof').is(":checked"),
                        autresDest: $('#autresDest').val()
                    }

                    $.post($(this).attr('data-href'),data)
                        .done(function( data ) {

                            console.log(data)
                            hideLoader();
                        })
                }else{
                    alert("Vous n'avez séléctionner aucun élève")
                }
            });

            $('#date-filter').on("click", function () {

                console.log($(this).is(":checked"))

                $('.dateDebut input').attr("disabled", true);
                $('.dateFin input').attr("disabled", true);
            
                if($(this).is(":checked") == true){
                    $('.dateDebut input').removeAttr( "disabled");
                    $('.dateFin input').removeAttr( "disabled");
                }
            });
            
            $('.getExportExcel').on("click", function () {

                data = {
                    filtre: $('#date-filter').is(":checked")
                }

                if(data.filtre == true){
                    data.debut = $('.dateDebut input').val();
                    data.fin = $('.dateFin input').val();
                }

                showLoader();

                $.post($(this).attr('data-href'), data)
                    .done(function( response ) {
                        hideLoader();
                        console.log(window.location)
                        window.location.href = '/'+response.tagfile
                    });

            });

        });
    </script>
{% endblock %}