{% extends './vista/template/payment/payment.twig' %}

{% block holder_verify %}
  {% if display_titular %}
  <input type="hidden" name="isHolder" value="">
  <label class="checkbox-medium checkbox-holder-label" data-tipo-pessoa='{{ Type_CadastroPessoaJs|json_encode() }}'>
    <input class="checkbox-entry js-checkbox-holder" type="checkbox" name="isHolder" checked="checked">
    <span class="checkbox-text">{{ text_holder }}</span>
  </label>
  {% endif %}
{% endblock %}

{% block customer_info %}
  <div class="js-customer-content">

    {% if (data_nascimento is empty or numero_telefone is empty or (display_cpf is defined and display_cpf and tipo_pessoa == Type_CadastroPessoa.Tp_Juridico)) %}
      <span class="visible-block text-large text-bold text-dark top-margin-large">{{ text_info_customer }}</span>
      <span class="visible-block text-medium text-gray top-margin-small">{{ firstname ~ ' ' ~ lastname }}</span>
    {% endif %}

    {% if data_nascimento is empty %}
      <label class="field field-medium top-margin-large">
        <span class="field-label">{{ text_date }}</span>
        <input type="text" class="field-entry mask-date" name="customer_data_nascimento" placeholder="{{ text_place_date }}" value="" required>
      </label>
    {% endif %}

    {% if numero_telefone is empty %}
      <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="customer_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="customer_numero_telefone" placeholder="{{ text_place_numero_telefone }}" required>
          </label>
        </div>
      </div>
    {% endif %}

    {% if display_cpf is defined and display_cpf and tipo_pessoa == Type_CadastroPessoa.Tp_Juridico %}
      <label class="field field-medium top-margin-large">
        <span class="field-label">{{ text_cpf }}</span>
        <input type="text" class="field-entry mask-cpf" name="cpf" placeholder="{{ text_place_cpf }}" value="" required>
      </label>
    {% endif %}
  </div>
{% endblock %}

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

    <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 }}" {{ (tipo_pessoa == Type_CadastroPessoa.Tp_Fisico) ? '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 }}" {{ (tipo_pessoa == Type_CadastroPessoa.Tp_Juridico) ? 'checked' : '' }}>
        <span class="radio-text">Jurídica</span>
      </label>
    </div>

    <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="" required>
    </label>

    <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="" 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="" required>
    </label>

    {% block razao_social %}{% endblock %}

    <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="" 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">{{ 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="" required>
        </label>
      </div>
    </div>

  </div>
{% endblock %}

{% block holder_address %}
  <div id="form-address" class="js-holder-content hidden js-address">
    <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="" 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 hidden">
      <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="" required>
          <input type="hidden" class="tipo_logradouro" name="tipo_logradouro">
          <input type="hidden" class="logradouro" name="logradouro">
          <input type="hidden" class="city" name="city" value="{{ city }}">
        </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="" 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="">
      </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="" 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 codigo_municipio" id="codigo_municipio" name="codigo_municipio" required>
              <option value="">{{ text_select }}</option>
              {% for city in cities %}
                <option value="{{ city.codigo_municipio }}">{{ city.municipio }}</option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>
    </div>

  </div>
{% endblock %}

{% block buttons %}
  {% if captcha_tpl %}
    <div class="flex nowrap-xs top-margin-large">
      {{captcha_tpl}}
    </div>
  {% endif %}

  <div class="flex middle-xs end-xs actions top-margin-large">
    <button id="button-confirm" type="button" class="btn-default btn-large" data-loading-text="Aguarde Processando...">
      <span>Confirmar Pedido</span>
    </button>
  </div>
{% endblock %}

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

	<script>
    var validateRules = {
      celular: {
        celular: true
      },
      cpf: {
        cpfBR: true
      },
      cnpj: {
        cnpj: true
      },
      data_nascimento: {
        dateITA: true
      },
      customer_data_nascimento: {
        dateITA: true
      },
      postcode: {
        postalcodeBR: true
      },
      email: {
        email: true
      }
    };

		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: validateRules
      });

    });
    window.initPostcode($('#form-address').context);

	</script>
{% endblock %}
