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

{% block content %}
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-8">
        <div class="content-box preview-container">
          <base-card>

            <div class="padding-large">
              <div v-show="Object.keys(selectedVisual).length !== 0" class="bottom-padding-large">
                <span class="text-large text-dark text-bold left-margin-large" v-text="selectedVisual.group"></span>
              </div>
              <div v-show="Object.keys(selectedVisual).length === 0" class="padding-x-small center">
                <span class="text-large text-gray">Escolha um modulo para configurar</span>
              </div>

              <div v-show="selectedVisual === visual[0]" class="container-fluid vertical-padding-small">
                <div class="content-box row">
                  {# Conteudo de Limitador de Transações #}
                  <div class="col-xs-6">
                    <validation-provider
                      tag="div"
                      name="safety_limiter_time_break"
                      :rules="configurations.safety_limiter_status == 1 ? 'required':''"
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="entry_safety_limiter_break"
                        class="text-justify"
                        maxlength="2"
                        name="safety_limiter_time_break"
                        :description="descript_safety_limiter_break"
                        v-model="configurations.safety_limiter_time_break"
                        :error="errors[0]"
                        :valid="valid"
                        mask="number"
                        >
                    </base-input>
                    </validation-provider>
                  </div>
                </div>
                <div class="content-box row">
                  <div class="col-xs-6">
                    <validation-provider
                      tag="div"
                      name="safety_limiter_transaction"
                      :rules="configurations.safety_limiter_status == 1 ? {required: true, min_value: {min: 1}}:''"
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="entry_safety_limiter_transaction"
                        name="safety_limiter_transaction"
                        maxlength="2"
                        :description="descript_safety_limiter_transaction"
                        v-model="configurations.safety_limiter_transaction"
                        :error="errors[0]"
                        :valid="valid"
                        mask="number">
                      </base-input>
                    </validation-provider>
                  </div>
                  <div class="col-xs-6">
                    <validation-provider
                      tag="div"
                      name="safety_limiter_transaction_time"
                      :rules="configurations.safety_limiter_status == 1 ? {required: true, min_value: {min: 1}}:''"
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="entry_safety_limiter_transaction_time"
                        maxlength="2"
                        name="safety_limiter_transaction_time"
                        :description="descript_safety_limiter_transaction_time"
                        v-model="configurations.safety_limiter_transaction_time"
                        :error="errors[0]"
                        :valid="valid"
                        mask="number">
                      </base-input>
                    </validation-provider>
                  </div>
                </div>
                <div class="content-box row">
                  <div class="col-xs-12">
                    <validation-provider
                      tag="div"
                      name="safety_limiter_mail"
                      :rules=" configurations.safety_limiter_status == 1 ? 'required|email':'' "
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="entry_safety_limiter_mail"
                        name="safety_limiter_mail"
                        maxlength="96"
                        :description="descript_safety_limiter_mail"
                        v-model="configurations.safety_limiter_mail"
                        :error="errors[0]"
                        :valid="valid"
                        mask="alphanumeric">
                      </base-input>
                    </validation-provider>
                  </div>
                </div>
                <div class="content-box row">
                  <div class="col-xs-6">
                    <base-checkbox
                      class="top-padding-large"
                      type="text"
                      name="safety_limiter_client"
                      :label="label_safety_limiter_client"
                      v-model="configurations.safety_limiter_client"
                      mask=""
                      value="1"
                      unchecked-value="0"
                    >
                    </base-checkbox>
                  </div>
                  <div class="col-xs-6">
                    <base-checkbox
                      class="top-padding-large"
                      type="text"
                      name="safety_limiter_ip"
                      :label="label_safety_limiter_ip"
                      v-model="configurations.safety_limiter_ip"
                      mask=""
                      value="1"
                      unchecked-value="0"
                    >
                    </base-checkbox>
                  </div>
                </div>
              </div>
              <div v-show="selectedVisual === visual[1]" class="container-fluid vertical-padding-small">
                <div class="content-box row">
                  {# ----------------------------------------------------------Google Re-Captcha#}
                  <div class="col-xs-8">
                    <validation-provider
                      tag="div"
                      name="google_recaptcha_site_key"
                      :rules=" configurations.wg24_google_recaptcha_status == 1 ? 'required':'' "
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="g_key"
                        name="google_recaptcha_site_key"
                        maxlength="200"
                        v-model="configurations.google_recaptcha_site_key"
                        :error="errors[0]"
                        :valid="valid">
                      </base-input>
                    </validation-provider>
                  </div>
                  <div class="col-xs-8">
                    <validation-provider
                      tag="div"
                      name="google_recaptcha_secret_key"
                      :rules=" configurations.wg24_google_recaptcha_status == 1 ? 'required':'' "
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="g_secret_key"
                        maxlength="200"
                        name="google_recaptcha_secret_key"
                        v-model="configurations.google_recaptcha_secret_key"
                        :error="errors[0]"
                        :valid="valid"
                       >
                      </base-input>
                    </validation-provider>
                  </div>
                </div>
              </div>
            </div>
          </base-card>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="content-box">
          <base-card>
            <div v-show="Object.keys(selectedVisual).length === 0" class="vertical-padding-small">
              <div
                v-for="(item, index) in visual"
                class="flex flex-row between-xs middle-xs text-medium text-dark padding-medium cursor-pointer hover:background-gray"
                @click="selectedVisual = item"
                :key="item.group">
                <span class="text-medium text-dark text-bold">{item.group}</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
            <div v-show="Object.keys(selectedVisual).length > 0">
              <div class="flex flex-row middle-xs bottom-border-gray padding-x-small">
                <base-button
                  apperance="white"
                  square
                  @click.native="selectedVisual = {}">
                  <i class="fas fa-chevron-left"></i>
                </base-button>
                <span class="text-medium text-dark text-bold left-margin-small">{selectedVisual.group}</span>
              </div>
              <div class="padding-large">
                <div class="bottom-margin-large" v-for="field in selectedVisual.fields">

                  <base-select
                    v-if="['select'].includes(field.type)"
                    :name="field.name"
                    :id="field.name"
                    :label="field.label"
                    :description="field.description"
                    v-model="configurations[field.name]">
                    <option
                      v-for="(value, key) in  getTypeEnumList(`${field.name}`, `${field.options}`, `${field.customOptions}`)  "
                      :value="key">{ value }
                    </option>
                  </base-select>

                  <base-input
                    v-if="!['select'].includes(field.type)"
                    :key="field.name"
                    :type="field.type"
                    :name="field.name"
                    :id="field.name"
                    :label="field.label"
                    :description="field.description"
                    :mask="field.mask"
                    v-model="configurations[field.name]">
                  </base-input>
                </div>
              </div>
            </div>
          </base-card>
        </div>
      </div>
    </div>
  </div>


{% endblock %}