<div class="row">
  <div class="iblogs-category <?php echo !empty($info_list_category) ? 'col-md-9' : 'col-xs-12' ?>">

    <div class="row" style="margin-bottom: 20px;">
      <div class="col-sm-6">
        <input type="text" class="form-control input-sm list-search isl-inline-block" placeholder="To search, type and hit enter" style="padding:4px 6px; width:50%">
        <a onclick="$('.iblogs-category .list-search').val('');fetchListCategory(urlCategoryList);" class="pointer text-muted isl-ml-5" data-toggle="tooltip" title="Clear search"><i class="fa fa-close"></i></a>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <a href="<?php echo $url_category_form; ?>" class="btn btn-success btn-sm isl-mr-10"><i class="fa fa-plus isl-mr-5"></i> <?php echo $text_add_category; ?></a>
      <a class="btn btn-primary btn-sm btn-refresh-category-list" data-toggle="tooltip" title="Reload list"><i class="fa fa-refresh"></i></a>
      </div>
    </div>

    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th class="text-center" style="width:40px"><?php echo $text_id; ?></th>
          <th class="text-center" style="min-width:350px"><?php echo $text_title; ?></th>
          <th class="text-center" style="width:90px"><?php echo $text_post_count; ?></th>
          <th class="text-center" style="width:80px"><?php echo $text_order; ?></th>
          <th class="text-center" style="width:70px"><?php echo $text_status; ?></th>
          <th class="text-center" style="width:100px"><?php echo $text_action; ?></th>
        </tr>
      </thead>
      <tbody id="category-list">

      </tbody>
    </table>

    <hr>
    <div class="row pagination-wrapper">
      <div class="col-sm-7 pagination-number"></div>
      <div class="col-sm-5 text-right pagination-info"></div>
    </div>
  </div>

  <?php if (!empty($info_list_category)) { ?>
  <div class="col-md-3">
    <div class="panel panel-default panel-info">
      <div class="panel-heading"><?php echo $text_information; ?></div>
      <div class="panel-body">
        <ul class="isl-list">
          <?php foreach ($info_list_category as $info) { ?>
            <li><?php echo $info ?></li>
          <?php } ?>
        </ul>
      </div>
    </div>
  </div>
  <?php } ?>
</div>

<script>
var urlCategoryList   = 'index.php?route=<?php echo $islConfig["path"]; ?>/listTable&channel=category&store_id=<?php echo $store_id; ?>&<?php echo $url_token; ?>',
    urlCategoryUpdate = 'index.php?route=<?php echo $islConfig["path"]; ?>/listUpdate&channel=category&store_id=<?php echo $store_id; ?>&<?php echo $url_token; ?>';

$(document).ready(function()
{
  fetchListCategory(urlCategoryList);
  $('.btn-refresh-category-list').on('click', function() {
    fetchListCategory(urlCategoryList);
  });
  $('.iblogs-category .pagination-number').on('click', 'a', function(e) {
    e.preventDefault();
    fetchListCategory($(this).attr('href'));
  });

  // Search list
  $('.iblogs-category').on('keydown', '.list-search', function(e) {
    if (e.which == 13) {
      fetchListCategory(urlCategoryList);
    }
  });

  // Update sort order
  $('#category-list').on('change', '.item-sort-order', function(e) {
    $.ajax({
      url: urlCategoryUpdate + '&_='+ new Date().getTime(),
      type: 'POST',
      dataType: 'json',
      data: $(this).serializeArray(),
      cache: false,
      beforeSend: function() {
        $('#category-list .item-sort-order').attr('disabled', true).after('<i class="fa fa-spinner fa-spin"></i>');
      },
      success: function(data) {
        if (!data.error) {
          fetchListCategory(urlCategoryList);
        }
      }
    });
  });

  // Update item
  $('#category-list').on('click', '[data-isl-update]', function(e) {
    e.preventDefault();

    var el = $(this),
        elData = el.data('isl-update');

    $.ajax({
      url: urlCategoryUpdate + '&_='+ new Date().getTime(),
      type: 'POST',
      dataType: 'json',
      data: elData,
      cache: false,
      beforeSend: function() {
        if (elData.action == 'delete') {
          if (!confirm("Are you sure you want to delete category and all it's child?")) {
            return false;
          }
          el.after('<i class="fa fa-spinner fa-spin spinner-id-' + elData.id + '"></i>');
        }
      },
      success: function(data) {
        if (!data.error) {
          fetchListCategory(urlCategoryList);
        }
      }
    });
  });
});

function fetchListCategory(url) {
  $.ajax({
    url: url + '&search=' + $('.iblogs-category .list-search').val() + '&_='+ new Date().getTime(),
    type: 'POST',
    dataType: 'json',
    cache: false,
    beforeSend: function() {
      $('#category-list').html('<tr><td class="text-center" colspan="6" style="padding:20px 10px;"><i class="fa fa-spinner fa-spin"></i> Processing..</td></tr>');
    },
    success: function(data) {
      $('#category-list').html(data.output);

      if (!data.output) {
        $('#category-list').html('<tr><td class="text-center" colspan="6" style="padding:20px 10px;"><?php echo $text_no_data; ?></td></tr>');
      }

      if (data.pagination || data.pagination_info) {
        $('.iblogs-category .pagination-wrapper').show();
        $('.iblogs-category .pagination-number').html(data.pagination);
        $('.iblogs-category .pagination-info').html(data.pagination_info);
      } else {
        $('.iblogs-category .pagination-wrapper').hide();
      }
    }
  });
}
</script>
