{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-users"></i>{{ 'user.manage.title'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button class="button save small" type="button" data-open="modalAddUser"><i class="fa fa-plus"></i> {{ 'user.manage.button.add'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <table class="style-light mt-1">
            <thead>
                <tr>
                    <th>{{ 'user.manage.column.name'|trans }}</th>
                    <th>{{ 'user.manage.column.email'|trans }}</th>
                    <th>{{ 'user.manage.column.level_access'|trans }}</th>
                    <th>{{ 'user.manage.column.last_login'|trans }}</th>
                    <th class="text-right">{{ 'user.manage.column.action'|trans }}</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    {% set whoami = false %}
                    {% if user.id == app.user.id %}
                        {% set whoami = true %}
                    {% endif %}
                    {% set admin_user = false %}
                    {% set manager = false %}
                    {% set customer = false %}
                    {% if constant('App\\Entity\\Security\\App\\SecurityUser::ROLE_MANAGER') in user.rolesApp %}
                        {% set manager = true %}
                    {% endif %}
                    {% if constant('App\\Entity\\Security\\App\\SecurityUser::ROLE_CUSTOMER_MANAGER') in user.rolesApp %}
                        {% set customer = true %}
                    {% endif %}
                    {% if constant('App\\Entity\\Security\\App\\SecurityUser::ROLE_USER_ADMIN') in user.rolesApp %}
                        {% set admin_user = true %}
                    {% endif %}


{#                    {% for group in user.groups %}#}
{#                        {% if group.code == constant('App\\Entity\\Security\\App\\Security::GROUP_ADMIN_USER') %}#}
{#                            {% set admin_user = true %}#}
{#                        {% endif %}#}
{#                        {% if group.code == constant('App\\Entity\\Security\\App\\SecurityGroup::GROUP_MANAGER') %}#}
{#                            {% set manager = true %}#}
{#                        {% endif %}#}
{#                        {% if group.code == constant('App\\Entity\\Security\\App\\SecurityGroup::GROUP_CUSTOMER') %}#}
{#                            {% set customer = true %}#}
{#                        {% endif %}#}
{#                    {% endfor %}#}
                    <tr data-uid="{{ user.id }}">
                        <td>
                            {% if user.isActive %}
                                <i class="fa fa-check text-green"></i>
                            {% else %}
                                <i class="fa fa-times text-red"></i>
                            {% endif %}
                            {{ user.fullName('medium') }}
                        </td>
                        <td>{{ user.email }}</td>
                        <td>
                            <i class="fa fa-sitemap {% if manager %}text-green{% else %}text-red{% endif %}" title="{{ ('icon.title.' ~ constant('App\\Entity\\Security\\App\\SecurityUser::ROLE_MANAGER')|lower)|trans }}"></i>&nbsp;
                            <i class="fa fa-credit-card {% if customer %}text-green{% else %}text-red{% endif %}" title="{{ ('icon.title.' ~ constant('App\\Entity\\Security\\App\\SecurityUser::ROLE_CUSTOMER_MANAGER')|lower)|trans }}"></i>&nbsp;
                            <i class="fa fa-users {% if admin_user %}text-green{% else %}text-red{% endif %}" title="{{ ('icon.title.' ~ constant('App\\Entity\\Security\\App\\SecurityUser::ROLE_USER_ADMIN')|lower)|trans }}"></i>
                        </td>
                        <td>{% if user.lastLogin %}{{ user.lastLogin|date('d/m/Y H:i') }}{% endif %}</td>
                        <td class="action">
                            <i class="fa fa-edit fa-border pointer text-orange edit_user action"></i>
                            <i class="fa fa-unlock-alt fa-border text-orange pointer change_password action {% if whoami or not user.isActive %}disabled{% endif %}"></i>
                            <i class="fa fa-exchange fa-border text-azur pointer swap_kanban action {% if user.kanbans|length < 1 %}disabled{% endif %}"></i>
                            <i class="fa fa-eye fa-border text-purple pointer view_history_login action"></i>
                            <i class="fa fa-envelope-o fa-border text-azur pointer send_invitation action {% if whoami or not user.token %}disabled{% endif %}"></i>
                            <i class="fa {% if user.isActive %}fa-trash{% else %}fa-refresh{% endif %} fa-border pointer action {% if whoami or (not user.lastLogin and user.needActivation) %}text-grey disabled{% elseif user.isActive %}text-red disable_user{% else %}enable_user text-green{% endif %}"
                               {% if not user.lastLogin and user.needActivation %}title="{{ 'user.manage.button.toggle.title.disabled'|trans }}" {% endif %}></i>

                            {#                            <button type="button" class="button round small edit edit_user mt-0-5 mb-0-5"><i class="fa fa-edit"></i></button>#}
{#                            <button type="button" class="button round small mt-0-5 mb-0-5 {% if not user.lastLogin and user.needActivation %}disabled{% elseif user.isActive %}delete disable_user{% else %}enable_user green{% endif %}" {% if not user.lastLogin and user.needActivation %}title="{{ 'user.manage.button.toggle.title.disabled'|trans }}" {% endif %}><i class="fa {% if user.isActive %}fa-trash{% else %}fa-refresh{% endif %}"></i></button>#}
{#                            <button type="button" class="button round small edit change_password mt-0-5 mb-0-5"><i class="fa fa-unlock-alt"></i></button>#}
{#                            <button type="button" class="button round small purple view_history_login mt-0-5 mb-0-5"><i class="fa fa-eye"></i></button>#}
{#                            <button type="button" class="button round small primary send_invitation mt-0-5 mb-0-5"><i class="fa fa-envelope-o"></i></button>#}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="reveal" id="modalAddUser" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.add.title'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formAddUser, {'attr': {'id': 'formAddUser'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell shrink">
                    {{ form_label(formAddUser.gender) }}
                    {{ form_widget(formAddUser.gender) }}
                </div>
                <div class="cell auto">
                    {{ form_label(formAddUser.firstName) }}
                    {{ form_widget(formAddUser.firstName) }}
                </div>
            </div>
            <div class="grid-x grid-padding-x">
                <div class="cell small-6 ">
                    {{ form_label(formAddUser.lastName) }}
                    {{ form_widget(formAddUser.lastName) }}
                </div>
                <div class="cell small-6 ">
                    {{ form_label(formAddUser.email) }}
                    {{ form_widget(formAddUser.email,{'attr':{'data-parsley-email-can-be-used':true}}) }}
                </div>
                <div class="cell small-12">
                    {{ form_label(formAddUser.rolesApp) }}
                    {{ form_widget(formAddUser.rolesApp) }}
                </div>
            </div>
            {{ form_end(formAddUser) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_add_user">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalEditUser" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.edit.title'|trans }}</div>
        <div class="reveal-body" id="modalEditUser_body">

        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_edit_user">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal red" id="modalDisableUser" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.disable.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'user.manage.modal.disable.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_disable_user">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalEnableUser" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.enable.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'user.manage.modal.enable.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_enable_user">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalResetPassword" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.reset_password.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'user.manage.modal.reset_password.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_reset_password">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalLastLoginsUser" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.last_logins.title'|trans }}</div>
        <div class="reveal-body" id="modalLastLoginsUser_body">

        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalSendInvitation" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.send_invitation.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'user.manage.modal.send_invitation.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_send_invitation">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalSwapManager" data-reveal>
        <div class="reveal-title">{{ 'user.manage.modal.swap_manager.title'|trans }}</div>
        <div class="reveal-body">
{#            {{ 'user.manage.modal.swap_manager.text'|trans }}#}
            <select name="select_active_manager" id="select_active_manager">
                <option value="placeholder">{{ 'user.manage.swap_manager.placeholder'|trans }}</option>
                {% for manager in active_users %}
                    <option value="{{ manager.id }}">{{ manager.fullName() }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_swap_manager">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            let form_add_user = $('#formAddUser'),
                parsley_form_add_user = $(form_add_user).parsley(parsley_options);
            $('#btn_submit_add_user').click(function () {
                parsley_form_add_user.validate();
                parsley_form_add_user.whenValid().then(function () {
                    $('#btn_submit_add_user').html(btn_spin);
                    $(form_add_user).submit();
                });
            });

            let btn_edit_user = $('.edit_user'),
                btn_disable_user = $('.disable_user'),
                btn_enable_user = $('.enable_user'),
                btn_reset_password = $('.change_password'),
                btn_last_logins = $('.view_history_login'),
                btn_send_invitation = $('.send_invitation'),
                btn_swap_manager = $('.swap_kanban'),
                btn_submit_disable_user = $('#btn_submit_disable_user'),
                btn_submit_enable_user = $('#btn_submit_enable_user'),
                btn_submit_reset_password = $('#btn_submit_reset_password'),
                btn_submit_send_invitation = $('#btn_submit_send_invitation'),
                btn_submit_swap_manager = $('#btn_submit_swap_manager'),
                url_edit_user = "{{ url('app_user_manage_edit_user',{'user':'__00__'}) }}",
                url_toggle_user = "{{ url('app_user_manage_toggle',{'user':'__00__'}) }}",
                url_reset_password = "{{ url('app_user_manage_reset_password',{'user':'__00__'}) }}",
                url_send_invitation = "{{ url('app_user_manage_send_invitation', {'user':'__00__'}) }}",
                modal_edit_user = $('#modalEditUser'),
                modal_edit_user_body = $('#modalEditUser_body'),
                modal_disable_user = $('#modalDisableUser'),
                modal_enable_user = $('#modalEnableUser'),
                modal_reset_password = $('#modalResetPassword'),
                modal_history_login = $('#modalLastLoginsUser'),
                modal_history_login_body = $('#modalLastLoginsUser_body'),
                modal_send_invitation = $('#modalSendInvitation'),
                modal_swap_manager = $('#modalSwapManager')
            ;

            $(btn_swap_manager).click(function () {
                let user_id = $(this).closest('tr').data('uid');
                $('#select_active_manager option[value='+ user_id +']').addClass('hide');
                $('#select_active_manager').on('focus', function () {
                    $('#select_active_manager option[value=placeholder]').remove();
                });
                $(modal_swap_manager).foundation('open');
                $(btn_submit_swap_manager).click(function () {
                    $(this).html(btn_spin);
                    let selected_manager = $('#select_active_manager').val();
                    let url = "{{ url('app_user_manager_swap_manager', {'current_user':'__00__', 'selected_user':'__11__'}) }}";
                    url = url.replace('__00__',user_id);
                    url = url.replace('__11__',selected_manager);
                    $.ajax({
                        url: url,
                        method:'POST',
                        data : {token:"{{ csrf_token('app_user_manager_swap_manager') }}"},
                        success: function (response) {
                            if (response.status === "success"){
                                toastr_success.success("{{ 'user.swap_manager.success'|trans({}, 'flash') }}");
                                $(btn_submit_swap_manager).html("{{ 'save'|trans }}");
                                $(modal_swap_manager).foundation('close');
                                $('#select_active_manager option[value='+ user_id +']').removeClass('hide');
                            } else {
                                toastr_success.error("{{ 'user.swap_manager.error'|trans({}, 'flash') }}");
                                $(btn_submit_swap_manager).html("{{ 'save'|trans }}");
                                $(modal_swap_manager).foundation('close');
                                $('#select_active_manager option[value='+ user_id +']').removeClass('hide');
                            }
                        }
                    })
                });
            });

            $('.edit_user').click(function () {
                let btn = this;
                if(!$(btn).hasClass('disabled')){
                    let user_id = $(btn).closest('tr').data('uid');
                    let url = url_edit_user.replace('__00__',user_id);
                    $.ajax({
                        url:url,
                        method:'GET',
                        success: function (html) {
                            $(modal_edit_user_body).html(html);
                            $(modal_edit_user).foundation('open');
                            let formEditUser = $('#formEditUser');
                            let form_parsley_edit_user = $(formEditUser).parsley(parsley_options),
                                btn_submit_edit_user = $('#btn_submit_edit_user');
                            $(btn_submit_edit_user).click(function(){
                                form_parsley_edit_user.validate();
                                form_parsley_edit_user.whenValid().then(function () {
                                    $(btn_submit_edit_user).html(btn_spin);
                                    $(formEditUser).submit();
                                });
                            });
                        }
                    });
                    $(modal_edit_user).on('closed.zf.reveal', function(){
                        $(modal_edit_user_body).html('');
                    });
                }
            });

            $(btn_disable_user).click(function () {
                if(!$(btn_disable_user).hasClass('disabled')) {
                    let user_id = $(this).closest('tr').data('uid');
                    $(modal_disable_user).foundation('open');
                    $(btn_submit_disable_user).click(function () {
                        $(this).html(btn_spin);
                        url_toggle_user = url_toggle_user.replace('__00__', user_id);
                        $.ajax({
                            method: "POST",
                            url: url_toggle_user,
                            data : {token:"{{ csrf_token('app_user_manage_toggle') }}"},
                            success: function (response) {
                                if (response.status === "success"){
                                    window.location = window.location;
                                } else {
                                    console.log('error toggle - disabled user');
                                }
                            }
                        });
                        //window.location = url_toggle_user;
                    });
                }
            });

            $(btn_enable_user).click(function () {
                if(!$(btn_enable_user).hasClass('disabled')) {
                    let user_id = $(this).closest('tr').data('uid');
                    $(modal_enable_user).foundation('open');
                    $(btn_submit_enable_user).click(function () {
                        $(this).html(btn_spin);
                        url_toggle_user = url_toggle_user.replace('__00__', user_id);
                        $.ajax({
                            method: "POST",
                            url: url_toggle_user,
                            data : {token:"{{ csrf_token('app_user_manage_toggle') }}"},
                            success: function (response) {
                                if (response.status === "success"){
                                    window.location = window.location;
                                } else {
                                    console.log('error toggle - enable user');
                                }
                            }
                        });
                        //window.location = url_toggle_user;
                    });
                }
            });

            $(btn_reset_password).click(function () {
                if(!$(this).hasClass('disabled')) {
                    let user_id = $(this).closest('tr').data('uid');
                    $(modal_reset_password).foundation('open');
                    $(btn_submit_reset_password).click(function () {
                        let current_btn_submit_reset_password = $(this);
                        $(current_btn_submit_reset_password).html(btn_spin);
                        url_reset_password = url_reset_password.replace('__00__', user_id);
                        $.ajax({
                            method: "POST",
                            url: url_reset_password,
                            data : {token:"{{ csrf_token('app_user_manage_reset_password') }}"},
                            success: function (response) {
                                if (response.status === "success"){
                                    toastr_success.success("{{ 'user.mail.resetpassword.success'|trans({}, 'flash') }}");
                                    $(current_btn_submit_reset_password).html("{{ 'save'|trans }}");
                                    $(modal_reset_password).foundation('close');
                                } else {
                                    toastr_success.error("{{ 'user.mail.resetpassword.error'|trans({}, 'flash') }}");
                                    $(current_btn_submit_reset_password).html("{{ 'save'|trans }}");
                                    $(modal_reset_password).foundation('close');
                                }
                            }
                        });
                        //window.location = url_reset_password;
                    });
                }
            });

            $(btn_last_logins).click(function () {
                if(!$(btn_last_logins).hasClass('disabled')) {
                    let user_id = $(this).closest('tr').data('uid');
                    let url_history_login = "{{ url('app_user_manage_last_logins', {'user': '__00__'}) }}";
                    url_history_login = url_history_login.replace('__00__', user_id);
                    $.ajax({
                        url: url_history_login,
                        method: 'GET',
                        success: function (html) {
                            $(modal_history_login_body).html('');
                            $(modal_history_login_body).html(html);
                            $(modal_history_login).foundation('open');
                        }
                    });
                }
            });

            $(modal_history_login).on('closed.zf.reveal', function () {
                $(modal_history_login_body).html('');
            });

            $(btn_send_invitation).click(function () {
                if(!$(this).hasClass('disabled')) {
                    let user_id = $(this).closest('tr').data('uid');
                    $(modal_send_invitation).foundation('open');
                    $(btn_submit_send_invitation).click(function () {
                        url_send_invitation = url_send_invitation.replace('__00__', user_id);
                        let current_btn_submit_send_invitation = $(this);
                        $(current_btn_submit_send_invitation).html(btn_spin);
                        $.ajax({
                            method: "POST",
                            url: url_send_invitation,
                            data : {token:"{{ csrf_token('app_user_manage_send_invitation') }}"},
                            success: function (response) {
                                if (response.status === "success"){
                                    toastr_success.success("{{ 'user.mail.sendinvitation.success'|trans({}, 'flash') }}");
                                    $(current_btn_submit_send_invitation).html("{{ 'save'|trans }}");
                                    $(modal_send_invitation).foundation('close');
                                } else {
                                    toastr_success.error("{{ 'user.mail.sendinvitation.error'|trans({}, 'flash') }}");
                                    $(current_btn_submit_send_invitation).html("{{ 'save'|trans }}");
                                    $(modal_send_invitation).foundation('close');
                                }
                            }
                        });
                    });
                }
            });

            $(modal_edit_user).on('closed.zf.reveal', function () {
                $(modal_edit_user_body).html('test');
            });
        });
        </script>
{% endblock %}