{% extends "front/_common/_base.html.twig" %}{% block linkcanonical %} <link rel="canonical" href="{{ absolute_url(path('quotation')) }}">{% endblock %}{% block cssadicional %}{% endblock %}{% block classbody %}{% endblock %}{% block content %} <section class="b5 scroll-wrapper"> <div class="b5Wrapper"> <picture class="b5BannerPicture"> <source srcset="{{ asset(sd.bannerImage|image_path) }}"> <img class="b5BannerPictureImage" src="{{ asset(sd.bannerImage|image_path) }}" width="1600" alt="{{ sd.bannerImage|image_alt }}"> </picture> {% if sd.bannerText %} <div class="b5BannerText"> <h1>{{ sd.bannerText }}</h1> </div> {% endif %} </div> </section> <section class="b21 b21CustomCotizar scroll-wrapper"> <div class="wanchoSecondary b21CustomCotizarTop scroll-item"> <ul class="b21MigaCustom b10LeftMigaPan"> <li><a href="{{ path('home') }}">Home</a></li> / <li class="active"><a href="{{ path('quotation') }}">Cotizar</a></li> </ul> </div> <div class="b21WrapEnvol"> <div class="wanchoSecondary"> <div class="b21Wrap"> <div class="b21Left"> <div class="b21WrapContact"> {% if sd.title %} <h4 class="titleStandard b21Title scroll-item">{{ sd.title }}</h4> {% endif %} {% if sd.text %} <div class="b21Text scroll-item"> <p>{{ sd.text|nl2br }}</p> </div> {% endif %} {{ form_start(form, {'attr': {'class': 'scroll-item'}}) }} {% include 'front/templates/form_utm_fields.html.twig' %} {{ form_widget(form.model) }} {{ form_widget(form.crmModel) }} {{ form_widget(form.department) }} <div class="b21WrapInput"> <div class="b21Input"> {{ form_widget(form.document, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }} <span class="form-label">RUC*</span> </div> <div class="b21Input"> {{ form_widget(form.company, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required]'}}) }} <span class="form-label">Empresa*</span> </div> </div> <div class="b21WrapInput"> <div class="b21Input"> {{ form_widget(form.name, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }} <span class="form-label">Nombres*</span> </div> <div class="b21Input"> {{ form_widget(form.lastName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }} <span class="form-label">Apellidos*</span> </div> </div> <div class="b21WrapInput"> <div class="b21Input"> {{ form_widget(form.email, {'attr': {'class': 'form-contact validate[required,custom[email]]'}}) }} <span class="form-label">Correo*</span> </div> <div class="b21Input"> {{ form_widget(form.phone, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }} <span class="form-label">Teléfono*</span> </div> </div> <div class="b21Select"> <select class="form-contact-select validate[required]" id="department"> <option value="" disabled selected></option> {% for item in departmentsArray %} <option value="{{ item.title }}">{{ item.title }}</option> {% endfor %} </select> <span class="form-label">Departamento*</span> <i class="icon-iconos-10"></i> </div> <div class="b21Select"> <select class="form-contact-select validate[required]" id="model"> <option value="" disabled selected></option> {% for item in modelsArray %} <option data-crm-model="{{ item.crmTitle }}" value="{{ item.title }}">{{ item.title }}</option> {% endfor %} </select> <span class="form-label">Modelo*</span> <i class="icon-iconos-10"></i> </div> <div class="b21Textarea"> {{ form_widget(form.message, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact'}}) }} <span class="form-label">Mensaje</span> </div> <div class="b21Paragraph"> (*) Campos obligatorios. </div> <div class="b21WrapCheckbox"> <input type="checkbox" id="b21Checkbox" class="validate[required]" name=""> <label for="b21Checkbox">Acepto las <a href="{{ path('privacy_policies') }}" target="_blank">Políticas de Privacidad</a></label> </div> <button class="buttonStandard gray b21Btn" id="BtnLibro">Enviar</button> {% if info.showCaptcha %} <input type="hidden" name="recaptcha_token" id="recaptchaToken"> {% endif %} {{ form_end(form) }} </div> </div> <div class="b21Right scroll-item"> <div class="b21RightWrap"> {% if sd.image1|image_path %} <picture class="b21RightWrapImageP"> <img src="{{ asset(sd.image1|image_path) }}" alt="{{ sd.image1|image_alt }}"> </picture> {% endif %} {% if sd.image2|image_path %} <picture class="b21RightWrapImageS"> <img src="{{ asset(sd.image2|image_path) }}" alt="{{ sd.image2|image_alt }}"> </picture> {% endif %} </div> </div> </div> </div> </div> </section>{% endblock %}{% block jsfinal %} {% if info.showCaptcha %} <script src="https://www.google.com/recaptcha/api.js?render={{ info.captchaSite }}"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('{{ info.captchaSite }}', {action: 'submit'}).then(function(token) { document.getElementById('recaptchaToken').value = token; }); }); </script> {% endif %} <script type="text/javascript"> jQuery(function ($) { $("form").validationEngine('attach', { promptPosition: "topLeft", autoHidePrompt: true, autoPositionUpdate: false, autoHideDelay: 2000, binded: false, scroll: false, validateNonVisibleFields: true }) $('#department').on('change', function () { $('#form_quotation_department').val($(this).val()); }) $('#model').on('change', function () { $('#form_quotation_model').val($(this).val()); $('#form_quotation_crmModel').val($(this).find('option:selected').data('crm-model')); }) $('#BtnLibro').on('click', function (event) { event.preventDefault(); const item = $(this); const form = item.closest('form'); const valid = form.validationEngine('validate'); if (valid) { item.prop('disabled', true).text('Enviando...'); form.submit(); } else { item.prop('disabled', false).text('Enviar'); } }); }) </script>{% endblock %}