<div class="panel">
  <div class="panel-body pn">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-striped mbn" id="table-products">
        <thead>
          <tr>
            <th style="width: 10px;">#</th>
            <th>Nazwa</th>
            <th class="text-center" style="width: 100px;">Cena</th>
            <th class="text-center" style="width: 100px;">Cena promocyjna</th>
            <th class="text-center" style="width: 75px;">Stan MG</th>
            <th class="text-center" style="width: 100px;">Kombinacje</th>
            <th class="text-center" style="width: 75px;">Edytuj</th>
            <th class="text-center" style="width: 75px;">Przywróć</th>
          </tr>
          <tr>
            <th></th>
            <th>
              <input type="text" class="form-control table-search" field_name="name|ean|sku" placeholder="szukaj..." value="<?= htmlspecialchars( $this -> query_array['name'] ?? '', ENT_QUOTES, 'UTF-8');?>">
            </th>
            <th colspan="6"></th>
          </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
          <tr>
            <td colspan="8">
              <ul class="pagination" pagination_max="<?= $this -> pagination_max;?>">
                <li>
                  <a href="#" page="1" title="pierwsza strona">
                    <i class="fa fa-angle-double-left"></i>
                  </a>
                </li>
                <li>
                  <a href="#" class="previous" page="<?= ( $this -> current_page - 1 > 1 ) ? ( $this -> current_page - 1 ) : 1;?>" title="poprzednia strona">
                    <i class="fa fa-angle-left" title="poprzednia strona"></i>
                  </a>
                </li>
                <li>
                  <div>
                    Strona <span id="current-page"><?= $this -> current_page;?></span> z <span id="max_page"><?= $this -> pagination_max;?></span>
                  </div>
                </li>
                <li>
                  <a href="#" class="next" page="<?= ( $this -> current_page + 1 < $this -> pagination_max ) ? ( $this -> current_page + 1 ) : $this -> pagination_max;?>" title="następna strona">
                    <i class="fa fa-angle-right"></i>
                  </a>
                </li>
                <li>
                  <a href="#" class="last" page="<?= $this -> pagination_max;?>" title="ostatnia strona">
                    <i class="fa fa-angle-double-right"></i>
                  </a>
                </li>
              </ul>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>
<script type="text/javascript">
  $( function() {
    ajax_load_products( <?= $this -> current_page;?> );

    $( 'body' ).on( 'change', '.table-search', function() {
      ajax_load_products( 1 );
    });

    $( 'body' ).on( 'click', '.pagination a', function() {
      var current_page = $( this ).attr( 'page' );
      ajax_load_products( current_page );
    });

    $( 'body' ).on( 'click', '.product-unarchive', function(e) {
      e.preventDefault();
      var href = $( this ).attr( 'href' );
      $.alert({
        title: 'Pytanie',
        content: 'Na pewno chcesz przywrócić wybrany produkt z archiwum?',
        type: 'orange',
        closeIcon: true,
        closeIconClass: 'fa fa-times',
        typeAnimated: true,
        animation: 'opacity',
        columnClass: 'col-12 col-lg-10',
        theme: 'supervan',
        icon: 'fa fa-question',
        buttons: {
          cancel: {
            text: 'Nie',
            btnClass: 'btn-success',
            action: function() {}
          },
          confirm: {
            text: 'Tak',
            btnClass: 'btn-danger',
            keys: ['enter'],
            action: function() {
              document.location.href = href;
            }
          }
        }
      });

      return false;
    });
  });

  function ajax_load_products( current_page ) {
    var pagination_max = parseInt( $( '.pagination' ).attr( 'pagination_max' ) );

    var query = '';
    $( '.table-search' ).each(function(){
      query += $( this ).attr( 'field_name' ) + '=' + $( this ).val() + '&';
    });

    current_page = parseInt( current_page );

    $.ajax({
      type: 'POST',
      cache: false,
      url: '/admin/shop_product/ajax_load_products_archive/',
      data: {
        current_page: current_page,
        query: query
      },
      beforeSend: function() {
        $( '#overlay' ).show();
      },
      success: function( response ) {
        $( '#overlay' ).hide();

        data = jQuery.parseJSON( response );

        if ( data.status == 'ok' ) {
          $( '#table-products tbody' ).html( data.html );
          $( '.pagination .previous' ).attr( 'page', ( current_page - 1 > 1 ) ? ( current_page - 1 ) : 1 );
          $( '.pagination .next' ).attr( 'page', ( current_page + 1 < pagination_max ) ? ( current_page + 1 ) : pagination_max );
          $( '.pagination span' ).html( current_page );
          if ( data.pagination_max ) {
            $( '.pagination' ).attr( 'pagination_max', data.pagination_max );
            $( '.pagination #max_page' ).html( data.pagination_max );
            $( '.pagination .last' ).attr( 'page', data.pagination_max );
          }
        }
      }
    });
  }
</script>
