{% extends "front/_common/_base.html.twig" %}{% block linkcanonical %} <link rel="canonical" href="{{ absolute_url(path('quotation_trucks')) }}">{% endblock %}{% block cssadicional %}{% 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"> <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.model) }} {{ form_widget(form.crmModel) }} {{ form_widget(form.tonnage) }} <div class="field_radios"> <div class="field_radio"> <input type="radio" name="form_type" value="Empresa" id="form_quotation_trucks_legal_person" checked> <label for="form_quotation_trucks_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="form_type" value="Persona natural" id="form_quotation_trucks_natural_person"> <label for="form_quotation_trucks_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" class="validate[required] soloNumber inputEffect form_quotation_trucks_document_number" id="form_document_number_legal_person"> <label for="form_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_trucks_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_trucks_document_types" class="inputEffect"> <option value="" disabled selected></option> {% for item in forms.documentTypes %} <option value="{{ item.title }}">{{ item.title }}</option> {% endfor %} </select> <label for="form_quotation_trucks_document_types" class="field_text">Tipo de documento* <span class="icon-arrow_drop_down"></span></label> </div> <div class="field_box"> <input type="text" class="inputEffect form_quotation_trucks_document_number soloNumber" id="form_quotation_trucks_document_number_natural_person"> <label for="form_quotation_trucks_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_trucks_name" class="field_text">Nombres*</label> </div> <div class="field_box"> {{ form_widget(form.lastname, {'attr': {'class': 'validate[required] inputEffect'}}) }} <label for="form_quotation_trucks_lastname" class="field_text">Apellidos*</label> </div> </div> <div class="field_item_column"> <div class="field_box"> {{ form_widget(form.phone, {'attr': {'class': 'soloNumber inputEffect validate[required, custom[phone]]'}}) }} <label for="form_quotation_trucks_phone" class="field_text">Teléfono*</label> </div> <div class="field_box"> {{ form_widget(form.email, {'attr': {'class': 'inputEffect validate[required, custom[email]]'}}) }} <label for="form_quotation_trucks_email" class="field_text">Correo electrónico*</label> </div> </div> <div class="field_item_column"> <div class="field_box"> {{ form_widget(form.department, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="form_quotation_trucks_department" class="field_text">Departamento</label> </div> </div> <div class="field_item_column"> <div class="field_box"> <select class="inputEffect validate[required]" id="form_quotation_trucks_tonnages"> <option value="" disabled selected></option> </select> <label for="form_quotation_trucks_tonnages" class="field_text">Carga útil<span class="icon-arrow_drop_down"></span></label> </div> <div class="field_box"> <select class="inputEffect" id="form_quotation_trucks_models"> <option value="" disabled selected></option> </select> <label for="form_quotation_trucks_models" class="field_text">Modelo<span class="icon-arrow_drop_down"></span></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 type="text/javascript"> $(function () { 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) { const key = window.event ? event.keyCode : event.which; if (event.keyCode === 8 || event.keyCode === 46) { return true; } else return !(key < 48 || key > 57); } $('#form_quotation_trucks_natural_person').on('change', function () { $('.quote_field_company').hide(); $('.quote_field_person').show(); }); $('#form_quotation_trucks_legal_person').on('change', function () { $('.quote_field_person').hide(); $('.quote_field_company').show(); }); $('#form_quotation_trucks_legal_person').on('change', function () { $('#form_quotation_trucks_typePerson').val($(this).val()); $('#form_quotation_trucks_document_types').val(''); $('#form_quotation_trucks_document_number_natural_person').val(''); $('#form_quotation_trucks_document_number_legal_person').val(''); $('#form_quotation_trucks_documentType').val('RUC'); $('#form_quotation_trucks_documentNumber').val(''); $('#form_quotation_trucks_company').val(''); }) $('#form_quotation_trucks_natural_person').on('change', function () { $('#form_quotation_trucks_typePerson').val($(this).val()); $('#form_quotation_trucks_document_types').val(''); $('#form_quotation_trucks_document_number_natural_person').val(''); $('#form_quotation_trucks_document_number_legal_person').val(''); $('#form_quotation_trucks_documentType').val(''); $('#form_quotation_trucks_documentNumber').val(''); }) $('#form_quotation_trucks_legal_person').trigger('change'); $('.form_quotation_trucks_document_number').on('keyup', function () { $('#form_quotation_trucks_documentNumber').val($(this).val()); }) $('#form_quotation_trucks_document_types').on('change', function () { $('#form_quotation_trucks_documentType').val($(this).val()); }) $('#form_quotation_trucks_models').on('change', function () { $('#form_quotation_trucks_model').val($(this).find('option:selected').data('value')); $('#form_quotation_trucks_crmModel').val($(this).find('option:selected').data('crm-model')); }) $('#form_quotation_trucks_tonnages').on('change', function () { $('#form_quotation_trucks_tonnage').val($(this).find('option:selected').data('value')); }) $('#form_quotation_trucks_tonnages').on('change', function () { updateModels(); }) const form_quotation_trucks = $('#form_camiones'); const form_quotation_trucks_button = $('#btnFormCamiones'); form_quotation_trucks.validationEngine('attach', { promptPosition: "topLeft", autoHidePrompt: true, autoHideDelay: 3000, binded: false, scroll: false }); form_quotation_trucks_button.on('click', function (event) { event.preventDefault(); const valid = form_quotation_trucks.validationEngine('validate'); $(this).attr('disabled', true); if (valid) { form_quotation_trucks.submit(); } else { $(this).attr('disabled', false); } }); $.ajax({ url: '{{ path('quotation_tonnages') }}', type: 'post', beforeSend: function () { $('#form_quotation_trucks_tonnages').html('').prop('disabled', true); $('#form_quotation_trucks_models').html('').prop('disabled', true); }, success: function (data) { $('#form_quotation_trucks_tonnages').html(createSelectTonnage(data)); }, complete: function () { $('#form_quotation_trucks_tonnages').prop('disabled', false); } }) function updateModels() { const tonnage = $('#form_quotation_trucks_tonnages').val(); if (!tonnage) { return; } $.ajax({ url: '{{ path('quotation_models_by_tonnage') }}', type: 'post', data: {tonnage: tonnage}, beforeSend: function () { $('#form_quotation_trucks_tonnages').prop('disabled', true); $('#form_quotation_trucks_models').html('').prop('disabled', true); }, success: function (data) { $('#form_quotation_trucks_models').html(createSelectModel(data)); }, complete: function () { $('#form_quotation_trucks_tonnages').prop('disabled', false); $('#form_quotation_trucks_models').prop('disabled', false); } }) } function createSelectPlaceholder() { return '<option value="" disabled selected></option>'; } function createSelectOptionTonnage(option) { const value = option['slug']; const text = option['title']; return '<option value="' + value + '" data-value="' + text + '">' + text + '</option>'; } function createSelectOptionModel(option) { const value = option['slug']; const text = option['title']; const crmModel = option['crm_model']; return '<option value="' + value + '" data-value="' + text + '" data-crm-model="' + crmModel + '">' + text + '</option>'; } function createSelectTonnage(data) { let options = createSelectPlaceholder(); $.each(data, function (i, v) { options += createSelectOptionTonnage(v); }); return options } function createSelectModel(data) { let options = createSelectPlaceholder(); $.each(data, function (i, v) { options += createSelectOptionModel(v); }); return options } }); </script>{% endblock %}