<style type="text/css">
  .layout-tree-toggle {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    margin-right: 4px;
    color: #666;
    cursor: pointer;
  }

  .layout-tree-toggle:focus,
  .layout-tree-toggle:active,
  .layout-tree-toggle:focus-visible {
    outline: none;
    box-shadow: none;
  }

  li.sort-expanded > div .layout-tree-toggle i {
    transform: rotate(90deg);
  }
</style>
<script type="text/javascript" src="/libraries/jquery-nested-sortable/jquery.mjs.nestedSortable.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    function refreshTreeDisclosureState() {
      $('ol.sortable li').each(function() {
        var $li = $(this);
        var hasChildren = $li.children('ol').children('li').length > 0;
        var $disclose = $li.children('div').children('.disclose');

        if (hasChildren) {
          $li.removeClass('sort-leaf');
          if (!$li.hasClass('sort-collapsed') && !$li.hasClass('sort-expanded'))
            $li.addClass('sort-collapsed');
          $li.addClass('sort-branch');
          $disclose.attr('aria-expanded', $li.hasClass('sort-expanded') ? 'true' : 'false');
          $disclose.show();
        } else {
          $li.removeClass('sort-branch sort-collapsed sort-expanded').addClass('sort-leaf');
          $disclose.attr('aria-expanded', 'false');
          $disclose.hide();
        }
      });
    }

    $('ol.sortable').nestedSortable({
      forcePlaceholderSize: true,
      handle: 'div',
      helper: 'clone',
      items: 'li',
      opacity: .9,
      placeholder: 'placeholder',
      revert: 250,
      tabSize: 45,
      tolerance: 'pointer',
      toleranceElement: '> div',
      maxLevels: 4,
      isTree: true,
      expandOnHover: 700,
      protectRoot: false
    });

    refreshTreeDisclosureState();

    $('body').on('click', '.disclose', function() {
      var $li = $(this).closest('li');
      if (!$li.hasClass('sort-branch')) return;
      $li.toggleClass('sort-collapsed').toggleClass('sort-expanded');
      $(this).attr('aria-expanded', $li.hasClass('sort-expanded') ? 'true' : 'false');
      this.blur();
    });

    $('.disclose').mousedown(function(e) {
      if (e.which === 1) {
        var category_id = $(this).parent('div').parent('li').attr('id');

        $.ajax({
          type: 'POST',
          cache: false,
          url: '/admin/shop_category/cookie_categories/',
          data: {
            category_id: category_id
          }
        });
      }
    });

    <?php
      $array = isset($_COOKIE['cookie_categories']) ? @unserialize($_COOKIE['cookie_categories']) : [];
      if (is_array($array)):
        foreach ($array as $key => $val):
          if ($val):
    ?>
    $('#<?= $key; ?>').children('div').children('button.disclose').click();
    <?php
          endif;
        endforeach;
      endif;
    ?>
  });
</script>
