<style type="text/css">
  #search {
    margin-left: 20px;
    border:none;
    border-bottom: 1px solid #CECECE;
    padding: 5px;
  }
</style>
<script src="<?= BASE_ASSET; ?>/js/jquery.hotkeys.js"></script>
<script type="text/javascript">
//This page is a result of an autogenerated content made by running test.html with firefox.
function domo(){
 
   // Binding keys
   $('*').bind('keydown', 'Ctrl+a', function assets() {
       window.location.href = BASE_URL + '/administrator/permission/add';
       return false;
   });

   $('*').bind('keydown', 'Ctrl+s', function assets() {
       $('#btn_save').trigger('click');
       return false;
   });

   $('*').bind('keydown', 'Ctrl+x', function assets() {
        if ($('#btn_undo').is(":visible")) {
          $('#btn_undo').trigger('click');
        }
       return false;
   });
}

jQuery(document).ready(domo);
</script>
<!-- Content Header (Page header) -->
<section class="content-header">
   <h1>
      Access
      <small><?= cclang('list_all', 'Access'); ?></small>
   </h1>
   <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li class="active">Access</li>
   </ol>
</section>
<!-- Main content -->
<section class="content">
   <div class="row" >
      
      <div class="col-md-12">
         <div class="box box-warning">
            <div class="box-body ">
               <!-- Widget: user widget style 1 -->
               <div class="box box-widget widget-user-2">
                  <!-- Add the bg color to the header using any of the bg-* classes -->
                  <div class="widget-user-header ">
                     <div class="row pull-right">
                        <?php is_allowed('permission_add', function(){?>
                        <a class="btn btn-flat btn-success btn_add_new" id="btn_add_new" title="add new permission (Ctrl+a)" href="<?= site_url('administrator/permission/add'); ?>"><i class="fa fa-plus-square-o" ></i> <?= cclang('add_new_button', 'Permission'); ?></a>
                        <?php }) ?>
                     </div>
                     <div class="widget-user-image" style="text-align:left;">
                        <img class="img-circle" style="width:50px;" src="<?= BASE_ASSET; ?>/img/list.png" alt="User Avatar">
                     </div>
                     <!-- /.widget-user-image -->
                     <h3 class="widget-user-username">Access</h3>
                     <h5 class="widget-user-desc"><?= cclang('list_all', 'Access'); ?></h5>
                  </div>
                </div>

                    <div class="row-fluid">
                      <!-- Custom Tabs -->
                      <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                         <?php $i=1; foreach ($groups as $group): ?>
                          <li class="<?= $i++ == 1 ? 'active' :''; ?>"><a href="#tab_<?= $i; ?>" class="tab_group" data-toggle="tab" data-id="<?= $group->id; ?>"><?= _ent($group->name); ?></a></li>
                        <?php endforeach; ?>
                          <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                              <b>Groups</b> <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                              <?php if ($this->aauth->is_allowed('group_add')): ?>
                              <li role="presentation"><a role="menuitem" tabindex="-1" href="<?= site_url('administrator/group/add'); ?>"><?= cclang('add_new_button', 'Group'); ?></a></li>
                              <?php endif; ?>
                              <?php if ($this->aauth->is_allowed('group_list')): ?>
                              <li role="presentation"><a role="menuitem" tabindex="-1" href="<?= site_url('administrator/group'); ?>"><?= cclang('view_all_button', 'Group'); ?></a></li>
                              <?php endif; ?>
                            </ul>
                          </li>
                          <li class="pull-right"><a href="<?= site_url('administrator/permission'); ?>" class="text-muted"><i class="fa fa-gear"></i></a></li>
                        </ul>
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab_1">
                            <label><input type="checkbox" class="flat-red toltip" id="check_all" name="check_all" title="check all"> <?= cclang('check_all'); ?></label> <input type="text" id="search" name="search" placeholder="<?= cclang('filter'); ?> access">

                            <hr>

                            <?= form_open('administrator/access/save', [
                              'name'    => 'form_access', 
                              'class'   => 'form-horizontal', 
                              'id'      => 'form_access', 
                              'method'  => 'POST'
                            ]); ?>

                            <input type="hidden" name="group_id" id="group_id" value="<?= isset($groups[0]->id) ? $groups[0]->id : 0; ?>">
                            <div class="multi-column">
                                <ul id="container_permission">
                                  
                                </ul>
                            </div>
                          </div>
                          <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                      </div>
                      <!-- nav-tabs-custom -->
                    <div class="message">
                      
                    </div>
                        <?php is_allowed('access_update', function(){?>
                        <button class="btn btn-flat btn-default btn_save btn_action" id="btn_save" data-stype='stay' title="save (Ctrl+s)"><i class="fa fa-save" ></i> <?= cclang('save_button'); ?></button>
                        <?php }) ?>
                         <span class="loading loading-hide"><img src="<?= BASE_ASSET; ?>/img/loading-spin-primary.svg"> <i><?= cclang('loading_data'); ?></i></span>

                        <a class="btn btn-flat btn-default btn_undo" data-id="0" id="btn_undo" title="undo (Ctrl+x)" style="display: none;"><i class="fa fa-undo" ></i> <?= cclang('undo_button'); ?></a>
                    <?= form_close(); ?>
                    </div>
                    <!-- /.col -->
               </div>
            </div>
            <!--/box body -->
         </div>
         <!--/box -->

      </div>
   </div>
</section>
<!-- /.content -->


<!-- Page script -->
<script>
  $(document).ready(function() {
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
        checkboxClass: 'icheckbox_minimal-red',
        radioClass: 'iradio_minimal-red'
    });

    $('#search').on('keyup', function() {
        var filter = $(this).val();
        var regex = new RegExp(filter, "gi");

        $(document).find('#container_permission li').hide();
        $(document).find('#container_permission li').filter(function() {

            if ($(this).text().match(regex)) {
                return true;
            }
            return false;
        }).show();
    });
    //check all
    var checkAll = $('#check_all');
    var checkboxes = $(document);

    checkAll.on('ifChecked ifUnchecked', function(event) {
        if (event.type == 'ifChecked') {
            checkboxes.iCheck('check');
        } else {
            checkboxes.iCheck('uncheck');
        }
    });

    $(document).on('click', 'label.toggle-select-all-access', function(event) {
        var checkgroup = $(document).find($(this).attr('data-target'));
        var state = $(this).data('state');

        switch (state) {
            case 1:
            case undefined:
                $(this).data('state', 2);
                checkgroup.iCheck('check');
                break;
            case 2:
                $(this).data('state', 1);
                checkgroup.iCheck('uncheck');
                break;
        }
    });

    checkboxes.on('ifChanged', 'input.check', function(event) {
        if (checkboxes.filter(':checked').length == checkboxes.length) {
            checkAll.prop('checked', 'checked');
        } else {
            checkAll.removeProp('checked');
        }
        checkAll.iCheck('update');
    });


    /*load access from server*/
    function refresh_access(group_id) {
        $('.loading').show();
        $.ajax({
                url: BASE_URL + 'administrator/access/get_access_group/' + group_id,
                type: 'GET',
                dataType: 'html',
            })
            .done(function(res) {
                $('#container_permission').html(res);
                $('.check').iCheck({
                    checkboxClass: 'icheckbox_minimal-red',
                    radioClass: 'iradio_minimal-red'
                });
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                $('.loading').hide();
            });
    }

    var id_group = "<?= isset($groups[0]->id) ? $groups[0]->id : 0; ?>";

    refresh_access(id_group);

    $('.tab_group').click(function() {
        var id = $(this).attr('data-id');
        $('#group_id').val(id);
        $('.loading').show();
        $('#btn_undo').hide();

        refresh_access(id);
    });

    $('.btn_save').click(function() {
        $('.message').fadeOut();

        var form_access = $('#form_access');
        var data_post = form_access.serialize();

        $('.loading').show();

        $.ajax({
                url: BASE_URL + '/administrator/access/save',
                type: 'POST',
                dataType: 'json',
                data: data_post,
            })
            .done(function(res) {
                if (res.success) {
                    $('.message').printMessage({
                        message: res.message
                    });
                    $('.message').fadeIn();
                    $('.btn_undo').hide();

                } else {
                    $('.message').printMessage({
                        message: res.message,
                        type: 'warning'
                    });
                    $('.message').fadeIn();
                }

            })
            .fail(function() {
                $('.message').printMessage({
                    message: 'Error save data',
                    type: 'warning'
                });
            })
            .always(function() {
                $('.loading').hide();
                $('html, body').animate({
                    scrollTop: $(document).height()
                }, 1000);
            });

        return false;
    }); /*end btn save*/


    /*undo access*/
    $('#btn_undo').click(function() {
        var btn_undo = $('#btn_undo');
        var group_id = $('.nav-tabs .active a').attr('data-id');

        swal({
                title: "Are you sure?",
                text: "data not saved and data will be restored as before!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes!",
                cancelButtonText: "No!",
                closeOnConfirm: true,
                closeOnCancel: true
            },
            function(isConfirm) {
                if (isConfirm) {
                    refresh_access(group_id);
                    btn_undo.hide();
                }
            });
    }); /*end btn undo*/

    /*if check clicked, btn undo is show*/
    checkboxes.on('ifChanged', 'input.check', function(event) {
        $('.btn_undo').fadeIn();
    }); /*end btn check*/


}); /*end doc ready*/
</script>