<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
  <head>
    <title>Urutkan Produk</title>
    <?php include_once(VIEWPATH. 'includes/head.php'); ?>
    <style type="text/css">
    body.dragging, body.dragging * {cursor: move !important;}
    .dragged {position: absolute;opacity: 0.5;z-index: 2000;}
    ol#sort li.placeholder {position: relative;}
    ol#sort li.placeholder:before {position: absolute;}
    ol#sort li button:hover{cursor: all-scroll;}
    </style>
  </head>
  <body>
    <?php include_once(VIEWPATH. 'admin/_navbar.php'); ?>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>Urutkan Produk</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-offset-2 col-sm-8">
            <?php echo form_open();?>
            <ol id="sort" class="list-unstyled vertical">
            <?php foreach ($this->system->produk as $pr_key=>$pr_val):?>
            <li class="form-group">
              <button class="btn btn-default btn-block" style="text-align: left;" type="button"><i class="fa fa-arrows"></i> <?php echo $pr_val->nama;?></button>
              <input type="hidden" name="produk[]" value="<?php echo $pr_key;?>" />
            </li>
            <?php endforeach;?>
            </ol>
            <div class="form-group" style="margin-bottom:0">
              <button type="submit" class="btn btn-primary" name="submit" value="save"><i class="fa fa-check"></i> Simpan</button>
              &nbsp;
              <a href="<?php echo site_url('admin/produk');?>" class="btn btn-default" data-dismiss="modal"><i class="fa fa-remove"></i> Batal</a>
            </div>
            <?php echo form_close();?>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php include_once(VIEWPATH.'includes/foot.php'); ?>
    <script src="<?php echo base_url('assets/js/jquery-sortable.js');?>"></script>
    <script>
    $(function(){
        var adjustment;
        $("#sort").sortable({
            group: 'vertical',
            pullPlaceholder: false,
            onDrop: function  ($item, container, _super) {
                var $clonedItem = $('<li/>').css({height: 0});
                $item.before($clonedItem);
                $clonedItem.animate({'height': $item.height()});
                $item.animate($clonedItem.position(), function  () {
                    $clonedItem.detach();
                    _super($item, container);
                });
            },
            onDragStart: function ($item, container, _super) {
                var offset = $item.offset(),
                    pointer = container.rootGroup.pointer;
                adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                };
                _super($item, container);
            },
            onDrag: function ($item, position) {
                $item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                });
            }
        });
    });
    </script>
  </body>
</html>