{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('promotions')) }}">
{% endblock %}
{% block cssadicional %}{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="promociones">
<div class="promociones_banner">
<div class="promociones_container ww_center">
<h2>{{ sd.title }}</h2>
</div>
</div>
{% if promotions|length > 0 %}
<div class="promociones_wrap_items ww_center">
{% for item in promotions %}
<a href="" class="promociones_itm" data-img="{{ asset(item.image|image_path) }}" data-promotion="{{ item.title }}">
<figure class="promociones_image">
<img src="{{ asset(item.image|image_path) }}" width="50" height="" alt="{{ item.title }}">
</figure>
</a>
{% endfor %}
</div>
{% else %}
<div class="promociones_mensaje">
<figure>
<img src="{{ asset(sd.noDataIcon|image_path) }}" width="" alt="{{ sd.noDataIcon|split_alt }}">
</figure>
<h2>{{ sd.noDataMessage|nl2br ?: 'No hay promociones disponibles. Pronto tendremos más novedades.' }}</h2>
</div>
{% endif %}
</section>
{% if promotions|length > 0 %}
<div class="popup_promociones">
<div class="popup_promociones_container ww_center">
<span class="popup_promociones_close icon-add"></span>
<div class="popup_promociones_left">
<figure>
<img id="promotion_image" width="585" alt="">
</figure>
<div class="popup_text_promociones">
<p>{{ sd.formNotes|nl2br }}</p>
</div>
</div>
<div class="popup_promociones_form">
<h2>{{ sd.formTitle }}</h2>
<p>{{ sd.formText|nl2br }}</p>
{{ form_start(form, {'attr': {'id': 'formPromociones'}}) }}
{% include 'front/templates/form_utm_fields.html.twig' %}
{{ form_widget(form.promotion) }}
{{ form_widget(form.typePerson) }}
{{ form_widget(form.documentType) }}
{{ form_widget(form.documentNumber) }}
<ul>
<li>
<div class="popup_promociones_input_radio">
<div class="popup_promociones_input_label">
<input checked type="radio" name="form_type" class="checkedInput validate[required]" value="Empresa" id="form_promotion_legal_person">
<label for="form_promotion_legal_person"><span></span>Soy empresa</label>
</div>
<div class="popup_promociones_input_label">
<input type="radio" name="form_type" class="checkedInput validate[required]" value="Persona natural" id="form_promotion_natural_person">
<label for="form_promotion_natural_person"><span></span>Soy Persona Natural</label>
</div>
</div>
</li>
<li class="popup_promociones_column liNoneInputs">
<div class="popup_promociones_inputs">
<select class="validate[required] inputEffect elementHidden" id="form_promotion_document_types">
<option value="" disabled selected></option>
{% for item in forms.documentTypes %}
<option value="{{ item.title }}">{{ item.title }}</option>
{% endfor %}
</select>
<label for="form_promotion_document_types">Tipo de documento*</label>
</div>
<div class="popup_promociones_inputs">
<input type="text" class="validate[required] inputEffect elementHidden form_promotion_document_number" id="form_promotion_document_number_natural_person">
<label for="form_promotion_document_number_natural_person">Número de documento*<span class="icon-arrow_drop_down"></span></label>
</div>
</li>
<li class="popup_promociones_column liNoneInputsEmpresa">
<div class="popup_promociones_inputs">
<input type="text" class="validate[required] inputEffect elementHiddenEmpresa form_promotion_document_number" id="form_promotion_document_number_legal_person">
<label for="form_promotion_document_number_legal_person">RUC*</label>
</div>
<div class="popup_promociones_inputs">
{{ form_widget(form.company, {'attr': {'class': 'validate[required] inputEffect elementHiddenEmpresa'}}) }}
<label for="form_promotion_company">Empresa*</label>
</div>
</li>
<li class="popup_promociones_column">
<div class="popup_promociones_inputs">
{{ form_widget(form.name, {'attr': {'class': 'inputEffect validate[required]'}}) }}
<label for="form_promotion_name">Nombres*</label>
</div>
<div class="popup_promociones_inputs">
{{ form_widget(form.department, {'attr': {'class': 'inputEffect validate[required]'}}) }}
<label for="form_promotion_department">Departamento*</label>
</div>
</li>
<li class="popup_promociones_column">
<div class="popup_promociones_inputs">
{{ form_widget(form.phone, {'attr': {'class': 'inputEffect validate[required, custom[phone]]'}}) }}
<label for="form_promotion_phone">Teléfono*</label>
</div>
<div class="popup_promociones_inputs">
{{ form_widget(form.email, {'attr': {'class': 'inputEffect validate[required, custom[email]]'}}) }}
<label for="form_promotion_email">Correo Electrónico*</label>
</div>
</li>
</ul>
<div class="popup_promociones_obligatorio">
<p>* Campos obligatorios</p>
</div>
<div class="contacto_check popup_promociones_check">
<input type="checkbox" id="inputCheck" class="validate[required]" name="">
<label for="inputCheck">
<span class="contacto_check_active"></span>
<p>Acepto los <a href="{{ path('terms_and_conditions') }}" target="_blank">Términos y Condiciones</a></p>
</label>
</div>
<div class="popup_promociones_btn">
<button class="btnPromocion btn btn_blue" id="btnPromocion">Enviar</button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block jsfinal %}
<script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
<script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
{% if promotions|length > 0 %}
<script type="text/javascript">
const elementImage = document.getElementById('promotion_image');
let navPopup = document.querySelectorAll('.promociones_itm');
navPopup.forEach((item) => {
item.addEventListener('click', (e) => {
e.preventDefault();
elementImage.src = item.getAttribute('data-img');
document.querySelector('.popup_promociones').classList.add('active');
})
document.querySelector('body').style.overflow = 'hidden'
})
document.querySelector('.popup_promociones_close').addEventListener('click', () => {
document.querySelector('.popup_promociones').classList.remove('active');
document.querySelector('body').style.overflow = 'auto'
elementImage.src = null;
})
let InputChecked = document.querySelectorAll('.checkedInput');
let elementDivHidden = document.querySelectorAll('.elementHidden');
let elementHiddenEmpresa = document.querySelectorAll('.elementHiddenEmpresa');
InputChecked.forEach((item) => {
item.addEventListener('change', () => {
if (item.value === 'Empresa') {
elementDivHidden.forEach((el) => {
el.disabled = true
el.closest('.liNoneInputs').classList.remove('is_active');
})
elementHiddenEmpresa.forEach((el) => {
el.disabled = false
el.closest('.liNoneInputsEmpresa').classList.remove('is_empresa');
})
} else {
elementDivHidden.forEach((el) => {
el.disabled = false
el.closest('.liNoneInputs').classList.add('is_active');
})
elementHiddenEmpresa.forEach((el) => {
el.disabled = true
el.closest('.liNoneInputsEmpresa').classList.add('is_empresa');
})
}
})
})
const popupPromotionFields = $(".popup_promociones_inputs input, .popup_promociones_inputs select");
$(popupPromotionFields).focusin(function() {
$(this).addClass('border');
});
$(popupPromotionFields).focusout(function() {
if ($(this).val() === "") {
$(this).removeClass('border');
};
});
$(popupPromotionFields).each(function() {
if ($(this).val() != "") {
$(this).addClass('border');
}
});
$('#form_promotion_legal_person').on('change', function () {
$('#form_promotion_typePerson').val($(this).val());
$('#form_promotion_document_types').val('');
$('#form_promotion_document_number_natural_person').val('');
$('#form_promotion_document_number_legal_person').val('');
$('#form_promotion_documentType').val('RUC');
$('#form_promotion_documentNumber').val('');
$('#form_promotion_company').val('');
})
$('#form_promotion_natural_person').on('change', function () {
$('#form_promotion_typePerson').val($(this).val());
$('#form_promotion_document_types').val('');
$('#form_promotion_document_number_natural_person').val('');
$('#form_promotion_document_number_legal_person').val('');
$('#form_promotion_documentType').val('');
$('#form_promotion_documentNumber').val('');
})
$('.promociones_itm').on('click', function () {
$('#form_promotion_promotion').val($(this).data('promotion'));
})
$('#form_promotion_legal_person').trigger('change');
$('.form_promotion_document_number').on('keyup', function () {
$('#form_promotion_documentNumber').val($(this).val());
})
$('#form_promotion_document_types').on('change', function () {
$('#form_promotion_documentType').val($(this).val());
})
const form_promotion = $('#formPromociones');
const form_promotion_button = $('#btnPromocion');
form_promotion.validationEngine('attach', {
promptPosition: "topLeft",
autoHidePrompt: true,
autoHideDelay: 3000,
binded: false,
scroll: false
});
form_promotion_button.on('click', function (event) {
event.preventDefault();
const valid = form_promotion.validationEngine('validate');
$(this).attr('disabled', true);
if (valid) {
form_promotion.submit();
} else {
$(this).attr('disabled', false);
}
});
</script>
{% endif %}
{% endblock %}