{% extends "layout.html" %}
{% set letitre = "Gestion des documents" %}
{% block content %}
    <div class="page-header">
        <h1><img src="./static/img/logo-eop.png" /> {{letitre}}</h1>
    </div>
    <div class="pull-right">
        <p>Connecté en tant que : "{{username}}". <a href="{{url_logout}}">Se déconnecter</a></p>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <button type="button" id="btn-distribuer" class="btn btn-danger" data-toggle="button">Distribuer de nouveaux documents</button>
            <!--<a href="#distribuer" data-toggle="tab">Distribuer de nouveaux documents</a>-->
        </div>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <button type="button" id="btn-ramassage" class="btn btn-danger" data-toggle="button">Ramassage et restitution</button>
            <!--            <a href="#gerer" data-toggle="tab">Ramassage et restitution</a>-->
        </div>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <button type="button" id="btn-liste" class="btn btn-danger" data-toggle="button">Liste et état des documents</button>
            <!--            <a href="#historique" data-toggle="tab">Liste et état des documents</a>-->
        </div>
    </div>

    <div class="tabbable">
        <ul class="nav nav-pills" style="display: none;">
            <li class="onglet" id="btn-distribuer"><a id="href-distribuer" href="#distribuer" data-toggle="tab">Distribuer de nouveaux documents</a></li>
            <li class="onglet" id="btn-gerer"><a id="href-gerer" href="#gerer" data-toggle="tab">Ramassage et restitution</a></li>
            <li class="onglet" id="btn-historique"><a id="href-historique" href="#historique" data-toggle="tab">Liste et état des documents</a></li>
        </ul>
        {% from "_macro.html" import affiche_champ, affiche_champ_inline %}
        <div class="tab-content"  style="display: none;">
            <div class="tab-pane active" id="distribuer">
                <!--<h2>Distribuer de nouveaux documents</h2>-->
                <div class="row">
                    <form class="form-horizontal well span8">
                        <fieldset>
                            <legend>Donner un nom de référence et choisir des destinataires</legend>
                            <a href="#" class="pull-right btn-help" data-toggle="popover" data-content="<p><b>Nom de référence</b><br />La référence vous permet d'identifier le processus de distribution durant les différentes étapes de sa vie (distribution, ramassage, restitution, suppression). Il permettra également à l'utilisateur d'identifier le répertoire de destination du ou des documents.</p><p><b>Destinataires</b><br />Vous devez sélectionner un ensemble de destinataires à qui distribuer la référence, celui-ci peut être une classe, une équipe, un groupe, une matière ou un niveau.</p><p><b>Uniquement les élèves</b><br />Par défaut la référence n'est distribuée qu'aux élèves, en cochant l'option <b>À tous les membres</b>, vous pouvez distribuer la référence à tous les membres de l'ensemble.</p>" data-original-title="Aide"><img src="{{ url_for('static', filename='img/little-help-browser.png') }}"></a>
                            {{ affiche_champ(form.nomdev) }}
                            {{ affiche_champ(form.groupe) }}
                            <div class="control-group">
                                <label id="lbldest" class="control-label" for="tempdestinataire">Liste des destinaires</label>
                                <div class="controls span5" style="margin-left: 20px;">
                                    <div id="tempdestinataire" class="well">Aucun destinataire</div>
                                </div>
                            </div>
                            {{ affiche_champ(form.eleve_only, id_="chxEleveOnly") }}
                        </fieldset>
                    </form>
                </div>
                <div class="row">
                    <div class="form-inline well span8">
                        <legend>Sélectionner le(s) document(s) à distribuer</legend>
                        <a href="#" class="pull-right btn-help" data-toggle="popover" data-content="<p><b>Le(s) document(s)</b><br />Le(s) document(s) à distribuer seront accessibles en écriture par les utilisateurs dans leur répertoire personnel dans un sous-répertoire ayant pour nom celui de la référence.</p><p><b>Cliquer</b><br />Vous pouvez cliquer dans la zone grise pâle pour ouvrir un navigateur de fichier. Celui-ci vous permet de choisir un ou plusieurs fichiers d'un même répertoire en maintenant la touche Ctrl + clic.</p><p><b>Glisser</b><br />Vous pouvez faire glisser un ou plusieurs documents dans la zone grise pâle depuis une autre fenêtre.</p><p><b>Document(s) à distribuer</b><br />Il est possible de supprimer un document téléversé par erreur. <b>Vider la liste</b> permet de supprimer tous les documents téléversés.</p>" data-original-title="Aide"><img src="{{ url_for('static', filename='img/little-help-browser.png') }}"></a>
                        <div id="containerdevoir" class="uploader">
                            <div id="parcourirtempdevoir" style="display: none;">
                                <a id="addtempdevoir" class="btn btn-primary">Ajouter un document <i class="icon-plus-sign icon-white"></i></a>
                            </div>
                            <div id="zonetempdevoir" class="dropzone" style="display: none;"><span id="instdevhtml5" class="instructions">Cliquer ou glisser les fichiers ici</span></div>
                            <br/>
                            <div class="">
                                <span>Document(s) à distribuer</span>
                                <div id="tempfichdevoir" class="well">Aucun document</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-inline well span8">
                        <legend>Choisir un ou des documents annexes (optionnel)</legend>
                        <a href="#" class="pull-right btn-help" data-toggle="popover" data-content="<p>Cette étape est optionnelle.</p><p><b>Les annexes</b><br />Les annexes sont des documents qui ne seront pas accessibles en écriture par les utilisateurs.</p><p><b>Cliquer</b><br />Vous pouvez cliquer dans la zone grise pâle pour ouvrir un navigateur de fichier. Celui-ci vous permet de choisir un ou plusieurs fichiers d'un même répertoire en maintenant la touche Ctrl + clic.</p><p><b>Glisser</b><br />Vous pouvez faire glisser un ou plusieurs documents dans la zone grise pâle depuis une autre fenêtre.</p><p><b>Document(s) à distribuer</b><br />Il est possible de supprimer un document téléversé par erreur. <b>Vider la liste</b> permet de supprimer tous les documents téléversés.</p>" data-original-title="Aide"><img src="{{ url_for('static', filename='img/little-help-browser.png') }}"></a>
                        <div id="containerdata" class="uploader">
                            <div id="parcourirtempdata" style="display: none;">
                                <a id="addtempdata" class="btn btn-primary">Ajouter un document <i class="icon-plus-sign icon-white"></i></a>
                            </div>
                            <div id="zonetempdata" class="dropzone" style="display: none;"><span id="instdevhtml5" class="instructions">Cliquer ou glisser les fichiers ici</span></div>
                            <br/>
                            <div class="">
                                <span>Document(s) annexe(s) à distribuer</span>
                                <div id="tempfichdata" class="well">Aucun document</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <form id="distrib_option" class="form-horizontal well span8" action='' method="POST">
                        <fieldset>
                            <legend>Distribuer immédiatement ou plus tard</legend>
                            <a href="#" class="pull-right btn-help" data-toggle="popover" data-content="<p>La distribution peut être différée ou instantanée.</p><p><b>Distribuer immédiatement</b><br />La distribution a lieu après avoir cliqué sur le bouton <b>Valider</b>.</p><p><b>Distribuer plus tard</b><br />Cette option permet de préparer la distribution de document à distance ou dans l'établissement.<br />La distribution se fera en utilisant, au moment voulu, l'option <b>Distribuer</b> de l'application <b>Gestion-postes</b> à l'intérieur de l'établissement.</p>" data-original-title="Aide"><img src="{{ url_for('static', filename='img/little-help-browser.png') }}"></a>
                            {{ affiche_champ(form.rep_dest, id_="chxInPerso") }}
                        </fieldset>
                    </form>
                </div>
                <div class="row">
                    <form id="distrib_option" class="form-horizontal well span8" action='' method="POST">
                        <fieldset>
                            <legend>Envoi automatique de mail aux élèves</legend>
                            <a href="#" class="pull-right btn-help" data-toggle="popover" data-content="<p>Un mail peut être automatiquement envoyé de votre part aux élèves destinataires des documents.</p><p>Pour cela, cochez la case et complétez le sujet et le corps avant de lancer la distribution.</p>" data-original-title="Aide"><img src="{{ url_for('static', filename='img/little-help-browser.png') }}"></a>
                            {{ affiche_champ(form.dist_envoi_mail) }}
                            {{ affiche_champ(form.dist_sujet_mail) }}
                            {{ affiche_champ(form.dist_corps_mail) }}
                        </fieldset>
                    </form>
                </div>
                <div class="row offset1">
                    <div class="span6">
                        <form action='' method="POST" onSubmit="return false">
                            {{ affiche_champ(form.submit, id_="btnSubmitDistribuer", class_="btn btn-large btn-success btn-block", icon="icon-white icon-ok-sign") }}
                        </form>
                    </div>
                </div>
            </div><!-- /tab distribuer -->
            <div class="tab-pane" id="gerer">
                <!--<h2>Gérer les documents distribués</h2>-->
                <div class="row">
                    <form class="form-horizontal well span8" onSubmit="return false">
                        <fieldset>
                            <legend>Documents en attente de ramassage</legend>
                            {{ affiche_champ(form4.list_dev_a_ram) }}
                            {{ affiche_champ(form4.submit, id_="btnSubmitRamasser", class_="btn btn-success btn-block", icon="icon-white icon-ok-sign") }}
                        </fieldset>
                    </form>
                </div><!-- / ramasser -->
                <div class="row">
                    <form class="form-horizontal well span8" onSubmit="return false">
                        <fieldset>
                            <legend>Documents en attente d'être rendus</legend>
                            {{ affiche_champ(form5.list_dev_a_ren) }}
                            {{ affiche_champ(form5.ren_envoi_mail) }}
                            {{ affiche_champ(form5.ren_sujet_mail) }}
                            {{ affiche_champ(form5.ren_corps_mail) }}
                            {{ affiche_champ(form5.submit, id_="btnSubmitRendre", class_="btn btn-success btn-block", icon="icon-white icon-ok-sign") }}
                        </fieldset>
                    </form>
                </div><!-- / rendre -->
            </div><!-- /tab gerer -->
            <div class="clearfix"></div>
            <div class="tab-pane" id="historique">
                <!--<h2>Historique des documents distribués</h2>-->
                    <table id="tableauhistorique" class="table table-bordered">
                        <!--<caption>Liste des documents distribués</caption>-->
                      <thead>
                        <tr>
                          <th>Nom de la référence</th>
                          <th>Destinataires</th>
                          <th>Uniquement aux élèves</th>
                          <th>État</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td colspan="5">Aucun document distribué</td>
                        </tr>
                      </tbody>
                    </table>
            </div><!-- /tab historique -->
        </div><!-- /tab-content -->
    </div><!-- /tabbable -->
    <!-- Modal -->
    {# La fenetre modal est placée à left=-1000px car elle interfère avec les bouton de l'interface #}
    <div class="modal fade" style="width: 650px;left: -1000px;" id="recap" tabindex="-1" role="dialog" aria-labelledby="recapLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="recapLabel">Récapitulatif du document à distribuer</h4>
                </div>
                <div class="modal-body">
                    <ul class="unstyled">
                        <li class="well">
                            <b>Nom de référence : </b><button id="recap-ref" type="button" class="btn btn-primary" disabled="disabled"></button>
                        </li>
                        <li class="well">
                            <button id="recap-inperso" type="button" class="btn btn-warning" disabled="disabled"></button> <button id="recap-eleveonly" type="button" class="btn btn-info" disabled="disabled"></button>
                            <br/><br/>
                            <b>Pour les groupes : </b><span id="recap-groupes"></span>
                        </li>
                        <li class="well">
                            <b>Documents à distribuer : </b><span id="recap-dev"></span>
                        </li>
                        <li class="well">
                            <b>Documents annexes à distribuer : </b><span id="recap-data"></span>
                        </li>
                        <li>
                            <b></b>
                        </li>
                        <li class="well">
                            <b>Envoyer un mail aux élèves : </b><span id="recap-envoimail"></span>
                            <div id="recap-divmail">
                                <b>Sujet : </b><button id="recap-sujet" type="button" class="btn btn-default" disabled="disabled"></button>
                                <textarea id="recap-mail" rows="6" style="width: 100%;" disabled="disabled"></textarea>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                    <button id="recap-confirm" type="button" class="btn btn-primary">Confirmer</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script src="./static/js/plupload.js"></script>
    <script src="./static/js/plupload.html4.js"></script>
    <script src="./static/js/plupload.html5.js"></script>
    <script src="./static/js/jquery.jgrowl.js"></script>
    <script src="./static/js/jquery.dataTables.min.js"></script>
    <script src="./static/js/chosen.jquery.js"></script>
    <script src="./static/js/documents_utils.js"></script>
    <script src="./static/js/documents.js"></script>
    <script src="/piwik/envoleTrackeur.js.php?appli=eop&amp;profil=National_3"></script>
{% endblock %}