{{ header }}

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

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

	{{ breadcrumbs }}

  <div class="row">
    <div class="col-xs-12 col-md-4 js-account-aside">
      <div class="content-box">
        {{ account }}
      </div>
    </div>

		<div class="col-xs hidden-md-down js-account-container no-padding" id="vue-Account">
      <div class="background-base-content bottom-margin-large top-margin-medium">
        <div class="content-box">

          {# Conta #}
          <base-content :icon="'fas fa-user'" title="{{ text_account }}">
            <div class="row no-space-xs">
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-margin-medium">
                  <span class="visible-block text-medium text-gray" v-text="'{{ text_firstname }}'"></span>
                  <span class="visible-block text-medium text-dark-opacity text-bold"
                        v-text="customer_info.firstname + ' ' + customer_info.lastname">
                  </span>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-margin-medium">
                  <span class="visible-block text-medium text-gray">{{ text_email }}</span>
                  <span class="visible-block text-medium text-dark-opacity text-bold text-ellipsis"
                        v-text="customer_info.email ? customer_info.email : '-'">
                  </span>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="content-box top-margin-medium">
                  <span class="visible-block text-medium text-gray">{{ text_telephone }}</span>
                  <span class="visible-block text-medium text-dark-opacity text-bold"
                        v-text="customer_info.telephone ? '(' + customer_info.telephone.substr(0, 2) + ') ' + customer_info.telephone.substr(2, 4) + '-' + customer_info.telephone.substr(6, 4) : '-' ">
                  </span>
                </div>
              </div>
              {% if fields_register_brazil_status_telefone2 %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_fax }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.fax ? '(' + customer_info.fax.substr(0, 2) + ') ' + customer_info.fax.substr(2, 4) + '-' + customer_info.fax.substr(6, 4) : '-' ">
                    </span>
                  </div>
                </div>
              {% endif %}
              {% if fields_register_brazil_status_celular %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_cellphone }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.celular ? '(' + customer_info.celular.substr(0, 2) + ') ' + customer_info.celular.substr(2, 5) + '-' + customer_info.celular.substr(7, 4) : '-' ">
                    </span>
                  </div>
                </div>
              {% endif %}
              {% if feedback_whatsapp_number %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_whatsapp }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.feedback_whatsapp_number ? '(' + customer_info.feedback_whatsapp_number.substr(0, 2) + ') ' + customer_info.feedback_whatsapp_number.substr(2, 5) + '-' + customer_info.feedback_whatsapp_number.substr(7, 4) : '-' ">
                    </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-margin-medium">
                      <span class="visible-block text-medium text-gray">{{ text_sex }}</span>
                      <span v-if="customer_info.sexo == 'm'">
                        <span class="visible-block text-medium text-dark-opacity text-bold">Masculino</span>
                      </span>
                      <span v-if="customer_info.sexo == 'f'">
                        <span class="visible-block text-medium text-dark-opacity text-bold">Feminino</span>
                      </span>
                      <span v-if="customer_info.sexo == 'o'">
                        <span class="visible-block text-medium text-dark-opacity text-bold">Prefiro não informar</span>
                      </span>
                    </div>
                  </div>
                {% endif %}
                {% if fields_register_brazil_status_data_nascimento %}
                  <div class="col-xs-12 col-sm-6">
                    <div class="content-box top-margin-medium">
                      <span class="visible-block text-medium text-gray">{{ text_birth_date }}</span>
                      <span class="visible-block text-medium text-dark-opacity text-bold"
                            v-text="customer_info.data_nascimento ? customer_info.data_nascimento.substr(8, 2) + '/' + customer_info.data_nascimento.substr(5, 2) + '/' + customer_info.data_nascimento.substr(0, 4) : '-'">
                      </span>
                    </div>
                  </div>
                {% endif %}
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_cpf }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.cpf ? customer_info.cpf.substr(0,3) + '.' + customer_info.cpf.substr(3,3) + '.' + customer_info.cpf.substr(6,3) + '-' + customer_info.cpf.substr(9,2) : '-' ">
                    </span>
                  </div>
                </div>
                {% if fields_register_brazil_status_rg %}
                  <div class="col-xs-12 col-sm-6">
                    <div class="content-box top-margin-medium">
                      <span class="visible-block text-medium text-gray">{{ text_rg }}</span>
                      <span class="visible-block text-medium text-dark-opacity text-bold"
                            v-text=" customer_info.rg ? customer_info.rg : '-' ">
                      </span>
                    </div>
                  </div>
                {% endif %}
              {% else %}
                <div class="col-xs-12">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_company_name }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.razao_social ? customer_info.razao_social : '-' ">
                    </span>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_cnpj }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.cnpj ? customer_info.cnpj.substr(0,2) + '.' + customer_info.cnpj.substr(2,3) + '.' + customer_info.cnpj.substr(5,3) + '/' + customer_info.cnpj.substr(8,4) + '-' + customer_info.cnpj.substr(12) : '-'">
                    </span>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_ie }}</span>
                    <span class="visible-block text-medium text-dark-opacity text-bold"
                          v-text="customer_info.inscricao_estadual ? customer_info.inscricao_estadual : '-' ">
                    </span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_profile }}</span>
                    {% for perfil in perfis %}
                      {% if perfil.selected %}
                        <span class="visible-block text-medium text-dark-opacity text-bold">{{ perfil.name }}</span>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6">
                  <div class="content-box top-margin-medium">
                    <span class="visible-block text-medium text-gray">{{ text_contribute_icms }}</span>
                    {% for contribuinte in contribuintes %}
                      {% if contribuinte.selected %}
                        <span class="visible-block text-medium text-dark-opacity text-bold">{{ contribuinte.name }}</span>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              {% endif %}
              <div class="col-xs-12 no-margin no-padding">
                <div class="content-box top-padding-medium flex btn-account">
                  <a href="{{ edit }}" class="btn-default btn-medium btn-neutral-black btn-account-right-margin">
                    {{ text_edit }} 
                  </a>
                  <a href="{{ password }}" class="btn-default btn-medium btn-neutral-white">
                    <span>{{ text_password }}</span>
                  </a>
                </div>
              </div>
            </div>
          </base-content>

          {# Whatsapp #}
          {% if feedback_whatsapp %}
            <base-content class="top-margin-medium" icon="fa fa-whatsapp" title="{{text_whatsapp}}">
              {% if feedback_whatsapp_number %}
                <div class="js-feedback-container rel top-margin-medium">
                  <base-vue-toggles
                    label="{{text_notification_whatsapp}} {{ '(' ~ feedback_whatsapp_number[:2] ~ ') ' ~ feedback_whatsapp_number[2:5] ~ '-' ~ feedback_whatsapp_number[7:] }}"
                    description="{{text_notification_whatsapp_obs}}"
                    :position="0"
                    :width="50"
                    :slider-top="true"
                    name="feedback_whatsapp_status"
                    v-model="configurations.feedback_whatsapp_status"
                    type="checkbox">
                  </base-vue-toggles>
                </div>
              {% else %}
                <div class="top-margin-medium full-width flex between-xs middle-xs">
                  <span class="text-bold text-dark-opacity text-medium">{{ text_notification_whatsapp_number }}</span>
                  <a class="btn-base-context-small" title="Adicionar" href="{{ edit }}">
                    <i class="fa-solid fa-plus"></i>
                  </a>
                </div>
                <div class="description-margin">
                  <span class="text-small">{{ text_notification_whatsapp_description }}</span>
                </div>
              {% endif %}
            </base-content>
          {% endif %}

          {# Newsletter #}
          <base-content class="top-margin-medium" :icon="'fa fa-envelope-open-o'" title="{{ text_newsletter }}">
            <div class="top-margin-medium">
              <base-vue-toggles
                label="{{ text_receive_newsletter }}"
                description ="{{ text_newsletter_description }}"
                :position="0"
                :width="50"
                :slider-top="true"
                name="newsletter"
                v-model="configurations.newsletter"
                id="account-newsletter"
                type="checkbox">
              </base-vue-toggles>
            </div>  
          </base-content>

          {# Login google ou facebook #}
          {% if login_facebook or login_google %}
            <base-content class="top-margin-medium" :icon="'fas fa-sign-in-alt'" title="{{ text_login_social }}">
              <div class="top-margin-medium">
                {% if login_facebook %}
                  <div class=" full-width flex between-xs middle-xs">
                    <span class="text-medium text-dark-opacity">{{ text_facebook }}</span>
                    <button type="button" id="btnAppFacebook" class="btn-default btn-medium btn-medium btn-neutral-white" 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 top-margin-medium">
                {% endif %}
                {% if login_google %}
                    <div class="top-margin-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-opacity">{{ text_google }}</span>
                      <button type="button" class="btn-default btn-medium btn-medium btn-neutral-white" id="btngoogledisconnect" data-text-google-desvinculado="{{ text_desconnected }}{{ text_google }}">
                        <span>Desconectar</span>
                      </button>
                    </div>
                    <div class="top-margin-medium full-width flex between-xs middle-xs divgoogleconnect {{ (email_gmail_value or gmail_user_id) ? "hidden" : "" }}">
                      <span class="text-medium text-dark-opacity">{{ text_google }}</span>
                      <button type="button" class="btn-default btn-medium btn-medium btn-neutral-white" 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>
            </base-content>
          {% endif %}

          {# Deletar a conta #}
          <base-content class="top-margin-medium" :icon="'fa fa-exclamation-triangle'" title="{{ text_outer_options_account }}">
            <div class=" full-width flex between-xs middle-xs top-margin-medium">
              <span class="text-bold text-dark-opacity text-medium">{{ text_delete_account }}</span>
              <a class="js-delete-account cursor-pointer text-dark-opacity btn-base-context-small" title="Excluir conta" @click="openModal">
                <i class="fas fa-trash"></i>
              </a>
            </div>
            <div class="description-margin">
              <span class="text-small">{{ text_description_delete }}</span>
            </div>
          </base-content>

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

  {# Modal Deletar a Conta #}
    <base-modal
      v-if="showModal"
      title="{{ text_delete_account }}"
      size="medium"
      @close="onClose"
    >
      <div class="horizontal-padding-small text-center">
        <span class="flex text-justify">{{ text_declaration }}</span>
        <div class="top-margin-medium text-justify">
          <base-checkbox
            type="checkbox"
            name="confirmationDelete"
            label="{{ text_conformation_delete }}"
            id="confirmationDelete"
            class="flex center-xs"
          >
          </base-checkbox>
        </div>
        <div class="top-margin-medium flex gap-1 center-xs">
          <base-button
            apperance="confirm"
            square
            size="medium"
            class="js-deleteAccount-confirmation"
            v-text="'{{ text_confirmation }}'"
            @click.native="setDeleteAccount()"
          >
          </base-button>
          <base-button
            apperance="cancel"
            square
            size="medium"
            v-text="'{{ text_cancel }}'"
            @click.native="onClose"
          >
          </base-button>
        </div>
      </div>
    </base-modal>
	</div>
</section>

{{ footer }}

{# JS do Google e Facebook da tela de conta #}
<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 () {

    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>

{# Necessário para passagem de dados em VueJS  #}
<script type="text/javascript">
	const DATA = {{ data|json_encode() }};
</script>

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