<div class="panel">
  <div class="panel-body">
    <a href="/admin/shop_product/product_edit/" class="btn btn-success select-all">Dodaj produkt</a>
  </div>
  <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: 25px;">Promowany</th>
            <th class="text-center" style="width: 25px;">Aktywny</th>
            <th class="text-center" style="width: 75px;">Stan MG</th>
            <th class="text-center" style="width: 100px;">Baselinker</th>
            <th class="text-center" style="width: 100px;">Apilo</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="10"></th>
          </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
          <tr>
            <td colspan="12">
              <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;?>, null );

    $( '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;
    });


    $( 'body' ).on( 'change', '.product-price-promo', function(e)
    {
      var price = $( this ).val();
      price = price.replace( ' ', '' );
      price = parseFloat( price.replace( ',', '.' ) * 1 );
      price = number_format( price, 2, '.', '' );

      $( this ).val( price );

      var product_id = $( this ).attr( 'product-id' );

      $.ajax(
      {
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/product_change_price_brutto_promo/',
        data:
        {
          product_id: product_id,
          price: price
        },
        beforeSend: function()
        {
          $( '#overlay' ).show();
        },
        success: function( data )
        {
          $( '#overlay' ).hide();

          response = jQuery.parseJSON( data );

          if ( response.status !== 'ok' )
            create_error( response.msg );
        }
      });
    });

    $( 'body' ).on( 'change', '.product-price', function(e)
    {
      var price = $( this ).val();
      price = price.replace( ' ', '' );
      price = parseFloat( price.replace( ',', '.' ) * 1 );
      price = number_format( price, 2, '.', '' );

      $( this ).val( price );

      var product_id = $( this ).attr( 'product-id' );

      $.ajax(
      {
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/product_change_price_brutto/',
        data:
        {
          product_id: product_id,
          price: price
        },
        beforeSend: function()
        {
          $( '#overlay' ).show();
        },
        success: function( data )
        {
          $( '#overlay' ).hide();

          response = jQuery.parseJSON( data );

          if ( response.status !== 'ok' )
            create_error( response.msg );
        }
      });
    });

    $( 'body' ).on( 'click', '.duplicate-product', function(e)
    {
      e.preventDefault();
      var product_id = $( this ).attr( 'product-id' );

      $.alert({
        title: 'Pytanie',
        content: 'Na pewno chcesz wykonać duplikat produktu?',
        type: 'orange',
        closeIcon: true,
        closeIconClass: 'fa fa-times',
        typeAnimated: true,
        animation: 'opacity',
        columnClass: 'col-12 col-lg-10',
        theme: 'modern',
        icon: 'fa fa-question',
        buttons: {
          confirm: {
            text: 'Tak (produkt bez kombinacji)',
            btnClass: 'btn-success',
            keys: ['enter'],
            action: function() {
              document.location.href = '/admin/shop_product/duplicate_product/product-id=' + product_id;
            }
          },
          confirm2: {
            text: 'Tak (produkt z KOMBINACJAMI)',
            btnClass: 'btn-primary',
            keys: ['enter'],
            action: function() {
              document.location.href = '/admin/shop_product/duplicate_product/product-id=' + product_id + '&combination=1';
            }
          },
          cancel: {
            text: 'Nie',
            btnClass: 'btn-dark',
            action: function() {}
          }
        }
      });
    })

    // apilo product search
    $( 'body' ).on( 'click', '.apilo-product-search', function() {
      var product_id = $( this ).attr( 'product-id' );

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/integrations/apilo_product_search/',
        data: {
          product_id: product_id
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          data = jQuery.parseJSON( response );

          if ( data.status == 'SUCCESS' ) {
            var html = '<div class="apilo-found-products">';
            html += '<p>Znaleziono ' + data.products.length + ' produktów</p>';
            html += '<select class="form-control apilo-product-select" product-id="' + product_id + '">';
            $.each( data.products, function( index, value ) {
              html += '<option value="' + value.id + '">' + value.name + ' SKU: ' + value.sku + '</option>';
            });
            html += '</select>';
            html += '<button class="btn btn-success apilo-product-select-save" product-id="' + product_id + '">Zapisz</button>';
            html += '</div>';
            $( 'span.apilo-product-search[product-id="' + product_id + '"]' ).closest( 'td' ).append( html );
          } else if ( data.status == 'error' ) {
            $.alert({
              title: 'Błąd',
              content: data.msg,
              type: 'red',
              closeIcon: true,
              closeIconClass: 'fa fa-times',
              typeAnimated: true,
              animation: 'opacity',
              columnClass: 'col-12 col-lg-10',
              theme: 'modern',
              icon: 'fa fa-exclamation-triangle',
              buttons: {
                confirm: {
                  text: 'OK',
                  btnClass: 'btn-danger',
                  keys: ['enter'],
                  action: function() {}
                }
              }
            });
          }
        }
      });
    });

    // delete apilo product linking
    $( 'body' ).on( 'click', '.apilo-delete-linking', function() {
      var product_id = $( this ).attr( 'product-id' );

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/apilo_product_select_delete/',
        data: {
          product_id: product_id
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          data = jQuery.parseJSON( response );

          if ( data.status == 'ok' ) {
            $( 'span.apilo-delete-linking[product-id="' + product_id + '"]' ).closest('td').html( '<span class="text-danger apilo-product-search" product-id="' + product_id + '">nie przypisano <i class="fa fa-search"></i></span>' );
          }
        }
      });
    });

    // delete baselinker product linking
    $( 'body' ).on( 'click', '.baselinker-delete-linking', function() {
      var product_id = $( this ).attr( 'product-id' );

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/baselinker_product_select_delete/',
        data: {
          product_id: product_id
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          data = jQuery.parseJSON( response );

          if ( data.status == 'ok' ) {
            $( 'span.baselinker-delete-linking[product-id="' + product_id + '"]' ).closest('td').html( '<span class="text-danger baselinker-product-search" product-id="' + product_id + '">nie przypisano <i class="fa fa-search"></i></span>' );
          }
        }
      });
    });

    $( 'body' ).on( 'click', '.baselinker-product-search', function() {
      var product_id = $( this ).attr( 'product-id' );

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/baselinker_product_search/',
        data: {
          product_id: product_id
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          data = jQuery.parseJSON( response );

          if ( data.status == 'SUCCESS' ) {
            var html = '<div class="baselinker-found-products">';
            html += '<p>Znaleziono ' + data.products.length + ' produktów</p>';
            html += '<select class="form-control baselinker-product-select" product-id="' + product_id + '">';
            $.each( data.products, function( index, value ) {
              html += '<option value="' + value.product_id + '">' + value.name + ' SKU: ' + value.sku + '</option>';
            });
            html += '</select>';
            html += '<button class="btn btn-success baselinker-product-select-save" product-id="' + product_id + '">Zapisz</button>';
            html += '</div>';
            $( 'span.baselinker-product-search[product-id="' + product_id + '"]' ).closest( 'td' ).append( html );
          } else if ( data.status == 'error' ) {
            $.alert({
              title: 'Błąd',
              content: data.msg,
              type: 'red',
              closeIcon: true,
              closeIconClass: 'fa fa-times',
              typeAnimated: true,
              animation: 'opacity',
              columnClass: 'col-12 col-lg-10',
              theme: 'modern',
              icon: 'fa fa-exclamation-triangle',
              buttons: {
                confirm: {
                  text: 'OK',
                  btnClass: 'btn-danger',
                  keys: ['enter'],
                  action: function() {}
                }
              }
            });
          }
        }
      });
    });

    // apilo product select save
    $( 'body' ).on( 'click', '.apilo-product-select-save', function(){
      var product_id = $( this ).attr( 'product-id' );
      var apilo_product_id = $( '.apilo-product-select[product-id="' + product_id + '"]' ).val();
      var apilo_product_name = $( '.apilo-product-select[product-id="' + product_id + '"] option:selected' ).text();

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/apilo_product_select_save/',
        data: {
          product_id: product_id,
          apilo_product_id: apilo_product_id,
          apilo_product_name: apilo_product_name
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          data = jQuery.parseJSON( response );

          if ( data.status == 'ok' ) {
            $( '.apilo-product-select[product-id="' + product_id + '"]' ).closest( '.apilo-found-products' ).remove();
            $( 'span.apilo-product-search[product-id="' + product_id + '"]' ).html( '<span title="' + apilo_product_name + '">' + apilo_product_name.substr( 0, 25 ) + '...</span>' ).removeClass( 'apilo-product-search' ).removeClass( 'text-danger' );
          }
        }
      });
    });

    $( 'body' ).on( 'click', '.baselinker-product-select-save', function(){
      var product_id = $( this ).attr( 'product-id' );
      var baselinker_product_id = $( '.baselinker-product-select[product-id="' + product_id + '"]' ).val();
      var baselinker_product_name = $( '.baselinker-product-select[product-id="' + product_id + '"] option:selected' ).text();

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/baselinker_product_select_save/',
        data: {
          product_id: product_id,
          baselinker_product_id: baselinker_product_id,
          baselinker_product_name: baselinker_product_name
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          data = jQuery.parseJSON( response );

          if ( data.status == 'ok' ) {
            $( '.baselinker-product-select[product-id="' + product_id + '"]' ).closest( '.baselinker-found-products' ).remove();
            $( 'span.baselinker-product-search[product-id="' + product_id + '"]' ).html( '<span title="' + baselinker_product_name + '">' + baselinker_product_name.substr( 0, 25 ) + '...</span>' ).removeClass( 'baselinker-product-search' ).removeClass( 'text-danger' );
          }
        }
      });
    });
  });

  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>