{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ ta('manage_users', 'Manage Users') }}{% endblock %}
{% block selected_page %}users{% endblock %}
{% block selected_sub_page %}user_manage{% endblock %}

{% block body %}
    <script>
        oTable = null;
        gUserId = null;
        oldStart = 0;
        $(document).ready(function () {
            // datatable
            oTable = $('#userTable').dataTable($.extend(dataTableOpts, {
                "sAjaxSource": 'ajax/user_manage',
                "aaSorting": [[1, "asc"]],
                "aoColumns": [
                    {bSortable: false, sWidth: '3%', sName: 'file_icon', sClass: "center adminResponsiveHide"},
                    {sName: 'username'},
                    {sName: 'email_address', sClass: "adminResponsiveHide"},
                    {sName: 'account_type', sWidth: '9%', sClass: "center adminResponsiveHide"},
                    {sName: 'last_login', sWidth: '15%', sClass: "center adminResponsiveHide"},
                    {sName: 'space_used', sWidth: '9%', sClass: "center adminResponsiveHide"},
                    {sName: 'total_files', sWidth: '8%', sClass: "center adminResponsiveHide"},
                    {sName: 'status', sWidth: '9%', sClass: "center adminResponsiveHide"},
                    {bSortable: false, sWidth: '18%', sClass: "center dataTableFix responsiveTableColumn"}
                ],
                "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                    setTableLoading();
                    if (oSettings._iDisplayStart != oldStart) {
                        var targetOffset = $('.dataTables_wrapper').offset().top - 10;
                        $('html, body').animate({scrollTop: targetOffset}, 300);
                        oldStart = oSettings._iDisplayStart;
                    }
                    aoData.push({"name": "filterText", "value": $('#filterText').val()});
                    aoData.push({"name": "filterByAccountType", "value": $('#filterByAccountType').val()});
                    aoData.push({"name": "filterByAccountStatus", "value": $('#filterByAccountStatus').val()});
                    aoData.push({"name": "filterByAccountId", "value": $('#filterByAccountId').val()});
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                'oLanguage': $.extend(dataTableOpts.oLanguage, {
                    'sEmptyTable': {{ ta('there_are_no_users_in_the_current_filters', 'There are no users in the current filters.')|json_encode()|raw }}
                })
            }));

            // update custom filter
            $('.dataTables_filter').html($('#customFilter').html());
        });

        function reloadTable()
        {
            oTable.fnDraw(false);
        }

        function confirmRemoveUser(userId)
        {
            showBasicModal('<p>{{ ta('are_you_sure_you_want_to_remove_this_user', 'Are you sure you want to permanently remove this user? All files and data relating to the user will be removed. This can not be undone.') }}</p>', {{ ta('remove_user', 'Remove User')|json_encode()|raw }}, '<button type="button" class="btn btn-primary" data-dismiss="modal" onClick="removeUser(' + userId + '); return false;">{{ ta('remove', 'Remove') }}</button>');
            return false;
        }

        function confirmApproveUser(userId)
        {
            showBasicModal('<p>{{ ta('are_you_sure_you_want_to_approve_this_account', 'Are you sure you want to approve this user account? The user will be notified via email after approval.') }}</p>', {{ ta('approve_user', 'Approve User')|json_encode()|raw }}, '<button type="button" class="btn btn-primary" data-dismiss="modal" onClick="approveUser(' + userId + '); return false;">{{ ta('approve', 'Approve') }}</button>');
            return false;
        }

        function approveUser(userId)
        {
            // get server list for deleting all files
            $.ajax({
                type: "POST",
                url: "ajax/user_approve",
                data: {userId: userId},
                dataType: 'json',
                success: function (json) {
                    if (json.error == true)
                    {
                        showError(json.msg);
                    } else
                    {
                        showSuccess(json.msg);
                        reloadTable();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showError({{ ta('failed_connecting_to_server', 'Failed connecting to server, please try again later.')|json_encode()|raw }});
                }
            });
        }

        function confirmDeclineUser(userId)
        {
            showBasicModal('<p>{{ ta('are_you_sure_you_want_to_decline_this_account', 'Are you sure you want to decline this user account? The account will be removed and the user notified of the non-approval via email.') }}</p>', {{ ta('decline_user', 'Decline User')|json_encode()|raw }}, '<button type="button" class="btn btn-primary" data-dismiss="modal" onClick="declineUser(' + userId + '); return false;">{{ ta('decline', 'Decline') }}</button>');
            return false;
        }

        function declineUser(userId)
        {
            // get server list for deleting all files
            $.ajax({
                type: "POST",
                url: "ajax/user_decline",
                data: {userId: userId},
                dataType: 'json',
                success: function (json) {
                    if (json.error == true)
                    {
                        showError(json.msg);
                    } else
                    {
                        showSuccess(json.msg);
                        reloadTable();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showError({{ ta('failed_connecting_to_server', 'Failed connecting to server, please try again later.')|json_encode()|raw }});
                }
            });
        }

        function removeUser(userId)
        {
            userDeleteConfirm(userId);
        }
        
        function userDeleteConfirm(userId)
        {
            // delete actual user
            $.ajax({
                type: "POST",
                url: "ajax/user_remove",
                data: {userId: userId},
                dataType: 'json',
                success: function (json) {
                    // compile result
                    if (json.error == true)
                    {
                        showError(json.msg);
                    } else
                    {
                        showSuccess(json.msg);
                    }
                    userDeleteFinish();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showError({{ ta('failed_connecting_to_server', 'Failed connecting to server, please try again later.')|json_encode()|raw }});
                    userDeleteFinish();
                }
            });
        }

        function userDeleteFinish()
        {
            reloadTable();

            // scroll to the top of the page
            $("html, body").animate({scrollTop: 0}, "slow");
        }

        function confirmImpersonateUser(userId)
        {
            msg = {{ ta('confirm_account_impersonate_message_1', 'Are you sure you want to login as this user account? You\'ll have access to their account as they would see it.')|json_encode()|raw }};
            msg += "\n\n";
            msg = {{ ta('confirm_account_impersonate_message_2', 'When you logout of the impersonated user, you\'ll be reverted to this admin user account again.')|json_encode()|raw }};
            if (confirm(msg))
            {
                window.location = "user_manage?impersonate=" + userId;
                return true;
            }

            return false;
        }
    </script>

    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>{{ block('title') }}</h3>
                </div>
            </div>
            <div class="clearfix"></div>

            {{ msg_page_notifications|raw }}

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>{{ ta('user_list', 'User List') }}</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <table id="userTable" class="table table-striped table-only-border dtLoading bulk_action">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th class="align-left">{{ ta('username', 'Username') }}</th>
                                        <th>{{ ta('email_address', 'Email Address') }}</th>
                                        <th>{{ ta('type', 'Type') }}</th>
                                        <th class="align-left">{{ ta('last_login', 'Last Login') }}</th>
                                        <th class="align-left">{{ ta('space_used', 'HD Used') }}</th>
                                        <th>{{ ta('files', 'Files') }}</th>
                                        <th>{{ ta('status', 'Status') }}</th>
                                        <th class="align-left">{{ ta('actions', 'Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="20">{{ ta('admin_loading_data', 'Loading data...') }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="x_panel">
                        <div class="btn-group">
                            <div class="dropup">
                                <a href="user_add" class="btn btn-default dropdown-toggle" type="button">
                                    {{ ta('add_user', 'Add User') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="customFilter" id="customFilter" style="display: none;">
        <label>
            {{ ta('filter_results', 'Filter Results') }}:
            <input name="filterText" id="filterText" type="text" class="form-control" value="{{ filterText }}" onKeyUp="reloadTable();
                return false;" style="width: 160px;"/>
        </label>
        <label class="adminResponsiveHide" style="padding-left: 6px;">
            {{ ta('by_type', 'By Type') }}:
            <select name="filterByAccountType" id="filterByAccountType" onChange="reloadTable();
                return false;" style="width: 160px;" class="form-control">
                <option value="">- {{ ta('all', 'all') }} -</option>
                {% for accountTypeDetail in accountTypeDetails %}
                    <option value="{{ accountTypeDetail['id'] }}"{{ filterByAccountType == accountTypeDetail['id']?' SELECTED':'' }}>{{ accountTypeDetail['label']|title }}</option>
                {% endfor %}
            </select>
        </label>
        <label class="adminResponsiveHide" style="padding-left: 6px;">
            {{ ta('by_status', 'By Status') }}:
            <select name="filterByAccountStatus" id="filterByAccountStatus" onChange="reloadTable();
                return false;" style="width: 120px;" class="form-control">
                <option value="">- {{ ta('all', 'all') }} -</option>
                {% for accountStatusDetail in accountStatusDetails %}
                    <option value="{{ accountStatusDetail }}"{{ filterByAccountStatus == accountStatusDetail?' SELECTED':'' }}>{{ accountStatusDetail|title }}</option>
                {% endfor %}
            </select>
        </label>
        <input type="hidden" value="{{ filterByAccountId }}" name="filterByAccountId" id="filterByAccountId"/>
    </div>
{% endblock %}