{% if productcolorlist %}
<section class="products_slider top-border-gray top-padding-x-large top-margin-x-large">
  <div class="grid js-grid-color rel" data-list-product-color-status="true">
    <div class="row small-space-xs middle-xs">
      <div class="col-xs-12 col-sm-width-auto">
        <button class="btn-default btn-medium js-btn-cart-all">
          <i class="{{ icon_cart }}"></i>
          <span>Comprar produtos</span>
        </button>
      </div>
      <div class="col-xs-12 col-sm">
        <span class="text-dark text-medium">Escolha as quantidades e clique no botão "Comprar produtos" para comprar todos de uma só vez.</span>
      </div>
    </div>
    <div class="grid-on-slider top-margin-x-large">
      {{ productcolorlist }}
    </div>
  </div>
</section>
{% endif %}

<script>
  window.waitEvent('scripts_document', function() {
    $('.js-btn-cart-all').on('click', function(){
      var
        data  = [],
        $this = $(this);

      $this.prop('disabled', true);
      $this.addClass('btn-loading');

      $('.js-grid-color .js-quantity').each(function(index) {
        if ($(this).val() > 0) {
          var infos = {};
          infos['quantity']   = $(this).val();
          infos['product_id'] = $(this).closest('.item-column').find('.btn-cart').data('product-id');
          data.push(infos);
        }
      });

      $('.js-grid-color').prepend('<div class="js-loading"></div>');
      $('.js-loading').css({
        'position': 'absolute',
        'width': '100%',
        'height': '100%',
        'top': '0',
        'left': '0',
        'background': 'rgba(255,255,255,.5)',
        'z-index': '15'
      });

      $.ajax({
        url : 'index.php?route=checkout/cart/addlistcolor',
        type: 'post',
        data: objectToParam(data),
        dataType: 'json',
        error: function(json) {
          $this.prop('disabled', false);
        },
        success: function(json) {

          $('.js-grid-color .item-column').removeClass('border-list-color-success border-list-color-error');
          $('.js-product-message-show, .js-product-message-top').remove();

          if(json['empty']){
            notificationMsg(json['empty'],'error');
          }

          if (json['error']) {
            $.each(json['error'], function(index, value){
              var $element = $('.js-grid-color .btn-cart[data-product-id = ' + index + ']');
              $element.closest('.item-column').addClass('border-list-color-error');

              var $contentbox = $element.closest('.itembox');

              $contentbox.prepend('<div class="product-message-show js-product-message-show">');
              $contentbox.prepend('<div class="product-message-top js-product-message-top">');
              $('.product-message-show').css({
                'width': '100%',
                'position': 'absolute',
                'z-index': '8',
                'top': '0',
                'left': '0',
                'background': '#d9534f',
                'color': '#FFF',
                'padding': '4px',
                'cursor': 'pointer',
              });
              $('.product-message-top').css({
                'width': '100%',
                'position': 'absolute',
                'z-index': '10',
                'top': '0',
                'left': '0',
                'background': '#d9534f',
                'color': '#FFF',
                'padding': '8px',
                'cursor': 'pointer',
                'display': 'none'
              });
              $contentbox.find('.product-message-top').text(value);
              $contentbox.find('.product-message-show').append('<i class="fas fa-chevron-down visible-block"></i>');
              $contentbox.find('.product-message-top').append('<i class="fas fa-chevron-up visible-block top-margin-small"></i>');
              $('.product-message-top').slideDown();

              $contentbox.find('.js-product-message-show').on('click', function () {
                $(this).siblings('.js-product-message-top').slideDown();
              });
              $contentbox.find('.js-product-message-top').on('click', function(){
                $(this).slideUp();
              });
            });
          }
          if (json['success']) {
            $.each(json['success'], function(index, value){
              var $element = $('.js-grid-color .btn-cart[data-product-id = ' + index + ']');
              $element.closest('.item-column').addClass('border-list-color-success');
              $element.siblings('.js-btn-cart-notification').addClass('have-in-cart');
              $element.siblings('.js-fator').find('.js-quantity').val(0);
            });
          }
          $this.prop('disabled', false);
          $this.removeClass('btn-loading');
          $('.js-loading').remove();
          $('.js-header__cart-total').html(json['total_qtd']);
        },
        error: function(error) {
        }
      });
    });
  });
</script>