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

{% block localstyle %}
<style>
    .captcha_image {
        display:block;
    }
    #alertpassword input,#alertpassword label  { display:none }
    #alertpassword .form-group {margin:0px !important }
</style>
{% endblock %}
{% block body %}
{{ form_start(form) }}

    {% if appModeregistration!="none" %}
        <h1 class="page-header">
        {% if mode=="update" %}
        Confirmation à l'Utilisateur = {{ registration.username }}
        {% elseif mode=="submit" %}
        Inscription
        {% endif %}
        </h1>

        {{ form_widget(form.submit) }} 

        {% if mode=="update" %} 
            {{ form_widget(form.save) }}
            <a class="btn btn-secondary" href="mailto:{{registration.email}}?subject= {{app.session.get('appname')}} : à propos de votre inscription">Envoyer un mail</a>
            <a class="btn btn-secondary" href={{ path('app_'~access~'_registration') }}>Annuler</a>
            <a class="btn btn-danger float-end" href={{ path('app_'~access~'_registration_delete',{id:registration.id}) }} data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?">Supprimer</a>
       {%endif%}
            
        <br><br>
        

        {% if app.session.flashbag.has('error') %}
            <div class='alert alert-danger' style='margin: 5px 0px'>
                <strong>Erreur</strong><br>
                {% for flashMessage in app.session.flashbag.get('error') %}
                    {{ flashMessage | raw }}<br>
                {% endfor %}
            </div>
        {% endif %}

        {% if app.session.flashbag.has('notice') %}
            <div class='alert alert-info' style='margin: 5px 0px'>
                <strong>Information</strong><br>
                {% for flashMessage in app.session.flashbag.get('notice') %}
                    {{ flashMessage | raw }}<br>
                {% endfor %}
            </div>
        {% endif %}

        {% if mode=="send" %}
            <div class='alert alert-info' style='margin: 5px 0px'>
                <strong>Information</strong><br>
                Cette action permet de générer une nouvelle clé de validation et de renouveller la date d'expiration de cette clé.<br>
                Un email sera envoyé à l'utilisateur
            </div>
            <br>
        {% endif %}

        <div class="row">
            {% if mode=="update" %}
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-key fa-fw"></i> Notes Administrateur
                    </div>           
                    <div class="card-body">     
                        {{ form_widget(form.note) }}
                    </div>
                </div>
            </div>
            {%endif%}

            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-key fa-fw"></i> Connexion
                    </div>

                    <div class="card-body">
                        {{ form_row(form.username) }}

                        <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top:-2px; border-radius:0px 0px 0.25rem 0.25rem'>
                            Formatez votre login sous la forme prenom.nom dans la mesure du possible<br>
                            Taille minimum = 5 caractères<br>
                            Caractères interdits = accent, espace, caractères spéciaux sauf @ . - _<br>
                        </div>

                        {% if form.password is defined %}
                            {{ form_row(form.password) }}
                            <div id="alertpassword">{{ form_row(form.passwordplain) }}</div>
                            <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top:-2px; border-radius:0px 0px 0.25rem 0.25rem'>
                                Le mot de passe doit comporter au moins 8 caractères, avec obligatoirement des lettres, chiffres et caractères spéciaux.
                            </div>    

                            {% if form.captcha is defined %}
                                {{ form_row(form.captcha) }}
                            {% endif %}                            
                        {% endif %}
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Motivations
                    </div>

                    <div class="card-body">
                        {{ form_row(form.motivation) }}
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-pencil fa-fw"></i> Informations
                    </div>
                    <div class="card-body">
                        {{ form_row(form.niveau01) }}
                        {{ form_row(form.niveau02) }}                
                        {{ form_row(form.firstname) }}
                        {{ form_row(form.lastname) }}
                        {{ form_row(form.email) }}
                        <div class='alert alert-info alert-email' style='display:none; font-size: 80%;padding: 5px;margin-top:-2px; border-radius:0px 0px 0.25rem 0.25rem'>
                            Votre mail ne fait pas partie des mails professonniels pré-inscrits dans {{app.session.get("appname")}}.<br>
                            S'il s'agit de votre mail professionnel vous devez compléter le formulaire "Motivations" pour que l'administrateur de {{app.session.get("appname")}} valide votre demannde d'inscription.
                        </div>                          
                        {{ form_row(form.isvisible) }}
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <i class="fa fa-sitemap fa-fw"></i> Organisation
                    </div>
                    <div class="card-body">
                        {{ form_row(form.job) }}
                        {{ form_row(form.position) }}
                        {{ form_row(form.postaladress) }}
                        {{ form_row(form.telephonenumber) }}                    
                    </div>
                </div> 
            </div>
        </div>
    {% endif %}
{{ form_end(form) }}
{% endblock %}



{% block localscript %}
<script>
    $(document.body).on("change","#registration_niveau01",function(){
        $("#registration_niveau02").empty();
        select2niveau02();
    });   

    function select2niveau02() {
        $('#registration_niveau02').select2({
            theme: 'bootstrap4',
            language: "fr",
            ajax: {
                data: function (params) {
                    var query = {
                        niveau01: $("#registration_niveau01").val(),
                    }
                    return query;
                }
            }
        });            
    }

    $(document.body).on("focusout","#registration_email",function(){
        console.log("pouet");
        $.ajax({
            method: "POST",
            url: "{{ path('app_whitelist_is') }}",
            data: {
                email:$("#registration_email").val(),
            },
            success: function(data) {
                if(data=="KO") {
                    $("#registration_motivation").attr("required","required");
                    $(".alert-email").show();
                    $("label[for='registration_motivation']").text("Motivation *");
                }
                else {
                    $("#registration_motivation").removeAttr("required");
                    $(".alert-email").hide();
                    $("label[for='registration_motivation']").text("Motivation");
                }
            }            
        });        
    });

    function hideshow() {

        $('#registration_niveau02').select2({
            theme: 'bootstrap4',
            language: "fr",
            ajax: {
                data: function (params) {
                    var query = {
                        niveau01: $("#registration_niveau01").val(),
                    }
                    return query;
                }
            }
        });        
    }

    $(document).ready(function() {
        if(!$("#paneloption").find(".card-body").find("label").length) $("#paneloption").hide();
        hideshow();
    });

</script>
{% endblock %}