{% 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>

    <div class="row">
      <div class="col-xs-12 col-md-8">
        <base-card
          class="padding-large bottom-margin-large"
        >
          <div class="bottom-margin-large">
            <span class="text-small text-dark text-bold visible-block">{ text_autentication }</span>
            <a href="{{ url.url_autentication }}" target="_blank"
               class="text-decoration-none text-small text-gray visible-block bottom-margin-small text-word-wrap">{ url.url_autentication }</a>
          </div>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="shopee_status"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="shopee_status"
              :label="entry_status"
              v-model="configurations.shopee_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
            v-show="configurations.shopee_environment == Type_Environment.Tp_Sandbox"
            tag="div"
            class="bottom-margin-large"
            name="shopee_app_id_sandbox"
            :rules="configurations.shopee_environment == Type_Environment.Tp_Sandbox ? 'required' : ''"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_app_id"
              name="shopee_app_id_sandbox"
              v-model="configurations.shopee_app_id_sandbox"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
              :required="true">
            </base-input>
          </validation-provider>

          <validation-provider
            v-show="configurations.shopee_environment == Type_Environment.Tp_Sandbox"
            tag="div"
            class="bottom-margin-large"
            name="shopee_app_key_sandbox"
            :rules="configurations.shopee_environment == Type_Environment.Tp_Sandbox ? 'required' : ''"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_app_key"
              name="shopee_app_key_sandbox"
              v-model="configurations.shopee_app_key_sandbox"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
              :required="true">
            </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"
            class="bottom-margin-large"
            name="shopee_environment"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="shopee_environment"
              :label="entry_environment"
              v-model="configurations.shopee_environment"
              :valid="valid"
              :disabled="disableForm">
              <option v-for="(value, key) in Type_Environment.getEnumList()" :value="key" :key="key">{ value }</option>
            </base-select>
          </validation-provider>

          <base-button
            class="right-margin-small"
            apperance="primary"
            size="medium"
            :full="true"
            :disabled="disableForm"
            :loading="loadingBtnAuth"
            @click.native="validateAuth">
            { button_verify_auth }
          </base-button>

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

  </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="shopee_initial_description"
        rules=""
        v-slot="{ errors, valid }">
        <base-textarea
          :label="entry_initial_description"
          :description="entry_initial_description_text"
          name="shopee_initial_description"
          v-model="configurations.shopee_initial_description"
          :error="errors[0]"
          :valid="valid"
          rows="5"
          :disabled="disableForm">
        </base-textarea>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        name="shopee_final_description"
        rules=""
        v-slot="{ errors, valid }">
        <base-textarea
          :label="entry_final_description"
          :description="entry_final_description_text"
          name="shopee_final_description"
          v-model="configurations.shopee_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_order}</span>

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

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

      <div v-for="(field, key) in shopee_order_status_fields">
        <validation-provider
          tag="div"
          class="bottom-margin-large"
          :name="field.name"
          v-slot="{ errors, valid }">
          <base-select
            :name="field.name"
            :label="field.label"
            :description="field.description"
            v-model="configurations[field.name]"
            :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>
      </div>

    </base-card>

  </div>

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

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

    <div class="row">
{#      <div class="col-xs-12 col-md-8">#}
{#        <base-card class="padding-large bottom-margin-large">#}
{#          <validation-provider#}
{#            tag="div"#}
{#            class="bottom-margin-large"#}
{#            name="shopee_comission"#}
{#            rules="minmax_number:0,100"#}
{#            v-slot="{ errors, valid }">#}
{#            <base-input#}
{#              :label="text_comission"#}
{#              name="shopee_comission"#}
{#              v-model="configurations.shopee_comission"#}
{#              :valid="valid"#}
{#              :error="errors[0]"#}
{#              mask="percentage"#}
{#              :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"
            class="bottom-margin-large"
            name="shopee_comission_status"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="shopee_comission_status"
              :label="entry_status"
              :description="text_status_comission_description"
              v-model="configurations.shopee_comission_status"
              :valid="valid"
              :disabled="disableForm">
              <option v-for="(value, key) in Type_Status.getEnumList()" :value="key" :key="key">{ value }</option>
            </base-select>
          </validation-provider>
        </base-card>
      </div>
    </div>

  </div>

</div>
{% endblock %}