<?php 
defined('BASEPATH') OR exit('No direct script access allowed');

$i = 0; 
foreach ($data as $key)
{ 
  $id = $key->id;

  if($key->submenu == 0)
  {
    $j = 0;
    $menu[$i] = [
      'id' => $key->id,
      'judul' => $key->judul,
      'url' => $key->url,
      'status' => $key->status,
      'icon' => $key->icon,
    ];
    $i++;
  } else
  {
    $menu[$i-1]['child'][$j] = [
      'id' => $key->id,
      'judul' => $key->judul,
      'url' => $key->url,
      'status' => $key->status,
      'icon' => 'fas fa-genderless'
    ];
    $j++;
  }
}

?>

<!-- <link rel="stylesheet" href="<?php echo str_replace("http", $_SERVER['HTTP_X_FORWARDED_PROTO'], base_url('_asset/nestable/jquery.nestable.min.css')) ?>"> -->

<link rel="stylesheet" href="./_asset/nestable/jquery.nestable.min.css">

<table class="table table-sm table-bordered" width="100%">
  <tr>
    <th style="text-align: center;">Judul</th>
    <th style="text-align: center; width: 320px">URL</th>
    <th style="text-align: center; width: 120px">Status</th>
    <th style="text-align: center; width: 120px">Aksi</th>
  </tr>
</table>

<?php if(isset($menu)){ ?>

  <div class="cf nestable-lists">
    <div class="dd" id="nestable">
      <ol class="dd-list">

       <?php foreach ($menu as $key){
        if(!isset($key['child'])){
          ?>
          <li class="dd-item dd3-item" data-id="<?php echo $key['id'] ?>">
            <div class="dd-handle dd3-handle" style="width: 35px"><i class="<?php echo $key['icon'] ?>"></i></div>
            <div class="dd3-content">
              <table width="100%">
                <tr>
                  <td><?php echo $key['judul'] ?> </td>
                  <td width="300"><?php echo $key['url'] ?></td>
                  <td width="120"><?php echo $key['status'] ?></td>
                  <td align="right" width="120">
                    <button type="button" class="btn btn-xs btn-outline-info" data-toggle="modal" data-target="#modal-data" onclick="edit_data(<?php echo $key['id'] ?>)"> <i class="fa fa-edit"> Edit </i></button>
                    <button class="btn btn-outline-warning btn-rounded btn-xs" data-toggle="modal" data-target="#modal-data" data-placement="bottom" title="Salin data" onclick="salin_data(<?php echo $key['id'] ?>)"><i class="fas fa-clone"></i></button>
                    <button class="btn btn-outline-danger btn-rounded btn-xs" data-placement="bottom" title="Hapus data" onclick="hapus_data(<?php echo $key['id'] ?>, '<?php echo $key['judul'] ?>', '<?php echo $key['url'] ?>')"><i class="fas fa-times"></i></button>
                  </td>
                </tr>
              </table>          
            </div>
          </li>
        <?php } else {  ?>
          <li class="dd-item dd3-item" data-id="<?php echo $key['id'] ?>">
            <button class="dd-collapse" data-action="collapse" type="button">Collapse</button>
            <button class="dd-expand" data-action="expand" type="button">Expand</button>
            <div class="dd-handle dd3-handle" style="width: 35px"><i class="<?php echo $key['icon'] ?>"></i></div>
            <div class="dd3-content">
              <table width="100%">
                <tr>
                  <td><?php echo $key['judul'] ?> </td>
                  <td width="300"><?php echo $key['url'] ?></td>
                  <td width="120"><?php echo $key['status'] ?></td>
                  <td align="right" width="120">
                    <button type="button" class="btn btn-xs btn-outline-info" data-toggle="modal" data-target="#modal-data" onclick="edit_data(<?php echo $key['id'] ?>)"> <i class="fa fa-edit"> Edit </i></button>
                    <button class="btn btn-outline-warning btn-rounded btn-xs" data-toggle="modal" data-target="#modal-data" data-placement="bottom" title="Salin data" onclick="salin_data(<?php echo $key['id'] ?>)"><i class="fas fa-clone"></i></button>
                    <button class="btn btn-outline-danger btn-rounded btn-xs" data-placement="bottom" title="Hapus data" onclick="hapus_data(<?php echo $key['id'] ?>, '<?php echo $key['judul'] ?>', '<?php echo $key['url'] ?>')"><i class="fas fa-times"></i></button>
                  </td>
                </tr>
              </table>  
            </div>
            <ol class="dd-list">
              <?php foreach ($key['child'] as $key_2){ ?>
                <li class="dd-item dd3-item" data-id="<?php echo $key_2['id'] ?>">
                  <div class="dd-handle dd3-handle"><i class="<?php echo $key_2['icon'] ?>"></i></div>
                  <div class="dd3-content">
                    <table width="100%">
                      <tr>
                        <td><?php echo $key_2['judul'] ?> </td>
                        <td width="300"><?php echo $key_2['url'] ?></td>
                        <td width="120"><?php echo $key_2['status'] ?></td>
                        <td align="right" width="120">
                          <button type="button" class="btn btn-xs btn-outline-info" data-toggle="modal" data-target="#modal-data" onclick="edit_data(<?php echo $key_2['id'] ?>)"> <i class="fa fa-edit"> Edit </i></button>
                          <button class="btn btn-outline-warning btn-rounded btn-xs" data-toggle="modal" data-target="#modal-data" data-placement="bottom" title="Salin data" onclick="salin_data(<?php echo $key_2['id'] ?>)"><i class="fas fa-clone"></i></button>
                          <button class="btn btn-outline-danger btn-rounded btn-xs" data-placement="bottom" title="Hapus data" onclick="hapus_data(<?php echo $key_2['id'] ?>, '<?php echo $key_2['judul'] ?>', '<?php echo $key_2['url'] ?>')"><i class="fas fa-times"></i></button>
                        </td>
                      </tr>
                    </table>  
                  </div>
                </li>
              <?php }  ?>

            </ol>
          </li>
        <?php } } ?>

      </ol>
    </div>
  </div>
  <script src="./_asset/nestable/jquery.nestable.min.js"></script>

  <script>

    $(document).ready(function() {

      var updateOutput = function(e) {
        var list = e.length ? e : $(e.target),
        output = list.data('output');
        if(window.JSON) {
          output.val(window.JSON.stringify(list.nestable('serialize')));
        }
        else {
          output.val('JSON browser support required for this demo.');
        }
      }; 

      $('#nestable').nestable().on('change', updateOutput);

      updateOutput($('#nestable').data('output', $('#nestable-output')));

    });

    $('#nestable-menu').on('click', function(e) {
      var target = $(e.target),
      action = target.data('action');
      if(action === 'expand-all') {
        $('.dd').nestable('expandAll');
      }
      if(action === 'collapse-all') {
        $('.dd').nestable('collapseAll');
      }
      if(action === 'add-item') {
        var newItem = {
          "id": ++lastId,
          "content": "New Item " + lastId,
          "parent_id":2
        };
        $('#nestable').nestable('add', newItem);
      }
      if(action === 'replace-item') {
        var replacedItem = {
          "id": 10,
          "content": "New item 10",
          "children": [
          {
            "id": ++lastId,
            "content": "Item " + lastId,
            "children": [
            {
              "id": ++lastId,
              "content": "Item " + lastId
            }
            ]
          }
          ]
        };
        $('#nestable').nestable('replace', replacedItem);
      }

    });
  </script>

  <?php } ?> 