{% 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-5">
                                    <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>
                                    </table>
                                </div>

                                <div class="col-md-7">
                                    <h4>Descripción proyecto</h4>
                                    <p>{% autoescape false %}{{ parte.proyecto.texto|nl2br()|default()}}{% endautoescape %}</p>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                                <p>

                                    {{ parte.establecimiento}}
                                    <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="{{ asset('/uploads/'~file.file)}}" style="width:100%"/>
                                    <span class="glyphicon-class">{{file.nombre}}</span>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                </div>
                <div class="x_footer">
                    <form method="POST" action="{{ path("tecnico_parte_foto_ajax",{"parte":parte.id}) }}" id="inp_form">
                        <label>Descripción</label>
                        <textarea name="nombre" class="name"></textarea>
                    </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>
                            </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 %}
                                {% for movimiento in respuesta.movimiento %}
                                    <tr>
                                        <td>{{ movimiento.material }}</td>
                                        <td>{% if movimiento.tipo == 'Instalado' %} - {% endif %}{{ movimiento.cantidad }}</td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        </table>
                    </div>
                    <div class="x_footer">
                        <h3>Observaciones</h3>
                        {{parte.observaciones}}
                    </div>
                </div>
            {% endif %}
        </div>


        <div class="col-md-4 col-xs-12">
            {% if parte.fechaFin is null %}
                <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>
                <div class="x_panel">
                    <div class="x_title">
                        <h2><i class="far fa-cog"></i> Actions <small></small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <a href="{{ path("tecnico_parte_ficha",{'parte':parte.id}) }}" class="btn btn-success btn-lg">Ficha</a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock main %}

{% block javascripts %}
    <script src="{{ asset("/vendors/viewerjs/dist/viewer.min.js") }}"></script>
    <script src="{{ asset("/js/upFoto.js") }}"></script>
    <script>
        var viewer = new Viewer(document.getElementById('images'));
        $("#inp_form").upFoto({viewer: viewer});

        var timer;

        {% if parte.fechaInicio is not 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") }} " />
{% endblock stylesheets %}