{% extends "base.html.twig" %}
{% block title %}Parte {{ parte.ident }}{% endblock %}
{% block main %}
    <div class="page-title">
        <div class="title_left">
            <h3>Parte {{ parte.ident }}</h3>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="row">
        <div class="col-md-8 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-bars"></i> Detalles <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                        <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Trabajo</a>
                            </li>
                            <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Establecimiento</a>
                            </li>
                            <li role="presentation" class=""><a href="#tab_content3" role="tab" id="profile-tab3" data-toggle="tab" aria-expanded="false">Fechas</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">

                                <div class="col-md-12">
                                    <table class="table table-responsive">
                                        <tr>
                                            <th>Proyecto</th>
                                            <td>{{ parte.proyecto }}</td>
                                        </tr>
                                        <tr>
                                            <th>Cliente</th>
                                            <td>{{parte.proyecto.proveedor|default(parte.proyecto.cliente)}}</td>
                                        </tr>
                                        <tr>
                                            <th>Trabajo</th>
                                            <td>{{ parte.trabajo }}</td>
                                        </tr>
                                        <tr>
                                            <th>Descripción</th>
                                            <td>{{ parte.descripcion|nl2br()|default() }}</td>
                                        </tr>
                                        <tr>
                                            <th>Descripción proyecto</th>
                                            <td>{{ parte.proyecto.texto|nl2br()|default()}}</td>
                                        </tr>
                                        <tr>
                                            <th>Técnico</th>
                                            <td>{{ parte.tecnico.nombre|default() }} {{ parte.tecnico.apellido|default() }}</td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab2">
                                <p>
                                    {{ parte.establecimiento}}
                                </p>
                                <p>
                                    <b>Horario:</b> {{parte.establecimiento.horario}}<br />
                                    <b>Teléfono:</b> {{parte.establecimiento.telefono}}<br />
                                    <b>Email:</b> {{parte.establecimiento.email}}<br />
                                    <b>Dirección:</b> {% include 'Partes/EstablecimientoDireccion.twig' with {'establecimiento':parte.establecimiento} %}
                                </p>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab3">
                                <p>
                                    <b>Fecha Alta:</b>{{ parte.fechaAlta.format("d-m-Y H:i")}}<br />
                                    <b>Fecha Asignación:</b>{{ parte.fechaAsignacion.format("d-m-Y H:i")|default("Sin Asignar")}}<br />
                                    <b>Fecha Inicio:</b>{{ parte.fechaInicio.format("d-m-Y H:i")|default("Sin Iniciar")}}<br />
                                    <b>Fecha Finalización:</b>{{ parte.fechaFin.format("d-m-Y H:i")|default("Sin Finalizar")}}<br />
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-map"></i> Planograma <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    {% include 'Partes/EstablecimientoPlanograma.twig' with {'establecimiento':parte.establecimiento} %}
                </div>
            </div>
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="far fa-folder-open"></i> Ficheros <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="bs-glyphicons">
                        <ul id="images" class="bs-glyphicons-list">
                            {% for file in ficheros %}
                                <li>
                                    <img src="{{ asset('/uploads/' ~ file.file) }}" style="max-height:88px"/>
                                    <span class="glyphicon-class">{{file.nombre}}</span>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="x_footer">
                    {% if form is defined %}
                        {{ form_start(form, { attr: { id: 'inp_form' } }) }}
                        <div style="display:none;">{{ form_row(form) }}</div>
                        <textarea name="foto_form[nombre]"></textarea>
                        <div class="btn btn-app" onclick="addFoto();"><i class="fa fa-camera" ></i></div>
                        <input type="hidden" name="formType" value="1">
                        {{ form_end(form) }}
                    {% endif %}
                    {#<form method="POST" action="{{ path("gestion_parte_foto",{"parte":parte.id}) }}" id="inp_form" enctype="multipart/form-data">
                        <input id="inp_file" name="file" type="file" accept="image/*" capture="camera" style="display:none"/>
                        <input id="inp_lat" name="lat" type="hidden" />
                        <input id="inp_long" name="long" type="hidden" />
                        Descripción
                        <textarea name="nombre"></textarea>
                        <div class="btn btn-app"><i class="fa fa-camera" onclick="addFoto();"> Foto</i></div>
                    </form>#}
                </div>
            </div>
            {% if parte.respuestas|length> 0 %}
                <div class="x_panel">
                    <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>
                            {% for respuesta in parte.respuestas %}
                                <tr>
                                    {% if respuesta.pregunta.tipo == "Terminales" %}
                                        {% if respuesta.respuesta > 0 %}
                                            <td>{{ respuesta.pregunta }}</td>
                                            <td>{{ respuesta.mueble|default("") }}</td>
                                            <td>{{ respuesta.posicion|default("") }}</td>
                                            <td>{{ respuesta(respuesta.pregunta , respuesta.respuesta) }}</td>
                                        {% endif %}
                                    {% else %}
                                        <td>{{ respuesta.pregunta }}</td>
                                        <td> - </td>
                                        <td> - </td>
                                        <td>{{ respuesta(respuesta.pregunta , respuesta.respuesta) }}</td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
                <div class="x_panel">
                    <div class="x_title">
                        <h2><span class="fa fa-cubes"></span> Material <small></small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <table class="table table-responsive">
                            <tr>
                                <th>Material</th>
                                <th>Cantidad</th>
                            </tr>
                            {% for respuesta in parte.respuestas %}
                                {% if respuesta.movimiento|length > 0 %}
                                    {% for movimiento in respuesta.movimiento %}
                                        <tr>
                                            <td>{{ movimiento.material }}</td>
                                            <td>{% if movimiento.tipo != 'Instalado' %} - {% endif %}{{ movimiento.cantidad }}</td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            {% endfor %}
                        </table>
                    </div>
                    <div class="x_footer">
                        <h3>Observaciones</h3>
                        {{parte.observaciones}}
                    </div>
                </div>
            {% endif %}
        </div>

        <div class="col-md-4 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="far fa-clock"></i> Time <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="bs-example" data-example-id="simple-jumbotron">
                        <div class="jumbotron">
                            <h1 id="timer">{{parte.duracion.format('%H:%I:%s') }}</h1>
                        </div>
                    </div>
                </div>
            </div>
            {% if parte.firma is not null %}
                <div class="x_panel">
                    <div class="x_title">
                        <h2><i class="fa fa-map"></i> Firma <small></small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        {{ parte.firma.nombre }} ({{ parte.firma.identificador}})
                        <img src="{{ parte.firma.firma }}" style="width:100%" />
                    </div>
                </div>
            {% endif %}

            {% if (is_granted("ROLE_CLIENTE_WRITE") or is_granted("ROLE_GESTION")) and (parte.fechaFin is null) %}
                <div class="x_panel">
                    <div class="x_title">
                        <h2><i class="fa fa-cog"></i> Actions <small></small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        {% if is_granted("ROLE_CLIENTE_WRITE") %}
                            {#solo los clientes ven esto#}
                            <a href="{{ path("gestion_parte_cliente_ficha",{'parte':parte.id}) }}" class="btn btn-success btn-lg">Ficha</a>

                            {% if (parte.respuestas|length > 0) and (parte.fechaFin is null) %}
                                <a href="{{ path("gestion_parte_cliente_fin",{'parte':parte.id}) }}" class="btn btn-danger btn-lg">Finalizar</a>
                            {% endif %}

                            {% if parte.fechaInicio is not null %}
                                <a href="{{ path("gestion_parte_cliente_reset",{'parte':parte.id}) }}" class="btn btn-warning btn-lg">Reiniciar</a>
                            {% endif %}

                            {% if (parte.tecnico is null) and (parte.fechaFin is null) %}
                                <a href="#" onclick="borrar(event, '{{ path("gestion_parte_cliente_delete",{'parte':parte.id}) }}')" class="btn btn-danger btn-lg">Borrar</a>
                            {% else %}
                                <a href="{{ path("gestion_parte_cliente_unasign",{'parte':parte.id}) }}" class="btn btn-warning btn-lg">Desasignar</a>
                            {% endif %}

                        {% else %}
                            {#solo los gestion ven esto#}
                            <a href="{{ path("gestion_parte_ficha",{'parte':parte.id}) }}" class="btn btn-success btn-lg">Ficha</a>

                            {% if parte.respuestas|length > 0 and  (parte.fechaFin is null) %}
                                <a href="{{ path("gestion_parte_fin",{'parte':parte.id}) }}" class="btn btn-danger btn-lg">Finalizar</a>
                            {% endif %}

                            {% if parte.fechaInicio is not null %}
                                <a href="{{ path("gestion_parte_reset",{'parte':parte.id}) }}" class="btn btn-warning btn-lg">Reiniciar</a>
                            {% endif %}

                            {% if parte.tecnico is null and  (parte.fechaFin is null) %}
                                <a href="#" onclick="borrar(event, '{{ path("gestion_parte_delete",{'parte':parte.id}) }}')" class="btn btn-danger btn-lg">Borrar</a>
                            {% else %}
                                <a href="{{ path("gestion_parte_unasign",{'parte':parte.id}) }}" class="btn btn-warning btn-lg">Desasignar</a>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock main %}

{% block javascripts %}
    <script src="{{ asset("/vendors/viewerjs/dist/viewer.min.js") }} "></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.12.12/sweetalert2.all.min.js" integrity="sha256-9jmClG8WmVMrxbtba0O7VnTshF8fCADuEL4uM19EZG4=" crossorigin="anonymous"></script>
    <script>
                                    var viewer = new Viewer(document.getElementById('images'));
                                    function addFoto() {
                                        navigator.geolocation.getCurrentPosition(function (position) {
                                            $('#foto_form_lat').val(position.coords.latitude);
                                            $('#foto_form_long').val(position.coords.longitude);
                                        }, function () {
                                            gpsError('{{ app.request.getSchemeAndHttpHost() }}')
                                        });
                                        document.getElementById('foto_form_file').click();
                                    }

                                    $(function () {
                                        $('#foto_form_file').on('resized', function () {
                                            $('#inp_form').submit();
                                        });
                                    });

                                    var timer;

        {% if parte.fechaInicio is not null and parte.fechaFin is null %}
            var initDate = new Date("{{ parte.fechaInicio.format("D M d Y H:i:s O")}}");
            timer = setInterval(function () {
                timeBetweenDates(initDate);
            }, 1000);
        {% endif %}
            function timeBetweenDates(toDate) {
                var dateEntered = toDate;
                var now = new Date();
                var difference = now.getTime() - dateEntered.getTime();

                if (difference <= 0) {

                    // Timer done
                    clearInterval(timer);

                } else {

                    var seconds = Math.floor(difference / 1000);
                    var minutes = Math.floor(seconds / 60);
                    var hours = Math.floor(minutes / 60);
                    var days = Math.floor(hours / 24);

                    hours %= 24;
                    minutes %= 60;
                    seconds %= 60;

                    $("#timer").text(hours + ":" + minutes + ":" + seconds);
                }
            }

            function borrar(e, url) {
                e.preventDefault();
                swal({
                    title: '¿Estas seguro?',
                    text: "No se podrá recuperar!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Borrar!'
                }).then((result) => {
                    if (result.value) {
                        window.location.href = url;
                        swal(
                                '¡Borrado!',
                                'Se recargará la página',
                                'success'
                                )
                    }
                })
            }
    </script>
{% endblock javascripts %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset("/vendors/viewerjs/dist/viewer.min.css") }} " />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.12.12/sweetalert2.min.css" integrity="sha256-UMECRhNIy5qi6DTXObx1btxdnaUjGECJ6reFqwVLv+E=" crossorigin="anonymous" />
{% endblock stylesheets %}