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

{% block title %}Espace usager{% endblock %}

{% block main %}

    {% for flashMessage in app.session.flashbag.get('error') %}
        <div class="alert alert-danger">
            Erreur :  {{ flashMessage }}
        </div>
    {% endfor %}

    {% for flashMessage in app.session.flashbag.get('success') %}
        <div class="alert alert-success">
            Succès : {{ flashMessage }}
        </div>
    {% endfor %}

    {% 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="profil-infos-perso" class="row plr-16 ptb-24">

        <div class="col-xs-12 col-sm-6 p-0">
            <div class="row m-0">

                <!-- BLOC MES INFORMATIONS -->
                <div class="col-xs-12 p-0">
                    <div class="bloc-base p-16">
                        <div class="bloc-title mb-16">
                            <h2 class="align-middle">Mes informations</h2>
                        </div>
                        <div class="row m-0">
                            <div class="col-xs-12 p-0 background-white">
                                <div id="button-mode-edit">
                                    {% if  is_granted('ROLE_PREVIOUS_ADMIN') %}
                                        <a  class="button-rond-md align-middle position-absolute z-3 top-back16 right-16"
                                           style="background-color: gray" title="Non accessible en consultation"><i class="fas fa-pencil-alt" style="color: white"></i>
                                        </a>

                                    {% else %}
                                        <a  class="button-rond-md align-middle position-absolute z-3 top-back16 right-16"
                                           data-toggle="modal" data-target="#userForm"><i class="fas fa-pencil-alt"></i>
                                        </a>
                                    {% endif %}

                                </div>
                                <div class="bloc-base background-white p-48">
                                    <div class="row m-0 mb-16">
                                        <div class="col-xs-6 col-sm-4 p-0">
                                            <span class="info-secondaire display-inline-block">Nom</span>
                                        </div>
                                        <div class="col-xs-6 col-sm-8 p-0">
                                            <p class="display-inline-block">{{ app.user.nom }}</p>
                                        </div>
                                    </div>
                                    <div class="row m-0 mb-16">
                                        <div class="col-xs-6 col-sm-4 p-0">
                                            <span class="info-secondaire display-inline-block">Prénom</span>
                                        </div>
                                        <div class="col-xs-6 col-sm-8 p-0">
                                            <p class="display-inline-block">{{ app.user.prenom }}</p>
                                        </div>
                                    </div>
                                    <div class="row m-0 mb-16">
                                        <div class="col-xs-6 col-sm-4 p-0">
                                            <span class="info-secondaire display-inline-block">Téléphone</span>
                                        </div>
                                        <div class="col-xs-6 col-sm-8 p-0">
                                            <p class="display-inline-block">{{ app.user.telephone }}</p>
                                        </div>
                                    </div>
                                    <div class="row m-0">
                                        <div class="col-xs-6 col-sm-4 p-0">
                                            <span class="info-secondaire display-inline-block">Email</span>
                                        </div>
                                        <div class="col-xs-6 col-sm-8 p-0">
                                            <p class="display-inline-block">{{ app.user.email }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- BLOC CHANGER MDP -->
                <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" style="background-color: gray" title="Non accessible en consultation"><i class="fas fa-lock" style="color: white" ></i></a>
                                        <a  class="action align-middle" style="color:gray">changer mon mot de passe</a>

                                    {% else %}
                                        <a  class="button-rond-lg align-middle mr-16" data-toggle="modal" data-target="#passwordForm"><i class="fas fa-lock"></i></a>
                                        <a  class="action align-middle" data-toggle="modal" data-target="#passwordForm">changer mon mot de passe</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- MES THEMATIQUES D'ABONNEMENT -->
        <div class="col-xs-12 col-sm-6 p-0">
            <div class="bloc-base p-16">
                <div class="bloc-title mb-16">
                    <h2 class="align-middle">Mes thématiques d'abonnement</h2>
                </div>
                <div class="row m-0">
                    <div class="col-xs-12 p-0 background-white">
                        <div class="bloc-base background-white p-48">
                            {% if is_granted('ROLE_PREVIOUS_ADMIN') %}
                                <ul>
                                    {% for them in agence.thematique %}

                                        {% if them.code in app.user.getThematiqueCodes  and them.visible%}<li><label for="them-{{ them.code }}" class="form-check-label">{{ them.intitule }}</label></li>{% endif %}{% endfor %}
                                </ul>
                            {% else %}
                                <form>
                                    {% for them in agence.thematique %}
                                        {% if them.visible %}
                                        <div class="form-group mb-16">
                                            <input id="them-{{ them.code }}" value="{{ them.code }}" type="checkbox" class="mr-8 js-them" {% if them.code in app.user.getThematiqueCodes %}checked="checked"{% endif %}>
                                            <label for="them-{{ them.code }}" class="form-check-label">{{ them.intitule }}</label>
                                        </div>
                                        {% endif %}
                                    {% endfor %}
                                    <p id="js-loading" class="color-warning soft-hide"><i class='fas fa-spinner fa-spin'></i> Sauvegarde en cours</p>
                                </form>
                            {% endif %}



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

    </div>

    <!-- BLOC TABLEAU MES INTERLOCUTEURS -->
    <div id="profil-interlocuteurs" class="row plr-16 ptb-24">
        <div class="col-xs-12 p-0">
            <div class="bloc-base p-16">
                <div class="bloc-title mb-16">
                    <h2 class="align-middle">Mes interlocuteurs</h2>
                </div>
                <div class="row m-0">
                    <div class="col-xs-12 plr-16 pt-48 pb-16 background-white">
                        {% if is_granted('ROLE_PREVIOUS_ADMIN') %}
                            <a  class="button-rond-md align-middle position-absolute z-3 top-back16 right-16" style="background-color: gray" title="Non accessible en consultation"><i class="fas fa-plus" style="color: white"></i></a>
                        {% else %}
                            <a  class="button-rond-md align-middle position-absolute z-3 top-back16 right-16" data-toggle="modal" data-target="#modal-multi-step-03"><i class="fas fa-plus"></i></a>
                        {% endif %}
                        <div class="table-responsive">
                            <table id="myTable" class="display">
                                <thead class="background-blue">
                                    <tr>
                                        <th class="plr-8 ptb-16">Dénomination sociale</th>
                                        <th class="plr-8 ptb-16">Commune</th>
                                        <th class="plr-8 ptb-16">Siret</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for interloc in user.interlocuteurSiret %}
                                    <tr>
                                        <td class="plr-8 ptb-24">{{ interloc.raisonSociale }}</td>
                                        <td class="plr-8 ptb-24">{{ interloc.commune }}</td>
                                        <td class="plr-8 ptb-24">{{ interloc.siret }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL CHANGER MOT DE PASSE -->
    <div class="modal" id="passwordForm">
        <div class="modal-dialog absolute-center m-0">
            <a  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>Changer mon mot de passe</h2>
                    </div>
                </div>
                <div class="modal-body plr-0 ptb-48">
                    <p class="mb-16 text-align-c font-bold">Votre mot de passe doit contenir au moins une lettre majuscule, une minuscule un chiffre.</p>
                    {{ form_start(pwForm, { 'attr': { 'class': 'mb-16 text-align-l' }}) }}
                        <div id="current" class="form-group mb-16">
                            {{ form_label(pwForm.current) }}
                            {{ form_widget(pwForm.current, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                            <p class="help-block"></p>
                        </div>
                        <div id="new" class="form-group mb-16">
                            {{ form_label(pwForm.new) }}
                            {{ form_widget(pwForm.new, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                            <p class="help-block"></p>
                        </div>
                        <div id="confirmation" class="form-group mb-0">
                            {{ form_label(pwForm.confirmation) }}
                            {{ form_widget(pwForm.confirmation, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                            <p class="help-block"></p>
                        </div>
                    {{ form_end(pwForm) }}
                </div>
                <div class="modal-footer p-0 divider-t-none text-align-c">
                    <button id="pwFormSubmit" class="button-square" data-loading-text="<i class='fas fa-spinner fa-spin'></i> Chargement">Valider</button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL CHANGER INFORMATIONS -->
    <div class="modal" id="userForm">
        <div class="modal-dialog absolute-center m-0">
            <a  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 p-0 pb-16 divider-grey-b text-align-c" data-step="1">
                        <h2>Modifier mes informations</h2>
                    </div>

                    <div id="js-error" class="alert alert-danger soft-hide">
                    </div>
                </div>
                <div class="modal-body plr-0 ptb-48">
                    {{ form_start(userForm, { 'attr': { 'id': 'userForm' }}) }}
                    <div class="form-group mb-16" id="nom">
                        {{ form_label(userForm.nom) }}
                        {{ form_widget(userForm.nom, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                        <p class="help-block"></p>
                    </div>
                    <div id="prenom" class="form-group mb-16">
                        {{ form_label(userForm.prenom) }}
                        {{ form_widget(userForm.prenom, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                        <p class="help-block"></p>
                    </div>
                    <div id="telephone" class="form-group mb-16">
                        {{ form_label(userForm.telephone) }}
                        {{ form_widget(userForm.telephone, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                        <p class="help-block"></p>
                    </div>
                    <div id="email" class="form-group mb-16">
                        {{ form_label(userForm.email) }}
                        {{ form_widget(userForm.email, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                        <p class="help-block"></p>
                    </div>
                    {{ form_end(userForm) }}
                </div>
                <div class="modal-footer p-0 divider-t-none text-align-c">
                    <button id="userFormSubmit" class="button-square" data-loading-text="<i class='fas fa-spinner fa-spin'></i> Chargement">Valider</button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL AJOUTER UN INTERLOCUTEUR -->
    <div class="modal" id="modal-multi-step-03">
        <div class="modal-dialog absolute-center m-0">
            <a  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 p-0 pb-16 divider-grey-b text-align-c" data-step="1">
                        <h2>Ajouter un interlocuteur</h2>
                    </div>
                </div>
                <div class="modal-body plr-0 ptb-48">
                    <p class="mb-16 text-align-c font-bold">Veuillez insérer le numéro siret et l'identifiant de
                        l'interlocuteur que vous souhaitez ajouter à votre compte utilisateur.</p>
                    {{ form_start(interlocForm, { 'attr': { 'id': 'interlocForm' }}) }}
                        <div id="siret" class="form-group mb-16">
                            {{ form_label(interlocForm.siret) }}
                            {{ form_widget(interlocForm.siret, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                            <p class="help-block">14 chiffres</p>
                        </div>
                        <div id="identifiant" class="form-group mb-16">
                            {{ form_label(interlocForm.identifiant) }}
                            {{ form_widget(interlocForm.identifiant, { 'attr': { 'class': 'inscription ptb-8 plr-16' }}) }}
                            <p class="help-block"></p>
                        </div>
                    {{ form_end(interlocForm) }}
                </div>
                <div class="modal-footer p-0 divider-t-none text-align-c">
                    <button id="interlocFormSubmit" class="button-square" data-loading-text="<i class='fas fa-spinner fa-spin'></i> Chargement">Valider</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascript %}
    {{ parent() }}
    <script src="{{ asset('js/datatables.js') }}"></script>
    <script src="{{ asset('js/dropzone.js') }}"></script>
    <script src="{{ asset('js/User/espaceUsager.js') }}"></script>
{% endblock %}