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

{% 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 v-if="configurations.skyhub_invalid_credential==1" class="warning full-width top-margin-small">
        { warning_skyhub_credential }
      </div>

      <span class="text-small text-dark visible-block bottom-margin-large">{ text_skyhub_observation }</span>

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

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

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

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

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

        <span
          class="visible-block text-medium text-dark bottom-margin-medium top-margin-medium cursor-pointer"
          @click="handleModal()"
        >{ entry_account_b2w }</span>

      </div>

    </base-card>

  </div>

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

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

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

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

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

    </base-card>

  </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_shipping}</span>

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

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

      <span class="visible-block text-small text-dark bottom-margin-medium">{text_shipping_info}</span>

      <validation-provider
        v-for="(value, index) in TypeSkyHub_FreteEstrutMerc.getEnumList()"
        :key="index"
        tag="div"
        :name=`skyhub_shipping_method[${index}]`
        rules=""
        v-slot="{ errors, valid }">
          <base-checkbox
            :label="value"
            :name=`skyhub_shipping_method[${index}]`
            v-model="configurations.skyhub_shipping_method[index]"
            :value="index"
            unchecked-value="0"
            :disabled="disableForm"
          >
        </base-checkbox>
      </validation-provider>

    </base-card>

  </div>

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

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

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

      <span class="visible-block text-small text-dark bottom-margin-medium">{text_order_status}</span>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_new"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_new'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_new"
          :label="entry_order_status_new"
          :description="text_order_status_new"
          v-model="configurations.skyhub_order_status_new"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_aproved"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_aproved'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_aproved"
          :label="entry_order_status_aproved"
          :description="text_order_status_aproved"
          v-model="configurations.skyhub_order_status_aproved"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_canceled"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_canceled'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_canceled"
          :label="entry_order_status_canceled"
          :description="text_order_status_canceled"
          v-model="configurations.skyhub_order_status_canceled"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_shipped"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_shipped'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_shipped"
          :label="entry_order_status_shipped"
          v-model="configurations.skyhub_order_status_shipped"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_nfe"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_nfe'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_nfe"
          :label="entry_order_status_nfe"
          v-model="configurations.skyhub_order_status_nfe"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_delivered"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_delivered'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_delivered"
          :label="entry_order_status_delivered"
          :description="text_order_status_delivered"
          v-model="configurations.skyhub_order_status_delivered"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_shipment_exception"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_shipment_exception'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_shipment_exception"
          :label="entry_order_status_shipment_exception"
          :description="text_order_status_shipment_exception"
          v-model="configurations.skyhub_order_status_shipment_exception"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_confirm_stock"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_confirm_stock'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_confirm_stock"
          :label="entry_order_status_confirm_stock"
          :description="text_order_status_confirm_stock"
          v-model="configurations.skyhub_order_status_confirm_stock"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_confirmed_stock"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_confirmed_stock'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_confirmed_stock"
          :label="entry_order_status_confirmed_stock"
          :description="text_order_status_confirmed_stock"
          v-model="configurations.skyhub_order_status_confirmed_stock"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_canceled_stock"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_canceled_stock'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_canceled_stock"
          :label="entry_order_status_canceled_stock"
          :description="text_order_status_canceled_stock"
          v-model="configurations.skyhub_order_status_canceled_stock"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="skyhub_order_status_processing_store"
        :rules="{
            handlerValidation: {
              valid: validateDuplicateStatus.valid['skyhub_order_status_processing_store'],
              message: validateDuplicateStatus.message,
            }
        }"
        v-slot="{ errors, valid }">
        <base-select
          name="skyhub_order_status_processing_store"
          :label="entry_order_status_processing_store"
          :description="text_order_status_processing_store"
          v-model="configurations.skyhub_order_status_processing_store"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in order_statuses" :value="value.order_status_id" :key="value.order_status_id">{ value.name }</option>
        </base-select>
      </validation-provider>

    </base-card>

  </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.skyhub_comission_status)"
          class="padding-large bottom-margin-large"
        >

          <validation-provider
            v-for="(value, index) in TypeSkyhubCommission.getEnumList()"
            :key="index"
            tag="div"
            class="bottom-margin-large"
            :name=`skyhub_comission[${index}]`
            rules=""
            v-slot="{ errors, valid }">
            <base-input
              :label="`Anúncios ${value} (%)`"
              :name=`skyhub_comission[${index}]`
              v-model="configurations.skyhub_comission[index]"
              :valid="valid"
              :error="errors[0]"
              mask="integer"
              :disabled="disableForm">
            </base-input>
          </validation-provider>

        </base-card>
      </div>

      <div class="col-xs-12 col-md-4">
        <base-card
          class="padding-large bottom-margin-large"
        >
          <validation-provider
            tag="div"
            name="skyhub_comission_status"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="skyhub_comission_status"
              :label="entry_status"
              v-model="configurations.skyhub_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>
        </base-card>
      </div>
    </div>

  </div>

</div>
{% endblock %}

{% block contentOutForm %}
  <base-modal
    v-show="showModal"
    :title="text_account_created"
    :overlay="true"
    full-height
    @close="closeModal">

    <validation-observer
      tag="div"
      ref="validationObserverModalAccount"
      v-slot="{ handleSubmit, invalid }"
      @submit.prevent="onValidationObserverSubmit($refs.validationObserverModalAccount)">
      <form
        class="padding-large"
        ref="formModalAccount"
        @submit.prevent="handleSubmit(() => onSubmit($refs.formModalAccount, accountB2w))"
        :action="url.account"
        method="post">

        <div class="row small-space-xs">

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

          <validation-provider
            tag="div"
            class="bottom-margin-large col-xs"
            name="config_cnpj"
            rules="cnpj|required"
            v-slot="{ errors, valid }">
            <base-input
              name="config_cnpj"
              :label="entry_cnpj"
              v-model="accountB2w.config_cnpj"
              :valid="valid"
              :error="errors[0]"
              mask="cnpj"
              :disabled="disableForm"
              required>
            </base-input>
          </validation-provider>

        </div>

        <div class="row small-space-xs">

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

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

        </div>

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

        <div class="row small-space-xs">

          <validation-provider
            tag="div"
            class="bottom-margin-large col-xs"
            name="telephone"
            rules=""
            v-slot="{ errors, valid }">
            <base-input
              name="telephone"
              :label="entry_telephone"
              v-model="accountB2w.telephone"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm">
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large col-xs"
            name="cellphone"
            rules=""
            v-slot="{ errors, valid }">
            <base-input
              name="cellphone"
              :label="entry_cellphone"
              v-model="accountB2w.cellphone"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm">
            </base-input>
          </validation-provider>

        </div>

        <div class="row small-space-xs vertical-margin-medium">
          <base-button
            class="right-margin-small"
            apperance="outline"
            @click.native="closeModal">
            { button_cancel }
          </base-button>

          <base-button
            type="submit"
            :disabled="disableForm || disableSubmitButton"
            :loading="btnSubmitLoading">
            { button_created }
          </base-button>
        </div>

      </form>
    </validation-observer>

  </base-modal>
{% endblock %}