<?= $this->extend('template/layout') ?>

<?= $this->section('title') ?>User Setting - <?= env('app.name') ?><?= $this->endSection() ?>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
    $uri      = current_url(true);
    $segment1 = $uri->setSilent()->getSegment(1);
    $segment2 = $uri->setSilent()->getSegment(2);
    $segment3 = $uri->setSilent()->getSegment(3);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
    <li class="breadcrumb-item"><?= ucfirst($segment1) ?></li>
    <li class="breadcrumb-item">User Setting</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
    <div class="col-xl-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr border-faded border-top-1 border-right-0 border-left-0 shadow-0">
                <h2>Data User</h2>
                <div class="panel-toolbar pr-3">
                    <ul class="nav nav-pills border-bottom-0" role="tablist">
                        <li class="nav-item">
                            <?= form_button('reload', '<i class="fal fa-sync"></i>', 'reload_datagrid_users()') ?>&nbsp;
                        </li>
                        <li class="nav-item">
                            <button type="button" id="show-modal" class="btn btn-default waves-effect waves-themed" onclick="show_data()"><i class="fal fa-eye"></i></button>&nbsp;
                        </li>

                        <?php if ($rekam == 1) { ?>
                        <li class="nav-item">
                            <button type="button" id="rekam-modal" class="btn btn-default waves-effect waves-themed" onclick="rekam_data()"><i class="fal fa-plus"></i></button>&nbsp;
                        </li>
                        <?php } ?>

                        <?php if ($ubah == 1) { ?>
                        <li class="nav-item">
                            <button type="button" id="ubah-modal" class="btn btn-default waves-effect waves-themed" onclick="ubah_data()"><i class="fal fa-edit"></i></button>&nbsp;
                        </li>
                        <?php } ?>

                        <?php if ($hapus == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('delete', '<i class="fal fa-trash-alt"></i>', 'delete_users()') ?>&nbsp;
                        </li>
                        <?php } ?>

                        <?php if ($exp == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('export', '<i class="fal fa-file-excel"></i>', 'excel_users()') ?>&nbsp;
                        </li>
                        <?php } ?>
                        <?php if ($ubah == 1) { ?>
                        <li class="nav-item">
                            <!-- dropdown button -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-default waves-effect waves-themed dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <?= lang('App.more') ?> <span class="caret"></span>
                                </button>
                                <div class="dropdown-menu">
                                    <a href="#" class="dropdown-item" onclick="active_user()">Activate</a>
                                    <a href="#" class="dropdown-item" onclick="deactive_user()">Deactivate</a>
                                    <a href="#" class="dropdown-item" onclick="ban_users()">Ban User</a>
                                    <a href="#" class="dropdown-item" onclick="unban_users()">Unban User</a>
                                </div>
                            </div>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
            </div><!-- end panel hdr-->

            <div class="panel-container show">
                <div class="panel-content">
                    <div id="panelfit" data-options="border:false">
                        <!-- grid start -->
                        <table id="datagrid_users" toolbar="#toolbar_users" url="<?= site_url('admin/user_setting/datagrid') ?>" data-options="nowrap:true,striped:false,ctrlSelect:true,rownumbers:true,pagination:true,multiSort:true,remoteFilter:true,remoteSort:true,pageSize:10,pageList:[10,20,50,100],clientPaging:false,fit:true" style="min-height: 400px;">
                            <thead data-options="frozen:true">
                                <tr>
                                    <th data-options="field:'ck',checkbox:true"></th>
                                </tr>
                            </thead>
                            <thead>
                                <tr>
                                    <th data-options="field:'username',sortable:true,width:250">Nama</th>
                                    <th data-options="field:'nip',sortable:true,width:150,align:'center'">Nip</th>
                                    <th data-options="field:'whatsapp',sortable:true,width:150">Whatsapp</th>
                                    <th data-options="field:'secret',sortable:true,width:200">Email</th>
                                    <th data-options="field:'nama_sunit',sortable:true,width:200">Unit</th>
                                    <th data-options="field:'nama_sjab',sortable:true,width:200">Jabatan</th>
                                    <th data-options="field:'nama_kantor',sortable:true,width:200">Kantor</th>
                                    <th data-options="field:'active',sortable:true,align:'center',width:50">Active</th>
                                    <th data-options="field:'last_active',sortable:true,width:150,align:'center'">Last Active</th>
                                </tr>
                            </thead>
                        </table>
                        <!-- grid end -->
                    </div>
                </div>
            </div><!-- end panel main content -->
        </div>
    </div>
</div>

<!-- MODAL SHOW -->
<div id="modal-show" class="modal fade default-example-modal-right" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-right">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Detail Data User</h5>
            </div>
         
            <div class="modal-body">
               <div class="table-responsive">
                    <table class="table">
                        <tr>
                            <td width="150">Nama</td>
                            <td width="10">:</td>
                            <td class="username"></td>
                        </tr>
                        <tr>
                            <td width="150">NIP</td>
                            <td width="10">:</td>
                            <td class="nip"></td>
                        </tr>
                        <tr>
                            <td width="150">Email</td>
                            <td width="10">:</td>
                            <td class="email"></td>
                        </tr>
                        <tr>
                            <td width="150">WA</td>
                            <td width="10">:</td>
                            <td class="whatsapp"></td>
                        </tr>
                        <tr>
                            <td width="150">Unit</td>
                            <td width="10">:</td>
                            <td class="nama_sunit"></td>
                        </tr>
                        <tr>
                            <td width="150">Jabatan</td>
                            <td width="10">:</td>
                            <td class="nama_sjab"></td>
                        </tr>
                        <tr>
                            <td width="150">Kantor</td>
                            <td width="10">:</td>
                            <td class="nama_kantor"></td>
                        </tr>
                        <tr>
                            <td width="150">Last Active</td>
                            <td width="10">:</td>
                            <td class="last_active"></td>
                        </tr>
                    </table>
                    <hr>
                    <div class="img-profile text-center">
                        <img id="avatar" src="" alt="Avatar" class="img img-thumbnail" width="250" />
                    </div>
                </div>
                <hr/>
            </div><!-- end modal body -->
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">Close</button>
            </div>
         
        </div>
    </div>
</div><!-- END MODAL SHOW -->

<!-- MODAL REKAM/UBAH -->
<div id="modal-user" class="modal fade default-example-modal-right" data-backdrop="static" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-right">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4" id="mod-title"></h5>
            </div>
            
            <div id="form-konten"></div>
        </div>
    </div>
</div><!-- END MODAL REKAM/UBAH -->

<?= $this->endSection() ?>
<!-- main section end-->

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>

<script type="text/javascript" src="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/jquery.easyui.min.js') ?>"></script>
<script type="text/javascript" src="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/datagrid-filter-1.0.6/datagrid-filter.js') ?>"></script>

<script type="text/javascript">
   $(document).ready(function () {
        adjustpanelfit();
    })

    $(window).resize(function() {
        adjustpanelfit();
    });

    function adjustpanelfit(){
        var height = $(window).height();
        $('#panelfit').panel({
            height:height - 400
        });
    }

    $('.select2').select2({
        dropdownCssClass:'increasezindex'
    });
</script>

<script type="text/javascript">
    /*datagrid*/
    var datagrid_users = $('#datagrid_users').datagrid({
        queryParams: {
            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
        },
        onDblClickRow : function(index,row){
            show_data();
        }
    });
    datagrid_users.datagrid('enableFilter');

    /*reload datagrid users*/
    function reload_datagrid_users()
    {
        $('#datagrid_users').datagrid('removeFilterRule');
        $('#datagrid_users').datagrid('load');
    }

    function show_data()
    {
        var row = $('#datagrid_users').datagrid('getSelected');
        if (row) {
            var avatar = row.avatar;

            if (avatar == 'default.png') {
                $('#avatar').attr('src', '<?= base_url('files/avatar/default.png') ?>');
            } else {
                $.ajax({
                    url: '<?= base_url('admin/user_setting/get_avatar') ?>',
                    type: "post",
                    dataType: 'json',
                    data: {
                        datax: avatar,
                        "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                    },
                    error: function (xhr, status, message) {
                        $.messager.alert(status,message,'warning');
                    },
                    success: function(res) {
                        $('#avatar').attr('src', res.avatar);
                    }
                });
            }

            $('.username').html(row.username);
            $('.nip').html(row.nip);
            $('.email').html(row.secret);
            $('.whatsapp').html(row.whatsapp);
            $('.nama_sunit').html(row.nama_sunit);
            $('.nama_sjab').html(row.nama_sjab);
            $('.nama_kantor').html(row.nama_kantor);
            $('.last_active').html(row.last_active);
            $('#modal-show').modal('show');
        } else {
            $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }
</script>

<?php if ($rekam == 1) { ?>
<!-- FUNCTION REKAM -->
<script type="text/javascript">
    function rekam_data()
    {
        $('#mod-title').html('Rekam User');
        $('#form-konten').load('<?= $link_rekam ?>');
        $('#modal-user').modal('show');
    }
</script>
<?php } ?>

<?php if ($ubah == 1) { ?>
<!-- FUNCTION UBAH -->
<script type="text/javascript">
    function ubah_data()
    {
        var row = $('#datagrid_users').datagrid('getSelected');
        if (row) {
          var id = row.id;
          $('#mod-title').html('Edit User');
          $('#form-konten').load('<?= $link_ubah ?>' + id);
          $('#modal-user').modal('show');
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }
</script>
<?php } ?>

<?php if ($exp == 1) { ?>
<!-- FUNCTION EXPORT DLL -->
<script type="text/javascript">
    function excel_users(){
        $.messager.prompt('<?= lang('App.excel') ?>', '<?= lang('App.excel_info') ?>', function(r){
            if (r){
                window.open('<?= base_url() ?>' + 'admin/user_setting/excel/' + '<?= encrypt_url(csrf_hash()) ?>' + '/' + r, '_blank');
            }
        });
    }

    function active_user()
    {
        var rows = $('#datagrid_users').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.confirm('Activate', 'Activate ' + rows.length + ' users ?', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_activate ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_users').datagrid('reload');
                            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    function deactive_user()
    {
        var rows = $('#datagrid_users').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.confirm('Deactivate', 'Deactivate ' + rows.length + ' users ?', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_deactivate ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_users').datagrid('reload');
                            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    function ban_users(){
        var rows = $('#datagrid_users').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.prompt('<?= lang('App.ban') ?>', '<?= lang('App.ban_info') ?>', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_ban ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            r: r,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_users').datagrid('reload');
                            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    function unban_users(){
        var rows = $('#datagrid_users').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.confirm('<?= lang('App.unban') ?>', '<?= lang('App.unban') ?> ' + rows.length + ' users ?', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_unban ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_users').datagrid('reload');
                            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }
</script>
<?php } ?>

<?php if ($hapus == 1) { ?>
<!-- FUNCTION HAPUS -->
<script type="text/javascript">
    function delete_users()
    {
        var rows = $('#datagrid_users').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.confirm('<?= lang('App.delete') ?>', '<?= lang('App.delete') ?> ' + rows.length + ' data ?', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_hapus ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_users').datagrid('reload');
                            toastr.success(res.message, 'Deleted!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }
</script>
<?php } ?>
<?= $this->endSection() ?>