{% extends "front/_common/_base.html.twig" %}{% block linkcanonical %} <link rel="canonical" href="{{ absolute_url(path('claim')) }}"> <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>{% endblock %}{% block cssadicional %}{% endblock %}{% block classbody %}{% endblock %}{% block content %} <section class="libro_reclamaciones"> <div class="libro_reclamaciones_banner"> {% if sd.title %} <h2>{{ sd.title }}</h2> {% endif %} </div> <div class="libro_reclamaciones_container ww_center"> {% if sd.text %} <div class="libro_reclamaciones_text"> <p>{{ sd.text|nl2br }}</p> </div> {% endif %} <div class="libro_reclamaciones_text2"> {% if sd.companyName %} <p><strong>Razón Social:</strong> {{ sd.companyName }}</p> {% endif %} {% if sd.ruc %} <p><strong>RUC:</strong> {{ sd.ruc }}</p> {% endif %} {% if sd.address %} <p><strong>Dirección:</strong> {{ sd.address }}</p> {% endif %} </div> <div class="libro_reclamaciones_fecha"> <p>Fecha de Presentación: {{ "now"|date('d/m/Y') }}</p> </div> <div class="libro_reclamaciones_form"> {{ form_start(form) }} {{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }} {{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }} {{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }} {{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }} {{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }} {{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }} {{ form_widget(form.establishment) }} {{ form_widget(form.good) }} {{ form_widget(form.type) }} <h3>1. {{ forms.claimP1Title ?: 'Identificación del Usuario' }}</h3> <ul> <li class="libro_column"> <div class="libro_input"> {{ form_widget(form.name, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="nombre">Nombres *</label> </div> <div class="libro_input"> {{ form_widget(form.lastname, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="apellido">Apellidos *</label> </div> </li> <li class="libro_column"> <div class="libro_input"> {{ form_widget(form.phone, {'attr': {'class': 'soloNumber inputEffect validate[required, custom[phone]]'}}) }} <label for="telefono">Teléfono *</label> </div> <div class="libro_input"> {{ form_widget(form.email, {'attr': {'class': 'inputEffect validate[required, custom[email]]'}}) }} <label for="correo">Correo Electrónico *</label> </div> </li> <li class="libro_column"> <div class="libro_input"> {{ form_widget(form.department) }} <select id="form_field_department" class="inputEffect validate[required]"> <option value="" selected="selected"></option> </select> <label for="departamento">Departamento * <span class="icon-arrow_drop_down"></span></label> </div> <div class="libro_input"> {{ form_widget(form.province) }} <select id="form_field_province" class="inputEffect validate[required]"> <option value="" selected="selected"></option> </select> <label for="provincia">Provincia <span class="icon-arrow_drop_down"></span></label> </div> </li> <li class="libro_column"> <div class="libro_input"> {{ form_widget(form.district) }} <select id="form_field_district" class="inputEffect validate[required]"> <option value="" selected="selected"></option> </select> <label for="distrito">Distrito * <span class="icon-arrow_drop_down"></span></label> </div> </li> <li> <div class="libro_input"> {{ form_widget(form.address, {'attr': {'class': 'inputEffect'}}) }} <label for="direccion">Dirección *</label> </div> </li> </ul> <h3>2. {{ forms.claimP2Title ?: 'Identificación del Bien contratado' }}</h3> <ul> <li> <div class="libro_check"> {% for item in forms.claimGoods %} <div class="libro_check_input"> <input type="radio" id="check_tipo_{{ loop.index }}" class="form_good validate[required]" name="tipo" value="{{ item.title }}"> <label for="check_tipo_{{ loop.index }}"> <span></span> <p>{{ item.title }}</p> </label> </div> {% endfor %} </div> </li> <li class="libro_column"> <div class="libro_input"> {{ form_widget(form.orderNumber, {'attr': {'class': 'soloNumber inputEffect validate[required]'}}) }} <label for="pedido">Nº de pedido *</label> </div> <div class="libro_input"> {{ form_widget(form.amount, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="monto">Monto *</label> </div> </li> <li> <div class="libro_input"> {{ form_widget(form.description, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="description">Descripción *</label> </div> </li> </ul> <h3>3. {{ forms.claimP3Title ?: 'Detalle de la Reclamación' }}</h3> <ul> <li> <div class="libro_check"> {% for item in forms.claimTypes %} <div class="libro_check_input"> <input type="radio" id="check_reclamo_{{ loop.index }}" class="form_type validate[required]" name="reclamacion" value="{{ item.title }}"> <label for="check_reclamo_{{ loop.index }}"> <span></span> <p>{{ item.title }}</p> </label> </div> {% endfor %} </div> </li> </ul> <div class="libro_reclamaciones_text2"> {% for item in forms.claimTypes %} <p><strong>*{{ item.title }}:</strong> {{ item.description|nl2br }}</p> {% endfor %} </div> <ul> <li> <div class="libro_input"> {{ form_widget(form.detail, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="description2">Descripción</label> </div> </li> <li> <div class="libro_input"> {{ form_widget(form.demand, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="consumidor">Pedido del consumidor</label> </div> </li> </ul> <h3>4. {{ forms.claimP4Title ?: 'Acciones Adoptadas por el Vendedor' }}</h3> <div class="libro_input"> {# {{ form_widget(form.actions, {'attr': {'class': 'inputEffect validate[required]'}}) }} #} <textarea name="" readonly="readonly"></textarea> <label for="actions">Acciones del vendedor</label> </div> <div class="libro_text_vendedor"> {% set days_to_response = forms.claimResponseDays|number_format ?: 10 %} {% set f = date('+' ~ days_to_response ~ 'days') %} {% set answer_date = f|day ~ ', ' ~ f|date('d') ~ ' de ' ~ f|month|capitalize ~ ' del ' ~ f|date('Y') %} {{ forms.claimDescription|replace({'%fecha_respuesta%': answer_date})|raw }} </div> <div class="libro_obligatorio"> <p>* Campos obligatorios</p> </div> <div class="libro_info"> {% for item in forms.claimNotes %} <p>* {{ item.text|nl2br }}</p> {% endfor %} </div> <div class="libro_check_acepto"> <input type="checkbox" id="inputCheck" class="validate[required]" name=""> <label for="inputCheck"> <span class="libro_check_active"></span> <p>Acepto las <a href="{{ path('data_protection_policies') }}" target="_blank">Políticas de Protección de Datos</a></p> </label> </div> {% if info.captchaShow and info.captchaSite and info.captchaSecret %} <div class="libro_info"> <div style="padding-top:10px; padding-bottom:10px"> <div class="g-recaptcha" data-sitekey="{{ info.captchaSite }}"></div> </div> </div> {% endif %} <div class="libro_reclamaciones_btn"> <button class="btn btn_blue" id="btnLibro">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"> var efectInput = function(inputName, efectInput){ var inputs = document.getElementsByClassName(inputName) for (var i = 0; i<inputs.length; i++ ) { inputs[i].addEventListener('change', function(){ if(this.value){ this.nextElementSibling.classList.add(efectInput) } else{ this.nextElementSibling.classList.remove(efectInput) } }) inputs[i].addEventListener('keyup', function(){ if(this.value == ""){ this.nextElementSibling.classList.remove(efectInput) } else{ this.nextElementSibling.classList.add(efectInput) } }) } } $('.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; } } var claimsFields = $(".libro_input input, .libro_input textarea, .libro_input select") $(claimsFields).focusin(function() { $(this).addClass('border'); }); $(claimsFields).focusout(function() { if ($(this).val() === "") { $(this).removeClass('border'); }; }); $(claimsFields).each(function() { if ($(this).val() != "") { $(this).addClass('border'); } }); $('#form_claim_establishment').val('{{ sd.companyName }} - RUC {{ sd.ruc }}'); $('.form_good').on('click', function () { $('#form_claim_good').val($('.form_good:checked').val()); }) $('.form_type').on('click', function () { $('#form_claim_type').val($('.form_type:checked').val()); }) const departmentField = $('#form_claim_department'); const provinceField = $('#form_claim_province'); const districtField = $('#form_claim_district'); const departmentSelect = $('#form_field_department'); const provinceSelect = $('#form_field_province'); const districtSelect = $('#form_field_district'); $.ajax({ url: '{{ path('get_departments') }}', type: 'post', beforeSend: function () { departmentSelect.prop('disabled', true).html(createPlaceholder()); provinceSelect.prop('disabled', true).html(createPlaceholder()); districtSelect.prop('disabled', true).html(createPlaceholder()); }, success: function (data) { departmentSelect.prop('disabled', false).html(createOptions(data)); }, complete: function () { } }) departmentSelect.on('change', function () { const department = $(this).find('option:selected').data('option'); const value = $(this).val(); departmentField.val(null); provinceField.val(null); districtField.val(null); if (department) { departmentField.val(value); loadProvinces(); } }) provinceSelect.on('change', function () { const province = $(this).find('option:selected').data('option'); const value = $(this).val(); provinceField.val(null); districtField.val(null); if (province) { provinceField.val(value); loadDistricts(); } }) districtSelect.on('change', function () { const district = $(this).find('option:selected').data('option'); const value = $(this).val(); districtField.val(null); if (district) { districtField.val(value); } }) function loadProvinces() { const department = departmentSelect.find('option:selected').data('option'); if (!department) { return false; } $.ajax({ url: '{{ path('get_provinces_by_department') }}', type: 'post', data: {department: department}, beforeSend: function () { departmentSelect.prop('disabled', true); provinceSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar'); districtSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar'); provinceField.val(null); }, success: function (data) { provinceSelect.prop('disabled', false).html(createOptions(data)); }, complete: function () { departmentSelect.prop('disabled', false); } }) } function loadDistricts() { const province = provinceSelect.find('option:selected').data('option'); if (!province) { return false; } $.ajax({ url: '{{ path('get_districts_by_province') }}', type: 'post', data: {province: province}, beforeSend: function () { departmentSelect.prop('disabled', true); provinceSelect.prop('disabled', true); districtSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar'); }, success: function (data) { districtSelect.prop('disabled', false).html(createOptions(data)); }, complete: function () { departmentSelect.prop('disabled', false); provinceSelect.prop('disabled', false); } }) } function createPlaceholder() { return '<option value="" selected="selected"></option>'; } function createOptions(data) { let options = createPlaceholder(); $.each(data, function (i, v) { options += createOption(v); }); return options } function createOption(item) { return '<option value="' + item['title'] + '" data-option="' + item['slug'] + '">' + item['title'] + '</option>'; } $("form").validationEngine('attach', { promptPosition : "bottomLeft", autoHidePrompt: true, autoHideDelay: 300000, binded: false, scroll: false }); $('#btnLibro').on('click', function(event) { event.preventDefault(); const form = $(this).closest('form'); const valid = form.validationEngine('validate'); $(this).attr('disabled', true); if (!valid) { console.log('form error'); $(this).attr('disabled', false); } else { form.submit(); console.log('form ok'); } }); </script>{% endblock %}