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

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

{% block content %}

<div class="container-fluid">

  <div v-show="tabs[0].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_setting}</span>

    <base-card
      class="padding-large bottom-margin-large col-xs-12 col-md-8"
    >

      <div class="padding-medium border-gray rounded-small bottom-margin-medium background-light">
        <div
          @click="instructions = !instructions"
          class="flex flex-row middle-xs between-xs cursor-pointer text-medium text-dark"
        >
          <span>{ text_title_tab_setting }</span>
          <i class="fas fa-angle-down" aria-hidden="true" title="Expandir"></i>
        </div>

        <div v-show="instructions" class="top-padding-medium">

          <span class="text-medium text-gray visible-block">{{ text_title_tab_setting_desc }}</span>

          <div class="row small-space-xs vertical-margin-medium">

            <div class="col-xs-12 col-sm-6">
              <span class="text-small text-dark text-bold visible-block">{ text_autentication }</span>
              <a class="text-small text-gray visible-block bottom-margin-small text-word-wrap" :href="url.autentication" target="_blank">{ url.autentication }</a>
              <base-button
                apperance="outline"
                size="small"
                @click.native="onCopyUrl(url.autentication)"
              >
                { textUrlCallCopy }
              </base-button>
            </div>

            <div class="col-xs-12 col-sm-6">
              <span class="text-small text-dark text-bold visible-block">{ text_notification }</span>
              <span class="text-small text-gray visible-block bottom-margin-small text-word-wrap">{ url.notification }</span>
              <base-button
                apperance="outline"
                size="small"
                @click.native="onCopyUrl(url.notification)"
              >
                { textUrlNotyCopy }
              </base-button>
            </div>

          </div>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="mercadolivre_app_id"
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_app_id"
              name="mercadolivre_app_id"
              v-model="configurations.mercadolivre_app_id"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
              :required="true">
            </base-input>
          </validation-provider>


          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="mercadolivre_app_secret"
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_app_secret"
              name="mercadolivre_app_secret"
              v-model="configurations.mercadolivre_app_secret"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm"
              :required="true">
            </base-input>
          </validation-provider>


          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="mercadolivre_data_pedido"
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_data_pedido"
              :description="text_data_pedido_obs"
              name="mercadolivre_data_pedido"
              v-model="configurations.mercadolivre_data_pedido"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm"
              type="datetime"
              value-type="format"
              format="DD/MM/YYYY HH:mm:ss"
              time-title-format="DD/MM/YYYY"
              :required="true">
            </base-input>
          </validation-provider>

          <base-button
            apperance="primary"
            class="top-margin-small"
            :loading="loadingBtn"
            :disabled="!validate_account"
            @click.native="validateAccount"
          >
            {button_account}
          </base-button>

        </div>
      </div>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_attr_status"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          name="mercadolivre_attr_status"
          :label="entry_attr"
          :description="text_attr_description"
          v-model="configurations.mercadolivre_attr_status"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>


      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_debug"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          name="mercadolivre_debug"
          :label="entry_debug_status"
          v-model="configurations.mercadolivre_debug"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>


      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_status"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          name="mercadolivre_status"
          :label="entry_status"
          v-model="configurations.mercadolivre_status"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>


      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_pagina_produtos"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          name="mercadolivre_pagina_produtos"
          :label="entry_botao_pagina_produtos"
          v-model="configurations.mercadolivre_pagina_produtos"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>


      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_nfe_status"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          name="mercadolivre_nfe_status"
          :label="entry_mercadolivre_nfe_status"
          v-model="configurations.mercadolivre_nfe_status"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>


    </base-card>

  </div>

  <div v-show="tabs[1].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_advertisement}</span>

    <aside-content :title="titleTabsAside(tabAdvertisement)" size-height="large">
      <template slot="aside">
        <base-tabs
          :options="tabAdvertisement"
          vertical
          @click-tab="(value) => clickTab('tabAdvertisement', value)"
        >
        </base-tabs>
      </template>

      <div v-show="tabAdvertisement[0].active">

        <span id="category_tree_span" :class="[{'text-success':classCategory}, {'text-error':!classCategory}]">
            {configurations.mercadolivre_category_tree}
        </span>

        <validation-provider
          v-for="(parentValue, key) in mercadolivre_cat_selection"
          :key="key"
          tag="div"
          class="bottom-margin-large"
          name="mercadolivre_cat_selection"
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            @change="(value) => getCategories(value, key)"
            :label="(key == 0) ? entry_mercadolivre_category : ''"
            name="mercadolivre_cat_selection"
            :valid="valid"
            :disabled="disableForm">
            <option :ref="value.id" v-for="(value) in parentValue.options" :value="value.id" :key="value.id">{ value.name }</option>
          </base-select>
        </validation-provider>

        <base-button
          apperance="primary"
          class="top-margin-small"
          :loading="loadingBtn"
          @click.native="attCategories"
        >
          {button_upgrade}
        </base-button>

        <base-checkbox
          class="bottom-margin-small"
          name="mercadolivre_category_auto"
          :label="entry_detect_category"
          v-model="configurations.mercadolivre_category_auto"
          value="1"
          unchecked-value="0"
          :disabled="disableForm"
          inline
        >
        </base-checkbox>

        <hr class="bottom-border-gray bottom-margin-medium">

        <validation-provider
          tag="div"
          class="bottom-margin-large"
          name="mercadolivre_mercaListType"
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            name="mercadolivre_mercaListType"
            :label="entry_mercadolivre_listing_type"
            v-model="configurations.mercadolivre_mercaListType"
            :valid="valid"
            :disabled="disableForm">
            <option v-for="(value, key) in Type_MercadoLivremercaListType.getEnumList()" :value="key" :key="key">{ value }</option>
          </base-select>
        </validation-provider>

        <validation-provider
          tag="div"
          class="bottom-margin-large"
          name="mercadolivre_mercaCondition"
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            name="mercadolivre_mercaCondition"
            :label="entry_mercadolivre_condition"
            v-model="configurations.mercadolivre_mercaCondition"
            :valid="valid"
            :disabled="disableForm">
            <option v-for="(value, key) in Type_MercadoLivreCondition.getEnumList()" :value="key" :key="key">{ value }</option>
          </base-select>
        </validation-provider>

        <hr class="bottom-border-gray">

        <group-input
          :label="entry_mercadolivre_warranty"
          class="bottom-margin-large"
        >
          <validation-provider
            tag="div"
            name="mercadolivre_mercaWarrantyType"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="mercadolivre_mercaWarrantyType"
              v-model="configurations.mercadolivre_mercaWarrantyType"
              :valid="valid"
              :disabled="disableForm">
              <option value=""> -Select- </option>
              <option v-for="(value, key) in Type_Garantia.getEnumList()" :value="key" :key="key">{ value }</option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="mercadolivre_mercaWarranty"
            rules=""
            v-slot="{ errors, valid }">
            <base-input
              label=""
              name="mercadolivre_mercaWarranty"
              v-model="configurations.mercadolivre_mercaWarranty"
              :valid="valid"
              :disabled="disableForm">
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="mercadolivre_mercaWarrantyTypeTime"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="mercadolivre_mercaWarrantyTypeTime"
              label=""
              v-model="configurations.mercadolivre_mercaWarrantyTypeTime"
              :valid="valid"
              :disabled="disableForm">
              <option value=""> -Select- </option>
              <option v-for="(value, key) in Type_TempoGarantia.getEnumList()" :value="key" :key="key">{ value }</option>
            </base-select>
          </validation-provider>
        </group-input>


      </div>

      <div v-show="tabAdvertisement[1].active">

        <validation-provider
          tag="div"
          class="bottom-margin-large"
          name="mercadolivre_initial_description"
          rules=""
          v-slot="{ errors, valid }">
          <base-textarea
            :label="entry_description_initial"
            :description="entry_description_initial_obs"
            name="mercadolivre_initial_description"
            v-model="configurations.mercadolivre_initial_description"
            :error="errors[0]"
            :valid="valid"
            rows="2"
            :disabled="disableForm">
          </base-textarea>
        </validation-provider>


        <validation-provider
          tag="div"
          class="bottom-margin-large"
          name="mercadolivre_final_description"
          rules=""
          v-slot="{ errors, valid }">
          <base-textarea
            :label="entry_description_finally"
            :description="entry_description_finally_obs"
            name="mercadolivre_final_description"
            v-model="configurations.mercadolivre_final_description"
            :error="errors[0]"
            :valid="valid"
            rows="2"
            :disabled="disableForm">
          </base-textarea>
        </validation-provider>

      </div>
    </aside-content>

  </div>

  <div v-show="tabs[2].active">
    <market-price
      :market-price="marketPriceObject"
      :invalid-form="invalid"
      :loading-btn="loadingBtn"
      @alert="(alertObject) => alert = alertObject"
      @updatedvalue="(value) => mktPrice = value"
      @deleted="(mktPriceId) => mktPriceDelete = [...mktPriceDelete, mktPriceId]"
      @errors="setErrors"
    >
    </market-price>
  </div>

  <div v-show="tabs[3].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_statusOrder}</span>

    <base-card
      class="padding-large bottom-margin-large col-xs-12 col-md-8"
    >
      <span class="text-small">{text_statuspedido_obs}</span>

      <div class="top-margin-large">
        <validation-provider
          v-for="(value, key) in configurations.merca_status"
          :key="key"
          tag="div"
          class="bottom-margin-large"
          :name=`merca_status[${value.type}]`
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            :label=`${value.name}`
            :name=`merca_status[${value.type}]`
            v-model="value.status"
            :valid="valid"
            :disabled="disableForm">
            <option v-for="(order_status, key) in order_statuses" :key="key" :value="order_status.order_status_id">{order_status.name}</option>
          </base-select>
        </validation-provider>

        <validation-provider
          tag="div"
          class="bottom-margin-large"
          name="mercadolivre_order_status_nfe"
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            :label="entry_mercadolivre_order_status_nfe"
            name="mercadolivre_order_status_nfe"
            v-model="configurations.mercadolivre_order_status_nfe"
            :valid="valid"
            :disabled="disableForm">
            <option v-for="(order_status, key) in order_statuses" :key="key" :value="order_status.order_status_id">{order_status.name}</option>
          </base-select>
        </validation-provider>

      </div>

    </base-card>

  </div>

  <div v-show="tabs[4].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_msgAutomatic}</span>

    <div class="row">
      <div class="col-xs-12 col-md-8">
        <aside-content
          v-show="parseBoolean(configurations.mercadolivre_automatic_message_status)"
          :title="titleTabsAside(tabsMsgAutomatic)"
          size-height="large">
          <template slot="aside">
            <base-tabs
              :options="writtenTabs"
              vertical
              @click-tab="(value) => clickTab('tabsMsgAutomatic', value)"
            >
            </base-tabs>
          </template>

          <div
            v-for="(tabs, key) in tabsMsgAutomatic"
            :key="key"
            v-show="tabs.active"
          >
            <validation-provider
              tag="div"
              class="bottom-margin-large"
              :name=`mercadolivre_automatic_message[${tabs.id}]`
              rules=""
              mode="passive"
              v-slot="{ errors, valid }">
              <base-textarea
                :name=`mercadolivre_automatic_message[${tabs.id}]`
                v-model="configurations.mercadolivre_automatic_message[tabs.id]"
                :error="errors[0]"
                :disabled="disableForm"
                :valid="valid"
                rows="7"
                :ref=`personalizedText_${tabs.id}`
                v-textarea-with-var
              >
              </base-textarea>
            </validation-provider>

            <div v-if="typeof arrayTags[tabs.id] !='undefined'" class="flex flex-row top-margin-medium">
              <base-button
                v-for="(value, key) in arrayTags[tabs.id]"
                :key="key"
                apperance="outline"
                size="small"
                class="right-margin-small bottom-margin-small"
                @click.native="addElement(key, tabs.id)"
              >
                <span>{value}</span>
              </base-button>
            </div>

          </div>

        </aside-content>
      </div>
      <div class="col-xs-12 col-md-4">
        <base-card
          class="padding-medium bottom-margin-large col-xs-12 col-md-8"
        >
          <validation-provider
            tag="div"
            name="mercadolivre_automatic_message_status"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="mercadolivre_automatic_message_status"
              :label="entry_status"
              v-model="configurations.mercadolivre_automatic_message_status"
              :valid="valid"
              :disabled="disableForm">
              <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
            </base-select>
          </validation-provider>
        </base-card>
      </div>

    </div>

  </div>

  <div v-show="tabs[5].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_commission}</span>

    <div class="row">
      <div class="col-xs-12 col-md-8">
        <base-card
          v-show="parseBoolean(configurations.mercadolivre_comission_status)"
          class="padding-medium bottom-margin-large"
        >

          <validation-provider
            v-for="(merca_comission, key) in mercadolivre_types_comission"
            :key="key"
            tag="div"
            class="bottom-margin-large"
            :name=`mercadolivre_comission_${merca_comission.value}`
            rules=""
            v-slot="{ errors, valid }">
            <base-input
              :name=`mercadolivre_comission_${merca_comission.value}`
              :label=`${text_adverts}${merca_comission.name}(%)`
              v-model="configurations[`mercadolivre_comission_${merca_comission.value}`]"
              :valid="valid"
              :placeholder="text_placeholder_comission"
              mask="number"
              :disabled="disableForm">
            </base-input>
          </validation-provider>

        </base-card>
      </div>

      <div class="col-xs-12 col-md-4">

        <base-card
          class="padding-medium bottom-margin-large col-xs-12 col-md-8"
        >
          <validation-provider
            tag="div"
            name="mercadolivre_comission_status"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="mercadolivre_comission_status"
              :label="entry_status"
              v-model="configurations.mercadolivre_comission_status"
              :valid="valid"
              :disabled="disableForm">
              <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
            </base-select>
          </validation-provider>
        </base-card>

      </div>

    </div>

  </div>

  <div v-show="tabs[6].active">

    <div class="flex middle-xs">
      <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_shipping}</span>
      <a href="https://manual.futurasistemas.com.br/manual-do-sistema/como-configurar-o-modulo-do-mercado-livre#envio"
         class="text-medium text-primary horizontal-padding-x-small bottom-margin-medium" target="_blank" data-tooltip="Ajuda">
        <i class="fas fa-question-circle"></i>
      </a>
    </div>

    <base-card
      class="padding-large bottom-margin-large col-xs-12 col-md-8"
    >

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_shipping_alter"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          :label="entry_type_shipping"
          name="mercadolivre_shipping_alter"
          v-model="configurations.mercadolivre_shipping_alter"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(modoenvio, key) in modoenvios" :key="key" :value="modoenvio.id" :disabled="!modoenvio.status">{modoenvio.name}</option>
        </base-select>
      </validation-provider>

      <base-button
        apperance="primary"
        class="bottom-margin-large"
        :loading="loadingBtn"
        @click.native="shippingType"
      >
        {button_upgrade}
      </base-button>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_shipping_free"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          :label="entry_mercadolivre_shipping_free"
          name="mercadolivre_shipping_free"
          v-model="configurations.mercadolivre_shipping_free"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_cnpj_transportadora"
        :rules="(configurations.mercadolivre_cnpj_transportadora) ? 'cnpj' : ''"
        v-slot="{ errors, valid }">
        <base-input
          name="mercadolivre_cnpj_transportadora"
          :label="entry_cnpj_transportadora"
          v-model="configurations.mercadolivre_cnpj_transportadora"
          :valid="valid"
          :error="errors[0]"
          mask="cnpj"
          :disabled="disableForm">
        </base-input>
      </validation-provider>

    </base-card>

  </div>

  <div v-show="tabs[7].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_email}</span>

    <base-card
      class="padding-large bottom-margin-large col-xs-12 col-md-8"
    >

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_order_email_status"
        rules=""
        v-slot="{ errors, valid }">
        <base-select
          :label="entry_alert_mail"
          :description="entry_alert_mail_obs"
          name="mercadolivre_order_email_status"
          v-model="configurations.mercadolivre_order_email_status"
          :valid="valid"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_alert_emails"
        :rules="parseBoolean(configurations.mercadolivre_order_email_status) ? 'required': ''"
        v-slot="{ errors, valid }">
        <base-textarea
          :label="entry_alert_emails"
          :description="entry_alert_emails_obs"
          name="mercadolivre_alert_emails"
          v-model="configurations.mercadolivre_alert_emails"
          :error="errors[0]"
          :valid="valid"
          rows="2"
          :disabled="disableForm">
        </base-textarea>
      </validation-provider>

    </base-card>

  </div>

  <div v-if="userGroup" v-show="tabs[8].active">

    <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_testuser}</span>

    <base-card
      class="padding-large bottom-margin-large col-xs-12 col-md-8"
    >

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_user_buyer"
        rules=""
        v-slot="{ errors, valid }">
        <base-textarea
          :label="entry_mercadolivre_user_buyer"
          :description="entry_mercadolivre_user_buyer_obs"
          name="mercadolivre_user_buyer"
          v-model="configurations.mercadolivre_user_buyer"
          :error="errors[0]"
          :valid="valid"
          rows="2"
          :disabled="disableForm">
        </base-textarea>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="mercadolivre_user_seller"
        rules=""
        v-slot="{ errors, valid }">
        <base-textarea
          :label="entry_mercadolivre_user_seller"
          :description="entry_mercadolivre_user_seller_obs"
          name="mercadolivre_user_seller"
          v-model="configurations.mercadolivre_user_seller"
          :error="errors[0]"
          :valid="valid"
          rows="2"
          :disabled="disableForm">
        </base-textarea>
      </validation-provider>

    </base-card>

  </div>

</div>
{% endblock %}