<div class="panel">
  <div class="panel-body">
    <a href="/admin/shop_product/product_edit/" class="btn btn-success">Dodaj produkt</a>
    <!-- przycisk pokaż dane z XML -->
    <? if ( !$this -> show_xml_data ):?>
      <a href="/admin/shop_product/view_list/show_xml_data=true" class="btn btn-dark">Pokaż dane z XML</a>
    <? else:?>
      <a href="/admin/shop_product/view_list/show_xml_data=false" class="btn btn-danger">Ukryj dane z XML</a>
    <? endif;?>
    <? if ( $this -> shoppro_enabled ):?>
      <a href="#" class="btn btn-danger btn-shoppro-product-import">Pobierz produkt z shopPRO</a>
    <? endif;?>
  </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>
            <? if ( $this -> baselinker_enabled ):?>
              <th class="text-center" style="width: 100px;">Baselinker</th>
            <? endif;?>
            <? if ( $this -> apilo_enabled ):?>
              <th class="text-center" style="width: 100px;">Apilo</th>
            <? endif;?>
            <? if ( $this -> sellasist_enabled ):?>
              <th class="text-center" style="width: 100px;">Sellasist</th>
            <? endif;?>
            <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;">Archiwizuj</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|ean|sku'], 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 <input type="number" id="current-page" value="<?= $this -> current_page;?>"> 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( 'change', '.pagination input[type="number"]', function() {
      var current_page = $( this ).val();
      var pagination_max = parseInt( $( '.pagination' ).attr( 'pagination_max' ) );

      if ( current_page > pagination_max ) {
        current_page = pagination_max;
        $( this ).val( current_page );
      }

      if ( current_page < 1 ) {
        current_page = 1;
        $( this ).val( current_page );
      }

      ajax_load_products( current_page );
    });

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

    $( 'body' ).on( 'click', '.btn-shoppro-product-import', function(e)
    {
      e.preventDefault();
      // show alert with form with product_id field
      $.alert({
        title: 'Import produktu',
        content: 'Wprowadź ID produktu z shopPRO',
        type: 'orange',
        closeIcon: true,
        closeIconClass: 'fa fa-times',
        typeAnimated: true,
        animation: 'opacity',
        columnClass: 'col-12 col-lg-8',
        theme: 'material',
        icon: 'fa fa-exclamation-triangle',
        buttons: {
          confirm: {
            text: 'Importuj',
            btnClass: 'btn-success',
            keys: ['enter'],
            action: function() {
              var product_id = $( '#shoppro-product-id' ).val();
              if ( product_id )
              {
                document.location.href = '/admin/integrations/shoppro_product_import/product_id=' + product_id;
              }
            }
          },
          cancel: {
            text: 'Anuluj',
            btnClass: 'btn-danger',
            action: function() {}
          }
        },
        onOpenBefore: function() {
          this.setContent( '<input type="text" class="form-control" id="shoppro-product-id" placeholder="ID produktu z shopPRO">' );
        }
      });
    });

    $( 'body' ).on( 'click', '.product-delete', function(e) {
      e.preventDefault();
      var href = $( this ).attr( 'href' );
      $.alert({
        title: 'Pytanie',
        content: 'Na pewno chcesz przenieść wybrany produkt do 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() {}
          }
        }
      });
    })

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

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/integrations/sellasist_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="sellasist-found-products">';
            html += '<p>Znaleziono ' + data.products.length + ' produktów</p>';
            html += '<select class="form-control sellasist-product-select" product-id="' + product_id + '">';
            $.each( data.products, function( index, value ) {
              html += '<option value="' + value.id + '">' + value.name + ' SKU: ' + value.symbol + '</option>';
            });
            html += '</select>';
            html += '<button class="btn btn-success sellasist-product-select-save" product-id="' + product_id + '">Zapisz</button>';
            html += '</div>';
            $( 'span.sellasist-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 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' )
          {
            if ( data.products.length == 0 )
            {
              var html = '<div class="baselinker-found-products">';
              html += '<p>Nie znaleziono produktów</p>';
              // button to create product on baselinker
              html += '<a href="/admin/integrations/apilo_create_product/product-id=' + product_id + '" class="btn btn-success btn_apilo_create_product" product_id="' + product_id + '">Utwórz produkt</a>';
              html += '</div>';
              $( 'span.apilo-product-search[product-id="' + product_id + '"]' ).closest( 'td' ).append( html );
            }
            else
            {
              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() {}
                }
              }
            });
          }
        }
      });
    });

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

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

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

    // 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/integrations/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/integrations/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>' );
          }
        }
      });
    });

    // aplio product create button click with alert confirmation
    $( 'body' ).on( 'click', '.btn_apilo_create_product', function(e)
    {
      e.preventDefault();
      var product_id = $( this ).attr( 'product_id' );

      $.alert(
      {
        title: 'Pytanie',
        content: 'Na pewno chcesz utworzyć produkt w bazie Apilo?',
        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',
            btnClass: 'btn-success',
            keys: ['enter'],
            action: function()
            {
              document.location.href = '/admin/integrations/apilo_create_product/product_id=' + product_id;
            }
          },
          cancel:
          {
            text: 'Nie',
            btnClass: 'btn-danger',
            action: function() {}
          }
        }
      });
    });

    // baselinker product create button click with alert confirmation
    $( 'body' ).on( 'click', '.btn-create-product', function(e) {
      e.preventDefault();
      var product_id = $( this ).attr( 'product-id' );

      $.alert({
        title: 'Pytanie',
        content: 'Na pewno chcesz utworzyć produkt w bazie Baselinker?',
        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',
            btnClass: 'btn-success',
            keys: ['enter'],
            action: function() {
              document.location.href = '/admin/integrations/baselinker_create_product/product_id=' + product_id;
            }
          },
          cancel: {
            text: 'Nie',
            btnClass: 'btn-danger',
            action: function() {}
          }
        }
      });
    });

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

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

          if ( data.status == 'SUCCESS' )
          {
            if ( data.products.length == 0 )
            {
              var html = '<div class="baselinker-found-products">';
              html += '<p>Nie znaleziono produktów</p>';
              // button to create product on baselinker
              html += '<a href="/admin/integrations/baselinker_create_product/product-id=' + product_id + '" class="btn btn-success btn-create-product" product-id="' + product_id + '">Utwórz produkt</a>';
              html += '</div>';
              $( 'span.baselinker-product-search[product-id="' + product_id + '"]' ).closest( 'td' ).append( html );
            }
            else
            {
              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() {}
                }
              }
            });
          }
        }
      });
    });

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

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

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

    // 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/integrations/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/integrations/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' );
          }
        }
      });
    });

    $( 'body' ).on( 'change', '.product_xml_name', function() {
      var product_id = $( this ).attr( 'product-id' );
      var product_xml_name = $( this ).val();
      var lang_id = $( this ).attr( 'lang-id' );

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

    // save custom_label on change
    $( 'body' ).on( 'change', '.custom_label_0, .custom_label_1, .custom_label_2, .custom_label_3, .custom_label_4', function() {
      var element = $( this );
      var product_id = element.attr( 'product-id' );
      var custom_label = element.val();
      var label_type = element.attr( 'label-type' );

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/product_custom_label_save/',
        data: {
          product_id: product_id,
          custom_label: custom_label,
          label_type: label_type
        },
        beforeSend: function() {
          $( '#overlay' ).show();
        },
        success: function( response ) {
          $( '#overlay' ).hide();
          // hide after 1 seconds
          setTimeout(function(){
            element.parent( '.' + label_type + '_container' ).find( '.' + label_type + '_suggestions' ).hide();
          }, 1000);
        }
      });
    });

    // on keyup
    $( 'body' ).on( 'keyup', '.custom_label_0, .custom_label_1, .custom_label_2, .custom_label_3, .custom_label_4', function() {
      var element = $( this );
      var product_id = element.attr( 'product-id' );
      var custom_label = element.val();
      var label_type = element.attr( 'label-type' );

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/admin/shop_product/product_custom_label_suggestions/',
        data: {
          custom_label: custom_label,
          label_type: label_type
        },
        beforeSend: function() {

        },
        success: function( response ) {
          var data = jQuery.parseJSON( response );
          var suggestions = "";
          if ( data.suggestions.length > 0 ) {
            for ( var i = 0; i < data.suggestions.length; i++ ) {
              suggestions += "<div>" + data.suggestions[i].label + "</div>";
            }
            element.parent( '.' + label_type + '_container' ).find( '.' + label_type + '_suggestions' ).html( suggestions ).show();
          } else {
            element.parent( '.' + label_type + '_container' ).find( '.' + label_type + '_suggestions' ).hide();
          }
        }
      });
    });
  });

  $( 'body' ).on( 'click', '.custom_label_0_suggestions div, .custom_label_1_suggestions div, .custom_label_2_suggestions div, .custom_label_3_suggestions div, .custom_label_4_suggestions div', function(){
    var element = $( this );
    var label_type = element.parent().attr( 'label-type' );
    var custom_label = element.html();

    element.parents( '.' + label_type + '_container' ).find( 'input' ).val( custom_label );
    // trigger change
    element.parents( '.' + label_type + '_container' ).find( 'input' ).trigger( 'change' );
    element.parents( '.' + label_type + '_container' ).find( '.' + label_type + '_suggestions' ).hide();
  });

  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/',
      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 );
          }
          $( '#current-page' ).val( current_page );
        }
      }
    });
  }
</script>