<script src="<?= BASE_ASSET; ?>/js/jquery.hotkeys.js"></script>
<link rel="stylesheet" type="text/css" href="<?= BASE_ASSET; ?>nestable/nesteable.css">
<style type="text/css"> 
   #nestable {
   width: 100% !important;
   margin-top: 5px;
   }

   .menu-type-wrapper {
    width: 100%;
    margin-bottom: 5px;
    clear: both;
    display: table;
    margin-top: 10px;
   }

   .menu-type-wrapper .dropdown-menu {
    position: absolute;
   }
   .menu-type {
   padding: 15px 10px;
   background: #FFFFFF;
   color: #5C5A5A !important;
   margin-bottom: : 10px;
   cursor: pointer;
   border: 1px solid #ECECEC;
   width: 90%;
   float: left;
   border-right: none;
   }
   .menu-type-action {
   padding: 15px 10px;
   background: #FFFFFF;
   color: rgb(255, 152, 0) !important;
   margin-bottom: : 10px;
   border: 1px solid #ECECEC;
   width: 10%;
   float: left;
   border-left: none;
   }


   .menu-type-wrapper.active .menu-type {
   background: #ff9800 !important;
   color: #fff !important;
   } 

    .menu-type-wrapper.active .menu-type-action {
   background: #ff9800 !important;
   color: #fff !important;
   }
   .menu-type .dropdown-menu {
   right: 0%;
   border-radius: 0px !important;
   }
   .btn-add {
   background: #ef6c00;
   color: #fff !important;
   }
   .btn-add:hover {
   background: #E26D0C;
   }
   .btn-action {
   margin-left: 5px;
   }
   .btn-action:hover {
   color: #DD5757 !important;
   }
   .action-wrap {
   margin-top: 20px; margin-right: 10px;
   }
   .color-caret {
   color: #C2C2C2
   }
   .color-red {
   color: #F45E5E
   }
   #nesteable a {
   color: #546973 !important;
   }

   .box-no-data {
    width: 100%;
    padding: 20px;
    text-align: center;
    color: #7F7F7F;
   }

   .dd-item:hover .dd3-content {
    color: #2F2121 !important;
   }
</style>
<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/menu/add/' + '<?= $this->uri->segment(4); ?>';
          return false;
      });

       // Binding keys
      $('*').bind('keydown', 'Ctrl+r', function assets() {
          window.location.href = BASE_URL + '/administrator/menu_type/add/';
          return false;
      });
   
      // Binding keys
      $('*').bind('keydown', 'Ctrl+s', function assets() {
          $('#btn_save').trigger('click');
          return false;
      });
   
   }
   
   jQuery(document).ready(domo);
</script>
<!-- Content Header (Page header) -->
<section class="content-header">
   <h1>
      Menu
   </h1>
   <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li class="active">Menu</li>
   </ol>
</section>
<!-- Main content -->
<section class="content">
   <div class="row" >
      <div class="col-md-4">
         <div class="box box-warning">
           <div class="box-header with-border">
                 <h3 class="box-title ">Menu Type</h3>
           </div>
            <div class="box-body ">
               <!-- Widget: user widget style 1 -->
               <div class="menu-type-wrapper <?= $this->uri->segment(4) == 'side-menu' ? 'active' :''; ?>">
               <div data-href="<?= site_url('administrator/menu/index/'.url_title('side menu')); ?>" class="clickable btn-block menu-type btn-group ">Side Menu
               </div>
                <a class="menu-type-action">
                &nbsp;
                 </a>
               </div>
               <?php foreach (db_get_all_data('menu_type', 'name!= "side menu"') as $row): ?>
               <div class="menu-type-wrapper  <?= $this->uri->segment(4) == url_title($row->name) ? 'active' :''; ?>">
                 <span data-href="<?= site_url('administrator/menu/index/'.url_title($row->name)); ?>" class="clickable btn-block menu-type btn-group">
                    <?= _ent(ucwords($row->name)); ?>
                  
                 </span>
                 <a class="menu-type-action remove-data" data-href="<?= base_url('administrator/menu_type/delete/'.$row->id); ?>" href="javascript:void()">
                     <i class="fa fa-trash"></i>
                 </a>
               </div>
               <?php endforeach; ?> 
               <br>
               <a href="<?= site_url('administrator/menu_type/add'); ?>" class="btn btn-block btn-add btn-add-menu btn-flat" title="add menu type (Ctrl+r)"><i class="fa fa-plus-square-o"></i> Add Menu Type</a>
            </div>
            <!--/box body -->
         </div>
         <!--/box -->
      </div>
      <div class="col-md-7">
         <div class="box box-warning">
              <!-- Widget: user widget style 1 -->
             <div class="box-header with-border">
                  
                   <h3 class="box-title pull-left">Menu <?= ucwords(str_replace('-', ' ', $this->uri->segment(4))); ?></h3>
             </div>
            <div class="box-body ">
               <!-- Widget: user widget style 1 -->
               <div style="margin: 15px 0px 15px 0px !important;">
                <?php is_allowed('menu_add', function(){?>
                <a class="btn btn-flat btn-success btn_add_new" id="btn_add_new" title="add new menu (Ctrl+a)" href="<?= site_url('administrator/menu/add/'. $this->uri->segment(4)); ?>"><i class="fa fa-plus-square-o" ></i> Add New Menu</a>
                <?php }) ?>
                <span class="loading loading-hide"><img src="<?= BASE_ASSET; ?>/img/loading-spin-primary.svg"> <i>Loading, Saving data</i></span>
             </div>
              <div class="dd" id="nestable">
                 <?php
                  $menu = display_menu_module(0, 1, $this->uri->segment(4)); 
                  if (empty($menu)): ?>
                  <div class="box-no-data">No data menu</div>
                 <?php else: 
                 echo $menu;
                  endif; ?>
              </div>
              <div class="nestable-output"></div>
               </div>
            </div>
            <!--/box body -->
         </div>
      </div>
   </div>
</section>

<script src="<?= BASE_ASSET; ?>nestable/jquery.nestable.js"></script>
<script>
$(document).ready(function() {
    $('.remove-data').click(function() {
        var url = $(this).attr('data-href');
        swal({
                title: "Are you sure?",
                text: "data to be deleted can not be restored!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel plx!",
                closeOnConfirm: true,
                closeOnCancel: true
            },
            function(isConfirm) {
                if (isConfirm) {
                    document.location.href = url;
                }
            });

        return false;
    }); /*end remove data click*/

    var timeout;
    $('.dd').on('change', function() {
        clearTimeout(timeout);
        timeout = setTimeout(updateOrderMenu, 2000);
    });

    function updateOrderMenu() {
            $('.loading').removeClass('loading-hide');
            var shownotif = true;
            var menu = $('.dd').nestable('serialize');

            if (typeof shownotif == 'undefined') {
                var shownotif = true;
            }

            $.ajax({
                    url: BASE_URL + 'administrator/menu/save_ordering',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        'menu': menu,
                        '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>'
                    },
                })
                .done(function(res) {
                    if (res.success) {
                        $('.sidebar-menu').html(res.menu);
                        if (shownotif) {
                            toastr['success'](res.message);
                        }
                    } else {
                        if (shownotif) {
                            toastr['warning'](res.message);
                        }
                    }
                })
                .fail(function() {
                    toastr['warning']('Gagal menyimpan data please try again later');
                })
                .always(function() {
                    $('.loading').addClass('loading-hide');
                });
        }
        // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    });


    $('.clickable').on('click', function() {
        var href = $(this).attr('data-href');

        window.location.href = href;

        return false;
    }); /*end clickable click*/

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