<?
global $gdb;

ob_start();
?>
  <ol class="sortable" id="article-list">
    <?
      if ( is_array( $this -> articles ) ) foreach ( $this -> articles as $article )
      {
        ?>
          <li id="list_<?= $article['article_id'];?>">
            <div class="content <? if ( !$article['status'] ) echo 'text-danger';?>"><span class="disclose"><span></span></span> <?= $article['title'];?></div>
          </li>
        <?
      }
    ?>
  </ol>
<?
$out = ob_get_clean();

$grid = new \gridEdit;
$grid -> gdb_opt          = $gdb;
$grid -> include_plugins  = true;
$grid -> default_buttons  = false;
$grid -> external_code    = $out;
$grid -> title            = 'Lista artykułów';
$grid -> buttons          = [ 
                              [ 
                                'label' => 'Wstecz', 
                                'url'   => '/admin/pages/view_list/', 
                                'icon'  => 'fa-reply',
                                'class' => 'btn-dark'
                              ]
                            ];
echo $grid -> draw();
?>
<script type="text/javascript" src="/libraries/jquery-nested-sortable/jquery.mjs.nestedSortable.js"></script>
<script type="text/javascript">
  $( document ).ready( function() 
  {    
    $( 'ol.sortable' ).nestedSortable(
    {
			forcePlaceholderSize: true,
			handle: 'div',
			helper:	'clone',
			items: 'li',
			opacity: .6,
			placeholder: 'placeholder',
			revert: 250,
			tabSize: 25,
			tolerance: 'pointer',
			toleranceElement: '> div',
			maxLevels: 1,
			isTree: true,
			expandOnHover: 700,
      save_articles_order: true
		});
  });
  
  function save_articles_order()
  {
    articles = $( 'ol.sortable' ).nestedSortable( 'toArray', { startDepthCount: 0 } );
    
    $.ajax(
    {
      type: 'POST',
      cache: false,
      url: '/admin/ajax.php',
      data: 
      {
        a: 'save_articles_order',
        page_id: <?= $this -> page_id;?>,
        articles: articles
      },
      beforeSend: function() 
      {
        $.prompt( 'Trwa zapisywanie...', { title: 'Proszę czekać' } );
      },
      success: function( data ) 
      {        
        $( '.jqibox' ).remove();
        response = jQuery.parseJSON( data );

        if ( response.status === 'error' )
          create_error( response.msg );
      }
    });
  }
</script>