<label class="checkbox-medium" data-tipo-pessoa='{{ Type_CadastroPessoaJs|json_encode() }}'>
  <input class="checkbox-entry js-checkbox-holder" type="checkbox" name="isHolder" checked="checked">
  <span class="checkbox-text top-margin-large">{{ text_holder }}</span>
</label>

<div class="js-holder-content js-address hidden">
  <span class="visible-block text-large text-bold text-dark">{{ text_info }}</span>

  <label class="field field-medium top-margin-large">
    <span class="field-label">{{ text_email }}</span>
    <input type="text" class="field-entry" name="email" placeholder="{{ text_place_email }}" value="{{ email }}" required>
  </label>

  <div class="select_options top-margin-large bottom-margin-small">
    <label class="radio-medium">
      <input class="radio-entry" type="radio" name="pessoa" value="{{ Type_CadastroPessoa.Tp_Fisico }}" {{ (cpf != '') ? 'checked' : '' }}>
      <span class="radio-text">Física</span>
    </label>

    <label class="radio-medium">
      <input class="radio-entry" type="radio" name="pessoa" value="{{ Type_CadastroPessoa.Tp_Juridico }}" {{ (cnpj != '') ? 'checked' : '' }}>
      <span class="radio-text">Jurídica </span>
    </label>
  </div>  

  <label class="field field-medium top-margin-large js-content-fisica hidden">
    <span class="field-label">{{ text_cpf }}</span>
    <input type="text" class="field-entry mask-cpf" name="cpf" placeholder="{{ text_place_cpf }}" value="{{ cpf }}" required>
  </label>

  <label class="field field-medium top-margin-large js-content-juridica hidden">
    <span class="field-label">{{ text_cnpj }}</span>
    <input type="text" class="field-entry mask-cnpj" name="cnpj" placeholder="{{ text_place_cnpj }}" value="{{ cnpj }}" required>
  </label>  

  <label class="field field-medium top-margin-large">
    <span class="field-label js-content-fisica hidden">{{ text_date }}</span>
    <span class="field-label js-content-juridica hidden">{{ text_date_company }}</span>
    <input type="text" class="field-entry mask-date" name="data_nascimento" placeholder="{{ text_place_date }}"
          value="{{ data_nascimento }}">
  </label>  

  <label class="field field-medium top-margin-large">
    <span class="field-label">
      {{ text_cep }}
      <span class="vertical-middle">
        <img class="js-postcode-loading hidden" src="assets/img/loading-black.svg" width="14" height="14"/>
      </span>
    </span>
    <input type="text" class="field-entry mask-cep js-postcode-search" id="postcode" name="postcode"
          placeholder="{{ text_place_cep }}"
          value="{{ shipping_postcode }}" required>

    <span class="text-primary text-small js-postcode-address cursor-pointer pull-right">Não sei meu cep</span>
  </label>

  <div class="js-postcode-content">
    <div class="flex nowrap-xs top-margin-large">
      <label class="field field-medium right-margin-x-small">
        <span class="field-label">{{ text_endereco }}</span>
        <input type="text" class="field-entry address_1" name="address_1" placeholder="{{ text_place_endereco }}"
              value="{{ shipping_address_1 }}" {{ (shipping_address_1 is not empty) ? 'readonly' : '' }} required>
      </label>
      <label class="field field-medium left-margin-x-small" style="width:128px;">
        <span class="field-label">{{ text_numero }}</span>
        <input type="text" class="field-entry mask-number" name="numero" placeholder="{{ text_place_numero }}"
              value="{{ shipping_numero }}" {{ (shipping_numero is not empty) ? 'readonly' : '' }} required>
      </label>
    </div>

    <label class="field field-medium top-margin-large">
      <span class="field-label">{{ text_complemento }}</span>
      <input type="text" class="field-entry" name="complemento" placeholder="{{ text_place_complemento }}"
            value="{{ shipping_complemento }}" {{ (shipping_complemento is not empty) ? 'readonly' : '' }}>
    </label>

    <label class="field field-medium top-margin-large">
      <span class="field-label">{{ text_bairro }}</span>
      <input type="text" class="field-entry address_2" name="address_2" placeholder="{{ text_place_bairro }}"
            value="{{ shipping_address_2 }}" {{ (shipping_address_2 is not empty) ? 'readonly' : '' }} required>
    </label>

    <div class="row no-space-xs x-small-space-md">
      <div class="col-xs-12 col-md-6">
        <label class="field field-medium top-margin-large">
          <span class="field-label">Estado</span>
          <select name="zone_id" class="field-entry js-city-search zone_id" readonly required>
            <option value="">{{ text_select }}</option>
            {% for state in states %}
              <option
                value="{{ state.zone_id }}" {{ (shipping_zone_id == state.zone_id) ? 'selected="selected"' : '' }}>{{ state.name }}</option>
            {% endfor %}
          </select>
        </label>
      </div>
      <div class="col-xs-12 col-md-6">
        <label class="field field-medium top-margin-large">
          <span class="field-label">{{ text_cidade }}</span>
          <select class="field-entry codigo_municipio" id="codigo_municipio"
                  name="codigo_municipio" {{ codigo_municipio is not null ? 'readonly' : '' }} required>
            <option value="">{{ text_select }}</option>
            {% for city in cities %}
              <option data-codigo-municipio="{{ city.codigo_municipio }}" data-municipio="{{ city.municipio }}"
                      value="{{ city.codigo_municipio }}" {{ (codigo_municipio == city.codigo_municipio) ? ' selected="selected"' : '' }}>{{ city.municipio }}</option>
            {% endfor %}
          </select>
        </label>
      </div>
    </div>

    <div class="row no-space-xs x-small-space-md">
      <div class="col-xs-12 col-md-6">
        <label class="field field-medium top-margin-large">
          <span class="field-label">{{ text_tipo_telefone }}</span>
          <select name="tipo_telefone" id="type_payment_phone" class="field-entry"
                  data-type-payment-phones='{{ type_payment_phones|json_encode() }}'
          >
            {% for payment_phone in payment_phones %}
              <option
                value="{{ payment_phone.value }}" {{ payment_phone.select }}>{{ payment_phone.description }}</option>
            {% endfor %}
          </select>
        </label>
      </div>
      <div class="col-xs-12 col-md-6">
        <label class="field field-medium top-margin-large">
          <span class="field-label">{{ text_numero_telefone }}</span>
          <input type="text" class="field-entry" name="numero_telefone"
                placeholder="{{ text_place_numero_telefone }}" value="{{ numero_telefone }}" required>
        </label>
      </div>
    </div>

  </div>
</div>

{% for script in scripts %}
  <script src="{{ script }}"></script>
{% endfor %}

<script>

  window.initPostcode(document.querySelector('.js-holder-content'));

  window.waitEvent('scripts_document', function () {

    $('#form-yapay, #form-wirecard').validate({
      onfocusout: function (element, event) {
        $(event.currentTarget).next('.form-error').remove();
        $(event.currentTarget).valid();
      },
      onsubmit: true,
      errorElement: 'span',
      errorClass: 'form-error',
      validClass: 'form-success',
      rules: {
        celular: {
          celular: true
        },
        cpf: {
          cpfBR: true
        },
        cnpj: {
          cnpj: true
        },
        data_nascimento:{
          dateITA: true
        },
        postcode: {
          postalcodeBR: true
        },
        email: {
          email: true
        }
      },
      messages: {
        confirm: {
          equalTo: 'As senhas não conferem'
        }
      }
    });
  });

</script>
