{% extends "base.html.twig" %}
{% block main %}
    <div class="page-title">
        <div class="title_left">
            <h3>Parte {{ parte.ident }}</h3>
        </div>

        <div class="title_right">
            <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </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>
                                    </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">
                                <h5>{{ parte.establecimiento }}</h5>
                                <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 id="mapaTienda" style="width:100%; height: 300px;overflow: visible"></div>
                            </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")}}
                                </p>
                            </div>
                        </div>
                    </div>
                </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_acceptar",{"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" class="name"></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>
                            </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">
            <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 iniciar_parte">
                    <form method="POST" action="{{ path("tecnico_parte_acceptar",{"parte":parte.id}) }}" id="inp_form">
                        {#  <input type="submit" name="iniciar-parte" id="iniciar-parte" value="Iniciar" class="btn btn-success" disabled>#}
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock main %}
{% block javascripts %}
    <script src="{{ asset("/js/upFoto.js") }}"></script>

    <script>
        $("#inp_form").upFoto({btn: {style: 'btn btn-success', text: 'Subir Foto - Iniciar'}});
        // $("#inp_form_iniciar").upFoto({btn: {style: 'btn btn-success', text: 'Subir Foto'}});

        function addFoto() {
            navigator.geolocation.getCurrentPosition(function (position) {
                $('#inp_lat').val(position.coords.latitude);
                $('#inp_long').val(position.coords.longitude);
            }, function () {
                gpsError('{{ app.request.getSchemeAndHttpHost() }}')
            });
            document.getElementById('inp_file').click();
        }
//        $("#inp_form").upFoto({btn: {style: 'btn btn-success', text: 'Iniciar'}});
        var map;
        var pos;
        var uluru = {lat:{{parte.establecimiento.direccion.lat|default("0.0")}}, lng:{{parte.establecimiento.direccion.long|default("0.0")}}};
        function initMap() {
            map = new google.maps.Map(document.getElementById('mapaTienda'), {
                zoom: 11,
                center: uluru,
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    var infowindow = new google.maps.Marker({
                        map: map,
                        position: pos,
                        icon: "{{ asset('/images/ico_mecanico_s.png')}}"
                    });
                    //map.setCenter(pos);
                }, function () {
                    alert("Tienes que habilitar la posición GPS para utilizar la aplicación.");
                    window.location.reload();
                });
            } else {
                console.log("Browser doen't support");
            }

        }
        $('.nav-tabs a').on('shown.bs.tab', function (event) {
            if ($(event.target).text() == "Mapa") {
                google.maps.event.trigger(map, 'resize');
                map.setCenter(uluru);
            }
        });
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgQoPE-2JRlbdjoA5nU75ASxqmEDdxi-o&callback=initMap">
    </script>


{% endblock javascripts %}