{{ header }}

<section class="container-fluid" id="account-message-info" data-info="{{ success }}">

  {% if error %}
    <div class="warning">{{ error }}</div>
  {% endif %}

  {{ breadcrumbs }}

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

        <div class="paper bottom-padding-large left-padding-large top-margin-medium">
          <div class="row no-space-xs">
            <div class="col-xs-12 col-sm-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_firstname }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ customer_info.firstname }} {{ customer_info.lastname }}</span>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_email }}</span>
                <span style="width:260px;" class="visible-block text-medium text-dark text-bold text-ellipsis">{{ customer_info.email ? customer_info.email : '-' }}</span>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_telephone }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ customer_info.telephone ? '(' ~ customer_info.telephone[:2] ~ ') ' ~ customer_info.telephone[2:4] ~ '-' ~ customer_info.telephone[6:] : '-' }}</span>
              </div>
            </div>
            {% if fields_register_brazil_status_telefone2 %}
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_fax }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.fax ? '(' ~ customer_info.fax[:2] ~ ') ' ~ customer_info.fax[2:4] ~ '-' ~ customer_info.fax[6:] : '-' }}</span>
                </div>
              </div>
            {% endif %}
            {% if fields_register_brazil_status_celular %}
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_cellphone }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.celular ? '(' ~ customer_info.celular[:2] ~ ') ' ~ customer_info.celular[2:5] ~ '-' ~ customer_info.celular[7:] : '-' }}</span>
                </div>
              </div>
            {% endif %}
            {% if feedback_whatsapp_number %}
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_whatsapp }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.feedback_whatsapp_number ? '(' ~ customer_info.feedback_whatsapp_number[:2] ~ ') ' ~ customer_info.feedback_whatsapp_number[2:5] ~ '-' ~ customer_info.feedback_whatsapp_number[7:] : '-' }}</span>
                </div>
              </div>
            {% endif %}

            {% if pessoa_fisica %}
              {% if fields_register_brazil_status_sexo %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_sex }}</span>
                    <span class="visible-block text-medium text-dark text-bold">
                      {% if customer_info.sexo == 'm' %}
                        Masculino
                      {% elseif customer_info.sexo == 'f' %}
                        Feminino
                      {% else %}
                        Prefiro não informar
                      {% endif %}
                    </span>
                  </div>
                </div>
              {% endif %}
              {% if fields_register_brazil_status_data_nascimento %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_birth_date }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ customer_info.data_nascimento ? customer_info.data_nascimento[8:] ~ '/' ~ customer_info.data_nascimento[5:2] ~ '/' ~ customer_info.data_nascimento[:4] : '-' }}</span>
                  </div>
                </div>
              {% endif %}
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_cpf }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.cpf ? customer_info.cpf[:3] ~ '.' ~ customer_info.cpf[3:3] ~ '.' ~ customer_info.cpf[6:3] ~ '-' ~ customer_info.cpf[9:] : '-' }}</span>
                </div>
              </div>
              {% if fields_register_brazil_status_rg %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_rg }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ customer_info.rg ? customer_info.rg : '-' }}</span>
                  </div>
                </div>
              {% endif %}
            {% else %}
              <div class="col-xs-12">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_company_name }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.razao_social ? customer_info.razao_social : '-' }}</span>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_cnpj }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.cnpj ? customer_info.cnpj[:2] ~ '.' ~ customer_info.cnpj[2:3] ~ '.' ~ customer_info.cnpj[5:3] ~ '/' ~ customer_info.cnpj[8:4] ~ '-' ~ customer_info.cnpj[12:] : '-' }}</span>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_ie }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ customer_info.inscricao_estadual ? customer_info.inscricao_estadual : '-' }}</span>
                </div>
              </div>
              <div class="col-xs-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_profile }}</span>
                  {% for perfil in perfis %}
                    {% if perfil.selected %}
                      <span class="visible-block text-medium text-dark text-bold">{{ perfil.name }}</span>
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_contribute_icms }}</span>
                  {% for contribuinte in contribuintes %}
                    {% if contribuinte.selected %}
                      <span class="visible-block text-medium text-dark text-bold">{{ contribuinte.name }}</span>
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
            {% endif %}
            <div class="col-xs-12">
              <div class="content-box top-padding-medium right-padding-large flex">
                <a href="{{ edit }}" class="btn-default btn-medium right-margin-small top-margin-small">
                  <span>{{ text_edit }}</span>
                </a>
                <a href="{{ password }}" class="btn-default btn-medium btn-outline top-margin-small">
                  <span>{{ text_password }}</span>
                </a>
              </div>
            </div>
          </div>
        </div>

        {% if feedback_whatsapp %}
          {% if feedback_whatsapp_number %}
            <span class="heading-2 vertical-middle top-margin-x-large">{{ text_notification }}</span>
            <div class="paper js-feedback-container rel top-margin-medium horizontal-padding-large vertical-padding-medium">
              <img src="assets/img/loading-black.svg" class="hidden js-feedback-loading" style="position: absolute; top: 26px; left: 25px; width: 16px; z-index: 1; background-color: white">
              <label class="checkbox checkbox-small">
                <input class="checkbox-entry js-feedback-entry" type="checkbox" name="feedback_whatsapp_status" {{ feedback_whatsapp_value ? 'checked' : '' }}>
                <span class="checkbox-text">{{ text_notification_whatsapp }} {{ '(' ~ feedback_whatsapp_number[:2] ~ ') ' ~ feedback_whatsapp_number[2:5] ~ '-' ~ feedback_whatsapp_number[7:] }}</span>
                <span class="checkbox-description">{{ text_notification_whatsapp_obs }}</span>
              </label>
            </div>
          {% else %}
            <div class="paper top-margin-medium horizontal-padding-large vertical-padding-medium">
              <a href="{{ edit }}">
                <span>{{ text_notification_whatsapp_number }}</span>
              </a>
            </div>
          {% endif %}
        {% endif %}

        <span class="heading-2 vertical-middle top-margin-x-large">{{ text_newsletter }}</span>
        <div class="paper bottom-margin-x-large top-margin-medium horizontal-padding-large vertical-padding-medium">
          <label class="checkbox checkbox-small">
            <input class="checkbox-entry" id="account-newsletter" type="checkbox" name="newsletter" data-newsletter-url="{{ newsletter }}" data-messages='{"0": {"message": "{{ text_newsletter_disabled }}", "messageType": "warning"}, "1": {"message": "{{ text_newsletter_enabled }}", "messageType": "success"}}' value="{{newsletter_value}}" {{ newsletter_value ? 'checked' : '' }}>
            <span class="checkbox-text">{{ text_receive_newsletter }}</span>
          </label>
        </div>

        {% if login_facebook or login_google %}
          <span class="heading-2 vertical-middle top-margin-x-large">{{ text_login_social }}</span>
          <div class="paper bottom-margin-x-large top-margin-medium horizontal-padding-large">
            {% if login_facebook %}
              <div class="vertical-padding-medium full-width flex between-xs middle-xs">
                <span class="text-medium text-dark">{{ text_facebook }}</span>
                <button type="button" id="btnAppFacebook" class="btn-default btn-medium btn-outline" data-tipo-validacao-social='vincular' data-facebook-id="{{ facebook_id }}" data-text-facebook-vinculado="{{ text_connected }}{{ text_facebook }}" data-text-facebook-desvinculado="{{ text_desconnected }}{{ text_facebook }}">
                  <span id="text-vinculo-facebook">{{ (email_facebook_value or facebook_user_id) ? 'Desconectar' : 'Conectar' }}</span>
                </button>
              </div>
            {% endif %}
            {% if login_facebook and login_google %}
              <hr class="bottom-border-gray">
            {% endif %}
            {% if login_google %}

                <div class="vertical-padding-medium full-width flex between-xs middle-xs divgoogledisconnect {{ (not email_gmail_value and not gmail_user_id) ? "hidden" : "" }}">
                  <span class="text-medium text-dark">{{ text_google }}</span>
                  <button type="button" class="btn-default btn-medium btn-outline" id="btngoogledisconnect" data-text-google-desvinculado="{{ text_desconnected }}{{ text_google }}">
                    <span>Desconectar</span>
                  </button>
                </div>

                <div class="vertical-padding-medium full-width flex between-xs middle-xs divgoogleconnect {{ (email_gmail_value or gmail_user_id) ? "hidden" : "" }}">
                  <span class="text-medium text-dark">{{ text_google }}</span>
                  <button type="button" class="btn-default btn-medium btn-outline" id="btngoogle" data-tipo-validacao-social='vincular' data-google-id="{{ google_id }}" data-text-google-vinculado="{{ text_connected }}{{ text_google }}" data-text-google-desvinculado="{{ text_desconnected }}{{ text_google }}">
                    <span id="text-vinculo-google">Conectar</span>
                  </button>
                </div>

            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{{ footer }}

<script type="text/javascript">
  var
    login_facebook = '{{ login_facebook }}',
    login_google = '{{ login_google }}',
    desvincular_facebook = '{{ email_facebook_value or facebook_user_id }}', //desvincular pois se tiver o email (for true) ja esta vinculado
    desvincular_gmail = '{{ email_gmail_value or gmail_user_id }}'; //desvincular pois se tiver o email (for true) ja esta vinculado

  window.waitEvent('scripts_window', function () {
    if (login_google) {
      loadGoogleLogin();

      const btn_google_disconnect = document.getElementById('btngoogledisconnect');
      btn_google_disconnect.onclick = googleUnlink;
    }
  });

  window.waitEvent('scripts_document', function () {
    var messageElement = $('#account-message-info'),
      info = messageElement.length && messageElement.data('info') ? messageElement.data('info') : '',
      newsletterElement = $('#account-newsletter');

    if (info) {
      notificationMsg(info, 'success');
    }

    newsletterElement.on('click', function () {
      var $this = $(this),
        messages = $this.data('messages'),
        value = $this.val() === '1' ? 0 : 1;

      messages = messages || {};
      messages = messages && typeof messages === 'string' ? JSON.parse(messages) : messages;

      $.ajax({
        url: $this.data('newsletter-url'),
        type: 'POST',
        data: {
          newsletter: value
        },
        beforeSend(){
          $this.prop('disabled', true);
        },
        success: function (data) {
          $this.val(value);
          if (messages[value]) {
            notificationMsg(messages[value].message, messages[value].messageType);
          }
          $this.prop('disabled', false);
        }
      });
    });

    if (login_facebook) {
      const btn_vinculo_facebook = document.getElementById('btnAppFacebook');
      if(desvincular_facebook){
        btn_vinculo_facebook.onclick = function(event){
          event.preventDefault();
          event.stopPropagation();
          facebookUnlink();
        };
      } else {
        btn_vinculo_facebook.onclick = function(event){
          event.preventDefault();
          event.stopPropagation();
          loginFacebook();
        };
      }
    }
  });
</script>

<script src="https://accounts.google.com/gsi/client" async defer></script>
