templates/front/form/claim.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  3. {% block linkcanonical %}
  4.     <link rel="canonical" href="{{ absolute_url(path('claim')) }}">
  5. {% endblock %}
  7. {% block cssadicional %}{% endblock %}
  9. {% block classbody %}{% endblock %}
  11. {% block content %}
  12.     <div class="wanchoSecondary b22Libro">
  13.         <ul class="b21MigaCustom b10LeftMigaPan">
  14.             <li><a href="{{ path('home') }}">Home</a></li>&nbsp;/ &nbsp;
  15.             <li class="active"><a href="{{ path('claim') }}">Libro de reclamo</a></li>
  16.         </ul>
  17.         {{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}}) }}
  18.             {% include 'front/templates/form_utm_fields.html.twig' %}
  19.             {{ form_widget(form.establishment) }}
  20.             {{ form_widget(form.good) }}
  21.             {{ form_widget(form.type) }}
  22.             {{ form_widget(form.authorization) }}
  23.             {% if forms.claimTitle %}
  24.                 <h4 class="titleStandard b22LibroTitle">{{ forms.claimTitle }}</h4>
  25.             {% endif %}
  26.             {% if forms.claimText %}
  27.                 <div class="b21WrapText">{{ forms.claimText|nl2br }}</div>
  28.             {% endif %}
  29.             <div class="b21WrapInput b21WrapInputDato">
  30.                 <div class="b21WrapCol">
  31.                     <div class="b21WrapColDate">
  32.                         <span>Fecha:</span>
  33.                         <span>{{ "now"|date('d/m/Y') }}</span>
  34.                     </div>
  35.                 </div>
  36.                 <div class="b21WrapCol b21WrapColCorrelative">
  37.                     <span>Nº {{ entity.code }}</span>
  38.                 </div>
  39.             </div>
  40.             {% if forms.claimEstablishmentsText %}
  41.                 <div class="b21WrapTextP">{{ forms.claimEstablishmentsText|nl2br }}</div>
  42.             {% endif %}
  43.             <div class="b21WrapInput">
  44.                 <div class="b21Select">
  45.                     <select class="form-contact-select" id="form-establecimiento">
  46.                         <option value="" disabled selected></option>
  47.                         {% for item in forms.claimEstablishmentsItems %}
  48.                             <option data-ruc="{{ item.ruc }}" value="{{ item.title }}">{{ item.title }}</option>
  49.                         {% endfor %}
  50.                     </select>
  51.                     <span class="form-label">Establecimiento</span>
  52.                     <i class="icon-iconos-10"></i>
  53.                 </div>
  54.                 <div class="b21Input b21InputNoLabel">
  55.                     <input class="form-contact" type="text" value="" id="form-ruc">
  56.                 </div>
  57.             </div>
  58.             {% if forms.claimEstablishmentsNote %}
  59.                 <div class="b21WrapTextP">{{ forms.claimEstablishmentsNote|nl2br }}</div>
  60.             {% endif %}
  61.             <div class="b21WrapRow">
  62.                 {% if forms.claimP1Title %}
  63.                     <h4 class="titleStandard">1. {{ forms.claimP1Title }}</h4>
  64.                 {% endif %}
  65.                 <div class="b21WrapInput">
  66.                     <div class="b21Input">
  67.                         {{ form_widget(form.name, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  68.                         <span class="form-label">Nombres*</span>
  69.                     </div>
  70.                     <div class="b21Input">
  71.                         {{ form_widget(form.lastname, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  72.                         <span class="form-label">Apellidos*</span>
  73.                     </div>
  74.                 </div>
  75.                 <div class="b21WrapInput">
  76.                     <div class="b21Input">
  77.                         {{ form_widget(form.phone, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }}
  78.                         <span class="form-label">Teléfono*</span>
  79.                     </div>
  80.                     <div class="b21Input">
  81.                         {{ form_widget(form.email, {'attr': {'class': 'form-contact validate[required,custom[email]]'}}) }}
  82.                         <span class="form-label">Correo*</span>
  83.                     </div>
  84.                 </div>
  85.                 <div class="b21WrapInput">
  86.                     <div class="b21Select">
  87.                         {{ form_widget(form.documentType) }}
  88.                         <select class="form-contact-select validate[required]" id="form_claim_document_type">
  89.                             <option value="" disabled selected></option>
  90.                             <option value="DNI">DNI</option>
  91.                             <option value="CE">CE</option>
  92.                             <option value="Pasaporte">Pasaporte</option>
  93.                         </select>
  94.                         <span class="form-label">Tipo de documento*</span>
  95.                         <i class="icon-iconos-10"></i>
  96.                     </div>
  97.                     <div class="b21Input">
  98.                         {{ form_widget(form.documentNumber, {'attr': {'data-expresion': 'text', 'class': 'form-contact validate[required]'}}) }}
  99.                         <span class="form-label">N° de documento*</span>
  100.                     </div>
  101.                 </div>
  102.                 <div class="b21WrapInput">
  103.                     <div class="b21Select">
  104.                         {{ form_widget(form.department) }}
  105.                         <select class="form-contact-select validate[required]" id="form_field_department">
  106.                             <option value="" disabled selected></option>
  107.                             {% for item in departmentsArray %}
  108.                                 <option value="{{ item.title }}" data-option="{{ item.slug }}">{{ item.title }}</option>
  109.                             {% endfor %}
  110.                         </select>
  111.                         <span class="form-label">Departamento*</span>
  112.                         <i class="icon-iconos-10"></i>
  113.                     </div>
  114.                     <div class="b21Select">
  115.                         {{ form_widget(form.province, {'attr': {'class': 'form-contact-select validate[required]'}}) }}
  116.                         <select class="form-contact-select validate[required]" id="form_field_province" disabled>
  117.                             <option value="" selected="selected"></option>
  118.                         </select>
  119.                         <span class="form-label">Provincia*</span>
  120.                         <i class="icon-iconos-10"></i>
  121.                     </div>
  122.                 </div>
  123.                 <div class="b21WrapInput">
  124.                     <div class="b21Select">
  125.                         {{ form_widget(form.district, {'attr': {'class': 'form-contact-select validate[required]'}}) }}
  126.                         <select class="form-contact-select validate[required]" id="form_field_district" disabled>
  127.                             <option value="" selected="selected"></option>
  128.                         </select>
  129.                         <span class="form-label">Distrito*</span>
  130.                         <i class="icon-iconos-10"></i>
  131.                     </div>
  132.                     <div class="b21Input">
  133.                         {{ form_widget(form.address, {'attr': {'class': 'form-contact validate[required]'}}) }}
  134.                         <span class="form-label">Dirección*</span>
  135.                     </div>
  136.                 </div>
  137.                 <div class="b21WrapMenorEdad">
  138.                     <div class="b21WrapCheckbox b21WrapCheckboxP">
  139.                         {{ form_widget(form.younger, {'attr': {'id': 'b21CheckboxMenorEdad', 'class': 'form-input checkbox checkMenor'}}) }}
  140.                         <label for="form_claim_younger">Menor de edad</label>
  141.                     </div>
  142.                     <div class="b21WrapInput">
  143.                         <div class="b21InputBox">
  144.                             <div class="b21Input">
  145.                                 {{ form_widget(form.tutorName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text g-text-edad form-contact'}}) }}
  146.                                 <span class="form-label">Nombres del tutor*</span>
  147.                             </div>
  148.                             <span class="form-label-text">*Esto aplica si el reclamante es menor de edad</span>
  149.                         </div>
  150.                         <div class="b21InputBox">
  151.                             <div class="b21Input">
  152.                                 {{ form_widget(form.tutorLastName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text g-text-edad form-contact'}}) }}
  153.                                 <span class="form-label">Apellidos*</span>
  154.                             </div>
  155.                             <span class="form-label-text">*Esto aplica si el reclamante es menor de edad</span>
  156.                         </div>
  157.                     </div>
  158.                     <div class="b21WrapInput">
  159.                         <div class="b21Input">
  160.                             {{ form_widget(form.tutorEmail, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number g-number-edad form-contact'}}) }}
  161.                             <span class="form-label">Teléfono*</span>
  162.                         </div>
  163.                         <div class="b21Input">
  164.                             {{ form_widget(form.tutorPhone, {'attr': {'class': 'form-contact g-email-edad'}}) }}
  165.                             <span class="form-label">E-mail*</span>
  166.                         </div>
  167.                     </div>
  168.                     <div class="b21WrapInput">
  169.                         <div class="b21Select">
  170.                             {{ form_widget(form.tutorDocumentType) }}
  171.                             <select class="form-contact-select g-validate-edad" id="form_claim_tutor_document_type">
  172.                                 <option value="" disabled selected></option>
  173.                                 <option value="DNI">DNI</option>
  174.                                 <option value="CE">CE</option>
  175.                                 <option value="Pasaporte">Pasaporte</option>
  176.                             </select>
  177.                             <span class="form-label">Tipo de documento*</span>
  178.                             <i class="icon-iconos-10"></i>
  179.                         </div>
  180.                         <div class="b21Input">
  181.                             {{ form_widget(form.tutorDocumentNumber, {'attr': {'class': 'form-contact g-validate-edad'}}) }}
  182.                             <span class="form-label">N° de documento*</span>
  183.                         </div>
  184.                     </div>
  185.                 </div>
  186.             </div>
  187.             <div class="b21WrapRow">
  188.                 {% if forms.claimP2Title %}
  189.                     <h4 class="titleStandard">2. {{ forms.claimP2Title }}</h4>
  190.                 {% endif %}
  191.                 <div class="b21WrapRadio">
  192.                     {% for item in forms.claimGoods %}
  193.                         <div class="b21WrapRadioCol">
  194.                             <input type="radio" class="form_good" id="radio-good_{{ loop.index }}" name="tipo_reclamo" value="{{ item.title }}" />
  195.                             <label for="radio-good_{{ loop.index }}">{{ item.title }}</label>
  196.                         </div>
  197.                     {% endfor %}
  198.                 </div>
  199.                 <div class="b21Textarea">
  200.                     {{ form_widget(form.description, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact validate[required]'}}) }}
  201.                     <span class="form-label">Descripción*</span>
  202.                 </div>
  203.                 <div class="b21Input">
  204.                     {{ form_widget(form.amount, {'attr': {'class': 'form-contact validate[required]'}}) }}
  205.                     <span class="form-label">Valor del Producto/servicio*</span>
  206.                 </div>
  207.             </div>
  208.             <div class="b21WrapRow">
  209.                 {% if forms.claimP3Title %}
  210.                     <h4 class="titleStandard">3. {{ forms.claimP3Title }}</h4>
  211.                 {% endif %}
  212.                 <div class="b21WrapRadio">
  213.                     {% for item in forms.claimTypes %}
  214.                         <div class="b21WrapRadioCol">
  215.                             <input type="radio" class="form_type" id="radio-type_{{ loop.index }}" name="tipo_consumidor" value="{{ item.title }}" />
  216.                             <label for="radio-type_{{ loop.index }}">{{ item.title }}</label>
  217.                             <span>**</span>
  218.                         </div>
  219.                     {% endfor %}
  220.                 </div>
  221.                 <div class="b21WrapTextP">
  222.                     {% for item in forms.claimTypes %}
  223.                         <p>*{{ item.title }}: {{ item.description|nl2br }}</p>
  224.                     {% endfor %}
  225.                 </div>
  226.                 <div class="b21Textarea">
  227.                     {{ form_widget(form.detail, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact validate[required]'}}) }}
  228.                     <span class="form-label">Detalle*</span>
  229.                 </div>
  230.                 <div class="b21Textarea">
  231.                     {{ form_widget(form.demand, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact validate[required]'}}) }}
  232.                     <span class="form-label">Pedido*</span>
  233.                 </div>
  234.                 <div class="b21File">
  235.                     <div class="b21FileBox">
  236.                         <i class="icon-copy"></i>
  237.                         <span class="b21FileText">Adjuntar archivo</span>
  238.                         <label for="archivo_libro" class="b21FileTextFormat">Adjuntar archivo (PDF, PPTX, WORD o imágenes JPG, PNG)</label>
  239.                         <input size="40" id="archivo_libro" accept=".pdf,.pptx,.word,.jpg,.png" type="file" name="form_file">
  240.                     </div>
  241.                 </div>
  242.             </div>
  243.             <div class="b21WrapRow">
  244.                 {% if forms.claimP4Title %}
  245.                     <h4 class="titleStandard">4. {{ forms.claimP4Title }}</h4>
  246.                 {% endif %}
  247.                 <div class="b21WrapTextP">
  248.                     {% set f = entity.answerDate %}
  249.                     {% set answer_date = f|day ~ ', ' ~ f|date('d') ~ ' de ' ~ f|month|capitalize ~ ' del ' ~ f|date('Y') %}
  250.                     {{ forms.claimDescription|replace({'%fecha_respuesta%': answer_date})|raw }}
  251.                 </div>
  252.             </div>
  253.             <div class="b21WrapRow">
  254.                 {% if forms.claimP5Title %}
  255.                     <h4 class="titleStandard">5. {{ forms.claimP5Title }}</h4>
  256.                 {% endif %}
  257.                 <div class="b21WrapRadio">
  258.                     <div class="b21WrapRadioCol">
  259.                         <input type="radio" class="form_authorization" id="radio_authorization_yes" name="authorization_option" value="Sí" />
  260.                         <label for="radio_authorization_yes">Sí</label>
  261.                         <span>**</span>
  262.                     </div>
  263.                     <div class="b21WrapRadioCol">
  264.                         <input type="radio" class="form_authorization" id="radio_authorization_no" name="authorization_option" value="No" />
  265.                         <label for="radio_authorization_no">No</label>
  266.                         <span>**</span>
  267.                     </div>
  268.                 </div>
  269.                 <div class="b21Paragraph">
  270.                     (*) Campos obligatorios.
  271.                 </div>
  272.                 {% if forms.claimNotes|length > 0 %}
  273.                     <div class="b21WrapTextP">
  274.                         {% for item in forms.claimNotes %}
  275.                             <p>* {{ item.text|nl2br }}</p>
  276.                         {% endfor %}
  277.                     </div>
  278.                 {% endif %}
  279.             </div>
  280.             <div class="b21WrapCheckbox">
  281.                 <input type="checkbox" id="b21Checkbox" name="">
  282.                 <label for="b21Checkbox">He leído y acepto los <b><a href="{{ path('terms_and_conditions') }}" target="_blank">Términos y condiciones</a></b> y <b><a href="{{ path('privacy_policies') }}" target="_blank">Políticas de Privacidad</a></b> de UD Trucks</label>
  283.             </div>
  284.             <button class="buttonStandard gray b21Btn" id="BtnLibro">Enviar</button>
  285.             {% if info.showCaptcha %}
  286.                 <input type="hidden" name="recaptcha_token" id="recaptchaToken">
  287.             {% endif %}
  288.         {{ form_end(form) }}
  289.     </div>
  290. {% endblock %}
  292. {% block jsfinal %}
  293.     {% if info.showCaptcha %}
  294.         <script src="https://www.google.com/recaptcha/api.js?render={{ info.captchaSite }}"></script>
  295.         <script>
  296.             grecaptcha.ready(function() {
  297.                 grecaptcha.execute('{{ info.captchaSite }}', {action: 'submit'}).then(function(token) {
  298.                     document.getElementById('recaptchaToken').value = token;
  299.                 });
  300.             });
  301.         </script>
  302.     {% endif %}
  303.     <script type="text/javascript">
  304.         jQuery(function ($) {
  305.             $("form").validationEngine('attach', {
  306.                 promptPosition: "topLeft",
  307.                 autoHidePrompt: true,
  308.                 autoPositionUpdate: false,
  309.                 autoHideDelay: 2000,
  310.                 binded: false,
  311.                 scroll: false,
  312.                 validateNonVisibleFields: true
  313.             })
  315.             $('#form-establecimiento').on('change', function () {
  316.                 const value = $(this).val();
  317.                 const ruc = $(this).find('option:selected').data('ruc');
  318.                 const form_ruc = $('#form-ruc');
  319.                 $('#form_claim_establishment').val(value);
  320.                 form_ruc.val('');
  321.                 if (ruc) {
  322.                     form_ruc.val('RUC: ' + ruc);
  323.                 }
  324.             });
  326.             $('#BtnLibro').on('click', function (event) {
  327.                 event.preventDefault();
  328.                 const item = $(this);
  329.                 const form = item.closest('form');
  330.                 const valid = form.validationEngine('validate');
  331.                 if (valid) {
  332.                     item.prop('disabled', true).text('Enviando...');
  333.                     form.submit();
  334.                 } else {
  335.                     item.prop('disabled', false).text('Enviar');
  336.                 }
  337.             });
  339.             $('.form_authorization').on('click', function () {
  340.                 $('#form_claim_authorization').val($('.form_authorization:checked').val());
  341.             })
  343.             $('.form_good').on('click', function () {
  344.                 $('#form_claim_good').val($('.form_good:checked').val());
  345.             })
  347.             $('.form_type').on('click', function () {
  348.                 $('#form_claim_type').val($('.form_type:checked').val());
  349.             })
  351.             const documentTypeField = $('#form_claim_documentType');
  352.             const documentNumberField = $('#form_claim_documentNumber');
  354.             const tutorDocumentTypeField = $('#form_claim_tutorDocumentType');
  355.             const tutorDocumentNumberField = $('#form_claim_tutorDocumentNumber');
  357.             $('#form_claim_document_type').on('change', function () {
  358.                 updateDocument($(this), documentTypeField, documentNumberField);
  359.             })
  361.             $('#form_claim_tutor_document_type').on('change', function () {
  362.                 updateDocument($(this), tutorDocumentTypeField, tutorDocumentNumberField);
  363.             })
  365.             function updateDocument($this, type, number) {
  366.                 const value = $this.val();
  367.                 if (!value) {
  368.                     type.val(null);
  369.                     number.val(null);
  370.                     number.prop('disabled', true);
  371.                     return;
  372.                 }
  373.                 number.focus();
  374.                 number.prop('disabled', false);
  375.                 type.val(value);
  376.             }
  378.             const departmentField = $('#form_claim_department');
  379.             const provinceField = $('#form_claim_province');
  380.             const districtField = $('#form_claim_district');
  382.             const departmentSelect = $('#form_field_department');
  383.             const provinceSelect = $('#form_field_province');
  384.             const districtSelect = $('#form_field_district');
  386.             departmentSelect.on('change', function () {
  387.                 const department = $(this).find('option:selected').data('option');
  388.                 const value = $(this).val();
  390.                 departmentField.val(null);
  391.                 provinceField.val(null);
  392.                 districtField.val(null);
  394.                 if (department) {
  395.                     departmentField.val(value);
  396.                     loadProvinces();
  397.                 }
  398.             })
  400.             provinceSelect.on('change', function () {
  401.                 const province = $(this).find('option:selected').data('option');
  402.                 const value = $(this).val();
  404.                 provinceField.val(null);
  405.                 districtField.val(null);
  407.                 if (province) {
  408.                     provinceField.val(value);
  409.                     loadDistricts();
  410.                 }
  411.             })
  413.             districtSelect.on('change', function () {
  414.                 const district = $(this).find('option:selected').data('option');
  415.                 const value = $(this).val();
  417.                 districtField.val(null);
  419.                 if (district) {
  420.                     districtField.val(value);
  421.                 }
  422.             })
  424.             function loadProvinces() {
  425.                 const department = departmentSelect.find('option:selected').data('option');
  426.                 if (!department) {
  427.                     return false;
  428.                 }
  430.                 $.ajax({
  431.                     url: '{{ path('get_provinces_by_department') }}',
  432.                     type: 'post',
  433.                     data: {department: department},
  434.                     beforeSend: function () {
  435.                         departmentSelect.prop('disabled', true);
  436.                         provinceSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar');
  437.                         districtSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar');
  438.                         provinceField.val(null);
  439.                     },
  440.                     success: function (data) {
  441.                         provinceSelect.prop('disabled', false).html(createOptions(data));
  442.                     },
  443.                     complete: function () {
  444.                         departmentSelect.prop('disabled', false);
  445.                     }
  446.                 })
  447.             }
  449.             function loadDistricts() {
  450.                 const province = provinceSelect.find('option:selected').data('option');
  451.                 if (!province) {
  452.                     return false;
  453.                 }
  455.                 $.ajax({
  456.                     url: '{{ path('get_districts_by_province') }}',
  457.                     type: 'post',
  458.                     data: {province: province},
  459.                     beforeSend: function () {
  460.                         departmentSelect.prop('disabled', true);
  461.                         provinceSelect.prop('disabled', true);
  462.                         districtSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar');
  463.                     },
  464.                     success: function (data) {
  465.                         districtSelect.prop('disabled', false).html(createOptions(data));
  466.                     },
  467.                     complete: function () {
  468.                         departmentSelect.prop('disabled', false);
  469.                         provinceSelect.prop('disabled', false);
  470.                     }
  471.                 })
  472.             }
  474.             function createPlaceholder() {
  475.                 return '<option value="" selected="selected"></option>';
  476.             }
  478.             function createOptions(data) {
  479.                 let options = createPlaceholder();
  480.                 $.each(data, function (i, v) {
  481.                     options += createOption(v);
  482.                 });
  483.                 return options
  484.             }
  486.             function createOption(item) {
  487.                 return '<option value="' + item['title'] + '" data-option="' + item['slug'] + '">' + item['title'] + '</option>';
  488.             }
  489.         })
  490.     </script>
  491. {% endblock %}