<div class="page-title">
    <h1><?php echo $this->user->lang("Staff Management"); ?></h1>
    <span><?php echo $this->user->lang("Organize your staff into staff roles. Update permissions and staff."); ?></span>
</div>
<div class="cm-holder dt-info">
    <div class="head padding-bottom">
        <div class="dt-header">
            <div class="dt-header-left">
                <button class="action-buttons blue" id="addStaffRoleButton">
                    <i class="icon-ic-21"></i>
                    <?php echo $this->user->lang('Add Staff Role'); ?>
                </button>

                <div class="dt-filters">
                </div>
            </div>

            <div class="dt-header-right">
                <div class="filter-group dt-length"></div>
            </div>
        </div>
    </div>
    <div class="dt-wrapper pull-top">
        <div class="table-responsive">
            <table id="table-list" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th class=""><?php echo $this->user->lang('group'); ?></th>
                        <th class=""><?php echo $this->user->lang('Name'); ?></th>
                        <th class=""><?php echo $this->user->lang('Email'); ?></th>
                        <th class=""><?php echo $this->user->lang('Status'); ?></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-actions">
        </div>
    </div>
</div>

<script data-cfasync="false">
    $(document).ready(function () {
        var ajaxUrl = 'index.php?fuse=admin&controller=staff&action=stafflist';

        var addEditWindow = new RichHTML.window({
            url: 'index.php?fuse=admin&view=addstaffform&controller=staff',
            actionUrl: 'index.php?fuse=admin&action=saveadmin&controller=staff',
            showSubmit: true,
            title: clientexec.lang("Add Staff"),
            onSubmit: function (data) {
                jsonData = clientexec.parseResponse(data);
                if (jsonData.success == true) {
                    window.location.reload();
                }
            }
        });

        var table = $('#table-list').DataTable({
            rowGroup: {
                dataSrc: 'groupname',
                startRender: function (rows, group) {
                    return group;
                }
            },
            order: false,
            searching: false,
            "ajax": {
                url: ajaxUrl,
                dataSrc: 'staff',
                data: function(d) {
                    d.sort = 'id';
                    d.dir = 'asc';
                }
            },
            columnDefs: [
                { targets: 0, visible: false }
            ],
            "columns": [
                {
                    'data': 'groupname'
                },
                {
                    "data": "name",
                    render: function (data, type, row) {
                        if (row.id == 0) {
                            return '';
                        } else {
                            return (
                                "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                                "<a href='index.php?fuse=admin&view=editaddadminaccount&controller=staff&adminid=" +
                                row.id +
                                "'>" +
                                clientexec.htmlspecialchars(row.name) +
                                "</a>"
                            );
                        }
                    }
                },
                {
                    "data": "email",
                    className: 'text-center',
                },
                {
                    "data": "status",
                    className: 'text-center',
                },
            ],
            createdRow: function (row, data, dataIndex) {
                if (data.id == 0) {
                    $(row).hide(); // keeps it in the dataset for grouping, but not visible
                }
            }
        });

        $('#addStaffRoleButton').click(function() {
            var content = '<label class="form-label">' + clientexec.lang("Role Name") + '</label>' + '<input type="text" name="name" class="form-control" />';
            RichHTML.msgBox('', {
                type: 'prompt',
                content: content,
                buttons: {
                    button1: {
                        text: clientexec.lang('Save'),
                        class: 'cm-btns orange rich-button'
                    },
                    button2: {
                        text: clientexec.lang('Cancel'),
                        type: 'cancel',
                        class: 'cm-btns red rich-button'
                    }
                }
            },function (result) {
                if (result.btn == clientexec.lang('Save')) {
                    $.post('index.php?fuse=admin&action=save&controller=roles', {
                        groupName: result.elements.name,
                        groupDescription: result.elements.description
                    }, function(data) {
                        clientexec.parseResponse(data);
                        table.ajax.reload();
                    });
                }
            });
        });

        $(document).on("click", '.deleteRoleLink', function(event){
            var role_id = $(this).attr("data-role-id");
            RichHTML.msgBox(clientexec.lang('Are you sure you want to delete this role?'),
            {
                type:"yesno"
            }, function(result) {
                if(result.btn === clientexec.lang("Yes")) {
                    $.post("index.php?fuse=admin&controller=roles&action=delete", {
                        ids:[role_id]
                    },
                    function(data){
                        table.ajax.reload();
                    });
                }
            });
        });

        $('#add-button').on('click', function() {
            addEditWindow.show();
        });

        $(document).on("click", '.addStaffLink', function(event){
            var role_id = $(this).attr("data-role-id");
            addEditWindow.show({params:{role_id:role_id}});
        });

        $('#table-list').on('click', '.edit-link', function(e) {
            e.preventDefault();
            addEditWindow.show({
                params: {
                    id: $(this).data('id'),
                }
            });
        });
    });
</script>