templates/front/quotation/services.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  2. {% block linkcanonical %}
  3.     <link rel="canonical" href="{{ absolute_url(path('quotation_services')) }}">
  4. {% endblock %}
  5. {% block cssadicional %}
  6.     <link rel="stylesheet" href="{{ asset('static/js/datepicker/jquery-ui.min.css') }}"/>
  7.     {% if info.captchaShow and info.captchaSite and info.captchaSecret %}
  8.     <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
  9.     <script type="text/javascript">
  10.     var onloadCallback = function() {
  11.         var element = document.getElementById('g-recaptcha-response');
  12.         element.classList.add('validate[required]');
  13.     };
  14.     </script>
  15.     {% endif %}
  16. {% endblock %}
  17. {% block classbody %}{% endblock %}
  18. {% block content %}
  19.     <section class="quote_banner">
  20.         <div class="quote_banner_content ww_center">
  21.             <div class="quote_banner_miga">
  22.                 <ul>
  23.                     <li><a href="{{ path('home') }}">Inicio</a></li>
  24.                     <li><a>Cotizar</a></li>
  25.                 </ul>
  26.             </div>
  27.             <h1 class="quote_banner_title">{{ sd.title }}</h1>
  28.         </div>
  29.     </section>
  30.     <section class="quote_form">
  31.         <div class="quote_form_content ww_center">
  32.             <div class="quote_form_block">
  33.                 {% if sd.text %}
  34.                     <div class="quote_form_description">
  35.                         <p>{{ sd.text|nl2br }}</p>
  36.                     </div>
  37.                 {% endif %}
  38.                 <div class="quote_form_fields">
  39.                     {{ form_start(form, {'attr': {'id': 'form_camiones'}}) }}
  40.                     {% include 'front/templates/form_utm_fields.html.twig' %}
  41.                     {{ form_widget(form.typePerson) }}
  42.                     {{ form_widget(form.documentType) }}
  43.                     {{ form_widget(form.documentNumber) }}
  44.                     {{ form_widget(form.service) }}
  45.                     {{ form_widget(form.establishment) }}
  46.                     <input type="hidden" id="form_quotation_services_adviser_id" name="adviser_id">
  47.                     <div class="field_radios">
  48.                         <div class="field_radio">
  49.                             <input checked type="radio" name="b2ccamiones_group" value="Empresa" id="form_quotation_services_legal_person">
  50.                             <label for="form_quotation_services_legal_person" class="field_radio_label">
  51.                                 <span class="field_radio_icon"></span>
  52.                                 <span class="field_radio_text">Soy empresa</span>
  53.                             </label>
  54.                         </div>
  55.                         <div class="field_radio">
  56.                             <input type="radio" name="b2ccamiones_group" value="Persona natural" id="form_quotation_services_natural_person">
  57.                             <label for="form_quotation_services_natural_person" class="field_radio_label">
  58.                                 <span class="field_radio_icon"></span>
  59.                                 <span class="field_radio_text">Soy Persona Natural</span>
  60.                             </label>
  61.                         </div>
  62.                     </div>
  63.                     <div class="field_block">
  64.                         <div class="field_item_column quote_field_company">
  65.                             <div class="field_box">
  66.                                 <input type="text" id="form_quotation_services_document_number_legal_person" class="soloNumber inputEffect validate[required] form_quotation_services_document_number">
  67.                                 <label for="form_quotation_services_document_number_legal_person" class="field_text">RUC *</label>
  68.                             </div>
  69.                             <div class="field_box">
  70.                                 {{ form_widget(form.company, {'attr': {'class': 'validate[required] inputEffect'}}) }}
  71.                                 <label for="form_quotation_services_company" class="field_text">Empresa *</label>
  72.                             </div>
  73.                         </div>
  74.                         <div class="field_item_column quote_field_person" style="display:none;">
  75.                             <div class="field_box">
  76.                                 <select id="form_quotation_services_document_types" class="inputEffect">
  77.                                     <option value="" disabled selected></option>
  78.                                     {% for item in forms.documentTypes %}
  79.                                         <option value="{{ item.title }}">{{ item.title }}</option>
  80.                                     {% endfor %}
  81.                                 </select>
  82.                                 <label class="field_text">Tipo de documento* <span class="icon-arrow_drop_down"></span></label>
  83.                             </div>
  84.                             <div class="field_box">
  85.                                 <input type="text" id="form_quotation_services_document_number_natural_person" class="inputEffect validate[required] form_quotation_services_document_number soloNumber">
  86.                                 <label for="form_quotation_services_document_number_natural_person" class="field_text">Número de documento *</label>
  87.                             </div>
  88.                         </div>
  89.                         <div class="field_item_column">
  90.                             <div class="field_box">
  91.                                 {{ form_widget(form.name, {'attr': {'class': 'validate[required] inputEffect'}}) }}
  92.                                 <label for="form_quotation_services_name" class="field_text">Nombres *</label>
  93.                             </div>
  94.                             <div class="field_box">
  95.                                 {{ form_widget(form.lastname, {'attr': {'class': 'validate[required] inputEffect'}}) }}
  96.                                 <label for="form_quotation_services_lastname" class="field_text">Apellidos *</label>
  97.                             </div>
  98.                         </div>
  99.                         <div class="field_item_column">
  100.                             <div class="field_box">
  101.                                 {{ form_widget(form.phone, {'attr': {'class': 'validate[required, custom[phone]] soloNumber inputEffect'}}) }}
  102.                                 <label for="form_quotation_services_phone" class="field_text">Teléfono *</label>
  103.                             </div>
  104.                             <div class="field_box">
  105.                                 {{ form_widget(form.email, {'attr': {'class': 'validate[required,custom[email]] inputEffect'}}) }}
  106.                                 <label for="form_quotation_services_email" class="field_text">Correo electrónico *</label>
  107.                             </div>
  108.                         </div>
  109.                         <div class="field_item_column">
  110.                             <div class="field_box">
  111.                                 <select id="form_quotation_services_services" class="validate[required] inputEffect">
  112.                                     <option value="" disabled selected></option>
  113.                                     {% for item in services %}
  114.                                         <option value="{{ item.title }}">{{ item.title }}</option>
  115.                                     {% endfor %}
  116.                                 </select>
  117.                                 <label for="form_quotation_services_services" class="field_text">Servicio  *<span class="icon-arrow_drop_down"></span></label>
  118.                             </div>
  119.                             <div class="field_box">
  120.                                 {{ form_widget(form.date, {'attr': {'class': 'validate[required] inputEffect datepicker'}}) }}
  121.                                 <label class="field_text">Agendar cita  *<span class="icon-insert_invitation"></span></label>
  122.                             </div>
  123.                         </div>
  124.                         <div class="field_item_column">
  125.                             <div class="field_box">
  126.                                 <select id="form_quotation_services_establishments" class="inputEffect">
  127.                                     <option value="" selected disabled></option>
  128.                                     {% for item in establishments %}
  129.                                         <option value="{{ item.title }} ({{ item.city.title }})">{{ item.title }} ({{ item.city.title }})</option>
  130.                                     {% endfor %}
  131.                                 </select>
  132.                                 <label for="form_quotation_services_establishments" class="field_text">Seleccione establecimiento  *<span class="icon-arrow_drop_down"></span></label>
  133.                             </div>
  134.                             <div class="field_box">
  135.                                 <select id="form_quotation_services_advisers" class="inputEffect">
  136.                                     <option value="" selected disabled></option>
  137.                                     <option value="0">Ninguno</option>
  138.                                     {% for item in advisers %}
  139.                                         <option value="{{ item.id }}">{{ item.name }}</option>
  140.                                     {% endfor %}
  141.                                 </select>
  142.                                 <label for="form_quotation_services_advisers" class="field_text">Seleccione Asesor (Opcional) <span class="icon-arrow_drop_down"></span></label>
  143.                             </div>
  144.                         </div>
  145.                         <div class="field_item_row">
  146.                             <div class="field_box">
  147.                                 {{ form_widget(form.message, {'attr': {'class': 'inputEffect validate[required]'}}) }}
  148.                                 <label id="form_quotation_services__token" class="field_text">Mensaje *</label>
  149.                             </div>
  150.                         </div>
  151.                     </div>
  152.                     <div class="field_required">
  153.                         <p>* Campos obligatorios</p>
  154.                     </div>
  155.                     <div class="field_check_center">
  156.                         <div class="field_check">
  157.                             <input type="checkbox" id="b2ccamiones_checkbox" class="validate[required]" name="">
  158.                             <label for="b2ccamiones_checkbox" class="field_check_text">
  159.                                 <span class="field_check_icon"></span>
  160.                                 <p>He leído y acepto las <a href="{{ path('data_protection_policies') }}" target="_blank">Políticas de privacidad</a></p>
  161.                             </label>
  162.                         </div>
  163.                     </div>
  164.                     {% if info.captchaShow and info.captchaSite and info.captchaSecret %}
  165.                     <div style="padding-top:20px;">
  166.                         <div class="g-recaptcha" data-sitekey="{{ info.captchaSite }}"></div>
  167.                     </div>
  168.                     {% endif %}
  169.                     <div class="field_button">
  170.                         <button class="btn btn_blue btnFormCamiones" id="btnFormCamiones">Enviar</button>
  171.                     </div>
  172.                     {{ form_end(form) }}
  173.                 </div>
  174.             </div>
  175.         </div>
  176.     </section>
  177. {% endblock %}
  178. {% block jsfinal %}
  179.     <script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
  180.     <script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
  181.     <script src="{{ asset('static/js/datepicker/jquery-ui.min.js') }}"></script>
  182.     <script type="text/javascript">
  183.         $(function(){
  184.             //- +++ Datepicker +++
  185.             $.datepicker.regional['es'] = {
  186.                 closeText: 'Cerrar',
  187.                 prevText: '<Ant',
  188.                 nextText: 'Sig>',
  189.                 currentText: 'Hoy',
  190.                 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  191.                 monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
  192.                 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
  193.                 dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
  194.                 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
  195.                 weekHeader: 'Sm',
  196.                 dateFormat: 'dd/mm/yy',
  197.                 firstDay: 1,
  198.                 isRTL: false,
  199.                 showMonthAfterYear: false,
  200.                 yearSuffix: ''
  201.             };
  202.             $.datepicker.setDefaults($.datepicker.regional['es']);
  203.             $('.datepicker').datepicker({
  204.                 minDate: 0,
  205.                 yearRange: "-0:+10",
  206.                 onSelect: function() {
  207.                     $(this).parent().find('.field_text').addClass('fijar');
  208.                 }
  209.             });
  210.             //- <<< END >>>
  211.             const quoteFields = $(".field_box input, .field_box select, .field_box textarea");
  212.             $(quoteFields).focusin(function() {
  213.                 $(this).addClass('border');
  214.             });
  215.             $(quoteFields).focusout(function() {
  216.                 if ($(this).val() === "") {
  217.                     $(this).removeClass('border');
  218.                 };
  219.             });
  220.             $(quoteFields).each(function() {
  221.                 if ($(this).val()) {
  222.                     $(this).addClass('border');
  223.                 }
  224.             });
  225.             $('.soloNumber').keypress(validateNumber);
  226.             function validateNumber(event) {
  227.                 var key = window.event ? event.keyCode : event.which;
  228.                 if (event.keyCode === 8 || event.keyCode === 46) {
  229.                     return true;
  230.                 } else if ( key < 48 || key > 57 ) {
  231.                     return false;
  232.                 } else {
  233.                     return true;
  234.                 }
  235.             }
  236.             $('#form_quotation_services_natural_person').on('change', function () {
  237.                 $('.quote_field_company').hide();
  238.                 $('.quote_field_person').show();
  239.             });
  240.             $('#form_quotation_services_legal_person').on('change', function () {
  241.                 $('.quote_field_person').hide();
  242.                 $('.quote_field_company').show();
  243.             });
  244.             $('#form_quotation_services_legal_person').on('change', function () {
  245.                 $('#form_quotation_services_typePerson').val($(this).val());
  246.                 $('#form_quotation_services_document_types').val('');
  247.                 $('#form_quotation_services_document_number_natural_person').val('');
  248.                 $('#form_quotation_services_document_number_legal_person').val('');
  249.                 $('#form_quotation_services_documentType').val('RUC');
  250.                 $('#form_quotation_services_documentNumber').val('');
  251.                 $('#form_quotation_services_company').val('');
  252.             })
  253.             $('#form_quotation_services_natural_person').on('change', function () {
  254.                 $('#form_quotation_services_typePerson').val($(this).val());
  255.                 $('#form_quotation_services_document_types').val('');
  256.                 $('#form_quotation_services_document_number_natural_person').val('');
  257.                 $('#form_quotation_services_document_number_legal_person').val('');
  258.                 $('#form_quotation_services_documentType').val('');
  259.                 $('#form_quotation_services_documentNumber').val('');
  260.             })
  261.             $('#form_quotation_services_legal_person').trigger('change');
  262.             $('.form_quotation_services_document_number').on('keyup', function () {
  263.                 $('#form_quotation_services_documentNumber').val($(this).val());
  264.             })
  265.             $('#form_quotation_services_document_types').on('change', function () {
  266.                 $('#form_quotation_services_documentType').val($(this).val());
  267.             })
  268.             $('#form_quotation_services_services').on('change', function () {
  269.                 $('#form_quotation_services_service').val($(this).val());
  270.             })
  271.             $('#form_quotation_services_establishments').on('change', function () {
  272.                 $('#form_quotation_services_establishment').val($(this).val());
  273.             })
  274.             $('#form_quotation_services_advisers').on('change', function () {
  275.                 $('#form_quotation_services_adviser').val($(this).val());
  276.                 $('#form_quotation_services_adviser_id').val($(this).val());
  277.             })
  278.             const form_quotation_services = $('#form_camiones');
  279.             const form_quotation_services_button = $('#btnFormCamiones');
  280.             form_quotation_services.validationEngine('attach', {
  281.                 promptPosition: "topLeft",
  282.                 autoHidePrompt: true,
  283.                 autoHideDelay: 3000,
  284.                 binded: false,
  285.                 scroll: false
  286.             });
  287.             form_quotation_services_button.on('click', function (event) {
  288.                 event.preventDefault();
  289.                 const valid = form_quotation_services.validationEngine('validate');
  290.                 if (valid) {
  291.                     form_quotation_services.submit();
  292.                 }
  293.             });
  294.         });
  295.     </script>
  296. {% endblock %}