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

  <section ref="registerNew" id="register-new" class="container-fluid vertical-padding-x-large" style="overflow-x:hidden;" hidden>
    <div class="row center-xs">
      <div class="col-xs-12 col-sm-8 col-md-5">
        <div v-if="page == 'login'" class="content-box">
          <h1 class="heading-1">{ text_login } </h1>
          <p class="top-margin-small text-medium">{ text_new_client }
            <a href="#" @click.prevent="page='register'" id="register-link">{ text_create_your_account }</a>
          </p>
          <the-login
            :info="login"
            @page="(goPage) => page = goPage"
            @alert="(alertInfo) => alert = alertInfo"
            @userinfo="setUserInfo"
          >
        </div>

        <div v-if="page == 'forgotten'" class="content-box">
          <h1 class="heading-1">{ text_recover_password }</h1>
          <the-forgotten :info="forgotten" @page="(goPage) => page = goPage">
        </div>

        <div v-if="page == 'register'" class="content-box">
          <validation-observer
            tag="div"
            ref="validationObserver"
            v-slot="{ handleSubmit }"
          >
            <h1 class="heading-1">{ text_create_your_account }</h1>
            <p class="top-margin-small text-medium">{ text_create_your_account_subtitle }
              <a href="#" @click.prevent="page='login'">{ text_login }</a>
            </p>

            <form
              id="form-register"
              ref="form"
              @submit.prevent="handleSubmitForm(handleSubmit)"
              :action="action"
              method="post"
              autocomplete="off"
            >
              <base-alert
                v-show="alert.type"
                :apperance="alert.type"
                @close="alert = {}">
                <span v-text="alert.message"></span>
              </base-alert>

              <h2 class="heading-2 top-margin-x-large bottom-margin-medium">{ text_info_access }</h2>

              <validation-provider
                tag="div"
                class="bottom-margin-large"
                rules="required|email"
                name="email"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="text"
                  name="email"
                  :label="text_email"
                  :placeholder="text_email_placeholder"
                  v-model="email"
                  maxlength="96"
                  required
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  @focusout="validateEmail"
                ></base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="bottom-margin-large"
                rules="required"
                name="password"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="password"
                  name="password"
                  :label="text_password"
                  v-model="password"
                  required
                  minlength="4"
                  maxlength="20"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                ></base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="bottom-margin-large"
                rules="required"
                name="confirm"
                v-slot="{ errors, valid }"
              >
                <base-input
                  ref="confirmar_nova_senha"
                  type="password"
                  name="confirm"
                  :label="text_confirm"
                  v-model="confirm"
                  required
                  minlength="4"
                  maxlength="20"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                ></base-input>
              </validation-provider>

              <base-checkbox
                :label="text_newsletter"
                name="newsletter"
                v-model="newsletter"
              ></base-checkbox>

              <h2 class="heading-2 top-margin-x-large bottom-margin-medium">{ text_your_details }</h2>

              <div
                v-if="
                  fields_register_brazil_tipo_de_pessoa == Type_CadastroPessoa.Tp_Ambos ||
                  fields_register_brazil_tipo_de_pessoa_array.indexOf(fields_register_brazil_tipo_de_pessoa) == -1
                "
                class="bottom-margin-large"
              >
                <p class="top-margin-small text-medium text-dark text-bold">{ person_type }</p>
                <base-radio
                  name="pessoa"
                  :label="text_fisica"
                  v-model="pessoa"
                  required
                  :disabled="disableForm"
                  value="F"
                  value-checked="F"
                  inline
                ></base-radio>

                <base-radio
                  name="pessoa"
                  :label="text_juridica"
                  v-model="pessoa"
                  required
                  :disabled="disableForm"
                  value="J"
                  value-checked="J"
                  inline
                ></base-radio>
              </div>

              <input
                v-else="fields_register_brazil_tipo_de_pessoa == Type_CadastroPessoa.Tp_Juridico"
                class="hidden"
                type="radio"
                id="juridica"
                name="pessoa"
                checked
                value="J"
              />

              <input
                v-else="fields_register_brazil_tipo_de_pessoa == Type_CadastroPessoa.Tp_Fisico"
                class="hidden"
                type="radio"
                id="fisica"
                name="pessoa"
                checked
                value="F"
              />

              <div class="row small-space-xs bottom-padding-medium" v-if="pessoa">
                <validation-provider
                  tag="div"
                  class="col-xs-12 col-ms-6"
                  rules="required"
                  name="firstname"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="firstname"
                    :label="text_firstname"
                    v-model="firstname"
                    maxlength="32"
                    required
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-12 col-ms-6"
                  rules="required"
                  name="lastname"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="lastname"
                    :label="text_lastname"
                    v-model="lastname"
                    maxlength="32"
                    required
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                  <validation-provider
                    v-if="pessoa == 'J'"
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    rules="required"
                    name="razao_social"
                    v-slot="{ errors, valid }"
                  >
                    <base-input
                      type="text"
                      name="razao_social"
                      :label="text_razao"
                      v-model="razao_social"
                      required
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>

                  <validation-provider
                    v-if="pessoa == 'F'"
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    rules="required|cpf"
                    name="cpf"
                    v-slot="{ errors, valid }"
                  >
                    <base-input
                      type="text"
                      name="cpf"
                      :label="text_cpf"
                      :placeholder="text_cpf_placeholder"
                      v-model="cpf"
                      required
                      mask="cpf"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>

                <template
                  v-if="fields_register_brazil_status_rg"
                >
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    :class="{hidden: pessoa != 'F'}"
                    rules=""
                    name="rg"
                    v-slot="{ errors, valid, passed }"
                  >
                    <base-input
                      type="text"
                      name="rg"
                      :label="text_rg"
                      :placeholder="text_rg_placeholder"
                      v-model="rg"
                      maxlength="20"
                      :error="errors[0]"
                      :valid="valid && passed"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>
                </template>

                <template
                  v-if="pessoa == 'J'"
                >
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    rules="required|cnpj"
                    name="cnpj"
                    v-slot="{ errors, valid }"
                  >
                    <base-input
                      type="text"
                      name="cnpj"
                      :label="text_cnpj"
                      :placeholder="text_cnpj_placeholder"
                      v-model="cnpj"
                      mask="cnpj"
                      required
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    :class="{hidden: pessoa != 'J'}"
                    :rules="pessoa == 'J' ? 'required' : ''"
                    name="perfil"
                    v-slot="{ errors, valid, passed }">
                    <base-select
                      name="perfil"
                      :label="text_perfil"
                      v-model="perfil"
                      :error="errors[0]"
                      :valid="valid && passed"
                      :disabled="disableForm"
                    >
                      <option
                        v-for="perfil in perfis"
                        :key="perfil.value"
                        :value="perfil.value"
                      >{ perfil.name }</option>
                    </base-select>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    :class="{hidden: pessoa != 'J'}"
                    :rules="pessoa == 'J' ? 'required' : ''"
                    name="contribuinte"
                    v-slot="{ errors, valid, passed }">
                    <base-select
                      name="contribuinte"
                      :label="text_contribute_icms"
                      v-model="contribuinte"
                      :error="errors[0]"
                      :valid="valid && passed"
                      :disabled="disableForm"
                    >
                      <option
                        v-for="contribuinte in contribuintes"
                        :key="contribuinte.value"
                        :value="contribuinte.value"
                      >{ contribuinte.name }</option>
                    </base-select>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    :class="{hidden: pessoa != 'J'}"
                    rules=""
                    name="inscricao_estadual"
                    v-slot="{ errors, valid, passed }"
                  >
                    <base-input
                      type="text"
                      name="inscricao_estadual"
                      :label="text_ie"
                      :placeholder="text_ie_placeholder"
                      v-model="inscricao_estadual"
                      maxlength="20"
                      :error="errors[0]"
                      :valid="valid && passed"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>
                </template>

                <validation-provider
                  tag="div"
                  class="col-xs-12 col-ms-6"
                  :rules="fields_register_brazil_status_telefone ? 'required|telephone' : 'telephone'"
                  name="telephone"
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input
                    type="tel"
                    name="telephone"
                    :label="text_telephone"
                    :placeholder="text_telephone_placeholder"
                    v-model="telephone"
                    maxlength="32"
                    :required="fields_register_brazil_status_telefone"
                    mask="telephone"
                    :error="errors[0]"
                    :valid="valid && passed"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                <validation-provider
                  v-if="fields_register_brazil_status_telefone2"
                  tag="div"
                  class="col-xs-12 col-ms-6"
                  rules="cellphone|min: 14"
                  name="fax"
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input
                    type="tel"
                    name="fax"
                    :label="text_fax"
                    :placeholder="text_fax_placeholder"
                    v-model="fax"
                    minlenght="14"
                    maxlength="15"
                    mask="cellphone"
                    :error="errors[0]"
                    :valid="valid && passed"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-12 col-ms-6"
                  :rules="fields_register_brazil_status_celular ? 'required|cellphone' : 'cellphone'"
                  rules="min: 15"
                  name="celular"
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input
                    type="tel"
                    name="celular"
                    :label="text_celular"
                    :placeholder="text_celular_placeholder"
                    v-model="celular"
                    minlenght="15"
                    maxlength="15"
                    :required="fields_register_brazil_status_celular"
                    mask="cellphone"
                    :error="errors[0]"
                    :valid="valid && passed"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                <template
                  v-if="feedback_whatsapp_isenabled"
                >
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    name="feedback_whatsapp_number"
                    v-slot="{ errors, valid, passed }"
                    :rules="parseBoolean(feedback_whatsapp_status) ? 'required|cellphone' : 'cellphone'"
                    rules="min: 15"
                  >
                    <base-input
                      type="tel"
                      name="feedback_whatsapp_number"
                      :label="text_whatsapp"
                      :placeholder="text_wpp_placeholder"
                      v-model="feedback_whatsapp_number"
                      minlenght="15"
                      maxlength="15"
                      :required="parseBoolean(feedback_whatsapp_status)"
                      mask="cellphone"
                      :disabled="disableForm"
                      :valid="valid && passed"
                      :error="errors[0]"
                    ></base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs-12"
                    name="feedback_whatsapp_status"
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-checkbox
                      :label="text_whatsapp_obs"
                      name="feedback_whatsapp_status"
                      class=""
                      v-model="feedback_whatsapp_status"
                      value="1"
                      unchecked-value="0"
                      :disabled="disableForm"
                    >
                    </base-checkbox>
                  </validation-provider>
                </template>

                <template
                  v-if="fields_register_brazil_status_data_nascimento && fields_register_brazil_tipo_de_pessoa != Type_CadastroPessoa.Tp_Juridico && pessoa == 'F'"
                >
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-ms-6"
                    :class="{hidden: pessoa != 'F'}"
                    :rules="fields_register_brazil_status_data_nascimento_required && pessoa == 'F' ? 'required|date|date_bigger_than_today' : 'date|date_bigger_than_today'"
                    name="data_nascimento"
                    v-slot="{ errors, valid }"
                  >
                    <base-input
                      format="DD/MM/YYYY"
                      type="date"
                      value-type="format"
                      mask="date"
                      name="data_nascimento"
                      :label="text_date_birth"
                      :placeholder="text_date_birth_placeholder"
                      v-model="data_nascimento"
                      maxlength="32"
                      :required="fields_register_brazil_status_data_nascimento_required"
                      :disabled-date="disabledAfterToday"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>
                </template>

                <template
                  v-if="
                    fields_register_brazil_tipo_de_pessoa != Type_CadastroPessoa.Tp_Juridico &&
                      fields_register_brazil_status_sexo
                  "
                >
                  <div class="col-xs-12" :class="{hidden: pessoa != 'F'}">
                    <span class="visible-block text-small text-dark text-bold bottom-margin-x-small">{ text_sex }</span>
                    <base-radio
                      name="sexo"
                      :label="text_male"
                      inline
                      v-model="sexo"
                      :disabled="disableForm"
                      value="m"
                      :checked="sexo == 'm'"
                    ></base-radio>
                    <base-radio
                      name="sexo"
                      :label="text_female"
                      inline
                      v-model="sexo"
                      :disabled="disableForm"
                      value="f"
                      :checked="sexo == 'f'"
                    ></base-radio>
                    <base-radio
                      name="sexo"
                      :label="text_other"
                      inline
                      v-model="sexo"
                      :disabled="disableForm"
                      value="o"
                      :checked="sexo == 'o'"
                    ></base-radio>
                  </div>
                </template>
              </div>

              <h2 class="heading-2 top-margin-x-large bottom-margin-medium">{ text_your_address }</h2>

              <div class="row small-space-xs">
                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required"
                  name="postcode"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="postcode"
                    :label="text_postcode"
                    :placeholder="text_postcode_placeholder"
                    v-model="postcode"
                    maxlength="10"
                    required
                    mask="cep"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                    @input="onPostcode"
                  ></base-input>

                  <span class="vertical-middle">
                    <img
                      :class="{hidden: !postcode_loading}"
                      src="assets/img/loading-black.svg"
                      width="14"
                      height="14"
                    />
                  </span>
                  <a
                    href="#"
                    class="text-primary text-small text-decoration-none cursor-pointer"
                    @click.prevent="onShowDontKnow"
                  >Não sei meu cep</a>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required|min:3|max:128"
                  name="apelido"
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input
                    required
                    type="text"
                    name="apelido"
                    :label="text_locale"
                    v-model="apelido"
                    :placeholder="text_apelido_placeholder"
                    minlength="3"
                    maxlength="80"
                    :error="errors[0]"
                    :valid="valid && passed"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                <div class="col-xs-12">
                  <div class="row small-space-xs" :class="{hidden: !postcode_visible}">

                    <validation-provider
                      tag="div"
                      class="col-xs-8"
                      rules="required"
                      name="address_1"
                      v-slot="{ errors, valid }"
                    >
                      <base-input
                        type="text"
                        name="address_1"
                        :label="text_address_1"
                        v-model="address_1"
                        maxlength="70"
                        required
                        :readonly="postcode_readonly.address_1"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                      ></base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-4"
                      rules="required"
                      name="numero"
                      v-slot="{ errors, valid }"
                    >
                      <base-input
                        ref="numero"
                        type="text"
                        name="numero"
                        :label="text_number"
                        :placeholder="text_number_placeholder"
                        v-model="numero"
                        mask="number"
                        maxlength="6"
                        required
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                      ></base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-12"
                      rules="max:128"
                      name="complemento"
                      v-slot="{ errors, valid, passed }"
                    >
                      <base-input
                        type="text"
                        name="complemento"
                        :label="text_complement"
                        :placeholder="text_complemento_placeholder"
                        v-model="complemento"
                        maxlength="128"
                        :error="errors[0]"
                        :valid="valid && passed"
                        :disabled="disableForm"
                      ></base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-12"
                      rules="required|max:300"
                      name="address_2"
                      v-slot="{ errors, valid }"
                    >
                      <base-input
                        type="text"
                        name="address_2"
                        :label="text_address_2"
                        v-model="address_2"
                        maxlength="300"
                        required
                        :readonly="postcode_readonly.address_2"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                      ></base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-6"
                      rules="required"
                      name="zone_id"
                      v-slot="{ errors, valid }"
                    >
                      <base-select
                        name="zone_id"
                        :label="text_zone"
                        v-model="zone_id"
                        required
                        :readonly="postcode_readonly.zone_id"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                        @input="onChangeZone"
                      >
                        <option value="">{ text_select }</option>
                        <option
                          v-for="state in states"
                          :key="state.zone_id"
                          :value="state.zone_id"
                        >{ state.name }</option>
                      </base-select>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-6"
                      rules="required"
                      name="codigo_municipio"
                      v-slot="{ errors, valid }"
                    >
                      <base-select
                        name="codigo_municipio"
                        :label="text_city"
                        v-model="codigo_municipio"
                        required
                        :readonly="postcode_readonly.codigo_municipio"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                        @change="setAddressInfo"
                      >
                        <option value="">{ text_select }</option>
                        <option
                          v-for="city in cities"
                          :key="city.codigo_municipio"
                          :value="city.codigo_municipio"
                        >{ city.municipio }</option>
                      </base-select>
                    </validation-provider>

                  </div>
                </div>
              </div>

              <div v-if="customer_interests_remember">
                <h2 class="heading-2 top-margin-x-large bottom-margin-medium">{ text_interests }</h2>
                <the-interests :info="interests_categories" @onchangecategories="setCategories">
              </div>

              <div v-if="text_agree" class="top-margin-large">
                <validation-provider
                  tag="div"
                  :rules="!debug ? 'required' : ''"
                  name="agree"
                  v-slot="{ errors, valid }"
                >
                  <base-checkbox
                    ref="agree"
                    :label="text_agree"
                    name="agree"
                    v-model="agree"
                    :error="errors[0]"
                  ></base-checkbox>
                </validation-provider>
              </div>

              <div v-if="google_captcha" class="top-margin-large">
                <div ref="grecaptcha" class="g-recaptcha"></div>
                <span v-if="error_google_captcha" class="text-error text-small">{ error_google_captcha }</span>
              </div>
              <div v-else class="top-margin-large">
                <validation-provider
                  tag="div"
                  :rules="!debug ? 'required' : ''"
                  name="captcha"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="captcha"
                    :label="text_captcha"
                    v-model="captcha"
                    :placeholder="text_captcha_code_placeholder"
                    :required="!debug"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  ></base-input>
                </validation-provider>

                <img
                  src="index.php?route=information/contact/captcha"
                  alt=""
                  class="visible-block top-margin-small"
                />
              </div>

              <base-button
                type="submit"
                full
                :disabled="disableForm"
                :loading="btnSubmitLoading"
                class="top-margin-x-large"
              >
                { text_concluir }
              </base-button>
            </form>

            <base-modal
              v-if="showDontKnow"
              title="Não sei meu CEP"
              size="medium"
              @close="() => {showDontKnow = false; postcodeListAddress = []}"
            >

              <div v-if="error_postcode_search" class="full-width text-center top-padding-medium bottom-padding-x-large background-warning js-postcode-message">
                <i class="fas fa-exclamation-triangle text-warning bigger-text-x-large bottom-margin-small"></i>
                <span class="text-medium text-warning visible-block">
                    { error_postcode_search }
                </span>
              </div>

              <div class="padding-medium">
                <validation-provider
                  tag="div"
                  rules=""
                  name="postcodesearch"
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input
                    ref="postcodesearch"
                    type="text"
                    name="postcodesearch"
                    :label="text_search"
                    v-model="postcodesearch"
                    maxlength="32"
                    :error="errors[0]"
                    :valid="valid && passed"
                    :disabled="disableForm"
                    @keyup="(e) => e.code === 'Enter' ? $refs.postcodesearchButton.$el.click() : ''"
                  ></base-input>
                </validation-provider>
              </div>

              <template #footer>
                <div class="padding-medium">
                  <base-button
                    ref="postcodesearchButton"
                    type="button"
                    :disabled="disableForm"
                    :loading="btnSubmitLoading"
                    @click.native="postcodeSearch"
                  >
                    Buscar
                  </base-button>
                </div>

              </template>

              <template #modal>
                <base-modal
                  v-if="postcodeListAddress.length"
                  title="Escolha seu CEP"
                  size="medium"
                  slot-default-overflow-auto
                  @close="() => {showDontKnow = false; postcodeListAddress = []}"
                >

                  <div v-for="address in postcodeListAddress" class="content-box visible-block bottom-border-gray padding-medium cursor-pointer">
                    <div
                      class="text-small text-dark row no-space-xs nowrap-xs between-xs middle-xs"
                      @click="() => selectAddress(address)"
                    >
                      <div class="col-xs">
                        <span>{ address.address_1 }</span>
                        <span class="visible-block">{ address.address_2 }</span>
                        <span>{ address.city }</span>
                      </div class="col-xs-width-auto">
                      <span>{ address.postcode }</span>
                    </div>
                  </div>

                </base-modal>

              </template>
            </base-modal>

          </validation-observer>
        </div>
      </div>
    </div>
  </section>
</div>

{% if google_captcha %}
  <script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
{% endif %}

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