{% extends '@AdminLTE/layout/cfgodd-layout.html.twig' %}

{% block page_title %}{% trans %}admin.user.title{% endtrans %}{% endblock %}


{% block page_content %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
                {{ form_row(form.familyName) }}
                {{ form_row(form.givenName) }}
                {{ form_row(form.email) }}
                {{ form_row(form.telephone) }}
                {{ form_row(form.typestructure) }}

                

                <div id="ministere" style="display: none;">
                {{ form_row(form.ministry) }}
                {{ form_row(form.direction) }}
                </div>

                <div id="departement" style="display: none;">
                {{ form_row(form.department) }}
                </div>
                <div id="commune" style="display: none;">
                {{ form_row(form.commune) }}
                </div>

                <div id="enabled" style="display: none;">
                {% if form.enabled is defined %}
                    {{ form_row(form.enabled) }}
                {% endif %}
                </div>
                
                {% if show %}
                    {{ form_row(form.role) }}
                {% endif %}
                
                {{ form_row(form.office) }}

                {% if form.roles is defined %}
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2" for="user_roles">{% trans %}basics.roles{% endtrans %}</label>
                        <div class="col-sm-offset-2 col-sm-10">{{ form_widget(form.roles) }}</div>
                    </div>
                {% endif %}
                <div class="form-group row">
                    <div class="col-sm-2"><a href="{{ path('app_users') }}" class="btn btn-block btn-default">{% trans %}basics.cancel{% endtrans %}</a></div>
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-block btn-primary">{% trans %}basics.save{% endtrans %}</button>
                    </div>
                </div>
            {{ form_end(form) }}
        {% endblock %}
    {% endembed %}

{% endblock %}


{% block javascripts %}

    <script type="text/javascript">
        if({{type}}==0){
           enabled.style.display = "block";
            ministere.style.display = "block";
            commune.style.display = "none";
            departement.style.display = "none";
        }
        if({{type}}==1){
                enabled.style.display = "block";
                ministere.style.display = "none";
                commune.style.display = "block";
                departement.style.display = "block";
            }
        if({{type}}==2){
                enabled.style.display = "block";
                ministere.style.display = "none";
                commune.style.display = "none";
                departement.style.display = "block";
            }
        function typestructure(type){
            var enabled = document.getElementById("enabled");
            var ministere = document.getElementById("ministere");
            var commune = document.getElementById("commune");
            var departement = document.getElementById("departement");
            if(!type){
                enabled.style.display = "none";
                ministere.style.display = "none";
                commune.style.display = "none";
                departement.style.display = "none";
            }else if(type==0){
                enabled.style.display = "block";
                ministere.style.display = "block";
                commune.style.display = "none";
                departement.style.display = "none";
            }else if(type==1){
                enabled.style.display = "block";
                ministere.style.display = "none";
                commune.style.display = "block";
                departement.style.display = "block";
            }else if(type==2){
                enabled.style.display = "block";
                ministere.style.display = "none";
                departement.style.display = "block";
                commune.style.display = "none";
            }
        }
    </script>

    <script>
        let $username = $('#user_username');
        let $email = $('#user_email');
        let $firstname = $('#user_firstname');
        let $lastname = $('#user_lastname');
        let $ministry = $('#user_ministry');
        let $department = $('#user_department');

        $ministry.change(function () {
            let $form = $ministry.closest('form')

            let data = {}
            data[$username.attr('name')] = $username.val();
            data[$email.attr('name')] = $email.val();
            data[$firstname.attr('name')] = $firstname.val();
            data[$lastname.attr('name')] = $lastname.val();
            data[$ministry.attr('name')] = $ministry.val()

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#user_direction').replaceWith(
                        $(html).find('#user_direction')
                    )
                }
            });
        });

        $department.change(function() {
            let $form = $department.closest('form');

            let data = {};
            data[$username.attr('name')] = $username.val();
            data[$email.attr('name')] = $email.val();
            data[$firstname.attr('name')] = $firstname.val();
            data[$lastname.attr('name')] = $lastname.val();
            data[$department.attr('name')] = $department.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#user_commune').replaceWith(
                        $(html).find('#user_commune')
                    );
                }
            });
        });
    </script>
{% endblock %}