{% extends "@NovosgaUsers/base.html.twig" %}

{% trans_default_domain 'NovosgaUsersBundle' %}

{% block body %}
    <h1>
        <i class="fa fa-users" aria-hidden="true"></i>
        {{ 'title'|trans }}
        <small>
            {{ 'subtitle'|trans }}
        </small>
    </h1>
        
    <hr>
        
    {{ form_start(form) }}

        {% include 'flashMessages.html.twig' %}

        <div class="row">
            <div class="col-md-5">
                <fieldset>
                    <legend>{{ 'section.general.title'|trans }}</legend>

                    <p class="text-secondary">{{ 'section.general.subtitle'|trans }}</p>

                    {{ form_row(form.login) }}

                    <div class="row">
                        <div class="col-sm-4">
                            {{ form_row(form.nome) }}
                        </div>
                        <div class="col-sm-8">
                            {{ form_row(form.sobrenome) }}
                        </div>
                    </div>

                    {{ form_row(form.email) }}

                    {% if entity.id %}
                        <div class="row">
                            <div class="col-6">
                                {{ form_row(form.ativo) }}
                            </div>
                            <div class="col-6 text-right">
                                <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#dialog-senha">
                                    <i class="fa fa-lock"></i>
                                    {{ 'button.change_password'|trans }}
                                </button>
                            </div>
                        </div>
                    {% endif %}

                    {% if not entity.id %}
                        {{ form_row(form.senha) }}

                        {{ form_row(form.confirmacaoSenha) }}
                    {% endif %}
                </fieldset>
            </div>
            <div class="col-6 ml-auto" id="lotacoes">
                <fieldset>
                    <legend>{{ 'section.lotation.title'|trans }}</legend>

                    <p class="text-secondary">{{ 'section.lotation.subtitle'|trans }}</p>
                    
                    <table class="table">
                        <thead class="thead-light">
                            <tr>
                                <th>{{ 'label.unity'|trans }}</th>
                                <th>{{ 'label.role'|trans }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody v-cloak>
                            <tr v-for="lotacao in lotacoes">
                                <td>
                                    {% verbatim %}
                                        {{ lotacao.unidade.nome }}
                                    {% endverbatim %}
                                    <input type="hidden" name="novasUnidades[]" v-bind:value="lotacao.unidade.id" v-if="lotacao.novo">
                                </td>
                                <td>
                                    {% verbatim %}
                                        {{ lotacao.perfil.nome }}
                                    {% endverbatim %}
                                    <input type="hidden" name="novosPerfis[]" v-bind:value="lotacao.perfil.id" v-if="lotacao.novo">
                                </td>
                                <td class="text-right text-nowrap">
                                    <button type="button" title="{{ 'button.view_permissions'|trans }}" class="btn btn-secondary" v-on:click="viewPerfil(lotacao.perfil.id)">
                                        <i class="fa fa-eye"></i>
                                    </button>

                                    <button type="button" title="{{ 'button.remove'|trans }}" class="btn btn-danger" v-on:click="remove(lotacao)">
                                        <i class="fa fa-remove"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                </td>
                                <td class="text-right">
                                    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#dialog-lotacao">
                                        <i class="fa fa-plus"></i>&nbsp;
                                        {{ 'button.add'|trans }}
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                    
                    {{ form_row(form.lotacoesRemovidas, { attr: { 'v-model': 'idsLotacoesRemovidas' } }) }}
                    
                </fieldset>
            </div>
        </div>
        
        <hr>

        <div class="buttons">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-check"></i> 
                {{ 'button.save'|trans }}
            </button>
            <a href="{{ path('novosga_users_index') }}" class="btn btn-secondary">
                <i class="fa fa-chevron-left"></i>
                {{ 'button.back'|trans }}
            </a>
        </div>

    {{ form_end(form) }}

    
    {# lotação #}
    <div id="dialog-lotacao" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="lotacao-form">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ 'label.lotation'|trans}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <!-- dynamic content loaded by ajax -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            {{ 'button.close'|trans }}
                        </button>
                        <button type="submit" class="btn btn-primary">
                            {{ 'button.add'|trans }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
                        
    {# permissoes #}
    <div id="dialog-perfil" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ 'label.role'|trans }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body" v-if="perfil">
                    <table class="table table-bordered">
                        <tr>
                            <th>
                                {{ 'label.name'|trans }}
                            </th>
                            <td>
                                {% verbatim %}
                                    {{perfil.nome}}
                                {% endverbatim %}
                            </td>
                        </tr>
                        <tr>
                            <th>
                                {{ 'label.description'|trans }}
                            </th>
                            <td>
                                {% verbatim %}
                                    {{perfil.descricao}}
                                {% endverbatim %}
                            </td>
                        </tr>
                        <tr>
                            <th>
                                {{ 'label.permissions'|trans }}
                            </th>
                            <td>
                                {% verbatim %}
                                    <ul>
                                        <li v-for="modulo in perfil.modulos">
                                            {{modulo}}
                                        </li>
                                    </ul>
                                {% endverbatim %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {# dialog mudar senha apenas para usuarios ja cadastrados #}
    {% if passwordForm %}
        <div id="dialog-senha" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    {{ form_start(passwordForm, { attr: { 'v-on:submit.prevent': 'alterarSenha' } }) }}
                        <div class="modal-header">
                            <h5 class="modal-title">{{ 'label.change_password'|trans }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                {{ form_label(passwordForm.senha) }}
                                {{ form_widget(passwordForm.senha, { attr: { 'v-bind:class': "{'is-invalid': errors.senha}" } }) }}
                                <div v-text="errors.senha" v-bind:class="{'invalid-feedback': errors.senha}"></div>
                            </div>
                            <div class="form-group">
                                {{ form_label(passwordForm.confirmacaoSenha) }}
                                {{ form_widget(passwordForm.confirmacaoSenha, { attr: { 'v-bind:class': "{'is-invalid': errors.confirmacaoSenha}" } }) }}
                                <div v-text="errors.confirmacaoSenha" v-bind:class="{'invalid-feedback': errors.confirmacaoSenha}"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">
                                {{ 'button.change'|trans }}
                            </button>
                        </div>
                    {{ form_end(passwordForm) }}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        var unidades = [ {% for unidade in unidades %}{{ unidade.id }},{% endfor %} ];
        var lotacoes = [ 
                {%- for lotacao in entity.lotacoes -%}
                    {
                        id: {{ lotacao.id ? lotacao.id : 'null' }},
                        unidade: {
                            id: {{ lotacao.unidade.id }},
                            nome: "{{ lotacao.unidade.nome }}"
                        },
                        perfil: {
                            id: {{ lotacao.perfil.id }},
                            nome: "{{ lotacao.perfil.nome }}"
                        }
                    },
                {%- endfor -%} 
            ];
        var lotacoesRemovidas = [
                {%- for lotacao in lotacoesRemovidas -%}
                    {
                        id: {{ lotacao.id }},
                        unidade: {
                            id: {{ lotacao.unidade.id }},
                            nome: "{{ lotacao.unidade.nome }}"
                        },
                        perfil: {
                            id: {{ lotacao.perfil.id }},
                            nome: "{{ lotacao.perfil.nome }}"
                        }
                    },
                {%- endfor -%} 
            ];
    </script>
    <script src="{{ asset('bundles/novosgausers/js/script.js') }}"></script>
{% endblock %}