{% 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"> <a href="#" class="quote_banner_back">Regresar</a> <h1 class="quote_banner_title">{{ sd.title }}</h1> </div> </section> <section class="quote_form"> <div class="quote_form_content ww_center"> {% 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'}}) }} <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>Acepto las <a href="{{ path('data_protection_policies') }}" target="_blank">Políticas de Protección de Datos</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> </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'); $(this).attr('disabled', true); if (valid) { form_quotation_services.submit(); } else { $(this).attr('disabled', false); } }); }); </script>{% endblock %}