{% extends "base.html.twig" %}
{% block main %}
    <div class="page-title">
        <div class="title_left">
            <h3>Parte {{ parte.ident }}</h3>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row" id="ficha">
        <div class="col-md-12 col-xs-12">
            <div class="x_panel" id="tabla-respuestas">
                <div class="x_title">
                    <h2><i class="fa fa-question-circle"></i> Respuestas <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-responsive">
                        <tr>
                            <th>Pregunta</th>
                            <th>Mueble</th>
                            <th>Posición</th>
                            <th>Respuesta</th>
                            <th>Material</th>
                            <th>Cantidad</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-bars"></i> Ficha <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="display:none;">
                    <form method="POST" action="{{ path("tecnico_parte_ficha_post",{'parte':parte.id}) }}" id="form_envio">
                        <!-- Tabs -->
                        <div id="wizard_vertical" class="form_wizard wizard_verticle">
                            <ul class="list-unstyled wizard_steps">
                                {% for pregunta in preguntas %}
                                    <li>
                                        <a href="#step-{{pregunta.numero+1}}">
                                            <span class="step_no">{{pregunta.numero+1}}</span>
                                        </a>
                                    </li>
                                {% endfor %}
                                <li class="noAjax">
                                    <a href="#step-{{preguntas|length + 1}}">
                                        <span class="step_no">{{preguntas|length + 1}}</span>
                                    </a>
                                </li>
                                <li class="fin">
                                    <a href="#step-{{preguntas|length + 2}}">
                                        <span class="step_no">{{preguntas|length + 2}}</span>
                                    </a>
                                </li>

                                <li class="fin">
                                    <a href="#step-{{preguntas|length + 3}}">
                                        <span class="step_no">{{preguntas|length + 3}}</span>
                                    </a>
                                </li>
                                <li class="fin">
                                    <a href="#step-{{preguntas|length + 4}}">
                                        <span class="step_no">{{preguntas|length + 4}}</span>
                                    </a>
                                </li>
                                <li class="fin">
                                    <a href="#step-{{preguntas|length +5}}">
                                        <span class="step_no">{{preguntas|length +5}}</span>
                                    </a>
                                </li>

                            </ul>


                            {% for pregunta in preguntas %}
                                <div id="step-{{pregunta.numero+1}}">
                                    <h2 class="StepTitle">{{pregunta.enunciado}}</h2>
                                    <p>{{ pregunta.descripcion|default() }}</p>
                                    <hr />
                                    {% include 'Pregunta/'~pregunta.tipo~'.twig' with {'name': pregunta.id, 'opcion':'todo' } %}
                                </div>
                            {% endfor %}


                            <div id="step-{{preguntas|length + 1}}" class="noAjax">
                                <h2 class="StepTitle">Estado actual de la  tienda</h2>
                                <p>
                                    Seleccione el material que NO está actualizado
                                </p>
                                <hr />
                                {% include 'Pregunta/Estado.twig' %}
                            </div>


                            <div id="step-{{preguntas|length + 2}}">
                                <h2 class="StepTitle">Panorámica</h2>
                                <p>
                                    Foto o video panorámicos del establecimiento.<br />
                                    Primero debes hacer la foto desde tu terminal y luego seleccionarla pulsando en subir foto.
                                </p>
                                <hr />
                                <input type="file" name="panoramica" style="display:none" id="foto_pan" accept="image/*" {% if is_granted('ROLE_ADMIN') == false %}required="required"{% endif %}/>
                                <a id="foto_btn" href="javascript:;" onclick="subirFoto()" class="btn btn-app " {% if panoramica is defined and panoramica is not null %}style="background: rgba(100,255,100,0.8);"{% endif %}><i class="fa fa-camera fa-2x"></i></a>
                            </div>

                            <div id="step-{{preguntas|length + 3}}">
                                <h2 class="StepTitle">Observaciones</h2>
                                <p>Por favor detalle cualquier comentario adicional</p>
                                <hr />
                                <textarea name="observaciones" class="form-control">{{parte.observaciones|default('')}}</textarea>
                            </div>
                            <div id="step-{{preguntas|length + 4}}">
                                <h2 class="StepTitle">Datos del establecimiento</h2>
                                <p>Revisa por favor que los datos del establecimiento están correctamente actualizados.</p>
                                <hr />
                                <div class="form-group">
                                    <label>Persona de contacto</label>
                                    <input name="tienda_gerente" class="form-control" value="{{ parte.establecimiento.gerente }}">
                                </div>
                                <div class="form-group">
                                    <label>Teléfono</label>
                                    <input name="tienda_telefono" required="required" class="form-control" value="{{ parte.establecimiento.telefono|default('') }}">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input name="tienda_email" required="required" class="form-control" value="{{ parte.establecimiento.email|default('') }}">
                                </div>
                                <div class="form-group">
                                    <label>Horario</label>
                                    <input name="tienda_horario" required="required" class="form-control" value="{{ parte.establecimiento.horario|default('') }}">
                                </div>
                                <h3>Dirección</h3>
                                <div class="form-group">
                                    <label>Calle y numero</label>
                                    <input name="tienda_direccion_calle" required="required" class="form-control" value="{{ parte.establecimiento.direccion.calle|default('') }}">
                                </div>
                                <div class="form-group">
                                    <label>Ciudad / Pueblo</label>
                                    <input name="tienda_direccion_ciudad" required="required" class="form-control" value="{{ parte.establecimiento.direccion.ciudad|default('') }}">
                                </div>
                                <div class="form-group">
                                    <label>Provincia</label>
                                    <input name="tienda_direccion_provincia" required="required" class="form-control" value="{{ parte.establecimiento.direccion.provincia|default('') }}">
                                </div>
                            </div>
                            <div id="step-{{preguntas|length + 5}}">
                                <h2 class="StepTitle">Firma y aceptación</h2>
                                <p>Es necesario la firma de un empleado de la tienda que certifique la correcta finalización</p>
                                <hr />
                                <div class="form-group">
                                    <label>Nombre y Apellido</label>
                                    <input name="firma_nombre" required="required" class="form-control" value="{{ parte.firma?parte.firma.nombre:'' }}">
                                </div>
                                <div class="form-group">
                                    <label>DNI-NIF-Identificador</label>
                                    <input name="firma_identificador" required="required" class="form-control" value="{{ parte.firma?parte.firma.identificador:'' }}">
                                </div>
                                <div class="form-group">
                                    <label>Firma</label>
                                    <div style="width: 100%;text-align: center;" class="panelfirma">
                                        <canvas id="firma" style="min-height:300px;width:100%;border:1px solid grey; display:none;" class="canvas"></canvas><br />
                                        <a href="javascript:;" onclick="iniciaFirma()" class="btn btn-success iniciar">Firmar</a>

                                        <a href="javascript:;" onclick="limpiaFirma()" class="btn btn-danger borrar" style="display:none;">Borrar firma</a>
                                    </div>
                                    <input type="hidden" id="firma_inp" name="firma" />
                                </div>
                                <div class="form-group">
                                    Acepto las Condiciones y LOPD
                                    <input type="checkbox" checked="checked" required="required" class="form-control">
                                </div>
                            </div>
                            {#</form>#}
                        </div>
                        <!-- End SmartWizard Content -->

                    </form>


                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalMaterial" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Asignar material</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-4">
                            <b>Tipo</b>
                            <select id="tipo" class="form-control">
                                <option value="Entrega">Instalado</option>
                                <option value="Recoje">Retirado</option>
                            </select>
                        </div>

                        <div class="col-xs-12 col-md-5">
                            <b>Material</b>
                            <select id="material" class="form-control">
                                {% for material in materiales %}
                                    <option value="{{ material.id }}">{{ material }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2 col-xs-7">
                            <b>Cantidad</b>
                            <input id="cantidad" type="number" min="1"  value="1" class="form-control"/>
                        </div>
                        <div class="col-md-1 col-xs-5">
                            <b>&nbsp;</b>
                            <a href="javascript:;" class="btn btn-default agregar" onclick="addMaterial()"><i class="fa fa-plus"></i></a>
                        </div>
                    </div>
                    <div class="row">
                        <table id="modalMaterialTabla" class="table table-responsive">
                            <thead>
                                <tr>
                                    <th>Tipo</th>
                                    <th>Material</th>
                                    <th>Uds.</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary saveMaterial" onclick="saveMaterial(this);">Guardar</button>
                </div>
            </div>
        </div>
    </div><!-- Modal -->
    <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Borrar respuesta</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        ¿Desea eliminar esta respuesta?
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-danger" onclick="deleteRespuesta(event, this);">Si</button>
                </div>
            </div>
        </div>
    </div>
{% endblock main %}

{% block javascripts %}
    <script src="/vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
    <script src="{{ asset('/js/models/pregunta.js') }}"></script>
    <script src="{{ asset('/js/models/respuesta.js') }}"></script>
    <script src="{{ asset('/js/models/material.js') }}"></script>
    <script src="{{ asset('/js/models/movimiento.js') }}"></script>
    <script type="text/javascript">
                        $().ready(function () {
                            $("#ficha").find(".x_content").show();
                            $("#tabla-respuestas").hide();
                        });
                        var preguntas = [];
                        var pregunta = new Pregunta();

                        var respuestas = [];
                        var respuesta = new Respuesta();
                        var newRespuestas = [];

                        var movimientos = [];
                        var movimiento = new Movimiento();

                        var materiales = [];
                        var material = new Material();

                        var opciones = [];

                        var panoramica = '{{panoramica.file | default(false)}}';
                        $(document).ready(function () {
                            // Smart Wizard

                            $('#wizard_vertical').smartWizard({
                                transitionEffect: 'slideleft',
                                onFinish: onFinishCallback,
                                onLeaveStep: updatePregunta,
                            });

                            function onFinishCallback(obj) {

                                var currentStep = $("#wizard_vertical").smartWizard('currentStep');
                                console.log('paso' + currentStep);
                                $(".buttonFinish").text('Guardando...');
                                if (updatePreguntaFin(null, {fromStep: currentStep, toStep: currentStep + 1})) {
        {% if is_granted("ROLE_GESTION") %}
                        location.href = '{{path("gestion_inicio")}}';
        {% else %}

                        location.href = '{{path("tecnico_inicio")}}';
        {% endif %}
                    }
                    $(".buttonFinish").text('Finish');
                }

                $('.buttonNext').addClass('btn btn-success');
                $('.buttonPrevious').addClass('btn btn-primary');
                $('.buttonFinish').addClass('btn btn-default');

            });

            // load data

        {% for pregunta in preguntas %}
            pregunta = new Pregunta();
            pregunta.id = '{{pregunta.id}}';
            pregunta.numero = '{{pregunta.numero}}';
            pregunta.enunciado = '{{pregunta.enunciado}}';
            pregunta.descripcion = '{{pregunta.descripcion}}';
            pregunta.proyecto = '{{pregunta.proyecto}}';
            preguntas.push(pregunta);
        {% endfor %}

        {% for respuesta in parte.respuestas %}

            respuesta = new Respuesta();
            respuesta.id = '{{respuesta.id|default("")}}';
            respuesta.parte = '{{respuesta.parte.id|default("")}}';
            respuesta.pregunta = '{{respuesta.pregunta.id|default("")}}';
            respuesta.mueble = '{{respuesta.mueble.id|default("")}}';
            respuesta.posicion = '{{respuesta.posicion|default("")}}';
            respuesta.respuesta = '{{respuesta.respuesta|default(0)}}';

            respuesta.movimiento = [];

            $("#" + respuesta.pregunta + "-" + respuesta.mueble + "-" + respuesta.posicion).attr('data-respuesta', respuesta.id).find(".incidencia option[value='" + respuesta.respuesta + "']").prop('selected', true);

            // $("select#" + respuesta.pregunta + " option[value='" + respuesta.respuesta + "']").prop('selected', true);

            $("input#" + respuesta.pregunta).attr('checked', respuesta.respuesta == "true");

            {% if respuesta.imagenes %}
                {% for imagenes in respuesta.imagenes %}
                    var imagenes = {
                        id: '{{imagenes.id}}',
                        file: '{{imagenes.file?imagenes.file:0}}',
                        nombre: '{{imagenes.nombre?imagenes.nombre:""}}',
                        hash: '{{imagenes.hash?imagenes.hash:""}}',
                        fecha: '{{imagenes.fecha?imagenes.fecha.format("Y-m-d"):""}}',
                        observaciones: '{{imagenes.observaciones?imagenes.observaciones:""}}',
                    }
                    respuesta.imagenes.push(imagenes);
                {% endfor %}
            {% endif %}

                if (respuesta.imagenes.length)
                    $("#" + respuesta.pregunta + "-" + respuesta.mueble + "-" + respuesta.posicion).find('.addFoto').addClass('btn-success');

            {% if respuesta.movimiento %}
                {% for movimiento in respuesta.movimiento %}
                    movimiento = {
                        id: '{{movimiento.id}}',
                        cantidad:{{movimiento.cantidad?movimiento.cantidad:0}} ,
                        material: '{{movimiento.material?movimiento.material:''}}',
                        tipo: '{{movimiento.tipo?movimiento.tipo:false}}',
                        respuesta: '{{respuesta.id?respuesta.id:false}}',
                    }
                    movimientos.push(movimiento);
                    respuesta.movimiento.push(movimiento);
                {% endfor %}
            {% endif %}
                respuestas.push(respuesta);


        {% endfor %}

            var materiales = [];
            var respuestaActual = null;

            $('.addMaterial').click(function (e) {
                e.preventDefault();
                var resp = $(this).parents('tr').find('select').val();
                if (resp) {
                    $("#modalMaterial").modal('show');
                    $("#modalMaterial #modalMaterialTabla").find('tbody').html('');
                    respuestaActual = $(this).parents('tr');
                    respuesta = new Respuesta();
                    respuesta.id = $(this).parents('tr').data('respuesta');
                    respuesta.parte = '{{parte.id}}';
                    respuesta.pregunta = $(this).parents('tr').data('pregunta');
                    respuesta.mueble = $(this).parents('tr').data('mueble');
                    respuesta.posicion = $(this).parents('tr').data('posicion');
                    respuesta.respuesta = $(this).parents('tr').find('select').val();
                    respuesta.getMovimientos();
                    if (respuesta.movimiento.length) {
                        respuesta.movimiento.forEach(function (value) {
                            $("#modalMaterial #modalMaterialTabla tbody")
                                    .append("<tr><td>" + value.tipo + "</td><td>" + value.material + "</td><td>" + value.cantidad + "</td></tr>");
                        })
                    }
                } else {
                    new PNotify({
                        //title: 'Oh No!',
                        type: 'error',
                        text: 'Debe registar una incidencia'
                    });
                    return;
                }
            });

            function addMaterial() {
                //Tipo Material Cantidad
                var tipo = $("#modalMaterial #tipo option:selected").text();
                var mat = $("#modalMaterial #material option:selected").text(); //text //val
                var id = $("#modalMaterial #material option:selected").val(); //text //val
                var cantidad = $("#modalMaterial #cantidad").val();
                if (cantidad <= 0) {
                    new PNotify({
                        //title: 'Oh No!',
                        type: 'error',
                        text: 'La cantidad es menor que 1'
                    });
                    return;
                }
                movimiento = new Movimiento(null, cantidad, mat, id, tipo, respuesta.id);
                respuesta.movimiento.push(movimiento);
                $("#modalMaterial #modalMaterialTabla tbody").append("<tr><td>" + tipo + "</td><td>" + mat + "</td><td>" + cantidad + "</td></tr>");
            }


            function saveMaterial(elem) {
                $('.saveMaterial').text('Guardando...').attr('disabled', 'disabled');
                respuesta.saveMovimientos()
                        .done(function () {
                            respuesta.movimiento = [];
                            $("#modalMaterial").modal('hide');
                        }).fail(function () {
                    new PNotify({
                        //title: 'Oh No!',
                        type: 'error',
                        text: 'Error al guardar materiales'
                    });
                    return;
                }).always(function () {
                    $('.saveMaterial').text('Guardar').removeAttr('disabled');
                });
            }

            $(".incidencia, select[name]").change(function (e) {
                console.log('entro select incidencia');
                addRespuesta(this);

            });

            $(".incidencia_establecimiento").each(function () {
                $(this).change(function (e) {
                    console.log('entro select establecimiento');
                    editarEstado(this);
                });
            });

            $('input[type=checkbox]').unbind('click.checks').bind('click.checks', function (e) {
                $(this).val($(this).is(':checked'));
                addRespuesta(this);
            });

            function editarEstado(elem) {
                var processData = true;
                var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
                data = {
                    'mueble': $(elem).parents('tr').data('mueble'),
                    'estado': $(elem).val(),
                    'posicion': $(elem).parents('tr').data('posicion')
                }

                $.ajax({
                    type: 'POST',
                    url: '{{ path("establecimiento_ajax_estado",{"establecimiento":parte.establecimiento.id}) }}',
                    data: data,
                    contentType,
                    processData,
                    async: false
                }).done(function () {
                    succeed = true;
                }).fail(function () {
                    succeed = false;
                }).always(function () {
                    $(".buttonNext").text('Next');
                    $(".buttonPrevious").text('Previous');
                });
            }

            function addRespuesta(elem) {
                respuesta = new Respuesta();
                respuesta.id = $(this).parents('tr').data('respuesta');
                respuesta.parte = '{{parte.id}}';
                respuesta.pregunta = $(elem).data('pregunta');
                respuesta.mueble = $(elem).parents('tr').data('mueble');
                respuesta.posicion = $(elem).parents('tr').data('posicion');
                respuesta.respuesta = elem.value;
                aux = true;
                newRespuestas.forEach(function (value, index, object) {
                    if (respuesta.pregunta === value.pregunta && value.posicion === respuesta.posicion && value.mueble === respuesta.mueble) {
                        object.respuesta = respuesta.respuesta;
                    }
                })
                newRespuestas.push(respuesta);

                manageTable(respuesta);
            }

            function visualizeTable() {
                var tableDiv = $("#tabla-respuestas");
                if (tableDiv.is(":hidden")) {
                    tableDiv.show();
                }
            }

            function getQuestionTableData(respuesta) {
                var respuestaArray = [];
                var respuestaTexto;
                var mueble = $("[data-mueble='" + respuesta.mueble + "']");
                var pregunta = preguntas.find(o => o.id === respuesta.pregunta);
                if (mueble.length) {
                    var selectPregunta = $("#" + respuesta.pregunta + "-" + respuesta.mueble + "-" + respuesta.posicion).attr('data-respuesta', respuesta.id).find(".incidencia option[value='" + respuesta.respuesta + "']");
                    mueble = selectPregunta.closest('tr').first().text().split("-")[0];
                    respuestaTexto = selectPregunta.text();
                } else {
                    var selectPregunta = $("#" + respuesta.pregunta + " option:selected");
                    respuestaTexto = selectPregunta.text();
                    //(respuesta.respuesta === "true") ? "SI" : "NO";
                }

                respuestaArray['pregunta'] = pregunta.enunciado;
                respuestaArray['posicion'] = respuesta.posicion || " - ";
                respuestaArray['mueble'] = (mueble.length) ? mueble : " - ";
                respuestaArray['respuesta'] = respuestaTexto;

                return respuestaArray;
            }

            function limpiarRespuesta(table, respuestaArray) {
                var celdasPregunta = table.find("td:contains('" + respuestaArray['pregunta'] + "')");
                if (celdasPregunta.length) {
                    var celdaMueble = celdasPregunta.next().filter(":contains('" + respuestaArray['mueble'] + "')");
                    var celdaPosicion = celdaMueble.next().filter("td:contains('" + respuestaArray['posicion'] + "')");
                    if (celdaPosicion.length && celdaMueble.length) {
                        celdaPosicion.parent().remove();
                    }
                }
            }

            function crearRespuesta(table, respuestaArray) {
                table.append('<tr></tr>');
                var row = table.find('tr:last');

                row.append('<td>' + respuestaArray['pregunta'] || " - " + '</td>');
                row.append('<td>' + respuestaArray['mueble'] + '</td>');
                row.append('<td>' + respuestaArray['posicion'] + '</td>');
                row.append('<td>' + respuestaArray['respuesta'] + '</td>');
                row.append('<td> - </td>');
                row.append('<td> - </td>');
            }

            function manageTable(respuesta) {
                if (respuesta.pregunta !== undefined) {
                    visualizeTable();
                    var respuestaArray = getQuestionTableData(respuesta);
                    var table = $("#tabla-respuestas").find(".table-responsive");

                    limpiarRespuesta(table, respuestaArray);
                    crearRespuesta(table, respuestaArray);
                }
            }

            function updatePregunta(obj, context) {
                if (context.fromStep < context.toStep) {
                    var buttonText = $('.buttonNext').text();
                    $('.buttonNext').html('<svg class="svg-inline--fa fa-spinner fa-w-16 fa-spin" aria-hidden="true" data-prefix="fa" data-icon="spinner" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"></path></svg>');

                    if (!!$('select.incidencia:visible').length) {
                        var selects = $('select.incidencia:visible');
                        for (var i = 0; i < selects.length; i++) {
                            console.log($(selects[i]), $(selects[i]).val());

                            if (!!$(selects[i]).val()) {
                                respuesta = new Respuesta();
                                respuesta.id = $(selects[i]).parents('tr').data('respuesta');
                                respuesta.parte = '{{ parte.id }}';
                            }
                        }
                    }

                    $('.buttonNext').text(buttonText);
                }

                var sel = $("#step-" + obj.attr('rel') + " select");
                if (sel != undefined) {
                    if (sel.length == 1) {
                        if (sel.val() == "Selecciona una opción") {
                            $('#wizard_vertical').smartWizard('setError', {stepnum: obj.attr('rel'), iserror: true});
                            new PNotify({
                                type: 'error',
                                text: 'Pregunta necesaria'
                            });
                            return false;
                        }
                    }
                }
                if ($(obj).parents('.fin').length) {
                    return updatePreguntaFin(obj, context);
                }
                if ($(obj).parents('.noAjax').length) {
                    return true;
                }

                var succeed = false;
                if (newRespuestas.length) {
                    if (context.fromStep < context.toStep)
                        $(".buttonNext").text('Guardando...');
                    else
                        $(".buttonPrevious").text('Guardando...');

                    respuesta.addRespuestas('{{parte.id}}', newRespuestas)
                            .done(function () {
                                succeed = true;
                                newRespuestas = [];
                            }).fail(function () {
                        succeed = false;
                    }).always(function () {
                        $(".buttonNext").text('Next');
                        $(".buttonPrevious").text('Previous');
                    });



                } else {
                    succeed = true;
                }
                return succeed;
            }


            $('.addFoto').click(function () {
                var resp = $(this).parents('tr').find('select').val();
                if (resp) {
                    respuesta = new Respuesta();

                    respuesta.id = $(this).parents('tr').data('respuesta');
                    console.log($(this).parents('tr').data('respuesta'));
                    console.log($(this).parents('tr').data('data-pregunta'));

                    respuesta.parte = '{{parte.id}}';
                    respuesta.pregunta = $(this).parents('tr').parent().parent().parent().children(1).first().first().text();
                    respuesta.mueble = $(this).parents('tr').data('mueble');
                    respuesta.posicion = $(this).parents('tr').data('posicion');
                    respuesta.respuesta = resp;
                    $(this).parents('tr').find('.foto').click();

                } else {
                    new PNotify({
                        type: 'error',
                        text: 'Debe registar una incidencia'
                    });
                    return;
                }
            })

            $(".foto").on("change", function () {
                var ico = $(this).parents('td').find('.addFoto');
                ico.html('<i class="fa fa-spinner fa-spin"></i>')
                var file = $(this)[0].files[0];
                var name = $(this).parents('tr').find('td').first().text();


                respuesta.addFoto(file, name)
                        .done(function (data, textStatus, jqXHR) {
                            ico.removeClass('btn-danger').addClass('btn-success');
                            new PNotify({
                                type: 'success',
                                text: 'Foto subida!'
                            });
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                    new PNotify({
                        type: 'error',
                        text: jqXHR.responseJSON.error
                    });
                }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                    ico.html('<i class="fa fa-camera"></i>');
                });
            });



            /****************** FIN **************************/
            var canvas = document.querySelector("canvas");

            var width_firma = 0;
            function resizeCanvas() {
                var ratio = Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }

            function drawCanvas() {
                resizeCanvas();
                signaturePad = new SignaturePad(canvas);
                if ("{$fsc->firma}" !== "") {
                    signaturePad.fromDataURL("{$fsc->firma}");
                }
            }

            window.addEventListener("resize", drawCanvas);
            drawCanvas();
            //Función para subir las panorámicas
            function subirFoto() {
                $("#foto_pan").click()
                $("#foto_pan").change(function () {
                    //debugger;
                    $("#foto_btn").html('<i class="fa fa-spinner fa-spin fa-2x"></i>')
                    var data = new FormData();
                    data.append('nombre', 'panoramica');
                    data.append('img', $(this)[0].files[0]);
                    data.append('pregunta', this.pregunta);
                    panoramica = $(this)[0].files[0];

                    return $.ajax({
                        type: 'POST',
                        method: 'POST',
//                    dataType: 'application/json; charset=UTF-8',
                        contentType: false,
                        processData: false,
                        cache: false,
                        url: '/tecnico/partes/{{parte.id}}/foto_ajax',
                        data: data,
                    }).done(function (data, textStatus, jqXHR) {
                        $("#foto_btn").css('background', 'rgba(100,255,100,0.8)');
                        new PNotify({
                            type: 'success',
                            text: 'Foto subida!'
                        });
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        panoramica = false;
                        new PNotify({
                            type: 'error',
                            text: jqXHR.responseJSON.error
                        });
                    }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                        $("#foto_btn").html('<i class="fa fa-camera fa-2x"></i>');
                    });


                })
            }
            var firmaini = false;
            function iniciaFirma() {
                $(".panelfirma .iniciar").hide();
                $(".panelfirma .canvas").show();
                $(".panelfirma .borrar").show();
                firmaini = true;
                limpiaFirma();
            }
            function limpiaFirma() {
                resizeCanvas();
                signaturePad.clear();
            }

            $(window).resize(function () {
                resizeCanvas();
            });

            function updatePreguntaFin(obj, context) {
                if (firmaini && !signaturePad.isEmpty()) {
                    $("#firma_inp").val(signaturePad.toDataURL("image/svg+xml"));
                }
                var succeed = true;
                var data = $('#step-' + (context.fromStep)).find('select[name], textarea[name], input[name], input[hidden]').serializeArray();
                var processData = true;
                var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
                //    console.log(context.fromStep+1);
                //  console.log($('#step-' + (context.fromStep+1) + ' input[type=file]').val());
                var step = $('#step-' + (context.fromStep));
                if (step.find('input[type=file]').length >= 1) {
        {% if is_granted('ROLE_ADMIN') == false %}
                    if (!panoramica) {
                        new PNotify({
                            type: 'error',
                            text: 'Debe subir la panorámica'
                        });
                        succeed = false;
                    } else {
                        return true;
                    }
        {% endif %}
                }
                if (!!data) {
                    data.forEach(function (value) {
                        if (value.value === "" && value.name !== "observaciones" && succeed) {
                            new PNotify({
                                type: 'error',
                                text: 'Debe llenar todos los campos'
                            });
                            succeed = false;
                        }
                    });
                }

                if (succeed) {
                    if (context.fromStep < context.toStep)
                        $(".buttonNext").text('Guardando...');
                    else
                        $(".buttonPrevious").text('Guardando...');
                    $.ajax({
                        type: 'POST',
                        url: '{{ path("tecnico_parte_fin_post",{"parte":parte.id}) }}',
                        data: data,
                        contentType,
                        processData,
                        async: false
                    }).done(function () {
                        succeed = true;
                    }).fail(function () {
                        succeed = false;
                    }).always(function () {
                        $(".buttonNext").text('Next');
                        $(".buttonPrevious").text('Previous');
                    });
                }
                return succeed;
            }

            $(function () {
                $('select.incidencia').on('change', function () {
                    if ($(this).val() != '') {
                        $('select.incidencia').closest('tr').removeClass('incidencia-resaltada');
                        $(this).closest('tr').addClass('incidencia-resaltada');
                        $(this).closest('tr').find('.addFoto').addClass('btn-danger');
                        $(this).closest('tr').find('.addMaterial').addClass('btn-danger');
                    } else {
                        $(this).closest('tr').find('.addFoto').removeClass('btn-danger').removeClass('btn-success');
                        $(this).closest('tr').find('.addMaterial').removeClass('btn-danger').removeClass('btn-success');
                    }
                });
            });
    </script>

{% endblock javascripts %}

{% block stylesheets %}
    <style>
        tr.incidencia-resaltada td {
            background-color: #bffcef;
        }
    </style>
{% endblock stylesheets %}