{% extends 'base/insert_list.twig' %}

{% block attributes_the_header %}
  :help="url.help"
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div v-if="activeFilter" @click="activeFilter = false" class="overlay overlay-black-3 js-postcode-overlay"></div>
    <div class="row" > <!-- Inicio Filtros -->
      <div class="col-xs-12">
        <div class=" pull-right bottom-padding-small  flex between-xs middle-xs">
            <a v-if="textFilter" @click="removeFilters" class="text-small text-primary text-decoration-none horizontal-padding-large vertical-padding-small" >
              <span v-text="textFilter"></span>
            </a>
          <button type="button" @click="activeFilter = true" class="btn-default btn-medium-square btn-primary " id="suspended-side-filter">
            <i class="fas fa-filter"></i>
            <span>Filtrar</span>
          </button>
        </div>
        <div v-show="activeFilter" class=" active adm-suspended-side background-white shadow-large flex flex-column auto-overflow ">
          <div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
            <span class="text-x-large text-dark">Filtros</span>
            <i @click="activeFilter = false" class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
          </div>
          <div class="adm-suspended-side-content horizontal-padding-large">
              <span class="field-label" v-text="text_description"></span>
              <base-input
                type="text"
                name="filter_name"
                mask="alphanumeric"
                id="filter_name"
                v-model="filters.description"
                autocomplete="off"
               >
              </base-input>

              <span class="field-label" v-text="text_gender"></span>
              <base-input
                type="text"
                name="filter_code"
                id="filter_code"
                mask="alphanumeric"
                v-model="filters.gender"
                autocomplete="off"
              ></base-input>
          </div>

          <div class="padding-large">
            <a @click="filter(1)" id="js-btn-filter" class="btn-default btn-medium btn-full btn-primary">
              <span>{{ button_filter }}</span>
            </a>
          </div>
        </div>
      </div>
    </div> <!-- Fim Filtros -->

    <base-card v-if="list" class="row col-xs-offset-0 col-xs-offset-0-right top-margin-medium bottom-margin-medium" v-for="chart in list">
      <div class="col-xs-6 ">
        <div class="row ">
          <base-checkbox
            class="left-margin-medium col-xs-1"
            type="checkbox"
            :value="chart.measure_manufacturer_GRID_id"
            unchecked-value="0"
            :v-model="chartSelected"
            @change="toogleSelected(chart.measure_manufacturer_GRID_id)"
          >
          </base-checkbox>
          <div class="col-xs-10">
            <span class="text-small text-dark text-bold" v-text="chart.manufacturer_description"></span>
          </div>
        </div>
      </div>
      <div class="col-xs-6 cursor-pointer" @click="loadChart(chart)">
        <div class="row">

          <div class="col-xs-4">
            <span class="text-small text-dark text-bold" v-text="text_MeasureGender"></span>
          </div>

          <div class="col-xs-4">
            <span class="text-small text-dark text-bold" v-text="text_MeasureBrand"></span>
          </div>

          <div class="col-xs-4">
            <span class="text-small text-dark text-bold" v-text="text_MeasureId"></span>
          </div>
        </div>
        <div class=" ">

          <div class="row">
            <div class="col-xs-4">
              <span class="text-small text-dark" v-text="chart.GENDER"></span>
            </div>
            <div class="col-xs-4">
              <span class="text-small text-dark" v-text="chart.name"></span>
            </div>
            <div class="col-xs-4">
              <span class="text-small text-dark" v-text="chart.SIZE_GRID_ID"></span>
            </div>
          </div>
        </div>
      </div>
    </base-card>
    <base-card v-if="list.length == 0">
      <div class="row">
        <div class="col-xs-12">
          <div class="  vertical-padding-x-large horizontal-padding-large text-center">
            <span class="text-medium text-gray" v-text="text_no_results"></span>
          </div>
        </div>
      </div>
    </base-card>
    <div class="row">
      <div class="col-xs-12">
        <list-Pagination
          :pagination="pagination"
          :current-Page="currentPage"
          :limit="limit"
          @callback="filter"
        ></list-Pagination>
      </div>
    </div>
  </div>
{% endblock %}

{% block contentInsert %}
  <div class="container-fluid">
    <div  class="row">
      <div class="col-xs-4">
        <base-card >

          <div class="col-xs-12">
            <base-select-search
              name="category_id"
              :label="entry_mercadolivre_category"
              type="date"
              @callback="selectReturnCategoryMain"
              @focusin.native="clearSelections"
              :option="categories_main"
            >
            </base-select-search>

            <base-select-search
              v-for="(caregory, valkey) in subCategories"
              :name="'category_id'+valkey"
              type="date"
              @callback="selectReturnCategoryMain"
              :option="caregory[categoryMain[valkey]]"
            >
            </base-select-search>

          </div>
        </base-card>
        <div  v-if="chartsSearch.domain_id" class="vertical-margin-medium">
          <base-card >
            <div class="col-xs-12 text-center">
              <label class="field-label" v-text="text_domain_id"></label>
              <span class="col-xs-12" v-text="chartsSearch.domain_id"></span>
            </div>
            <div class="col-xs-12">
              <base-select-search
                name="Manufacturer"
                :label="text_MeasureBrand"
                type="date"
                @callback="selectReturnBrand"
                :option="manufacturer"
              >
              </base-select-search>
              <base-select-search
                v-if="listGender"
                name="Gender"
                :label="text_MeasureGender"
                type="date"
                @callback="selectReturnGender"
                :option="listGender"
              >
              </base-select-search>

              <base-button
              class="btn-small btn-full top-margin-large"
              type="button"
              id="suspended-side-filter"
              :disabled="disableForm"
              :loading="btnSubmitLoading"
              @click.native="findChart"
             >
              <span>Buscar</span>
              </base-button>
            </div>

          </base-card>
        </div>
      </div>

      <div  class="col-xs-8">
        <base-card class="row padding-large vertical-no-margin" v-if="listBrandsMl.names">
          <div class="col-xs-12">
            <base-select-search
              v-if="!chartsSearch.boolDatabase"
              name="description_ML"
              :label="entry_mercadolivre_MLBrand"
              type="date"
              @callback="returnMLbrand"
              :option="listBrandsMl.names"
            ></base-select-search>
            <base-input
            v-else
            v-model="chartsSearch.name"
            name="description_ML"
            :label="entry_mercadolivre_MLBrand"

            >
            </base-input>
            <base-button
              v-if="(!chartsSearch.boolDatabase) && (listBrandsMl['names'][0]['type'] != 'BRAND')"
              class="btn-small"
              type="button"
              id="addNewChart"
              :disabled="disableForm"
              :loading="btnSubmitLoading"
              @click.native="AddNewChart"
            >
              +
            </base-button>
          </div>

        </base-card>

        <base-card v-if="listBrandsMl.names" class="row top-margin-x-large" >
          <base-grid
            :label="'Guia de tamanhos'"
            :description="'A tabela a seguir é a representação de tamanhos que serão indicadas no Marcado Livre'"
            :fields="title"
            :body-data="data"
            :disabled-remove="true"
            :error-grid="errors? errors : []",
            :disabled-button="brandType == 'BRAND'? true : false"
          >
          </base-grid>
        </base-card>
      </div>
    </div>

  </div>
{% endblock %}
