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

{% block main %}

    <div id="accueil-intro" class="row plr-16 ptb-24">
        <!-- INTRO-->
        <div class="col-xs-12 p-0">
            <div class="bloc-base p-16">
                {% 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>
                {% else %}
                    <p>
                    Bienvenue sur votre espace usager.
                    <br/> Vous pouvez télécharger des documents types, visualiser l’historique de vos documents déposés, suivre vos participations financières et vos demandes de paiement.
                    </p>
                {% endif %}

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

    <div id="accueil-contenu" class="row plr-16 ptb-24">
        <!-- BLOC NOTIFICATIONS-->
        <div class="col-xs-12 col-sm-6 p-0">
            <div class="bloc-base p-16">
                <div class="bloc-title mb-16">
                    {#<span class="alert-nombre-blue position-absolute ml-8 mt-back8">2</span>#}
                    <i class="far fa-bell align-middle ico-notification mr-16"></i>
                    <h2 class="align-middle">Notifications</h2>
                </div>
                <div class="row m-0">
                    <div class="col-list-scroll col-xs-12 p-0 background-white">
                        <div class="bloc-base background-white p-16">

                        {% for notif in notifications %}
                        <div class="list-base pb-16 divider-grey-b">
                                <div class="row m-0">
                                    <div class="col-xs-12 col-sm-9 p-0 text-align-l">
                                        <p class="text-overflow">
                                            {#<span class="alert-red"></span>#} {{ notif.intitule }}
                                        </p>
                                        {#<span class="info-secondaire text-overflow">#}
                                        <small>{{ notif.description }}</small>
                                        {#</span>#}
                                    </div>
                                    <div class="col-xs-12 col-sm-3 pl-8 pr-0 text-align-r">

                                        {% if '30/11/-0001' not in notif.date|date('d/m/Y') and notif.date is not null %}
                                            <span class="date">{{notif.date ? notif.date|date('d/m/Y') }}</span>
                                        {% else %}
                                            <span class="date"></span>
                                        {% endif %}


                                    </div>
                                </div>
                                <div class="row m-0 pt-8">
                                    <div class="col-xs-12 p-0 text-align-l">
                                        {% if not notif.agenceCode == null %}
                                            <span class="tag ptb-8 plr-16 mr-8 background-green">{{ notif.agenceCode }}</span>
                                        {% endif %}
                                        {% if not notif.thematiqueCode == null %}
                                            <span class="tag ptb-8 plr-16 mr-8 background-green">{{ notif.thematiqueCode }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                        {% endfor %}
                        {% if notifications is empty %}
                            <div class="list-base pb-16 divider-grey-b">
                                <div class="row m-0">
                                    <div class="col-xs-12 col-sm-9 p-0 text-align-l">
                                        <p class="text-overflow">
                                            {#<span class="alert-red"></span>#} Aucune notification à afficher.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        {% endif %}



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

        <div class="col-xs-12 col-sm-6 p-0">
            <div class="row m-0">
                <!-- BLOC DOCUMENTS RÉCENTS-->
                <div class="col-xs-12 p-0">
                    <div class="bloc-base p-16">
                        <div class="bloc-title mb-16">
                            <h2>Documents récents</h2>
                        </div>
                        <div class="row m-0">
                            <div class="col-xs-12 p-0">
                                <div class="bloc-base background-white p-16">
                                {% if documents|length > 0 %}
                                    {% for doc in documents %}
                                    <div class="list-base p{% if loop.index > 1 %}t{% endif %}b-16 {% if loop.index != documents|length %}divider-grey-b{% endif %}">
                                        <div class="row m-0">
                                            <div class="col-xs-12 p-0 text-align-l">
                                                <p class="text-overflow">
                                                    {{ doc[1].nom }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row m-0 pt-8">
                                            <div class="col-xs-12 col-sm-6 p-0 text-align-l">
                                                <span class="tag ptb-8 plr-16 background-green">{{ "AEAP" }}</span>
                                            </div>
                                            <div class="col-xs-12 col-sm-6 pl-8 pr-0 ptb-0 text-align-r">
                                                <a href="{{ path('downloadFile', { 'id': doc[1].id, 'type': 'dispo'}) }}" class="button-rond-xs align-middle"><i class="fas fa-download"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% else %}
                                    <div class="list-base ptb-16">
                                        <div class="row m-0">
                                            <div class="col-xs-12 p-0 text-align-l">
                                                <p class="text-overflow">
                                                    Aucun document n'a été mis à votre disposition.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 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">
                                <div class="bloc-action background-white 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 style="color : white" class="fas fa-upload"></i></a>
                                    <a  class="action align-middle" 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" data-toggle="modal" data-target="#modal-multi-step-01">déposer un document</a>
                                {% endif %}


                                </div>
                            </div>
                        </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>
        var urlCloud = "{{ urlCloud }}";
    </script>
    
    <script src="{{ asset('js/dz-translate.js') }}"></script>
    <script src="{{ asset('js/documents/depo.js') }}"></script>
{% endblock %}