{{ header }}
<div id="root">
  <div class="page-loader" v-show="isLoading"></div>

  <the-header
    title="{{ heading_title }}"
    :breadcrumbs='{{ breadcrumbs|json_encode() }}'>

    <base-button
      v-show="page == 'faixaceps'"
      @click.native="() => onChangePage('add')">
      {{ button_save_cep }}
    </base-button>

    <base-button
      apperance="white"
      square
      v-show="page == 'faixaceps'"
      @click.native="() => onChangePage('config')">
      <template #icon>
        <i class="fas fa-cog"></i>
      </template>
    </base-button>

    <template #notification>
      <base-alert
        v-show="alert.type"
        :apperance="alert.type"
        @close="alert = {}">
        <span v-text="alert.message"></span>
      </base-alert>
      {% if success %}
        <base-alert apperance="success" @close="alert => alert.classList.add('hidden')">
          {{ success }}
        </base-alert>
      {% endif %}
      {% if error_warning %}
        <base-alert apperance="error">
          {{ error_warning }}
        </base-alert>
      {% endif %}
    </template>
  </the-header>

  <div class="container-fluid">
    <div class="row" v-if="page == 'config'">
      <div class="col-xs-12 col-sm-8 col-md-6">
        <span class="visible-block text-x-large text-dark bottom-margin-large">{{ text_config }}</span>
        <base-card class="padding-large">
          <validation-observer
            ref="configValidationObserver"
            tag="div"
            v-slot="{ handleSubmit }">
            <form
              method="post"
              action="{{ data.save }}"
              ref="formConfig"
              @submit.prevent="handleSubmit(onSaveConfig)">

              <validation-provider
                tag="div"
                rules="required"
                name="fretefaixadecep_title"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  label="{{ text_titulo }}"
                  name="fretefaixadecep_title"
                  v-model="configurations.fretefaixadecep_title"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>
              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required"
                name="fretefaixadecep_status"
                v-slot="{ errors, valid }">
                <base-select
                  label="{{ text_status }}"
                  name="fretefaixadecep_status"
                  v-model="configurations.fretefaixadecep_status"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_Status %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>
              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required"
                name="fretefaixadecep_sort_order"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  label="{{ text_ordem }}"
                  name="fretefaixadecep_sort_order"
                  v-model="configurations.fretefaixadecep_sort_order"
                  mask="positiveInteger"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>
              <div class="flex top-margin-x-large">
                <base-button
                  apperance="outline"
                  @click.native="() => onChangePage('faixaceps')"
                  :disabled="disableForm">
                  {{ button_cancel }}
                </base-button>
                <base-button
                  type="submit"
                  class="left-margin-small"
                  :disabled="disableForm"
                  :loading="btnSubmitLoading">
                  {{ button_save }}
                </base-button>
              </div>

            </form>
          </validation-observer>
        </base-card>
      </div>
    </div>

    <div class="row" v-if="page == 'faixaceps'">
      <div class="col-xs-12">
        <div class="row no-space-xs middle-xs bottom-margin-medium">
          <div class="col-xs">
            <base-checkbox
              v-if="faixaceps.length"
              type="checkbox"
              label="Selecionar tudo"
              v-model="checkedAllFaixaCep">
            </base-checkbox>
          </div>
          <div class="col-xs-width-auto">
            <base-button
              v-if="faixaceps.length"
              apperance="outline"
              @click.native="onDeleteFaixaCep"
              :disabled="!faixaCepIdToDelete.length > 0">
              {{ button_delete }}
            </base-button>
          </div>
        </div>

        <template v-if="faixaceps">
          <base-card
            v-for="(faixacep, row) in faixaceps"
            :key="row"
            class="flex nowrap-xs vertical-padding-large bottom-margin-medium"
            hover>

            <div class="flex-auto horizontal-padding-medium">
              <base-checkbox
                type="checkbox"
                :value="faixacep.faixa_cep_id"
                v-model="faixaCepIdToDelete">
              </base-checkbox>
            </div>

            <div
              class="full-width right-padding-large"
              @click="() => onShowFaixaCep(faixacep.faixa_cep_id)">

              <span
                class="visible-block text-medium text-dark"
                v-text="faixacep.cep_titulo">
              </span>

              <div>
                {% for key, value in type_descontos %}
                  <span
                    v-if="{{ key }} == faixacep.cep_valor_type"
                    class="text-small text-gray">
                    {{ entry_cep_valor }} ({{ value }}):
                  </span>
                {% endfor %}
                <span
                  v-if="faixacep.cep_valor_type == 1"
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.cep_valor | brazilCurrency">
                </span>
                <span
                  v-else-if="faixacep.cep_valor_type == 2"
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.cep_valor | percentage">
                </span>
              </div>

              <div v-if="faixacep.cep_valor_min">
                <span class="text-small text-gray">{{ entry_cep_valor_min }}:</span>
                <span
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.cep_valor_min | brazilCurrency">
                </span>
              </div>

              <div v-if="faixacep.produto_comp">
                <span class="text-small text-gray">{{ text_comprimento }}:</span>
                <span
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.produto_comp | centimeter">
                </span>
              </div>

              <div v-if="faixacep.produto_larg">
                <span class="text-small text-gray">{{ text_largura }}:</span>
                <span
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.produto_larg | centimeter">
                </span>
              </div>

              <div v-if="faixacep.produto_alt">
                <span class="text-small text-gray">{{ text_altura }}:</span>
                <span
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.produto_alt | centimeter">
                </span>
              </div>

              <div v-if="faixacep.produto_min_weight">
                <span class="text-small text-gray">{{ text_min_weight }}:</span>
                <span
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.produto_min_weight | kilogram">
                </span>
              </div>

              <div v-if="faixacep.produto_max_weight">
                <span class="text-small text-gray">{{ text_max_weight }}:</span>
                <span
                  class="text-medium text-dark"
                  :text-content.prop="faixacep.produto_max_weight | kilogram">
                </span>
              </div>

              <div>
                <span class="text-small text-gray">{{ entry_cep_inicial }}:</span>
                <span
                  class="text-medium text-dark"
                  v-text="faixacep.cep_inicial">
                </span>
              </div>

              <div>
                <span class="text-small text-gray">{{ entry_cep_final }}:</span>
                <span
                  class="text-medium text-dark"
                  v-text="faixacep.cep_final">
                </span>
              </div>

              <div>
                <span class="text-small text-gray">{{ entry_cep_status }}</span>
                <span
                  class="text-medium text-dark"
                  v-text="faixacep.cep_status">
                </span>
              </div>
            </div>
          </base-card>

          <div
            v-if="faixaceps.length"
            class="content-box">
            {{ pagination }}
          </div>
        </template>
        <base-card
          v-else
          class="text-center padding-large">
          <span class="visible-inline-block text-medium text-gray">{{ text_no_results }}</span>
        </base-card>
      </div>
    </div>

    <div class="row" v-if="page == 'add'">
      <div class="col-xs-12 col-sm-8 col-md-6">
        <span class="visible-block text-x-large text-dark bottom-margin-large">{{ text_faixacep_form }}</span>

        <base-card class="padding-large">
          <validation-observer
            ref="faixaCepValidationObserver"
            tag="div"
            v-slot="{ handleSubmit }">
            <form
              method="post"
              data-action-insert="{{ data.insert }}"
              data-action-edit="{{ data.edit }}"
              ref="formFaixaCep"
              @submit.prevent="handleSubmit(() => onSaveFaixaCep(form.faixa_cep_id))">

              <div class="row small-space-xs">
                <validation-provider
                  tag="div"
                  class="col-xs-6 col-sm-8"
                  rules="required|min:2|max:255|withoutDot"
                  name="cep_titulo"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="Título"
                    name="cep_titulo"
                    v-model="form.cep_titulo"
                    :error="errors[0]"
                    :valid="valid"
                    required>
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-6 col-sm-4"
                  rules="required"
                  name="cep_status"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="cep_status"
                    label="Status"
                    v-model="form.cep_status"
                    :error="errors[0]"
                    :valid="valid">
                    {% for key, value in Type_Status %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}
                  </base-select>
                </validation-provider>
              </div>

              <div class="row small-space-xs top-margin-large">
                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required|cep"
                  vid="cep_inicial"
                  name="cep_inicial"
                  v-slot="{ errors, valid }">
                  <base-input
                    label="{{ entry_cep_inicial }}"
                    name="cep_inicial"
                    v-model="form.cep_inicial"
                    mask="cep"
                    :error="errors[0]"
                    :valid="valid"
                    required>
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required|cep|target_bigger_than_reference:@cep_inicial"
                  name="cep_final"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ entry_cep_final }}"
                    name="cep_final"
                    v-model="form.cep_final"
                    mask="cep"
                    :error="errors[0]"
                    :valid="valid"
                    required>
                  </base-input>
                </validation-provider>
              </div>

              <div class="row small-space-xs top-margin-large">
                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required"
                  name="cep_valor_type"
                  v-slot="{ errors, valid }">
                  <base-select
                    label="Tipo do frete"
                    name="cep_valor_type"
                    v-model="form.cep_valor_type"
                    :error="errors[0]"
                    :valid="valid">
                    {% for key, value in type_descontos %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required"
                  name="cep_valor"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ entry_cep_valor }}"
                    name="cep_valor"
                    v-model="form.cep_valor"
                    :mask="form.cep_valor_type == 1 ? 'brazilCurrency' : 'percentage'"
                    :error="errors[0]"
                    :valid="valid"
                    required>
                  </base-input>
                </validation-provider>
              </div>

              <validation-provider
                tag="div"
                rules="required"
                name="cep_valor_min"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  label="{{ entry_cep_valor_min }}"
                  name="cep_valor_min"
                  v-model="form.cep_valor_min"
                  mask="brazilCurrency"
                  class="top-margin-large"
                  :error="errors[0]"
                  :valid="valid"
                  required>
                </base-input>
              </validation-provider>

              <div class="row small-space-xs top-margin-large">
                <validation-provider
                  tag="div"
                  class="col-xs-4"
                  rules=""
                  name="produto_comp"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ text_comprimento }}"
                    name="produto_comp"
                    v-model="form.produto_comp"
                    mask="centimeter"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-4"
                  rules=""
                  name="produto_larg"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ text_largura }}"
                    name="produto_larg"
                    v-model="form.produto_larg"
                    mask="centimeter"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-4"
                  rules=""
                  name="produto_alt"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ text_altura }}"
                    name="produto_alt"
                    v-model="form.produto_alt"
                    mask="centimeter"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

              </div>

              <div class="row small-space-xs top-margin-large">
                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required|min:3"
                  vid="minWeight"
                  name="produto_min_weight"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ text_min_weight }}"
                    name="produto_min_weight"
                    v-model="form.produto_min_weight"
                    mask="kilogram"
                    :error="errors[0]"
                    :valid="valid"
                    required>
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required|target_bigger_than_reference:@minWeight"
                  name="produto_max_weight"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ text_max_weight }}"
                    name="produto_max_weight"
                    v-model="form.produto_max_weight"
                    mask="kilogram"
                    :error="errors[0]"
                    :valid="valid"
                    required>
                  </base-input>
                </validation-provider>
              </div>

              <div class="flex top-margin-large">
                <base-button
                  class="right-margin-small"
                  apperance="outline"
                  @click.native="() => onChangePage('faixaceps')">
                  {{ button_cancel }}
                </base-button>

                {# <base-button
                  v-if="!form.faixa_cep_id"
                  apperance="primary"
                  @click.native="() => onInsertContinueFaixadecep()">
                  {{ button_continue }}
                </base-button> #}

                <base-button
                  v-if="form.faixa_cep_id"
                  type="submit"
                  apperance="primary">
                  {{ button_update_cep }}
                </base-button>
                <base-button
                  v-else
                  type="submit"
                  apperance="primary">
                  {{ button_add }}
                </base-button>
              </div>

            </form>
          </validation-observer>
        </base-card>
      </div>
    </div>
  </div>
</div>

<script>
  const DATA = {{ data|json_encode() }};
</script>

{{ footer }}
