{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('quote')) }}">
{% endblock %}
{% block cssadicional %}
{% if info.captchaShow %}
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : '{{ info.captchaSite }}'
});
};
</script>
{% endif %}
{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="banner-general banner-general--blue">
<img class="banner-general__cover" src="{{ asset(home.mainBg|image_path) }}" alt="{{ home.mainBg|image_alt }}"/>
<img src="{{ asset(home.mainDetail|image_path) }}" alt="{{ home.mainDetail|image_alt }}" class="banner-general__img" />
<div class="wancho">
<div class="general_breadcrumbs">
<ul>
<li><a href="{{ path('home') }}">INICIO</a></li>
<li><a href="{{ path('quote') }}" aria-selected="true">COTIZAR</a></li>
</ul>
</div>
<div class="main_title_layout">
{% if home.mainPrefix %}
<h2>{{ home.mainPrefix }}</h2>
{% endif %}
{% if home.mainTitle %}
<h1 class="general_title">{{ home.mainTitle|block_title|raw }}</h1>
{% endif %}
</div>
</div>
</section>
<section class="cotizar_ctn">
<article class="wancho flex jcsb">
<div class="cotizar_form">
{% if home.formText %}
<p>{{ home.formText }}</p>
{% endif %}
<div class="general_form">
{{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
{{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }}
{{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }}
{{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }}
{{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }}
{{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }}
{{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }}
{{ form_widget(form.isPerson) }}
<fieldset class="radioGroup">
<div>
<input type="radio" name="tipo" id="empresa" checked />
<label for="empresa">Soy empresa</label>
</div>
<div>
<input type="radio" name="tipo" id="natural" />
<label for="natural">Soy persona natural</label>
</div>
</fieldset>
<fieldset class="formGroup">
<div class="fInput fSelect">
{{ form_widget(form.typeMachine, {'attr': {'class':'validate[required]', 'data-validation-placeholder':'Tipo de vehículo*'}}) }}
</div>
<div class="fInput fSelect">
<select id="form_quote_typeModel_temp" required="required" class="validate[required]">
<option value="" selected="selected">Seleccione modelo*</option>
</select>
</div>
</fieldset>
<fieldset class="formGroup" id="personaGroup" style="display:none;">
<div class="fInput fSelect">
{{ form_widget(form.docType, {'attr': {'class':'validate[required]', 'data-validation-placeholder' : 'Tipo doc*'}}) }}
</div>
<div class="fInput">
<label for="empresa">Número doc.</label>
{{ form_widget(form.docNum, {'attr': {'class':'validate[required, maxSize[15]]', 'data-validation-placeholder' : 'Tipo doc*', 'data-maxChar':'15', 'data-expression':'number'}}) }}
</div>
</fieldset>
<fieldset class="formGroup" id="empresaGroup">
<div class="fInput">
<label for="ruc">RUC*</label>
{{ form_widget(form.ruc, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'data-maxChar':'15', 'data-expression':'number'}}) }}
</div>
<div class="fInput">
<label for="empresa">Empresa*</label>
{{ form_widget(form.factory, {'attr': {'class':'validate[required, maxSize[255]] validKeypress', 'data-maxChar':'15', 'data-expression':'text'}}) }}
</div>
</fieldset>
<fieldset class="formGroup">
<div class="fInput">
<label for="nombre">Nombres*</label>
{{ form_widget(form.name, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
<div class="fInput">
<label for="apellidos">Apellidos*</label>
{{ form_widget(form.lastname, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
</fieldset>
<fieldset class="formGroup">
<div class="fInput">
<label for="telefono">Teléfono*</label>
{{ form_widget(form.phone, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'type': 'tel', 'data-maxChar':'15', 'data-expression':'number'}}) }}
</div>
<div class="fInput">
<label for="correo">Correo Electrónico*</label>
{{ form_widget(form.email, {'attr': {'class':'validate[required, maxSize[100]] validKeypress', 'type': 'email', 'data-maxChar':'100', 'data-expression':'email'}}) }}
</div>
</fieldset>
<div class="fInput fSelect">
{{ form_widget(form.departament, {'attr': {'class':'validate[required]'}}) }}
</div>
<div class="fInput fSelect">
{{ form_widget(form.origin, {'attr': {'class':'validate[required]' }}) }}
</div>
<div class="fInput">
<label for="comentario">¿Tienes algún comentario?</label>
{{ form_widget(form.comment, {'attr': {'class':'validate[maxSize[255]]', 'data-maxChar' : '255'}}) }}
</div>
<div class="fCheckBox">
<span>*Campos obligatorios</span>
<div class="formCheckbox">
<input type="checkbox" id="1" name="check_terminos" class="validate[required]" />
<label for="1"
>He leído y acepto las <a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
>
</div>
</div>
{% if info.captchaShow %}
<div style="margin-bottom:10px; position: relative; width: max-content;">
<div id="html_element"></div>
</div>
{% endif %}
<div class="formButtonCtn">
<button class="f-guardar-contacto-general hidden_button_send" id="btnQuote">Enviar</button>
<button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
</div>
{{ form_end(form) }}
</div>
</div>
<ul class="cotizar_datos">
{% if home.formAddress %}
<li>
<h3>DIRECCIÓN</h3>
<a href="{{ home.formAddressUrl }}"
>{{ home.formAddress }}</a
>
</li>
{% endif %}
{% if home.formPhone %}
<li>
<h3>CENTRAL TELEFÓNICA</h3>
<a href="tel:{{ home.formPhone|only_numbers }}">{{ home.formPhone }}</a>
</li>
{% endif %}
{% if home.formEmail %}
<li>
<h3>E-MAIL</h3>
<a href="mailto:{{ home.formEmail|trim|lower }}">{{ home.formEmail }}</a>
</li>
{% endif %}
{% if home.formWhatsappNum %}
<li>
<h3>whatsapp</h3>
<a href="https://api.whatsapp.com/send?phone={{ home.formWhatsappNum|only_numbers }}&text={{home.formWhatsappMessage}}" target="_blank">
{{ home.formWhatsappNum }}
</a>
</li>
{% endif %}
</ul>
</article>
</section>
{% if home.storesShow and home.storeItemsActive %}
<section>
<article class="wancho">
<ul class="cotizar_links flex">
{% for item in home.storeItemsActive %}
<li class="faw_link">
<a href="{{ item.link }}" target="{{ item.target ? '_blank' : '_self' }}">
{{ item.text }}
<i class="icon-flecha-derecha"></i>
</a>
</li>
{% endfor %}
</ul>
</article>
</section>
{% endif %}
{% endblock %}
{% block jsfinal %}
<script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
{% include 'front/templates/captcha.html.twig' %}
<script type="text/javascript">
// cambia y quita los campos base a tipo de usuario a llenar formulario
const empresa = document.querySelector('#empresa');
const natural = document.querySelector('#natural');
const empresaGroup = document.getElementById('empresaGroup');
empresa.addEventListener('change', adjustableHeightCheck);
natural.addEventListener('change', adjustableHeightCheck);
$('#form_quote_docType').removeClass('validate[required]');
$('#form_quote_docNum').removeClass('validate[required, maxSize[15]]');
function adjustableHeightCheck() {
if (!!document.getElementById('empresa').checked) {
$('#empresaGroup').css({'display' : 'flex'});
$('#personaGroup').css({'display' : 'none'});
$('#form_quote_ruc').addClass('validate[required, maxSize[15]]');
$('#form_quote_factory').addClass('validate[required, maxSize[125]]');
$('#form_quote_docType').removeClass('validate[required]');
$('#form_quote_docNum').removeClass('validate[required, maxSize[15]]');
$('#form_quote_isPerson').prop("checked", false);
} else {
$('#empresaGroup').css({'display' : 'none'});
$('#personaGroup').css({'display' : 'flex'});
$('#form_quote_ruc').removeClass('validate[required, maxSize[15]]');
$('#form_quote_factory').removeClass('validate[required, maxSize[125]]');
$('#form_quote_docType').addClass('validate[required]');
$('#form_quote_docNum').addClass('validate[required, maxSize[15]]');
$('#form_quote_isPerson').prop("checked", true);
}
}
/*
function adjustableHeightCheck() {
if (!!document.getElementById('empresa').checked) {
empresaGroup.style.display = 'flex';
empresaGroup.querySelectorAll('input').forEach(e => {
e.removeAttribute('disabled');
});
} else {
empresaGroup.style.display = 'none';
empresaGroup.querySelectorAll('input').forEach(e => {
e.setAttribute('disabled', true);
});
}
}
*/
// cambia y quita los campos base a tipo de usuario a llenar formulario
$(() => {
$('form').validationEngine('attach', {
promptPosition: 'bottomLeft',
autoHidePrompt: true,
autoPositionUpdate: false,
autoHideDelay: 3000,
addFailureCssClassToField: 'inputError',
binded: false,
scroll: false,
validateNonVisibleFields: true,
showOneMessage: false,
});
// AQUI EL EVENTO PARA ENVIAR PROMOCION
});
$('#form_quote_typeMachine').change(function(e) {
e.preventDefault();
$('#form_quote_typeModel_temp').empty();
let category = $(this).find('option:selected').data('slug');
$.get('{{ path("sync_machines") }}', {'category':category}, function(resp){
if(resp.status == true) {
$('#form_quote_typeModel_temp').html(resp.data);
} else {
$('#form_quote_typeModel_temp').html('<option value="" selected="selected" disabled>Selecione Modelo*</option>');
}
});
});
$('#form_quote_typeMachine').change();
$('#btnQuote').on('click', function(event) {
event.preventDefault();
$('#form_quote_typeModel').val($('#form_quote_typeModel_temp').val());
let btn = $(this);
let form = btn.closest('form');
var valid = form.validationEngine('validate');
btn.prop('disabled', true);
if(valid && validarRecaptcha()){
document.querySelector('.general_form').classList.add('submit_form')
form.submit();
} else {
btn.prop('disabled', false);
return false;
}
});
</script>
{% endblock %}