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 %}
  8. <style>
  9.     .b21Firma { margin: 15px 0; }
  10.     .b21Firma canvas { border: 1px solid #ccc; border-radius: 4px; display: block; background: #fff; max-width: 100%; }
  11.     .b21Firma .btnLimpiar { margin-top: 5px; padding: 5px 15px; cursor: pointer; background-color: #6a6867; color: #fff; border: 0; height: 45px; width: 150px; }
  12.     .b21WrapMenorEdad .b21WrapInput { display: none; }
  14.     .b22Libro .b21WrapColCorrelative { height: 54px; }
  16.     .icon-iconos-10{
  17.         position: absolute;
  18.         right: 15px;
  19.         top: 20px;
  20.     }
  21.     .textlb{
  22.         margin:20px 0px;
  23.     }
  24.     .textlb p{
  25.         text-align: start;
  26.     }
  27. </style>
  28. {% endblock %}
  30. {% block classbody %}{% endblock %}
  32. {% block content %}
  33.     <div class="wanchoSecondary b22Libro">
  34.         <ul class="b21MigaCustom b10LeftMigaPan">
  35.             <li><a href="{{ path('home') }}">Home</a></li>&nbsp;/ &nbsp;
  36.             <li class="active"><a href="{{ path('claim') }}">Libro de reclamo</a></li>
  37.         </ul>
  38.         {{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}}) }}
  39.             {% include 'front/templates/form_utm_fields.html.twig' %}
  40.             {{ form_widget(form.establishment) }}
  41.             {{ form_widget(form.good) }}
  42.             {{ form_widget(form.type) }}
  43.             {{ form_widget(form.authorization) }}
  44.             {% if forms.claimTitle %}
  45.                 <h4 class="titleStandard b22LibroTitle">{{ forms.claimTitle }}</h4>
  46.             {% endif %}
  47.             {% if forms.claimCompanyName or forms.claimCompanyRuc or forms.claimCompanyAddress %}
  48.                 <div class="b21WrapText " >
  49.                     {% if forms.claimCompanyName %}<p><strong>{{ forms.claimCompanyName }}</strong></p>{% endif %}
  50.                     {% if forms.claimCompanyRuc %}<p>RUC: {{ forms.claimCompanyRuc }}</p>{% endif %}
  51.                     {% if forms.claimCompanyAddress %}<p>Dirección: {{ forms.claimCompanyAddress|nl2br }}</p>{% endif %}
  52.                 </div>
  53.             {% endif %}
  54.             {% if forms.claimText %}
  55.                 <div class="b21WrapText">{{ forms.claimText|nl2br }}</div>
  56.             {% endif %}
  57.             {% if forms.claimEstablishmentTitle or forms.claimEstablishmentRuc or forms.claimEstablishmentRazonSocial or forms.claimEstablishmentDireccion %}
  58.                 <div class="b21WrapText textlb" >
  59.                     {% if forms.claimEstablishmentTitle %}<p><strong>{{ forms.claimEstablishmentTitle }}</strong></p>{% endif %}
  60.                     {% if forms.claimEstablishmentRuc %}<p>RUC: {{ forms.claimEstablishmentRuc }}</p>{% endif %}
  61.                     {% if forms.claimEstablishmentRazonSocial %}<p>Razón Social: {{ forms.claimEstablishmentRazonSocial }}</p>{% endif %}
  62.                     {% if forms.claimEstablishmentDireccion %}<p>Dirección: {{ forms.claimEstablishmentDireccion|nl2br }}</p>{% endif %}
  63.                 </div>
  64.             {% endif %}
  65.             <div class="b21WrapInput b21WrapInputDato">
  66.                 <div class="b21WrapCol">
  67.                     <div class="b21WrapColDate">
  68.                         <span>Fecha:</span>
  69.                         <span>{{ "now"|date('d/m/Y') }}</span>
  70.                     </div>
  71.                 </div>
  72.                 <div class="b21WrapCol b21WrapColCorrelative">
  73.                     <span>Nº {{ entity.code }}</span>
  74.                 </div>
  75.             </div>
  76.             <!-- {% if forms.claimEstablishmentsText %}
  77.                 <div class="b21WrapTextP">{{ forms.claimEstablishmentsText|nl2br }}</div>
  78.             {% endif %} -->
  79.             <!-- <div class="b21WrapInput">
  80.                 <div class="b21Select">
  81.                     <select class="form-contact-select" id="form-establecimiento">
  82.                         <option value="" disabled selected></option>
  83.                         {% for item in forms.claimEstablishmentsItems %}
  84.                             <option data-ruc="{{ item.ruc }}" value="{{ item.title }}">{{ item.title }}</option>
  85.                         {% endfor %}
  86.                     </select>
  87.                     <span class="form-label">Establecimiento</span>
  88.                     <i class="icon-iconos-10"></i>
  89.                 </div>
  90.                 <div class="b21Input b21InputNoLabel">
  91.                     <input class="form-contact" type="text" value="" id="form-ruc" readonly>
  92.                 </div>
  93.             </div> -->
  94.             <!-- {% if forms.claimEstablishmentsNote %}
  95.                 <div class="b21WrapTextP">{{ forms.claimEstablishmentsNote|nl2br }}</div>
  96.             {% endif %} -->
  97.             <div class="b21WrapRow">
  98.                 {% if forms.claimP1Title %}
  99.                     <h4 class="titleStandard">1. {{ forms.claimP1Title }}</h4>
  100.                 {% endif %}
  101.                 <div class="">
  102.                     <div class="b21Input">
  103.                         {{ form_widget(form.name, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[custom[onlyLetterSp]]'}}) }}
  104.                         <span class="form-label">Nombres</span>
  105.                     </div>
  106.                 </div>
  107.                 <div class="b21WrapInput">
  108.                     <div class="b21Input">
  109.                         {{ form_widget(form.lastname, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[custom[onlyLetterSp]]'}}) }}
  110.                         <span class="form-label">Apellido Paterno</span>
  111.                     </div>
  112.                     <div class="b21Input">
  113.                         {{ form_widget(form.apellido_materno, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[custom[onlyLetterSp]]'}}) }}
  114.                         <span class="form-label">Apellido Materno</span>
  115.                     </div>
  116.                 </div>
  117.                 <div class="b21WrapInput">
  118.                     <div class="b21Input">
  119.                         {{ form_widget(form.phone, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[custom[onlyNumberSp]]'}}) }}
  120.                         <span class="form-label">Teléfono</span>
  121.                     </div>
  122.                     <div class="b21Input">
  123.                         {{ form_widget(form.email, {'attr': {'class': 'form-contact validate[custom[email]]'}}) }}
  124.                         <span class="form-label">Correo</span>
  125.                     </div>
  126.                 </div>
  127.                 <div class="b21WrapInput">
  128.                     <div class="b21Select">
  129.                         {{ form_widget(form.documentType, {'attr': {'class': 'form-contact-select validate'}}) }}
  130.                         <span class="form-label">Tipo de documento</span>
  131.                         <i class="icon-iconos-10"></i>
  132.                     </div>
  133.                     <div class="b21Input">
  134.                         {{ form_widget(form.documentNumber, {'attr': {'data-expresion': 'text', 'class': 'form-contact validate'}}) }}
  135.                         <span class="form-label">N° de documento</span>
  136.                     </div>
  137.                 </div>
  138.                 <div class="b21WrapInput">
  139.                     <div class="b21Input">
  140.                         {{ form_widget(form.department, {'attr': {'class': 'form-contact validate'}}) }}
  141.                         <span class="form-label">Ciudad</span>
  142.                     </div>
  143.                     <div class="b21Input">
  144.                         {{ form_widget(form.address, {'attr': {'class': 'form-contact validate'}}) }}
  145.                         <span class="form-label">Dirección</span>
  146.                     </div>
  147.                 </div>
  148.                 <div class="b21WrapMenorEdad">
  149.                     <div class="b21WrapCheckbox b21WrapCheckboxP">
  150.                         <input type="checkbox" id="chk_menor_edad" class="form-input checkbox checkMenor">
  151.                         <label for="chk_menor_edad">Menor de edad</label>
  152.                         {{ form_widget(form.younger, {'attr': {'id': 'form_claim_younger', 'class': 'hidden'}}) }}
  153.                     </div>
  154.                 </div>
  155.                 <div id="bloque-apoderado" style="display: none;">
  156.                     <div class="">
  157.                         <div class="b21Input">
  158.                             {{ form_widget(form.tutorName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact'}}) }}
  159.                             <span class="form-label">Nombres del tutor</span>
  160.                         </div>
  161.                     </div>
  162.                     <div class="b21WrapInput">
  163.                         <div class="b21Input">
  164.                             {{ form_widget(form.tutorLastName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact'}}) }}
  165.                             <span class="form-label">Apellido Paterno del tutor</span>
  166.                         </div>
  167.                         <div class="b21Input">
  168.                             {{ form_widget(form.tutorApellidoMaterno, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact'}}) }}
  169.                             <span class="form-label">Apellido Materno del tutor</span>
  170.                         </div>
  171.                     </div>
  172.                     <div class="b21WrapInput">
  173.                         <div class="b21Input">
  174.                             {{ form_widget(form.tutorPhone, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact'}}) }}
  175.                             <span class="form-label">Teléfono</span>
  176.                         </div>
  177.                         <div class="b21Input">
  178.                             {{ form_widget(form.tutorEmail, {'attr': {'class': 'form-contact'}}) }}
  179.                             <span class="form-label">E-mail</span>
  180.                         </div>
  181.                     </div>
  182.                     <div class="b21WrapInput">
  183.                         <div class="b21Select">
  184.                             {{ form_widget(form.tutorDocumentType, {'attr': {'class': 'form-contact-select'}}) }}
  185.                             <span class="form-label">Tipo de documento</span>
  186.                             <i class="icon-iconos-10"></i>
  187.                         </div>
  188.                         <div class="b21Input">
  189.                             {{ form_widget(form.tutorDocumentNumber, {'attr': {'class': 'form-contact'}}) }}
  190.                             <span class="form-label">N° de documento</span>
  191.                         </div>
  192.                     </div>
  193.                 </div>
  194.             </div>
  195.             <div class="b21WrapRow">
  196.                 {% if forms.claimP2Title %}
  197.                     <h4 class="titleStandard">2. {{ forms.claimP2Title }}</h4>
  198.                 {% endif %}
  199.                 <div class="b21WrapRadio">
  200.                     {% for item in forms.claimGoods %}
  201.                         <div class="b21WrapRadioCol">
  202.                             <input type="radio" class="form_good" id="radio-good_{{ loop.index }}" name="tipo_reclamo" value="{{ item.title }}" />
  203.                             <label for="radio-good_{{ loop.index }}">{{ item.title }}</label>
  204.                         </div>
  205.                     {% endfor %}
  206.                 </div>
  207.                 <div class="b21WrapInput">
  208.                     <div class="b21Select">
  209.                         <select class="form-contact-select" id="form_claim_currency">
  210.                             <option value="" disabled selected></option>
  211.                             {% set monedas = forms.claimCurrencies is not empty ? forms.claimCurrencies : [{name: "Soles"}, {name: "Dolares"}] %}
  212.                             {% for currency in monedas %}
  213.                                 <option value="{{ currency.name }}">{{ currency.name }}</option>
  214.                             {% endfor %}
  215.                         </select>
  216.                         <span class="form-label">Moneda</span>
  217.                         <i class="icon-iconos-10"></i>
  218.                     </div>
  219.                     {{ form_widget(form.currency) }}
  220.                     <div class="b21Input">
  221.                         {{ form_widget(form.amount, {'attr': {'class': 'form-contact', 'onkeypress': 'return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46'}}) }}
  222.                         <span class="form-label">Valor del Producto/servicio</span>
  223.                     </div>
  224.                 </div>
  225.                 <div class="b21Textarea">
  226.                     {{ form_widget(form.description, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact'}}) }}
  227.                     <span class="form-label">Descripción</span>
  228.                 </div>
  229.             </div>
  230.             <div class="b21WrapRow">
  231.                 {% if forms.claimP3Title %}
  232.                     <h4 class="titleStandard">3. {{ forms.claimP3Title }}</h4>
  233.                 {% endif %}
  234.                 <div class="b21WrapRadio">
  235.                     {% for item in forms.claimTypes %}
  236.                         <div class="b21WrapRadioCol">
  237.                             <input type="radio" class="form_type" id="radio-type_{{ loop.index }}" name="tipo_consumidor" value="{{ item.title }}" />
  238.                             <label for="radio-type_{{ loop.index }}">{{ item.title }}</label>
  239.                             <!-- <span>*</span> -->
  240.                         </div>
  241.                     {% endfor %}
  242.                 </div>
  243.                 <div class="b21WrapTextP">
  244.                     {% for item in forms.claimTypes %}
  245.                         <p>*{{ item.title }}: {{ item.description|nl2br }}</p>
  246.                     {% endfor %}
  247.                 </div>
  248.                 <div class="b21Textarea">
  249.                     {{ form_widget(form.detail, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact validate'}}) }}
  250.                     <span class="form-label">Detalle</span>
  251.                 </div>
  252.                 <div class="b21Textarea">
  253.                     {{ form_widget(form.demand, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact validate'}}) }}
  254.                     <span class="form-label">Pedido</span>
  255.                 </div>
  256.                 <div class="b21Firma">
  257.                     <label class="form-label">Firma</label>
  258.                     <canvas id="firmaCanvas" width="400" height="150"></canvas>
  259.                     <button type="button" class="btnLimpiar" id="limpiarFirma">Limpiar</button>
  260.                     <input type="hidden" id="firmaData" name="form[firma]" value="">
  261.                 </div>
  262.                 <div class="b21File">
  263.                     <div class="b21FileBox">
  264.                         <i class="icon-copy"></i>
  265.                         <span class="b21FileText">Adjuntar archivo</span>
  266.                         <label for="archivo_libro" class="b21FileTextFormat">Adjuntar archivo (PDF, PPTX, WORD o imágenes JPG, PNG)</label>
  267.                         <input size="40" id="archivo_libro" accept=".pdf,.pptx,.word,.jpg,.png" type="file" name="form_file">
  268.                     </div>
  269.                 </div>
  270.             </div>
  271.             <div class="b21WrapRow">
  272.                 {% if forms.claimP4Title %}
  273.                     <h4 class="titleStandard">4. {{ forms.claimP4Title }}</h4>
  274.                 {% endif %}
  275.                 <div class="b21Textarea">
  276.                     <textarea readonly></textarea>
  277.                 </div>
  278.                 <div class="b21WrapTextP">
  279.                     {% set f = entity.answerDate %}
  280.                     {% set answer_date = f|day ~ ', ' ~ f|date('d') ~ ' de ' ~ f|month|capitalize ~ ' del ' ~ f|date('Y') %}
  281.                     {{ forms.claimDescription|replace({'%fecha_respuesta%': answer_date})|raw }}
  282.                 </div>
  283.             </div>
  284.             <div class="b21WrapRow">
  285. {#                 {% if forms.claimP5Title %}
  286.                     <h4 class="titleStandard">5. {{ forms.claimP5Title }}</h4>
  287.                 {% endif %}
  288.                 <div class="b21WrapRadio">
  289.                     <div class="b21WrapRadioCol">
  290.                         <input type="radio" class="form_authorization" id="radio_authorization_yes" name="authorization_option" value="Sí" />
  291.                         <label for="radio_authorization_yes">Sí</label>
  292.                         <span>*</span>
  293.                     </div>
  294.                     <div class="b21WrapRadioCol">
  295.                         <input type="radio" class="form_authorization" id="radio_authorization_no" name="authorization_option" value="No" />
  296.                         <label for="radio_authorization_no">No</label>
  297.                         <span>*</span>
  298.                     </div>
  299.                 </div> #}
  300.                 <!-- <div class="b21Paragraph">
  301.                     (*) Campos obligatorios.
  302.                 </div> -->
  303.                 {% if forms.claimNotes|length > 0 %}
  304.                     <div class="b21WrapTextP">
  305.                         {% for item in forms.claimNotes %}
  306.                             <p>* {{ item.text|nl2br }}</p>
  307.                         {% endfor %}
  308.                     </div>
  309.                 {% endif %}
  310.             </div>
  311.             <div class="b21WrapCheckbox">
  312.                 <input type="checkbox" id="b21Checkbox" name="">
  313.                 <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>
  314.             </div>
  315.             <button class="buttonStandard gray b21Btn" id="BtnLibro">Enviar</button>
  316.             {% if info.showCaptcha %}
  317.                 <input type="hidden" name="recaptcha_token" id="recaptchaToken">
  318.             {% endif %}
  319.         {{ form_end(form) }}
  320.     </div>
  321. {% endblock %}
  323. {% block jsfinal %}
  324.     {% if info.showCaptcha %}
  325.         <script src="https://www.google.com/recaptcha/api.js?render={{ info.captchaSite }}"></script>
  326.         <script>
  327.             grecaptcha.ready(function() {
  328.                 grecaptcha.execute('{{ info.captchaSite }}', {action: 'submit'}).then(function(token) {
  329.                     document.getElementById('recaptchaToken').value = token;
  330.                 });
  331.             });
  332.         </script>
  333.     {% endif %}
  334.     <script type="text/javascript">
  335.         jQuery(function ($) {
  336.             $("form").validationEngine('attach', {
  337.                 promptPosition: "topLeft",
  338.                 autoHidePrompt: true,
  339.                 autoPositionUpdate: false,
  340.                 autoHideDelay: 2000,
  341.                 binded: false,
  342.                 scroll: false,
  343.                 validateNonVisibleFields: true
  344.             })
  346.             $('#form-establecimiento').on('change', function () {
  347.                 const value = $(this).val();
  348.                 const ruc = $(this).find('option:selected').data('ruc');
  349.                 const form_ruc = $('#form-ruc');
  350.                 $('#form_claim_establishment').val(value);
  351.                 form_ruc.val('');
  352.                 if (ruc) {
  353.                     form_ruc.val('RUC: ' + ruc);
  354.                 }
  355.             });
  357.             $('#BtnLibro').on('click', function (event) {
  358.                 event.preventDefault();
  359.                 const item = $(this);
  360.                 const form = item.closest('form');
  361.                 const firmaData = $('#firmaData').val();
  362.                 if (!firmaData) {
  363.                     alert('Por favor firme antes de enviar');
  364.                     return;
  365.                 }
  366.                 const valid = form.validationEngine('validate');
  367.                 if (valid) {
  368.                     item.prop('disabled', true).text('Enviando...');
  369.                     form.submit();
  370.                 } else {
  371.                     item.prop('disabled', false).text('Enviar');
  372.                 }
  373.             });
  375. //             $('.form_authorization').on('click', function () {
  376. //                 $('#form_claim_authorization').val($('.form_authorization:checked').val());
  377. //             })
  379.             $('.form_good').on('click', function () {
  380.                 $('#form_claim_good').val($('.form_good:checked').val());
  381.             })
  383.             $('.form_type').on('click', function () {
  384.                 $('#form_claim_type').val($('.form_type:checked').val());
  385.             })
  387.             $('#form_claim_currency').on('change', function () {
  388.                 const value = $(this).val();
  389.                 $('input[name="form_claim[currency]"]').val(value);
  390.             });
  392.             $('#chk_menor_edad').on('change', function () {
  393.                 if ($(this).is(':checked')) {
  394.                     $('#bloque-apoderado').show();
  395.                     $('#form_claim_younger').val('1');
  396.                 } else {
  397.                     $('#bloque-apoderado').hide();
  398.                     $('#form_claim_younger').val('0');
  399.                 }
  400.             });
  402.             const departmentField = $('#form_claim_department');
  403.             const provinceField = $('#form_claim_province');
  404.             const districtField = $('#form_claim_district');
  406.             const departmentSelect = $('#form_field_department');
  407.             const provinceSelect = $('#form_field_province');
  408.             const districtSelect = $('#form_field_district');
  410.             departmentSelect.on('change', function () {
  411.                 const department = $(this).find('option:selected').data('option');
  412.                 const value = $(this).val();
  414.                 departmentField.val(null);
  415.                 provinceField.val(null);
  416.                 districtField.val(null);
  418.                 if (department) {
  419.                     departmentField.val(value);
  420.                     loadProvinces();
  421.                 }
  422.             })
  424.             provinceSelect.on('change', function () {
  425.                 const province = $(this).find('option:selected').data('option');
  426.                 const value = $(this).val();
  428.                 provinceField.val(null);
  429.                 districtField.val(null);
  431.                 if (province) {
  432.                     provinceField.val(value);
  433.                     loadDistricts();
  434.                 }
  435.             })
  437.             districtSelect.on('change', function () {
  438.                 const district = $(this).find('option:selected').data('option');
  439.                 const value = $(this).val();
  441.                 districtField.val(null);
  443.                 if (district) {
  444.                     districtField.val(value);
  445.                 }
  446.             })
  448.             function loadProvinces() {
  449.                 const department = departmentSelect.find('option:selected').data('option');
  450.                 if (!department) {
  451.                     return false;
  452.                 }
  454.                 $.ajax({
  455.                     url: '{{ path('get_provinces_by_department') }}',
  456.                     type: 'post',
  457.                     data: {department: department},
  458.                     beforeSend: function () {
  459.                         departmentSelect.prop('disabled', true);
  460.                         provinceSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar');
  461.                         districtSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar');
  462.                         provinceField.val(null);
  463.                     },
  464.                     success: function (data) {
  465.                         provinceSelect.prop('disabled', false).html(createOptions(data));
  466.                     },
  467.                     complete: function () {
  468.                         departmentSelect.prop('disabled', false);
  469.                     }
  470.                 })
  471.             }
  473.             function loadDistricts() {
  474.                 const province = provinceSelect.find('option:selected').data('option');
  475.                 if (!province) {
  476.                     return false;
  477.                 }
  479.                 $.ajax({
  480.                     url: '{{ path('get_districts_by_province') }}',
  481.                     type: 'post',
  482.                     data: {province: province},
  483.                     beforeSend: function () {
  484.                         departmentSelect.prop('disabled', true);
  485.                         provinceSelect.prop('disabled', true);
  486.                         districtSelect.prop('disabled', true).html(createPlaceholder()).siblings('label').removeClass('fijar');
  487.                     },
  488.                     success: function (data) {
  489.                         districtSelect.prop('disabled', false).html(createOptions(data));
  490.                     },
  491.                     complete: function () {
  492.                         departmentSelect.prop('disabled', false);
  493.                         provinceSelect.prop('disabled', false);
  494.                     }
  495.                 })
  496.             }
  498.             function createPlaceholder() {
  499.                 return '<option value="" selected="selected"></option>';
  500.             }
  502.             function createOptions(data) {
  503.                 let options = createPlaceholder();
  504.                 $.each(data, function (i, v) {
  505.                     options += createOption(v);
  506.                 });
  507.                 return options
  508.             }
  510.             function createOption(item) {
  511.                 return '<option value="' + item['title'] + '" data-option="' + item['slug'] + '">' + item['title'] + '</option>';
  512.             }
  514.             var canvas = document.getElementById('firmaCanvas');
  515.             var ctx = canvas.getContext('2d');
  516.             var drawing = false;
  517.             var lastX = 0;
  518.             var lastY = 0;
  520.             function startPosition(e) {
  521.                 drawing = true;
  522.                 var pos = getPos(e);
  523.                 lastX = pos.x;
  524.                 lastY = pos.y;
  525.             }
  527.             function endPosition() {
  528.                 drawing = false;
  529.                 ctx.beginPath();
  530.                 document.getElementById('firmaData').value = canvas.toDataURL();
  531.             }
  533.             function getPos(e) {
  534.                 var rect = canvas.getBoundingClientRect();
  535.                 if (e.touches) {
  536.                     return {
  537.                         x: e.touches[0].clientX - rect.left,
  538.                         y: e.touches[0].clientY - rect.top
  539.                     };
  540.                 }
  541.                 return {
  542.                     x: e.clientX - rect.left,
  543.                     y: e.clientY - rect.top
  544.                 };
  545.             }
  547.             function draw(e) {
  548.                 if (!drawing) return;
  549.                 e.preventDefault();
  550.                 var pos = getPos(e);
  551.                 ctx.strokeStyle = '#000';
  552.                 ctx.lineWidth = 2;
  553.                 ctx.lineCap = 'round';
  554.                 ctx.beginPath();
  555.                 ctx.moveTo(lastX, lastY);
  556.                 ctx.lineTo(pos.x, pos.y);
  557.                 ctx.stroke();
  558.                 lastX = pos.x;
  559.                 lastY = pos.y;
  560.             }
  562.             canvas.addEventListener('mousedown', startPosition);
  563.             canvas.addEventListener('mouseup', endPosition);
  564.             canvas.addEventListener('mouseleave', function() {
  565.                 if (drawing) {
  566.                     drawing = false;
  567.                     ctx.beginPath();
  568.                     document.getElementById('firmaData').value = canvas.toDataURL();
  569.                 }
  570.             });
  571.             canvas.addEventListener('mousemove', draw);
  572.             canvas.addEventListener('touchstart', startPosition);
  573.             canvas.addEventListener('touchend', endPosition);
  574.             canvas.addEventListener('touchmove', draw);
  576.             document.addEventListener('mouseup', function() {
  577.                 if (drawing) {
  578.                     drawing = false;
  579.                     ctx.beginPath();
  580.                     document.getElementById('firmaData').value = canvas.toDataURL();
  581.                 }
  582.             });
  584.             document.getElementById('limpiarFirma').addEventListener('click', function() {
  585.                 ctx.clearRect(0, 0, canvas.width, canvas.height);
  586.                 document.getElementById('firmaData').value = '';
  587.             });
  589.             canvas.addEventListener('mouseup', function() {
  590.                 document.getElementById('firmaData').value = canvas.toDataURL();
  591.             });
  592.         })
  593.     </script>
  594. {% endblock %}