{{ header }}
<section class="container-fluid" id="edit-info" data-info="{{ error_warning }}">
	{% if content_top %}
		{{ content_top }}
	{% endif %}
	{{breadcrumbs}}

	<div class="row">
		<div class="col-md-3 hidden-md-down">
			<div class="content-box js-fixed-on-top">
				{{ account }}
			</div>
		</div>
		<div class="col-xs">
			<div class="content-box">
				<div class="flex middle-xs">
					<a href="{{ back }}" class="padding-small text-x-large text-dark">
						<i class="fas fa-angle-left" aria-hidden="true"></i>
					</a>
					<span class="heading-1">
						{{ heading_title }}
						<span class="text-small">({{ NickFromValue }})</span>
					</span>
				</div>

				<div id="root" style="max-width:480px;">
          <div v-if="loading" class="flex flex-row center-xs padding-large">
            <img src="assets/img/loading-black.svg" alt="Carregando..."/>
          </div>

          <base-alert
            v-show="alert.type"
            :apperance="alert.type"
            @close="alert = {}">
            <span v-html="alert.message"></span>
          </base-alert>

          <validation-observer
            tag="div"
            ref="validationObserver"
            v-slot="{ handleSubmit, invalid }"
            @submit.prevent="onValidationObserverSubmit()">
            <form
              ref="form"
              @submit.prevent="handleSubmit(onSubmit)"
              :action="action"
              method="post">

                <div class="row small-space-xs top-margin-medium">
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-md-6"
                    rules="required"
                    name="firstname"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="firstname"
                      :label="entry_firstname"
                      :placeholder="entry_firstname_placeholder"
                      v-model="configurations.firstname"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      maxlength="96"
                      required
                      ></base-input>
                  </validation-provider>
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-md-6"
                    rules="required"
                    name="lastname"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="lastname"
                      :label="entry_lastname"
                      :placeholder="entry_lastname_placeholder"
                      v-model="configurations.lastname"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      maxlength="96"
                      required
                      ></base-input>
                  </validation-provider>
                </div>

                <validation-provider
                  tag="div"
                  class="top-margin-medium"
                  rules="required|email"
                  name="email"
                  v-slot="{ errors, valid }">
                  <base-input
                    type="email"
                    name="email"
                    :label="entry_email"
                    :placeholder="entry_email_placeholder"
                    v-model="configurations.email"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                    maxlength="96"
                    required
                    ></base-input>
                </validation-provider>

                <div class="row small-space-xs top-margin-medium">
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-md-6"
                    :rules="fields_register_brazil_status_telefone ? 'required' : ''"
                    name="telephone"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="telephone"
                      :label="entry_telephone"
                      :placeholder="entry_telephone_placeholder"
                      v-model="configurations.telephone"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      mask="telephone"
                      ummask
                      maxlength="96"
                      :required="fields_register_brazil_status_telefone"
                      ></base-input>
                  </validation-provider>
                  <validation-provider
                    tag="div"
                    class="col-xs-12 col-md-6"
                    :rules="fields_register_brazil_status_celular ? 'required' : ''"
                    name="celular"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="celular"
                      label="Celular"
                      :placeholder="entry_celular_placeholder"
                      v-model="configurations.celular"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      mask="cellphone"
                      ummask
                      maxlength="96"
                      :required="fields_register_brazil_status_celular"
                      ></base-input>
                  </validation-provider>
                  <validation-provider
                    v-if="feedback_whatsapp"
                    tag="div"
                    class="col-xs-12 col-md-6"
                    rules=""
                    name="feedback_whatsapp_number"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="feedback_whatsapp_number"
                      :label="entry_whatsapp"
                      :placeholder="entry_whatsapp_placeholder"
                      v-model="configurations.feedback_whatsapp_number"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      mask="cellphone"
                      ummask
                      maxlength="96"
                      ></base-input>
                  </validation-provider>
                  <validation-provider
                    v-if="fields_register_brazil_status_telefone2"
                    tag="div"
                    class="col-xs-12 col-md-6"
                    rules=""
                    name="fax"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="fax"
                      :label="entry_fax"
                      :placeholder="entry_fax_placeholder"
                      v-model="configurations.fax"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      mask="telephone"
                      ummask
                      maxlength="96"
                      ></base-input>
                  </validation-provider>
                </div>

                <template v-if="configurations.pessoa == tp_fisico">
                  <group-radio label="Sexo" v-if="fields_register_brazil_status_sexo">
                    <base-radio
                      label="Masculino"
                      name="sexo"
                      v-model="configurations.sexo"
                      value="m"
                      :disabled="disableForm"
                      inline
                    >
                    </base-radio>
                    <base-radio
                      label="Feminino"
                      name="sexo"
                      v-model="configurations.sexo"
                      value="f"
                      :disabled="disableForm"
                      inline
                    >
                    </base-radio>
                    <base-radio
                      label="Prefiro não informar"
                      name="sexo"
                      v-model="configurations.sexo"
                      value="o"
                      :disabled="disableForm"
                      inline
                    >
                    </base-radio>
                  </group-radio>
                  <validation-provider
                    v-if="fields_register_brazil_status_data_nascimento"
                    tag="div"
                    class="top-margin-medium"
                    :rules="fields_register_brazil_status_data_nascimento_required && configurations.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="Data de Nascimento"
                      :placeholder="entry_data_nascimento_placeholder"
                      v-model="configurations.data_nascimento"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      maxlength="32"
                      :required="fields_register_brazil_status_data_nascimento_required"
                      :disabled-date="disabledAfterToday"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                    ></base-input>
                  </validation-provider>
                  <validation-provider
                    v-if="fields_register_brazil_status_rg"
                    tag="div"
                    class="top-margin-medium"
                    rules=""
                    name="rg"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="rg"
                      label="RG"
                      placeholder="Digite seu RG"
                      v-model="configurations.rg"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      maxlength="96"
                      ></base-input>
                  </validation-provider>
                  <validation-provider
                    tag="div"
                    class="top-margin-medium"
                    rules="required"
                    name="cpf"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="cpf"
                      label="CPF"
                      placeholder="Digite seu CPF"
                      v-model="configurations.cpf"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      mask="cpf"
                      ummask
                      required
                      readonly
                      ></base-input>
                  </validation-provider>
                  <input type="hidden" name="pessoa" id="fisica" :value="tp_fisico" checked>

                </template>
                <template v-else>
                  <hr class="bottom-border-gray top-margin-x-large">
                  <validation-provider
                    tag="div"
                    class="top-margin-x-large"
                    rules=""
                    name="razao_social"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="razao_social"
                      label="Razão Social"
                      placeholder="Digite sua Razão Social"
                      v-model="configurations.razao_social"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      maxlength="96"
                      ></base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="top-margin-medium"
                    rules="required"
                    name="cnpj"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="cnpj"
                      label="CNPJ"
                      placeholder="Digite seu CNPJ"
                      v-model="configurations.cnpj"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      mask="cnpj"
                      ummask
                      required
                      readonly
                      ></base-input>
                  </validation-provider>
                  <input type="hidden" name="pessoa" id="juridica" :value="tp_juridico" checked>

                  <validation-provider
                    tag="div"
                    class="top-margin-medium"
                    :rules="configurations.contribuinte == 'S' ? 'required' : ''"
                    name="inscricao_estadual"
                    v-slot="{ errors, valid }">
                    <base-input
                      type="text"
                      name="inscricao_estadual"
                      label="Inscrição Estadual"
                      placeholder="Digite sua Inscrição Estadual"
                      v-model="configurations.inscricao_estadual"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm"
                      maxlength="96"
                      :required="configurations.contribuinte == 'S'"
                      :readonly="!fields_register_brazil_status_ie_pj"
                      ></base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="top-margin-medium"
                    rules=""
                    name="perfil"
                    v-slot="{ errors, valid }">
                      <base-select
                        name="perfil"
                        label="Perfil"
                        v-model="configurations.perfil"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                        :readonly="!fields_register_brazil_status_perfil_pj">
                        <option
                          v-for="(value, key) in Type_PerfilCustomerJuridico"
                          :key="key"
                          :value="key"
                        >
                          { value }
                        </option>
                      </base-select>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="top-margin-medium"
                    rules=""
                    name="contribuinte"
                    v-slot="{ errors, valid }">
                      <base-select
                        name="contribuinte"
                        :label="text_contribute_icms"
                        v-model="configurations.contribuinte"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm"
                        :readonly="!fields_register_brazil_status_contribuinte_pj">
                        <option
                          v-for="(value, key) in Type_PjContribuoIcms"
                          :key="key"
                          :value="key"
                        >
                          { value }
                        </option>
                      </base-select>
                  </validation-provider>
                </template>

                <base-button
                  size="large"
                  type="submit"
                  class="top-margin-x-large"
                  :disabled="disableForm || disableSubmitButton"
                  :loading="btnSubmitLoading"
                  text="Alterar dados pessoais"
                ></base-button>

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

			</div>
		</div>
		{% if column_right %}
			<div class="col-md-3 hidden-md-down">
				{{ column_right }}
			</div>
		{% endif %}
	</div>
	{% if content_bottom %}
		{{ content_bottom }}
	{% endif %}
</section>

<script>
	window.DATA = {{ dataJs|json_encode() }};
</script>

{{ footer }}