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

{% block content %}

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div v-show="tabs[0].active">
          <div class="row">
            <div class="col-xs-12 col-md-8">
              <div class="content-box bottom-padding-medium">
                <span class="text-x-large text-dark">{ tabs[0].text }</span>
              </div>
              <base-card class="padding-large">
                <base-select
                  name="listapresente_status"
                  :label="entry_status"
                  v-model="configurations.listapresente_status"
                  >
                  <option
                    v-for="(value, key) in Type_Status"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>

                <base-select
                  name="futuralistapresente_cod_status_completo"
                  :label="entry_order_status"
                  :description="entry_order_status_desc"
                  v-model="configurations.futuralistapresente_cod_status_completo"
                  >
                  <option
                    v-for="{order_status_id, name} in order_statuses"
                    :key="order_status_id"
                    :value="order_status_id"
                  >
                    { name }
                  </option>
                </base-select>

                <base-input
                  type="text"
                  name="futuralistapresente_max_listas"
                  v-model="configurations.futuralistapresente_max_listas"
                  mask="number"
                  :label="entry_max_list"
                >
                </base-input>

                <validation-provider
                  tag="div"
                  name="categoryDescription">
                  <base-input
                    type="text"
                    class="top-padding-medium"
                    name="newCategory"
                    v-model="newCategory"
                    :label="entry_new_category"
                    :description="entry_new_category_description"
                    @keypress="removeErrors">
                  </base-input>
                  <span v-if="newCategoryError != ''" class="text-small text-error">{ newCategoryError }</span>
                </validation-provider>

                <div class="top-padding-small flex flex-row">
                  <base-button
                    apperance="primary"
                    size="small"
                    class="right-margin-small bottom-margin-small"
                    :loading="btnNewCategory"
                    @click.native="handleNewCategory">
                    <span>Adicionar Categoria</span>
                  </base-button>
                </div>
                <span class="text-small text-bold visible-block top-padding-large">{ entry_enable_category }</span>

                  <validation-provider
                    tag="div"
                    class="top-padding-large"
                    rules="required"
                    name="futuralistapresente_cat_habilitas"
                    v-slot="{ errors, valid }">
                    <span v-if="!categoriesEnabled.length" class="text-small text-error">{error_checkdCaregory}</span>
                    <span  v-for="category in categories" class="row hover:shadow-medium top-margin-small">
                      <base-checkbox
                        v-if="editCategory != category.id_cat_lista"
                        :key="category.id_cat_lista"
                        type="text"
                        class="col-xs-11"
                        name="futuralistapresente_cat_habilitas"
                        :value="category.id_cat_lista"
                        :label="category.desc_cat_lista"
                        :value-checked="categoriesEnabled"
                        :disabled="disableForm"
                        @change="newCategoriesEnabled => categoriesEnabled = newCategoriesEnabled"
                       >
                      </base-checkbox>

                      <base-input
                        v-else
                        ref="description"
                        v-focus
                        class="col-xs-11 spacing-input-vue-listapresente"
                        :value="textDescription"
                        @keydown.esc="bChamaEvento = false; editCategory = ''"
                        @keydown.enter="confirmEdit"
                        @focusout="confirmEdit"
                        v-model="textDescription"
                        :data-id-category="category.id_cat_lista"
                      ></base-input>
                      <i
                        name="btn_delete_category"
                        @click="editmodeCategory"
                        :data-id-category="category.id_cat_lista"
                        class="fas fa-edit cursor-pointer top-padding-medium right-margin-small" ></i>
                      <i
                        name="btn_delete_category"
                        @click="categoryDelete"
                        :data-id-category="category.id_cat_lista"
                        class="fas fa-trash-alt cursor-pointer top-padding-medium" ></i>
                    </span>
                  </validation-provider>


                <base-select
                  name="futuralistapresente_Exibe_Totais"
                  class="top-padding-large"
                  :label="entry_labels_totais"
                  v-model="configurations.futuralistapresente_Exibe_Totais"
                  >
                  <option
                    v-for="(value, key) in Type_DsimDnao"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>

                <base-select
                  name="futuralistapresente_Exibe_Coluna_Estoque_Vendido"
                  :label="entry_coluna_estoque_vendido"
                  v-model="configurations.futuralistapresente_Exibe_Coluna_Estoque_Vendido"
                  >
                  <option
                    v-for="(value, key) in Type_DsimDnao"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>

                <base-select
                  name="futuralistapresente_Intervalo_Validade"
                  :label="entry_intervalo_validade"
                  :description="entry_intervalo_validade_description"
                  v-model="configurations.futuralistapresente_Intervalo_Validade"
                  >
                  <option
                    v-for="item in validity"
                    :key="item.value"
                    :value="item.value"
                  >
                    { item.text }
                  </option>
                </base-select>

                <base-select
                  name="futuralistapresente_config_language_lista"
                  :label="entry_language"
                  v-model="configurations.futuralistapresente_config_language_lista"
                  >
                  <option
                    v-for="language in languages"
                    :key="language.language_id"
                    :value="language.language_id"
                  >
                    { language.name }
                  </option>
                </base-select>

                <base-input
                  type="text"
                  name="futuralistapresente_config_titulo_busca"
                  v-model="configurations.futuralistapresente_config_titulo_busca"
                  :label="entry_titulo_busca"
                >
                </base-input>

                <base-select
                  name="futuralistapresente_order_status_sale"
                  :label="column_order_status_sale"
                  :description="column_order_status_sale_description"
                  v-model="configurations.futuralistapresente_order_status_sale"
                  >
                  <option
                    v-for="order_status in order_statuses"
                    :key="order_status.order_status_id"
                    :value="order_status.order_status_id"
                  >
                    { order_status.name }
                  </option>
                </base-select>

                <group-input :label="entry_image_lista" class="top-padding-small">
                  <validation-provider
                    tag="div"
                    rules="required"
                    name="futuralistapresente_config_image_lista_width"
                    v-slot="{ errors, valid }"
                  >
                    <base-input
                      type="text"
                      name="futuralistapresente_config_image_lista_width"
                      v-model="configurations.futuralistapresente_config_image_lista_width"
                      mask="number"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    >
                    </base-input>
                  </validation-provider>
                  <validation-provider
                    tag="div"
                    rules="required"
                    name="futuralistapresente_config_image_lista_height"
                    v-slot="{ errors, valid }"
                  >
                    <base-input
                      type="text"
                      name="futuralistapresente_config_image_lista_height"
                      v-model="configurations.futuralistapresente_config_image_lista_height"
                      mask="number"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    >
                    </base-input>
                  </validation-provider>
                </group-input>
              </base-card>
            </div>
          </div>
        </div>
        <div v-show="tabs[1].active">
          <div class="row">
            <div v-if="listsExists" class="col-xs-12">
              <div class="content-box bottom-padding-medium">
                <span class="text-x-large text-dark">{ tabs[1].text }</span>
              </div>
              <base-card
                v-for="(list, key) in lists"
                :key="key"
                class="padding-large bottom-margin-small cursor-pointer"
                @click.native="handleModal(list)"
              >
                <div class="row x-small-space-xs middle-xs">
                  <div class="col-xs-12 col-md-2">
                    <span class="text-dark visible-block">{list.nome}</span>
                    <span :class="list.status == 'Habilitado' ? 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success' : 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error'">{list.status}</span>
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <span class="text-dark visible-block">{list.cliente}</span>
                    <span class="text-gray text-small">Cat.:{list.categoria}</span>
                  </div>
                  <div class="col-xs-6 col-md">
                    <span class="text-dark" data-tooltip="Data do evento">{list.data_evento}</span>
                  </div>
                  <div class="col-xs-6 col-md">
                    <span class="text-dark" data-tooltip="Data de validade">{list.data_validade}</span>
                  </div>
                  <div class="col-xs-6 col-md-1">
                    <span class="text-dark" data-tooltip="Itens vendidos">{list.vendidos}</span>
                  </div>
                  <div class="col-xs-6 col-md-1">
                    <span class="text-dark" data-tooltip="Estoque inicial">{list.estoque}</span>
                  </div>
                  <div class="col-xs-6 col-md-1">
                    <span class="text-dark" data-tooltip="Valor confirmado">{list.venda_confirmada}</span>
                  </div>
                  <div class="col-xs-6 col-md-1">
                    <span class="text-dark" data-tooltip="Valor total">{list.valor_total}</span>
                  </div>
                </div>
              </base-card>
            </div>
            <div v-else="listsExists" class="col-xs-12">
              <base-card class="padding-large text-center">
                <span class="text-dark text-large">{text_no_results}</span>
              </base-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <base-modal
    v-show="showModal"
    :title="'Lista: ' + selectedListInfo.nome"
    :overlay="true"
    full-height
    @close="closeModal">
    <template #aside>
      <base-tabs :options="modalTabs" full vertical></base-tabs>
    </template>
    <div class="flex full-height auto-overflow padding-medium">
      <div v-show="modalTabs[0].active">
        <div class="row small-space-xs">
          <div class="col-xs-12">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_cliente}</span>
            <span class="text-dark text-medium">{selectedListInfo.cliente}</span>
          </div>
          <div class="col-xs-12 col-md-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_cadastro}</span>
            <span class="text-dark text-medium">{selectedListInfo.data_lista}</span>
          </div>
          <div class="col-xs-12 col-md-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_validade}</span>
            <span class="text-dark text-medium">{selectedListInfo.data_validade}</span>
          </div>
          <div class="col-xs-12 col-md-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_evento}</span>
            <span class="text-dark text-medium">{selectedListInfo.data_evento}</span>
          </div>
          <div class="col-xs-12 col-md-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_total_itens}</span>
            <span class="text-dark text-medium">{selectedListInfo.itens}</span>
          </div>
          <div class="col-xs-12 col-md-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_itens_vendidos}</span>
            <span class="text-dark text-medium">{selectedListInfo.vendidos}</span>
          </div>
          <div class="col-xs-12 col-md-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_valor_vendido}</span>
            <span class="text-dark text-medium">{selectedListInfo.venda_confirmada}</span>
          </div>
          <div class="col-xs-12">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_thankyou_note}</span>
            <span class="text-dark text-medium">{selectedListInfo.frase}</span>
          </div>
        </div>
      </div>
      <div v-show="modalTabs[1].active">
        <div class="row small-space-xs">
          <div class="col-xs-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_logradouro}</span>
            <span class="text-dark text-medium">{selectedListInfo.logradouro}</span>
          </div>
          <div class="col-xs-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_numero}</span>
            <span class="text-dark text-medium">{selectedListInfo.numero}</span>
          </div>
          <div class="col-xs-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_bairro}</span>
            <span class="text-dark text-medium">{selectedListInfo.bairro}</span>
          </div>
          <div class="col-xs-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_cep}</span>
            <span class="text-dark text-medium">{selectedListInfo.cep}</span>
          </div>
          <div class="col-xs-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_cidade}</span>
            <span class="text-dark text-medium">{selectedListInfo.cidade}</span>
          </div>
          <div class="col-xs-6">
            <span class="text-small text-gray visible-block bottom-padding-x-small">{entry_estado}</span>
            <span class="text-dark text-medium">{selectedListInfo.estado}</span>
          </div>
        </div>
      </div>
      <div class="full-width" v-show="modalTabs[2].active">
        <div v-for="product in selectedListInfo.produtos">
          <div class="flex nowrap-xs bottom-padding-large">
            <div>
              <img :src="product.imagem"/>
            </div>
            <div class="left-padding-medium text-ellipsis">
              <span class="text-dark text-medium visible-block bottom-padding-x-small text-ellipsis">{product.nome}</span>
              <div class="bottom-padding-x-small">
                <span class="text-gray text-small">{entry_amount}</span>
                <span class="text-dark text-medium">{product.qtde}</span>
              </div>
              <div class="bottom-padding-x-small">
                <span class="text-gray text-small">{entry_purchased}</span>
                <span class="text-dark text-medium">{product.qtdeComp}</span>
              </div>
              <div>
                <span class="text-gray text-small">{entry_value}</span>
                <span class="text-dark text-medium">{product.valor}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="modalTabs[3].active">
        <div v-show="verifyBuyers">
          <div v-for="product in selectedListInfo.produtos">
            <div v-show="product.compradores.length > 0">
              <div class="flex bottom-padding-medium">
                <img :src="product.imagem" width="40" height="40" />
                <div class="left-padding-small">
                  <span class="text-dark visible-block">{product.nome}</span>
                </div>
              </div>
              <div class="row small-space-xs">
                <div class="col-xs-12">
                  <span class="text-gray visible-block bottom-padding-x-small">{entry_nome}</span>
                  <span class="text-dark text-medium" v-for="buyer in product.compradores">{buyer.nome} {buyer.sobrenome}</span>
                </div>
                <div class="col-xs-12">
                  <span class="text-gray visible-block bottom-padding-x-small">{entry_email}</span>
                  <span class="text-dark text-medium" v-for="buyer in product.compradores">{buyer.email}</span>
                </div>
                <div class="col-xs-12">
                  <span class="text-gray visible-block bottom-padding-x-small">{entry_phone}</span>
                  <span class="text-dark text-medium" v-for="buyer in product.compradores">{buyer.fone}</span>
                </div>
              </div>
              <div class="bottom-border-gray vertical-margin-large full-width"></div>
            </div>
          </div>
        </div>
        <div v-show="!verifyBuyers">
          <span class="text-dark text-large">{entry_no_buyers}</span>
        </div>
      </div>
    </div>
  </base-modal>

{% endblock %}
