{% extends 'base/list.twig' %}
{% block header_actions %} 
    <base-button
      class="btn-medium-square js-suspended-filter-control top-margin-large"
      type="button"
      :loading="btnSubmitLoading2"
      :disabled="disableForm"
      @click.native="generatePdf()"
      title="Gerar Pdf (Excluindo produtos e carrinhos com quantidade 1 em ambos)">
      <i class="fa-solid fa-download" ></i>
    </base-button>
{% endblock %}

{% block content %}
<div class="container-fluid">
 <div class="row x-small-space-xs flex middle-xs">
    <div class="horinzontal-padding-small col-xs-12 col-md-3">
        <validation-provider
          tag="div"
          name="filterCart"
          rules=""
          v-slot="{errors, valid}">
            <base-select
             name="filter"
             :label ="filter_entry"
             :valid="valid"
             v-model="filters.filterCart"
             >
              <option value="0" id="value_carrinhos">
              Carrinhos
              </option>
              <option value="1" id="value_produtos">
              Produtos
              </option>
           </base-select>
        </validation-provider>  
    </div>

    <div class="horinzontal-padding-small col-xs-12  col-xs-width-auto">
        <validation-provider
          tag="div"
          name="greaterthan"
          rules=""
          v-slot="{ errors, valid }">
          <base-input
            name="greaterthan"
            type="text"
            :error="errors[0]"
            :valid="valid"
            v-model="filters.greaterthan"
            mask="number"
            :label="entry_greaterthan">
           </base-input>
        </validation-provider>   
    </div>
    
    <div class="horinzontal-padding-small col-xs-12 col-md">
        <validation-provider
         tag="div"
         name="search"
          v-slot="{ errors, valid }">
         <base-input
          type="text"
          name="search"
          :error="errors[0]"
          :valid="valid"
         v-model="filters.search"
          :label="entry_search">
         </base-input>
        </validation-provider>
    </div>
   
    <div class="horizontal-padding-small col-xs-width-auto">
     <base-button
      class="btn-medium-square js-suspended-filter-control top-margin-large"
      type="button"
      id="suspended-side-filter"
      :disabled="disableForm"
      :loading="btnSubmitLoading"
      @click.native="filter()"
      >
      <i class="fas fa-filter"></i>
      <span>Filtrar</span>
     </base-button>
   </div>
</div>
  <div v-if="list.length > 0" id="relatorio_pdf">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box background-white bottom-border-gray padding-medium top-margin-small">
              <div class="row no-space-xs middle-xs">
                <div class="col-xs-4">
                  <span class="text-small text-dark text-bold">{{ column_name }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold">{{ column_id }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold">{{ column_id_futura }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold" title="Unidades abandonadas nos carrinhos">{{ column_quantity }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold" title="Quantidade de carrinhos em que o produto foi abandonado">{{ column_percent }}</span>
                </div>          
              </div>
            </div>
              <div v-for="lists in list" class="content-box background-white padding-medium bottom-border-gray" style="page-break-inside: avoid;"> 
                <div class="row no-space-xs middle-xs" style="page-break-inside: avoid;">      
                  <div class="col-xs-4">
                    <span v-text="lists.name" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.product_id" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.id_futura" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.total_quantity" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.total_carts" class="text-small text-dark "></span>
                  </div>   
                </div>
              </div>
          </div>
        </div>
      </div>
    
    <div v-else class="row">
     <div class="col-xs-12">
       <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center top-margin-medium">
         <span class="text-medium text-gray">{{ text_no_results }}</span>
       </div>
     </div>
    </div>
 </div>
 
{% endblock %}
