{{ header }}
<section class="container-fluid bottom-margin-large">
  {{ breadcrumbs }}
  {{ content_top }}
  <div class="row">
    <div class="col-xs-12">
      <div class="content-box">
        <h2 class="heading-1">{{ infos_lista.lista_nome ? infos_lista.lista_nome : text_lista_titulo }}</h2>
        <span class="text-small text-gray visible-block">{{ infos_lista.serie }}, {{ infos_lista.ano }}</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">
      <div class="content-box">

        {% set firstInStock = false %}
        {% set firstOutOffStock = false %}
        {% if not produtos %}

          <p class="bottom-margin-small">Nenhum produto para esta lista!</p>
          <a href="{{reset_action}}" class="btn-default btn-small btn-outline visible-inline-block">Desfazer edições</a>

        {% else %}

          {% for produto in produtos %}

            {% if not produto.stock %}
              {% set firstOutOffStock = true %}
              <p class="heading-2">{{text_out_off_stock}}</p>
              <p class="text-small text-gray">{{text_out_off_stock_description}}</p>
            {% endif %}


            {% if produto.stock and not firstInStock %}
              {% set firstInStock = true %}
              <p class="heading-2">
                {{text_products}}
              </p>
            {% endif %}

            <div class="row no-space-xs top-xs vertical-padding-medium">

              <div class="right-margin-medium" style="width:80px;">
                {% if produto.thumb %}
                  <a href="{{produto.href}}">
                    <img
                      height="80"
                      src="assets/img/loading-skeleton.svg"
                      data-src="{{produto.thumb}}"
                      alt="{{produto.name}}"
                      title="{{produto.name}}"
                      class="load-image visible-block"
                    />
                  </a>
                {% endif %}
              </div>

              <div class="col-xs col-md">
                <div class="content-box bottom-padding-medium right-padding-medium">
                  <a href="{{produto.href}}" class="content-box">
                    <div class="row small-space-xs middle-xs">
                      <div class="col-xs">
                        <div class="content-box">
                          <span class="text-small visible-block">{{produto.model}}</span>
                          <span class="text-medium visible-block text-bold">{{produto.name}}</span>
                          {% if futuragrade_status is defined and futuragrade_status %}
                            <div class="top-margin-x-small">
                              {% if product.color_description is defined and product.color_description %}
                                <span class="text-small text-gray">{{ product.color_template_description }}</span>
                                <span class="text-small text-bold text-dark right-margin-x-small">{{ product.color_description }}</span>
                              {% endif %}
                              {% if product.size_description is defined and product.size_description %}
                                <span class="text-small text-gray">{{ product.size_template_description }}</span>
                                <span class="text-small text-bold text-dark right-margin-x-small">{{ product.size_description }}</span>
                              {% endif %}
                              {% if product.specification_description is defined and product.specification_description %}
                                <span class="text-small text-gray">{{ product.specification_template_description }}</span>
                                <span class="text-small text-bold text-dark right-margin-x-small">{{ product.specification_description }}</span>
                              {% endif %}
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </a>
                  <div class="flex top-margin-x-small">
                    <div class="right-padding-small">
                      <span class="visible-block text-small text-gray">{{ column_price }}</span>
                      <span class="visible-block text-small {{ produto.percentual_desconto > 0 ? 'text-dashed text-gray' : 'text-dark text-bold' }}">{{ produto.price }}</span>
                      {% if produto.percentual_desconto > 0 %}
                        <span class="visible-block text-small text-dark text-bold">{{ produto.price_discont }}</span>
                      {% endif %}
                    </div>
                  </div>
                  <div class="flex">
                    {% if listaescolar_disable_similar_item %}
                      <button data-product-session-key="{{produto.key}}" data-tipo-edicao="{{value_tipo_add}}"
                              class="btn-default btn-small btn-outline btn-listaescolar-editar right-margin-small top-margin-small">
                        <span>{{ text_add_item }}</span>
                      </button>
                    {% endif %}
                    {% if listaescolar_disable_substitute_item %}
                      <button data-original-product-id="{{produto.original_product_id}}" data-product-session-key="{{produto.key}}" data-tipo-edicao="{{value_tipo_troca}}"
                              class="btn-default btn-small btn-outline btn-listaescolar-editar top-margin-small">
                        <span>{{ produto.original_product_id ? text_restore : text_trade_item }}</span>
                      </button>
                    {% endif %}
                  </div>
                </div>
              </div>

              <div class="col-xs-12 col-md-width-auto">
                <div class="flex">
                  <div class="right-margin-x-large">

                    <label class="field field-medium itembox-quantity-control " style="max-width: 100px; min-width: 100px; width: 100px;">
                      <div class="field-entry-group ">
                        <div>
                          <button
                            onclick="onReloadQuantity({{ produto.key }}, {{ produto.product_id }}, 'down')"
                            class=" itembox-btn btn-down btn-cart-list-quantity full-height js-btn-qtd"
                            title="{{ button_update_quantidade }}">
                            <i class="fas fa-minus" aria-hidden="true"></i>
                          </button>
                        </div>
                        <div >
                          <input onChange="onReloadQuantity({{ produto.key }}, {{ produto.product_id }}, 'none')" type="text" id="quantity[{{ produto.key }}]" name="quantity[{{ produto.key }}]" autocomplete="off"
                                 value="{{ produto.quantity }}" maxlength="4"
                                 class="mask-int input-text quantity js-quantity" style=" width: 2.8em; padding: 0.75rem 0; font-size: 16px;">
                        </div>
                        <div>
                          <button
                            onclick="onReloadQuantity({{ produto.key }}, {{ produto.product_id }}, 'up')"
                            class="itembox-btn btn-up btn-cart-list-quantity full-height js-btn-qtd"
                            title="{{ button_update_quantidade }}">
                            <i class="fas fa-plus" aria-hidden="true"></i>
                          </button>
                        </div>
                      </div>
                    </label>

                  </div>
                  <div class="cart-list-total-price right-margin-small">
                    <span class="visible-block text-small text-gray">{{ column_total }}</span>
                    {% if produto.percentual_desconto > 0 %}
                      <span id="productPrice[{{ produto.key }}]" class="visible-block text-medium text-dark text-bold">{{ produto.total_discont }}</span>
                    {% else %}
                      <span id="productPrice[{{ produto.key }}]" class="visible-block text-medium text-dark text-bold">{{ produto.total }}</span>
                    {% endif %}
                  </div>
                </div>
                <a  data-product-session-key="{{produto.key}}" title="{{button_remove}}" class="listaescolar-remove visible-block text-small vertical-padding-small top-margin-small cursor-pointer">
                  <span>{{ text_remove }}</span>
                </a>
              </div>

            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="content-box js-fixed-on-top">

        <div class="paper bottom-margin-medium padding-large">
          <div class="flex nowrap-xs">
            {% if logo_lista %}
              <div class="right-padding-medium">
                <img src="{{logo_lista}}" width="120">
              </div>
            {% endif %}
            <div>
              <span class="text-medium text-dark text-bold visible-block">{{ infos_lista.escola }}</span>
              {% if endereco_escola %}
                <span class="text-small text-gray visible-block top-padding-small">{{ endereco_escola }}</span>
              {% endif %}
            </div>
          </div>
          {% if observacao_lista %}
            <div class="top-margin-small js-text-view-more">
              <span class="text-small text-gray js-obs-text">{{ observacao_lista }}</span>
            </div>
          {% endif %}
        </div>

        <div class="paper bottom-margin-medium padding-large">
          <div class="bottom-padding-x-small">
            <div class="flex nowrap-xs between-xs middle-xs vertical-padding-x-small totals-value">
              <span class="text-medium text-gray right-padding-x-small">{{ text_total_lista }}</span>
              <span id="priceTotal" class="text-medium text-dark text-bold text-nowrap left-padding-x-small">{{ total_lista }}</span>
            </div>
          </div>
          <button id="add-lista-to-cart" type="button" {{ produtos|length == 0 ? 'disabled' : '' }}
                  class="btn-default btn-full btn-large top-margin-small btn-proceed-checkout btn-checkout">
            <span>{{ button_fechar_lista }}</span>
          </button>
        </div>

        <a href="#" data-product-session-key="" data-tipo-edicao="{{value_tipo_restore}}" class="text-center visible-block top-margin-large btn-listaescolar-editar">{{text_products_removed}}</a>

      </div>
    </div>
  </div>
  <div class="load load-block">
    <div class="load load-block-image">
      <img src="assets/img/loading-black.svg" alt="loading">
    </div>
  </div>
  {{ content_bottom }}
</section>
{# <script src="catalog/view/theme/default/js/lista.escolar.produtos.js"></script> #}
<script type="text/javascript">
  var
    texConfirmCart = `{{text_confirm_cart}}`,
    linkAddToCart = `{{link_addToCart}}`,
    success = `{{ success }}`,
    errorWarning = `{{ error_warning }}`,
    observationList = `{{ observacao_lista }}` ;

  window.edicaoListaEscolar = function (tipoedicao, productID, restore, key) {
    var quantidade = document.getElementById("quantidade"+productID);
    quantidade = quantidade ? quantidade.value : '';

    var data = {tipo_edicao : tipoedicao, product_session_key: key, product_id: productID, quantidade: quantidade};
    if (restore !== '') {
      data.restore = restore;
    }
    $.ajax({
      url: 'index.php?route=listaescolar/listaescolar_produtos/alterarProdutoSessionLista',
      type: 'POST',
      data: data,
      success: function() {
        location.reload();
      }
    });
  };

  function onReloadQuantity(key, productID, interacton){
    var quantidade    = document.getElementById("quantity["+key+"]").value;
    var productPrice  = document.getElementById("productPrice["+key+"]");
    var priceTotal    = document.getElementById("priceTotal");
    var inputQtd      = document.getElementById("quantity["+key+"]");

    switch (interacton){
      case 'up': quantidade++; break;
      case 'down': quantidade--; break;
    }

    if(quantidade < 1){
      notificationMsg(`{{warning_quantity}}`, 'warning');
      quantidade = 1;
    }

    if(quantidade > 0){

      inputQtd.value = quantidade;

      var dataPost = {product_session_key: key, product_id: productID, quantity: quantidade};

      $.ajax({
        url: 'index.php?route=listaescolar/listaescolar_produtos/addItemLista',
        type: 'POST',
        data: dataPost,
        success: function(data) {
          productPrice.textContent   = data['priceProduct'];
          priceTotal.textContent     = data['priceTotal'];
          notificationMsg(data['message'], 'success');
        }
      });
    }
  }

</script>
{{ footer }}