{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('quotation_services')) }}">
{% endblock %}
{% block cssadicional %}
<link rel="stylesheet" href="{{ asset('static/js/datepicker/jquery-ui.min.css') }}"/>
{% if info.captchaShow and info.captchaSite and info.captchaSecret %}
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script type="text/javascript">
var onloadCallback = function() {
var element = document.getElementById('g-recaptcha-response');
element.classList.add('validate[required]');
};
</script>
{% endif %}
{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="quote_banner">
<div class="quote_banner_content ww_center">
<div class="quote_banner_miga">
<ul>
<li><a href="{{ path('home') }}">Inicio</a></li>
<li><a>Cotizar</a></li>
</ul>
</div>
<h1 class="quote_banner_title">{{ sd.title }}</h1>
</div>
</section>
<section class="quote_form">
<div class="quote_form_content ww_center">
<div class="quote_form_block">
{% if sd.text %}
<div class="quote_form_description">
<p>{{ sd.text|nl2br }}</p>
</div>
{% endif %}
<div class="quote_form_fields">
{{ form_start(form, {'attr': {'id': 'form_camiones'}}) }}
{% include 'front/templates/form_utm_fields.html.twig' %}
{{ form_widget(form.typePerson) }}
{{ form_widget(form.documentType) }}
{{ form_widget(form.documentNumber) }}
{{ form_widget(form.service) }}
{{ form_widget(form.establishment) }}
<input type="hidden" id="form_quotation_services_adviser_id" name="adviser_id">
<div class="field_radios">
<div class="field_radio">
<input checked type="radio" name="b2ccamiones_group" value="Empresa" id="form_quotation_services_legal_person">
<label for="form_quotation_services_legal_person" class="field_radio_label">
<span class="field_radio_icon"></span>
<span class="field_radio_text">Soy empresa</span>
</label>
</div>
<div class="field_radio">
<input type="radio" name="b2ccamiones_group" value="Persona natural" id="form_quotation_services_natural_person">
<label for="form_quotation_services_natural_person" class="field_radio_label">
<span class="field_radio_icon"></span>
<span class="field_radio_text">Soy Persona Natural</span>
</label>
</div>
</div>
<div class="field_block">
<div class="field_item_column quote_field_company">
<div class="field_box">
<input type="text" id="form_quotation_services_document_number_legal_person" class="soloNumber inputEffect validate[required] form_quotation_services_document_number">
<label for="form_quotation_services_document_number_legal_person" class="field_text">RUC *</label>
</div>
<div class="field_box">
{{ form_widget(form.company, {'attr': {'class': 'validate[required] inputEffect'}}) }}
<label for="form_quotation_services_company" class="field_text">Empresa *</label>
</div>
</div>
<div class="field_item_column quote_field_person" style="display:none;">
<div class="field_box">
<select id="form_quotation_services_document_types" class="inputEffect">
<option value="" disabled selected></option>
{% for item in forms.documentTypes %}
<option value="{{ item.title }}">{{ item.title }}</option>
{% endfor %}
</select>
<label class="field_text">Tipo de documento* <span class="icon-arrow_drop_down"></span></label>
</div>
<div class="field_box">
<input type="text" id="form_quotation_services_document_number_natural_person" class="inputEffect validate[required] form_quotation_services_document_number soloNumber">
<label for="form_quotation_services_document_number_natural_person" class="field_text">Número de documento *</label>
</div>
</div>
<div class="field_item_column">
<div class="field_box">
{{ form_widget(form.name, {'attr': {'class': 'validate[required] inputEffect'}}) }}
<label for="form_quotation_services_name" class="field_text">Nombres *</label>
</div>
<div class="field_box">
{{ form_widget(form.lastname, {'attr': {'class': 'validate[required] inputEffect'}}) }}
<label for="form_quotation_services_lastname" class="field_text">Apellidos *</label>
</div>
</div>
<div class="field_item_column">
<div class="field_box">
{{ form_widget(form.phone, {'attr': {'class': 'validate[required, custom[phone]] soloNumber inputEffect'}}) }}
<label for="form_quotation_services_phone" class="field_text">Teléfono *</label>
</div>
<div class="field_box">
{{ form_widget(form.email, {'attr': {'class': 'validate[required,custom[email]] inputEffect'}}) }}
<label for="form_quotation_services_email" class="field_text">Correo electrónico *</label>
</div>
</div>
<div class="field_item_column">
<div class="field_box">
<select id="form_quotation_services_services" class="validate[required] inputEffect">
<option value="" disabled selected></option>
{% for item in services %}
<option value="{{ item.title }}">{{ item.title }}</option>
{% endfor %}
</select>
<label for="form_quotation_services_services" class="field_text">Servicio *<span class="icon-arrow_drop_down"></span></label>
</div>
<div class="field_box">
{{ form_widget(form.date, {'attr': {'class': 'validate[required] inputEffect datepicker'}}) }}
<label class="field_text">Agendar cita *<span class="icon-insert_invitation"></span></label>
</div>
</div>
<div class="field_item_column">
<div class="field_box">
<select id="form_quotation_services_establishments" class="inputEffect">
<option value="" selected disabled></option>
{% for item in establishments %}
<option value="{{ item.title }} ({{ item.city.title }})">{{ item.title }} ({{ item.city.title }})</option>
{% endfor %}
</select>
<label for="form_quotation_services_establishments" class="field_text">Seleccione establecimiento *<span class="icon-arrow_drop_down"></span></label>
</div>
<div class="field_box">
<select id="form_quotation_services_advisers" class="inputEffect">
<option value="" selected disabled></option>
<option value="0">Ninguno</option>
{% for item in advisers %}
<option value="{{ item.id }}">{{ item.name }}</option>
{% endfor %}
</select>
<label for="form_quotation_services_advisers" class="field_text">Seleccione Asesor (Opcional) <span class="icon-arrow_drop_down"></span></label>
</div>
</div>
<div class="field_item_row">
<div class="field_box">
{{ form_widget(form.message, {'attr': {'class': 'inputEffect validate[required]'}}) }}
<label id="form_quotation_services__token" class="field_text">Mensaje *</label>
</div>
</div>
</div>
<div class="field_required">
<p>* Campos obligatorios</p>
</div>
<div class="field_check_center">
<div class="field_check">
<input type="checkbox" id="b2ccamiones_checkbox" class="validate[required]" name="">
<label for="b2ccamiones_checkbox" class="field_check_text">
<span class="field_check_icon"></span>
<p>He leído y acepto las <a href="{{ path('data_protection_policies') }}" target="_blank">Políticas de privacidad</a></p>
</label>
</div>
</div>
{% if info.captchaShow and info.captchaSite and info.captchaSecret %}
<div style="padding-top:20px;">
<div class="g-recaptcha" data-sitekey="{{ info.captchaSite }}"></div>
</div>
{% endif %}
<div class="field_button">
<button class="btn btn_blue btnFormCamiones" id="btnFormCamiones">Enviar</button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</section>
{% endblock %}
{% block jsfinal %}
<script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
<script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
<script src="{{ asset('static/js/datepicker/jquery-ui.min.js') }}"></script>
<script type="text/javascript">
$(function(){
//- +++ Datepicker +++
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
$('.datepicker').datepicker({
minDate: 0,
yearRange: "-0:+10",
onSelect: function() {
$(this).parent().find('.field_text').addClass('fijar');
}
});
//- <<< END >>>
const quoteFields = $(".field_box input, .field_box select, .field_box textarea");
$(quoteFields).focusin(function() {
$(this).addClass('border');
});
$(quoteFields).focusout(function() {
if ($(this).val() === "") {
$(this).removeClass('border');
};
});
$(quoteFields).each(function() {
if ($(this).val()) {
$(this).addClass('border');
}
});
$('.soloNumber').keypress(validateNumber);
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
}
$('#form_quotation_services_natural_person').on('change', function () {
$('.quote_field_company').hide();
$('.quote_field_person').show();
});
$('#form_quotation_services_legal_person').on('change', function () {
$('.quote_field_person').hide();
$('.quote_field_company').show();
});
$('#form_quotation_services_legal_person').on('change', function () {
$('#form_quotation_services_typePerson').val($(this).val());
$('#form_quotation_services_document_types').val('');
$('#form_quotation_services_document_number_natural_person').val('');
$('#form_quotation_services_document_number_legal_person').val('');
$('#form_quotation_services_documentType').val('RUC');
$('#form_quotation_services_documentNumber').val('');
$('#form_quotation_services_company').val('');
})
$('#form_quotation_services_natural_person').on('change', function () {
$('#form_quotation_services_typePerson').val($(this).val());
$('#form_quotation_services_document_types').val('');
$('#form_quotation_services_document_number_natural_person').val('');
$('#form_quotation_services_document_number_legal_person').val('');
$('#form_quotation_services_documentType').val('');
$('#form_quotation_services_documentNumber').val('');
})
$('#form_quotation_services_legal_person').trigger('change');
$('.form_quotation_services_document_number').on('keyup', function () {
$('#form_quotation_services_documentNumber').val($(this).val());
})
$('#form_quotation_services_document_types').on('change', function () {
$('#form_quotation_services_documentType').val($(this).val());
})
$('#form_quotation_services_services').on('change', function () {
$('#form_quotation_services_service').val($(this).val());
})
$('#form_quotation_services_establishments').on('change', function () {
$('#form_quotation_services_establishment').val($(this).val());
})
$('#form_quotation_services_advisers').on('change', function () {
$('#form_quotation_services_adviser').val($(this).val());
$('#form_quotation_services_adviser_id').val($(this).val());
})
const form_quotation_services = $('#form_camiones');
const form_quotation_services_button = $('#btnFormCamiones');
form_quotation_services.validationEngine('attach', {
promptPosition: "topLeft",
autoHidePrompt: true,
autoHideDelay: 3000,
binded: false,
scroll: false
});
form_quotation_services_button.on('click', function (event) {
event.preventDefault();
const valid = form_quotation_services.validationEngine('validate');
if (valid) {
form_quotation_services.submit();
}
});
});
</script>
{% endblock %}