{% 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_general}</span>
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <base-card class="padding-large">
            <validation-provider
              tag="div"
              class="bottom-margin-large"
              name="feedback_automatico_status"
              rules=""
              v-slot="{ errors, valid }">
              <base-select
                name="feedback_automatico_status"
                :label="entry_feedback_status"
                :description="entry_feedback_status_obs"
                v-model="configurations.feedback_automatico_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[1].active">
      <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_integration}</span>
      <aside-content :title="titleTabsIntegration" size-height="large">
        <template #aside>
          <div class="vertical-padding-large">
            <base-tabs :options="tabsIntegration" vertical></base-tabs>
          </div>
        </template>
        <div v-show="tabsIntegration[0].active" class="bottom-margin-x-large">
          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="gupshop_status"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="gupshop_status"
              :label="entry_gupshop_status"
              v-model="configurations.gupshop_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="gupshop_environment"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="gupshop_environment"
              :label="entry_gupshop_environment"
              v-model="configurations.gupshop_environment"
              :valid="valid"
              :disabled="disableForm || !parseBoolean(configurations.gupshop_status)">
              <option v-for="(value, key) in Type_Environment.getEnumList()" :value="key">{ value }</option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="gupshop_api_name"
            :rules="(isSandbox(configurations.gupshop_environment) && parseBoolean(configurations.gupshop_status)) ? 'required' : ''"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_gupshop_api_name"
              :description="entry_gupshop_api_name_obs"
              name="gupshop_api_name"
              v-model="configurations.gupshop_api_name"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm || !parseBoolean(configurations.gupshop_status) || !isSandbox(configurations.gupshop_environment)"
              :required="isSandbox(configurations.gupshop_environment) && parseBoolean(configurations.gupshop_status)">
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="gupshop_cellphone"
            :rules="setRulesCellphone()"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_gupshop_cellphone"
              name="gupshop_cellphone"
              v-model="configurations.gupshop_cellphone"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm || !parseBoolean(configurations.gupshop_status)"
              :mask="isSandbox(configurations.gupshop_environment) ? 'number' : 'cellphone'"
              :required="parseBoolean(configurations.gupshop_status)"
              @input="handleUrlCallback">
            </base-input>
            <div class="padding-medium top-margin-medium bottom-margin-large background-info shadow-small rounded-x-small" v-show="generateUrlCallback">
              <i class="fas fa-info-circle text-info"></i>
              <span class="text-small text-info">{ text_feedback_info }</span>
            </div>
          </validation-provider>


          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="gupshop_api"
            :rules="(parseBoolean(configurations.gupshop_status)) ? 'required' : ''"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_gupshop_api"
              :description="entry_gupshop_api_obs"
              name="gupshop_api"
              v-model="configurations.gupshop_api"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm || !parseBoolean(configurations.gupshop_status)"
              :required="parseBoolean(configurations.gupshop_status)">
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="gupshop_user_service"
            :rules="(parseBoolean(configurations.gupshop_status)) ? 'required' : ''"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_gupshop_user_service"
              :description="entry_gupshop_user_service_obs"
              name="gupshop_user_service"
              v-model="configurations.gupshop_user_service"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm || !parseBoolean(configurations.gupshop_status)"
              :required="parseBoolean(configurations.gupshop_status)"
              >
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="bottom-margin-large"
            name="gupshop_password_service"
            :rules="(parseBoolean(configurations.gupshop_status)) ? 'required' : ''"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_gupshop_password_service"
              :description="entry_gupshop_password_service"
              name="gupshop_password_service"
              v-model="configurations.gupshop_password_service"
              :error="errors[0]"
              type="password"
              :valid="valid"
              :disabled="disableForm || !parseBoolean(configurations.gupshop_status)"
              :required="parseBoolean(configurations.gupshop_status)"
              >
            </base-input>
          </validation-provider>

          <base-button
            v-show="!configurations.gupshop_url_callback"
            apperance="success"
            class="top-margin-small bottom-margin-large"
            :loading="loadingBtn"
            @click.native="getUrlCallback(configurations.gupshop_cellphone, configurations.gupshop_environment, configurations.gupshop_user_service, configurations.gupshop_password_service)"
          >
            {btn_callback}
          </base-button>

          <div v-show="configurations.gupshop_url_callback">
            <span class="visible-block text-medium text-dark text-word-wrap">
              {configurations.gupshop_url_callback}
            </span>

            <base-input
              class="hidden"
              name="gupshop_url_callback"
              v-model="configurations.gupshop_url_callback"
              type="text"
              >
            </base-input>

            <base-button
              apperance="outline"
              class="top-margin-small"
              @click.native="onCopyUrlCallback"
            >
              {buttonTextCopyUrlCallback}
            </base-button>
          </div>

        </div>
      </aside-content>
    </div>

    <div v-show="tabs[2].active">
      <span class="visible-block text-x-large text-dark bottom-margin-medium">{tab_menssage}</span>
      <aside-content :title="titleTabsMessage" size-height="large">
        <template slot="asideHeader">
          <div class="padding-medium">
            <base-select
              name="message_type"
              v-model="messageType">
              <option
                v-for="(value, key) in Type_Feedback.getEnumList()"
                :key="key"
                :value="key"
              >
                { value }
              </option>
            </base-select>
          </div>
        </template>
        <template slot="aside">
          <base-tabs
            :options="cloneObject(configurations[messageType])"
            vertical
            @click-tab="clickTab"
          >
          </base-tabs>
        </template>

        <div v-for="(_, key) in Type_Feedback.getEnumList()">

          <div
            v-for="(message, index) in configurations[key]"
            :key="message.id"
            v-show="configurations[key][index].active && key == messageType">

            <validation-provider
              tag="div"
              class="bottom-margin-large"
              :name=`${key}[${index}]`
              rules=""
              mode="passive"
              v-slot="{ errors, valid }">
              <base-textarea
                :label="text_status_message"
                :name=`${key}[${index}]`
                v-if="configurations[key][index]"
                v-model="configurations[key][index].message"
                :error="errors[0]"
                :disabled="disableForm"
                :valid="valid && !errors[0] && Boolean(configurations[key][index].message)"
                rows="7"
                :ref=`personalizedText_${key}`
                :maxlength="maxlengthTextarea"
                v-textarea-with-var
                count
              >
              </base-textarea>
            </validation-provider>


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

            <validation-provider
              tag="div"
              class="top-margin-x-large"
              :name=`gupshop_cell_test[${index}]`
              rules=""
              v-slot="{ errors, valid }">
              <base-input
                :label="entry_gupshop_cell_test"
                :description="entry_gupshop_cell_test_obs"
                :name=`gupshop_cell_test[${index}]`
                v-model="gupshop_cell_test[index]"
                mask="cellphone"
                :error="errors[0]"
                :valid="valid && !errors[0] && Boolean(gupshop_cell_test[index])">
              </base-input>
            </validation-provider>

            <base-button
              apperance="success"
              class="top-margin-small"
              :loading="loadingBtn"
              @click.native="sendMessageTest(key, index)"
            >
              {btn_test}
            </base-button>

          </div>

        </div>

      </aside-content>
    </div>
  </div>

{% endblock %}