Symfony Profiler

{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('claim')) }}">
{% endblock %}
{% block cssadicional %}
<style>
#apoderado-block {
display: none;
margin-top: 15px;
padding: 15px;
background: #f5f5f5;
border-radius: 5px;
}
#apoderado-block.show {
display: block;
}
#signature-canvas {
background: #fff;
cursor: crosshair;
}
.libro__acciones small{
margin-bottom: 20px!important;
}
.firma-section .firma-content {
display: flex;
align-items: flex-end;
gap: 10px;
}
.firma-section label {
width: 100%;
}
@media (max-width: 768px) {
.firma-section .firma-content {
flex-direction: column;
align-items: stretch;
}
.firma-section .firma-content canvas {
width: 100% !important;
height: 200px;
}
}
</style>
{% if info.captchaShow %}
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : '{{ info.captchaSite }}'
});
};
</script>
{% endif %}
{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="libro">
<article>
<div class="wancho">
<div class="general_breadcrumbs">
<ul>
<li><a href="{{ path('home') }}">INICIO</a></li>
<li><a href="{{ path('claim') }}" aria-selected="true">LIBRO DE RECLAMACIONES</a></li>
</ul>
</div>
<div class="main_title_layout">
{% if home.claimPrefix %}
<h2>{{ home.claimPrefix }}</h2>
{% endif %}
{% if home.claimTitle %}
<h1 class="general_title">{{ home.claimTitle }}</h1>
{% endif %}
</div>
</div>
</article>
<article class="libro_ctn">
<div class="wancho">
<div class="libro__wancho">
<div class="libro_bloque1">
<p>
{{ home.claimDescription }}
</p>
<ul>
{% if home.claimReason %}
<li><strong>Razón Social:</strong>{{ home.claimReason }}</li>
{% endif %}
{% if home.claimRuc %}
<li><strong>RUC:</strong>{{ home.claimRuc }}</li>
{% endif %}
{% if home.claimAddress %}
<li><strong>Dirección:</strong>{{ home.claimAddress}}</li>
{% endif %}
</ul>
{% if home.claimDate %}
<span>{{ home.claimDate|replace({'%fecha%' : 'now'|date('d / m / Y')}) }}</span>
{% endif %}
</div>
<div class="general_form">
{{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
{{ 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.firma, {'attr': {'id': 'firma-input'}}) }}
{{ form_widget(form.uniq, {'attr': {'id': 'uniq-input'}}) }}
<fieldset class="form__block">
{% if home.claimP1Title %}
<legend>{{ home.claimP1Title }}</legend>
{% endif %}
<div class="formGroup">
<div class="fInput" style="width: 100%!important;">
<label for="nombre">Nombres</label>
{{ form_widget(form.name, {'attr': {'class':'validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput">
<label for="apellidopaterno">Apellido Paterno</label>
{{ form_widget(form.apellidoPaterno, {'attr': {'class':'validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
<div class="fInput">
<label for="apellidomaterno">Apellido Materno</label>
{{ form_widget(form.apellidoMaterno, {'attr': {'class':'validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput">
<label for="telefono">Teléfono</label>
{{ form_widget(form.phone, {'attr': {'class':'validKeypress', 'type': 'tel', 'data-maxChar':'15', 'data-expression':'number'}}) }}
</div>
<div class="fInput">
<label for="correo">Correo Electrónico</label>
{{ form_widget(form.email, {'attr': {'class':'validKeypress', 'type': 'email', 'data-maxChar':'100', 'data-expression':'email'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput">
<label for="ciudad">Ciudad</label>
{{ form_widget(form.ciudad, {'attr': {'data-maxChar':'100'}}) }}
</div>
<div class="fInput">
<label for="direccion">Dirección</label>
{{ form_widget(form.address, {'attr': {'data-maxChar':'255'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput fSelect">
{{ form_widget(form.documentType, {'attr': {'data-validation-placeholder':'Tipo de documento'}}) }}
</div>
<div class="fInput">
<label for="numerodocumento">N° de Doc.</label>
{{ form_widget(form.documentNumber, {'attr': {'class':'validKeypress', 'data-maxChar':'20', 'data-expression':'number'}}) }}
</div>
</div>
<div class="fCheckBox" style="margin-top: 15px;">
<div class="formCheckbox">
{{ form_widget(form.esmenor, {'attr': {'id': 'esmenor-cb', 'class': 'esmenor-checkbox'}}) }}
<label for="esmenor-cb">Soy menor de edad</label>
</div>
</div>
<div id="apoderado-block">
<h4 style="margin-bottom: 10px;">Datos del Apoderado/Tutor</h4>
<div class="formGroup">
<div class="fInput" style="width: 100%!important;">
<label for="apoderado_nombre">Nombre*</label>
{{ form_widget(form.apoderadoNombre, {'attr': {'class':'validKeypress', 'data-maxChar':'100'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput">
<label for="apoderado_apellidopaterno">Apellido Paterno*</label>
{{ form_widget(form.apoderadoApellidoPaterno, {'attr': {'class':'validKeypress', 'data-maxChar':'100'}}) }}
</div>
<div class="fInput">
<label for="apoderado_apellidomaterno">Apellido Materno</label>
{{ form_widget(form.apoderadoApellidoMaterno, {'attr': {'class':'validKeypress', 'data-maxChar':'100'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput fSelect">
{{ form_widget(form.apoderadoTipodocumento, {'attr': {'class':'', 'data-validation-placeholder':'Tipo documento'}}) }}
</div>
<div class="fInput">
<label for="apoderado_numerodocumento">N° Documento</label>
{{ form_widget(form.apoderadoNumerodocumento, {'attr': {'class':'validKeypress', 'data-maxChar':'20'}}) }}
</div>
</div>
<div class="formGroup">
<div class="fInput">
<label for="apoderado_email">Email</label>
{{ form_widget(form.apoderadoEmail, {'attr': {'type': 'email', 'data-maxChar':'100'}}) }}
</div>
<div class="fInput">
<label for="apoderado_telefono">Teléfono</label>
{{ form_widget(form.apoderadoTelefono, {'attr': {'type': 'tel', 'data-maxChar':'15'}}) }}
</div>
</div>
</div>
</fieldset>
<fieldset class="form__block">
{% if home.claimP2Title %}
<legend>{{ home.claimP2Title }}</legend>
{% endif %}
<div class="radioGroup">
{% for item in home.claimGoods %}
<div>
<input type="radio" class="libro_good" id="good-{{loop.index}}" name="good" value="{{ item.title }}" {{ loop.first ? 'checked' : ''}} />
<label for="producto">{{ item.title }}</label>
</div>
{% endfor %}
</div>
<div class="formGroup" style="margin-top: 15px;">
<div class="fInput fSelect">
<select id="moneda-select" name="moneda" class="" >
<option value="" selected="selected">Seleccione la moneda</option>
{% set monedas = currencies is defined and currencies is not empty ? currencies : home.claimCurrencies %}{% if monedas %}
{% for currency in monedas %}
<option value="{{ loop.index }}">{{ currency.title }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<div class="fInput" >
<label for="monto">Monto</label>
{{ form_widget(form.monto, {'attr': {'data-maxChar':'20', 'onkeypress':'return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46'}}) }}
</div>
</div>
<div class="fInput">
<label for="descripcion">Descripción</label>
{{ form_widget(form.description, {'attr': {'data-maxChar':'5000', 'rows':'3'}}) }}
</div>
</fieldset>
<fieldset class="form__block">
{% if home.claimP3Title %}
<legend>{{ home.claimP3Title }}</legend>
{% endif %}
<div class="radioGroup">
{% for item in home.claimTypes %}
<div>
<input type="radio" class="libro_type" id="type-{{loop.index}}" value="{{ item.title }}" name="type" {{ loop.first ? 'checked' : ''}} />
<label for="reclamo">{{ item.title }}</label>
</div>
{% endfor %}
</div>
<div class="libro__def">
{% for item in home.claimTypes %}
<p>
<strong>* {{ item.title }}:</strong> {{ item.description}}
</p>
{% endfor %}
</div>
<div class="fInput">
<label for="detalle">Descripción</label>
{{ form_widget(form.detail, {'attr': {'data-maxChar':'5000', 'rows':'3'}}) }}
</div>
<div class="fInput">
<label for="pedido">Pedido del consumidor</label>
{{ form_widget(form.demand, {'attr': {'data-maxChar':'5000', 'rows':'3'}}) }}
</div>
<div class="fInput firma-section" style="margin-top: 20px;">
<label>Firma del consumidor</label>
<div class="firma-content">
<canvas id="signature-canvas" width="500" height="150"></canvas>
<button type="button" id="clear-signature" class="btn btn-secondary">Limpiar</button>
</div>
</div>
</fieldset>
<fieldset class="libro__acciones">
<div class="fInput">
<label>Acciones</label>
<textarea class="" readonly="readonly"></textarea>
</div>
{% if home.claimP4Title %}
<legend>{{ home.claimP4Title }}</legend>
{% endif %}
{% set answer_date = answer_date|day ~ ', ' ~ answer_date|date('d') ~ ' de ' ~ answer_date|month|capitalize ~ ' del ' ~ answer_date|date('Y') %}
{{ forms.claimP4Text|replace({'%fecha_respuesta%': answer_date})|raw }}
{% for item in home.claimNotes %}
<small>
{{ item.text|raw }}
</small>
{% endfor %}
</fieldset>
<div class="fCheckBox">
<div class="formCheckbox">
<input type="checkbox" id="1" name="check_terminos" class="" />
<label for="1"
>He leído y acepto las
<a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
>
</div>
</div>
{% if info.captchaShow %}
<div style="margin-bottom:10px; position: relative; width: max-content;">
<div id="html_element"></div>
</div>
{% endif %}
<div class="formButtonCtn">
<button class="f-guardar-contacto-general hidden_button_send" id="btnLibro">Enviar</button>
<button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</article>
</section>
{% endblock %}
{% block jsfinal %}
<script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
{% include 'front/templates/captcha.html.twig' %}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script type="text/javascript">
$(() => {
var signaturePad = null;
function initSignaturePad() {
var canvas = document.getElementById('signature-canvas');
if (canvas && !signaturePad) {
signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)',
penColor: 'rgb(0, 0, 0)'
});
}
}
initSignaturePad();
$('#clear-signature').on('click', function(e) {
e.preventDefault();
if (signaturePad) {
signaturePad.clear();
}
});
$('.esmenor-checkbox[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
$('#apoderado-block').addClass('show');
} else {
$('#apoderado-block').removeClass('show');
}
});
$('form').validationEngine('attach', {
promptPosition: 'bottomLeft',
autoHidePrompt: true,
autoPositionUpdate: false,
autoHideDelay: 3000,
addFailureCssClassToField: 'inputError',
binded: false,
scroll: false,
validateNonVisibleFields: true,
showOneMessage: false,
});
$('#btnLibro').on('click', function(event) {
event.preventDefault();
if (signaturePad && !signaturePad.isEmpty()) {
var firmaData = signaturePad.toDataURL('image/png');
$('input[name="form_claim[firma]"]').val(firmaData);
}
var uniqValue = $('#uniq-input').val();
if (!uniqValue) {
$('#uniq-input').val(generateUUID());
}
$('#form_claim_good').val($('.libro_good:checked').val());
$('#form_claim_type').val($('.libro_type:checked').val());
$('#form_claim_monedaId').val($('#moneda-select').val());
$(this).attr('disabled', true);
const form = $(this).closest('form');
let valid = form.validationEngine('validate');
if (valid && validarRecaptcha()) {
document.querySelector('.general_form').classList.add('submit_form');
form.submit();
} else {
$(this).attr('disabled', false);
return false;
}
});
function generateUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
});
</script>
{% endblock %}

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