<div class="row block-header">
  <div class="col-12">
    <h2>Wiki</h2>
  </div>
</div>
<div class="box">
  <? if ( $this -> user['id'] == 1 or $this -> user['id'] == 3 ):?>
    <div class="menu-buttons">
      <a href="/wiki/category_edit/" class="btn btn-success btn-sm" title="Dodaj kategorię">
        <i class="fa fa-plus"></i>Dodaj kategorię
      </a>
    </div>
  <? endif;?>
  <table class="table table-striped table-hover table-sm">
    <tr>
      <td>
        <input type="text" class="form-control" id="search-name">
      </td>
    </tr>
  </table>
  <div class="wiki-categories">
    <? foreach ( $this -> categories as $category ):?>
      <div class="category">
        <div class="title">
          <a href="/wiki/category_preview/id=<?= $category['id'];?>"><?= $category['name'];?></a>
        </div>
        <? if ( $this -> user['id'] == 1 or $this -> user['id'] == 3 ):?>
          <div class="row">
            <div class="col-md-6">
              <div class="users">
                <? $category_users = \factory\Wiki::category_users( $category['id'] );?>
                <? if ( is_array( $category_users ) ): foreach ( $category_users as $user_tmp ):?>
                  <?
                    $user = \factory\Users::user_details( $user_tmp );
                    echo '<div class="user" style="background: ' . $user['color'] . '" title="' . $user['name'] . ' ' . $user['surname'] . '">' . $user['name'][0] . $user['surname'][0] . '</div>';
                  ?>
                <? endforeach; endif;?>
              </div>
            </div>
            <div class="col-md-6">
              <div class="actions">
                <a href="/wiki/category_edit/id=<?= $category['id'];?>">edytuj</a>
                <a href="/wiki/category_delete/id=<?= $category['id'];?>" class="category-delete">usuń</a>
              </div>
            </div>
          </div>
        <? endif;?>
      </div>
    <? endforeach;?>
  </div>
<script type="text/javascript">
  $( function()
  {
    $( 'body' ).on( 'click', '.category-delete', function(e) {
      e.preventDefault();
      var href = $( this ).attr( 'href' );

      $.confirm({
        title: 'Potwierdź',
        type: 'orange',
        columnClass: 'col-md-8 col-md-offset-2 col-12',
        closeIcon: true,
        closeIconClass: 'fa fa-close',
        content: 'Na pewno chcesz usunąć wybrany wpis?',
        theme: 'modern',
        buttons: {
          submit: {
            text: '<i class="fa fa-check"></i>Zatwierdź',
            btnClass: 'btn-success',
            action: function () {
              document.location.href = href;
            }
          },
          cancel: {
            text: '<i class="fa fa-close"></i>Anuluj',
            btnClass: 'btn-danger',
            keys: ['enter'],
            action: function() {}
          }
        }
      });
    });

    var timer = '';
    $( '#search-name' ).keyup( function()
    {
      var _this = $( this);
      var category =  _this.val();
      clearTimeout( timer );
      timer = setTimeout( function()
      {
        category = category.toLowerCase();

        $( '.category' ).hide();
        $( ".category .title a" ).each( function ( index )
        {
          var text = $( this ).text();
          text = text.trim().toLowerCase(); console.log( text );

          if ( text.indexOf( category ) >= 0 )
            $( this ).parents( '.category' ).show();
        });

        if ( category == '' )
          $( '.category' ).show();
      }, 500 );
    });
  });
</script>