{% extends "base.html.twig" %}
{% 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-tab" data-toggle="tab" aria-expanded="false">Establecimiento</a>
                            </li>
                            <li role="presentation" class=""><a href="#tab_content3" role="tab" id="profile-tab2" 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|default() }}</td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                                <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-tab">
                                <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="/uploads/{{file.file}}" style="width:100%"/>
                                    <span class="glyphicon-class">{{file.nombre}}</span>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>

            {% if parte.respuestas|length> 0 %}
                <div class="x_panel">
                    <div class="x_title">
                        <h2><i class="fa fa-map"></i> Respuestas <small>Si no hay incidencias no se mostrarán</small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        {% for respuesta in parte.respuestas %}
                            {% if respuesta.pregunta.tipo == "Terminales" %}
                                {% if respuesta.respuesta > 0 %}
                                    {{ respuesta.pregunta }} = {{ respuesta.mueble|default("") }} -> {{ respuesta.posicion|default("") }} -> {{ respuesta(respuesta.pregunta, respuesta.respuesta) }} <br />
                                {% endif %}
                            {% else %}
                                {{ respuesta.pregunta }} = {{ respuesta(respuesta.pregunta, respuesta.respuesta) }} <br />
                            {% endif %}
                        {% endfor %}
                    </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 %}
        </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 timer;
        var viewer = new Viewer(document.getElementById('images'));

        {% 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);
                }
            }

    </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 %}