{% extends "menu_left.html.twig" %}

{% block title %}Dépôts de documents{% endblock %}

{% block main %}
    {% if not entete is null and not entete.texte==''%}
        <div class="col-xs-12 p-0">
            <div class="bloc-base p-16">
                {{ entete.texte|raw }}
            </div>
        </div>
    {% endif %}
    <div id="depot-doc-bouton" class="row plr-16 ptb-24">
        <div class="row m-0">
            <!-- BLOC DEPOT DOC-->
            <div class="col-xs-12 p-0">
                <div class="bloc-base p-16">
                    <div class="row m-0">
                        <div class="col-xs-12 p-0 text-align-c">
                            <div class="bloc-action background-white align-middle p-0">
                                {% if is_granted('ROLE_PREVIOUS_ADMIN') %}
                                    <a  class="button-rond-lg align-middle mr-16" title="Non accessible en consultation" style="background-color: gray"><i class="fas fa-upload" style="color: white;"></i></a>
                                    <a  class="action align-middle mr-16" style="color: gray;" >déposer un document</a>
                                {% else %}
                                    <a href="#" class="button-rond-lg align-middle mr-16" data-toggle="modal" data-target="#modal-multi-step-01"><i class="fas fa-upload"></i></a>
                                    <a href="#" class="action align-middle mr-16" data-toggle="modal" data-target="#modal-multi-step-01">déposer un document</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="depot-doc-tableau" class="row plr-16 ptb-24">
        <!-- TABLEAU-->
        <div class="col-xs-12 p-0">
            <div class="bloc-base p-16">
                <div class="bloc-title mb-16">
                    <h2 class="align-middle">Historique de mes dépôts</h2>
                </div>
                <div class="row m-0">
                    <div class="col-xs-12 p-16 background-white">
                        <div class="table-responsive">
                            <table id="myTable" class="display">
                                <thead class="background-blue">
                                    <tr>
                                        <th class="plr-8 ptb-16">Nom du document</th>
                                        <th class="plr-8 ptb-16">Thématique</th>
                                        <th class="plr-8 ptb-16">Date de dépôt</th>
                                        <th class="plr-8 ptb-16">Interlocuteur</th>
                                        {#<th class="plr-8 ptb-16">Lien</th>#}
                                    </tr>
                                </thead>
                                <tbody>
                                {% for doc in documents %}
                                    <tr>
                                        <td class="plr-8 ptb-24">{{ doc.nom }}</td>
                                        <td class="plr-8 ptb-24"><span class="tag ptb-8 plr-16 background-purple">{{ doc.thematiqueCode.code }}</span></td>
                                        <td class="plr-8 ptb-24">{{doc.dateDepot ? doc.dateDepot|date('d/m/Y') }}</td>
                                        <td class="plr-8 ptb-24">{{ doc.interlocuteur.raisonSociale }}</td>
                                        {#<td class="plr-8 ptb-24"><a href="{{ path('downloadFile', { 'id': doc.id, 'type': 'depot'}) }}"  class="button-rond-xs align-middle"><i class="fas fa-download"></i></a></td>#}
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

    <!-- MODAL -->
    <form class="modal multi-step" id="modal-multi-step-01">
        <div class="modal-dialog absolute-center m-0">
            <a href="#" class="button-rond-md align-middle position-absolute z-3 top-back8 right-back8" data-dismiss="modal"><i class="fas fa-times"></i></a>
            <div class="modal-content p-48">
                <div class="modal-header p-0 divider-b-none">
                    <div class="modal-title step-1 p-0 pb-16 divider-grey-b text-align-c" data-step="1">
                        <h2>Dépôt de document</h2>
                    </div>
                    <div class="modal-title step-2 p-0 pb-16 divider-grey-b text-align-c" data-step="2">
                        <h2>Dépôt de document</h2>
                    </div>
                    <div class="modal-title step-3 p-0 pb-16 divider-grey-b text-align-c" data-step="3">
                        <h2>Dépôt de document</h2>
                    </div>
                </div>
                <div class="modal-body step step-1 plr-0 ptb-48">
                    <p class="mb-16 text-align-c font-bold">{{ agence.libelle }}</p>
                    <form class="mb-16 text-align-l">
                        <div class="form-group mb-16">
                            <label for="selectThems" class="mb-8">{{ "SELECT_THEMATIQUE"|trans }}</label>
                            <select class="form-control" id="selectThems">
                                {% for t in thems %}
                                    <option value="{{ t.code }}">{{ t.intitule }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group m-0">
                            <label for="selectInterlocs" class="mb-8">{{ "SELECT_INTERLOC"|trans }}</label>
                            <select class="form-control" id="selectInterlocs">
                                {% for i in interloc %}
                                    <option value="{{ i.siret }}">{{ i.raisonSociale }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-body step step-2 plr-0 ptb-48 text-align-c">
                    <p class="mb-16 font-bold">Agence Artois-Picardie</p>
                    <p class="mb-16"><span class="font-bold">Thématique : </span><span class="themSpan"></span></p>
                    <p class="mb-16"><span class="font-bold">Interlocuteur : </span><span class="interSpan"></span></p>
                    <p class="mb-16"><span class="font-bold">Extensions : </span><span class="extSpan">Toutes</span></p>
                    <div id="dropzone" class="">
                        <form id="depo-dropzone" action="{{ path('documentDepoUpload') }}" class="dropzone p-48">
                            <img id="dz_img" class="mb-16" src="{{ asset('img/icon-upload.png') }}" alt="" />
                            <div class="fallback">
                                <input name="file" type="file" multiple />
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-body step step-3 plr-0 ptb-48 text-align-c">
                    <p class="mb-16 font-bold">Agence Artois-Picardie</p>
                    <p class="mb-16"><span class="font-bold">Thématique : </span><span id="themSpan"></span></p>
                    <p class="mb-16"><span class="font-bold">Interlocuteur : </span><span id="interSpan"></span></p>
                    <div class="mb-8 text-align-l">
                        <p id="js-status">Upload du fichier</p>
                    </div>
                    <div class="progress mb-8">
                        <div id="uploadBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-0 divider-t-none text-align-c">
                    <a id="js_depoDocStep" class="button-square step step-1" data-step="1">Suivant</a>

                    <a href="#" class="button-square-prev step step-2" data-step="2" onclick="sendEvent('#modal-multi-step-01', 1)">Précédent</a>
                    <a id="removeFile" href="#" class="button-square step step-2" data-step="2">Retirer fichier</a>
                    <a id="submitFile" href="#" class="button-square step step-2" data-step="2" onclick="sendEvent('#modal-multi-step-01', 3)">Déposer</a>

                    <a href="#" class="button-square-prev step step-3" data-step="3" onclick="sendEvent('#modal-multi-step-01', 2)">Précédent</a>
                </div>
            </div>
        </div>
    </form>

{% endblock %}

{% block javascript_inline %}
    <script src="{{ asset('js/dz-translate.js') }}"></script>
    <script src="{{ asset('js/documents/depo.js') }}"></script>
    <script>
        var urlCloud = "{{ urlCloud }}";
        
        $('#myTable').DataTable({
            "order": [[ 2, "desc" ]],
                "sPaginationType": "full_numbers",
                "aoColumns": [
                    null,
                    null,
                    { "sType": "date-uk" },
                    null,
                ]
        });
    </script>
{% endblock %}