<?php echo $this->extend('/template'); ?>
<?php echo $this->section('content') ?>

<head>
    <title>PENGELOLAAN USER & ROLE</title>
</head>

<h3>
    <div class='glyphicon glyphicon-th-large'></div>&nbsp;&nbsp;<b>MENGELOLA USER / PEGAWAI</b>
</h3>

<table id="dgkuser" title=" " class="easyui-datagrid" style="width:100%;height:600px" url="kuserdata" toolbar="#toolbar" data-options="
            toolbar:toolbar,
            remoteFilter:true,
            nowrap:false,
            pagination:'true',
            queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},
            " , rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="usernamet" width="75">USERNAME</th>
            <th field="realname" width="150">NAMA PEGAWAI</th>
            <th field="nip" width="100">NIP</th>
            <th field="jbt_nama" width="100">NAMA JABATAN</th>
            <th field="email" width="100">EMAIL</th>
            <th field="rolet" width="75" align="left">ROLE</th>
            <th field="aksi" width="100" align="center">AKSI</th>


        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" plain="true" onclick="newUser()">'<span class="fa fa-plus-circle" style="font-size:30px;color:red;" data-toggle="tooltip" data-placement="top" title="Menambah Data"></span></a>

</div>


<div id="dlgkuser" class="easyui-dialog" style="width:900px;height:600px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
    <div class="ftitle">Data User</div>
    <form id="fmkuser" method="post" novalidate>

        <div id="edithide">
            <div class="fitem">
                <input id="username" name="username" class="easyui-textbox" multiline="false" label="Username" labelPosition="left" labelWidth="140px" style="width:90%;">
            </div>
            <div class="fitem">
                <input id="password" name="password" class="easyui-textbox" multiline="false" label="Password" labelPosition="left" labelWidth="140px" style="width:90%;">
            </div>
        </div>
        <div class="fitem">
            <input name="realname" class="easyui-textbox" multiline="false" label="Nama Lengkap" labelPosition="left" labelWidth="140px" style="width:90%;">
        </div>
        <div class="fitem">
            <input name="nip" class="easyui-textbox" multiline="false" label="NIP" labelPosition="left" labelWidth="140px" style="width:90%;">
        </div>


        <div class="fitem">
            <input name="user_phone" class="easyui-textbox" multiline="false" label="Phone/HP" labelPosition="left" labelWidth="140px" style="width:60%;">
        </div>

        <div class="fitem">
            <input name="email" class="easyui-textbox" multiline="false" label="e-Mail" labelPosition="left" labelWidth="140px" style="width:60%;">
        </div>


        <div class="fitem">
            <input class="easyui-combobox" name="active" style="width:40%;" label="Aktif" labelPosition="left" labelWidth="140px" data-options="
    		    url:'db_active',
    		    method:'get',
                value:0,
    		    valueField:'value',
    		    textField:'text',
    		    fitColumn:'true',
    		    panelHeight:'auto',
    		">
        </div>
        <div class="fitem">
            <input class="easyui-combobox" name="role" style="width:40%;" label="Role" labelPosition="left" labelWidth="140px" data-options="
    		    url:'db_role',
    		    method:'get',
    		    valueField:'value',
    		    textField:'text',
    		    fitColumn:'true',
    		    panelHeight:'auto',
    		">
        </div>

    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgkuser').dialog('close')" style="width:90px">Cancel</a>
</div>



<div id="dlgkpass" class="easyui-dialog" style="width:400px;height:250px;padding:10px 20px" closed="true" buttons="#dlg-buttonspass">
    <div class="ftitle">Set / Ubah Password</div>
    <form id="fmkpass" method="post" novalidate>

        <input type="hidden" id="user_id" name="user_id" value="" />
        <div class="fitem">
            <input id="password" name="password" class="easyui-textbox" multiline="false" label="Password" labelPosition="left" labelWidth="140px" style="width:90%;">
        </div>
    </form>
</div>
<div id="dlg-buttonspass">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="savepassword()" style="width:90px">Simpan</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgkpass').dialog('close')" style="width:90px">Cancel</a>
</div>

<script>
    function newUser() {
        $('#dlgkuser').dialog('open').dialog('setTitle', 'User Baru');
        $('#fmkuser').form('clear');
        $('#edithide').show();
        url = 'kusersimpan';
    }

    function editUser() {
        var row = $('#dgkuser').datagrid('getSelected');
        if (row) {
            $('#dlgkuser').dialog('open').dialog('setTitle', 'Edit User');
            $('#fmkuser').form('clear');
            $('#fmkuser').form('load', row);

            //$('#username').textbox('readonly');
            //$('#password').textbox('readonly');
            $('#edithide').hide();

            url = 'kuserupdate/' + row.user_id;
        }
    }

    function saveUser() {
        $('#fmkuser').form('submit', {
            url: url,
            onSubmit: function(param) {
                param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                return $(this).form('validate');
            },
            success: function(result) {
                var result = eval('(' + result + ')');
                if (result.errorMsg) {
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlgkuser').dialog('close'); // close the dialog
                    $('#dgkuser').datagrid('reload'); // reload the user data
                }
            }
        });
    }


    function destroyUser() {
        var row = $('#dgkuser').datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', 'Yakin akan menghapus baris ini?', function(r) {
                if (r) {
                    $.post('kuserdel', {
                        user_id: row.user_id,
                        csrftoken_erb2021: '<?= csrf_hash() ?>'
                    }, function(result) {
                        if (result.success) {
                            $('#dgkuser').datagrid('reload'); // reload the user data
                            $('#dlgkuser').dialog('close'); // close the dialog
                        } else {
                            $.messager.show({ // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        }
    }
</script>

<script>
    $(function() {
        var dg = $('#dgkuser').datagrid({});
        dg.datagrid('enableFilter', [{
                field: 'username',
                type: 'textbox'
            }, {
                field: 'realname',
                type: 'textbox'
            }, {
                field: 'email',
                type: 'label'
            }, {
                field: 'jbt_nama',
                type: 'label'
            }, {
                field: 'active',
                type: 'label'
            }, {
                field: 'nip',
                type: 'textbox'
            }, {
                field: 'user_phone',
                type: 'label'
            }, {
                field: 'rolet',
                type: 'label'
            },
            {
                field: 'user_id',
                type: 'label'
            }, {
                field: 'unitkerja',
                type: 'label'
            }, {
                field: 'aksi',
                type: 'label'
            }


        ]);
    });
</script>

<script>
    function setpassword(user_id) {
        $('#dlgkpass').dialog('open').dialog('setTitle', 'Edit / Ubah Password');
        $('#fmkpass').form('clear');
        $('#user_id').val(user_id);
        //$('#csrftoken_erb2021').val("<?= csrf_hash() ?>");
        url = 'kpass';
    }



    function savepassword() {
        $('#fmkpass').form('submit', {
            url: url,
            onSubmit: function(param) {
                param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                return $(this).form('validate');
            },
            success: function(result) {
                var result = eval('(' + result + ')');
                if (result.errorMsg) {
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlgkpass').dialog('close'); // close the dialog
                    $('#dgkuser').datagrid('reload'); // reload the user data
                }
            }
        });
    }



    function setactive(user_id, status) {
        $.ajax({
            url: "setactive",
            type: "POST",
            data: {
                csrftoken_erb2021: '<?= csrf_hash() ?>',
                user_id: user_id,
                status: status
            },
            beforeFilter: function() {
                //$('#loading').show();
            },
            success: function(html) {
                $('#dgkuser').datagrid('reload');
                //$('#loading').hide();
                var dt = JSON.parse(html);
                // reload the user data
            }

        });

    }


    /*
    function myformatter(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
    }

    function myparser(s) {
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[0], 10);
        var m = parseInt(ss[1], 10);
        var d = parseInt(ss[2], 10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
            return new Date(y, m - 1, d);
        } else {
            return new Date();
        }
    }
    */

    function myformatter(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
//        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
        return (d < 10 ? ('0' + d) : d) + '-' + (m < 10 ? ('0' + m) : m)+ '-' + y ;
    }

    function myparser(s) {
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[2], 10);
        var m = parseInt(ss[1], 10);
        var d = parseInt(ss[0], 10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
            return new Date(y, m - 1, d);
        } else {
            return new Date();
        }
    }

</script>

<?php echo $this->endSection() ?>