{% extends "base.html.twig" %}
{% block main %}
    <div class="row">
        <div class="col-md-8 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Histórico</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-striped table-responsive DataTable5">
                        <thead>
                            <tr>
                                <th>Parte</th>
                                <th>Proyecto</th>
                                <th>Establecimiento</th>
                                <th>Inicio / Fin</th>
                            </tr>
                        <thead>
                        <tbody>
                            {% for parte in partes %}
                                <tr>
                                    <td><a href="{{ path("tecnico_parte_resumen",{'parte':parte.id}) }}">{{ parte.ident }}</a></td>
                                    <td><a href="{{ path("tecnico_parte_resumen",{'parte':parte.id}) }}">{{ parte.proyecto }}</a></td>
                                    <td><a href="{{ path("tecnico_parte_resumen",{'parte':parte.id}) }}">{{ parte.establecimiento }}</a></td>
                                    <td><a href="{{ path("tecnico_parte_resumen",{'parte':parte.id}) }}">
                                            {{ parte.fechaInicio.format("d-m-Y H:i")|default() }}<br />
                                            {{ parte.fechaFin.format("d-m-Y H:i")|default() }}
                                        </a></td>
                                </tr>
                            {% endfor %}
                        <tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Direcciones <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div id="mapaTiendas" style="width:100%; height: 350px"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock main %}
{% block javascripts %}
    <script>
        var map;
        var pos;
        function initMap() {
            map = new google.maps.Map(document.getElementById('mapaTiendas'), {
                zoom: 11,
                center: {lat: -33.9, lng: 151.2}
            });
            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");
            }

        {% for parte in partes %}
                var marker = new google.maps.Marker({
                    position: {lat:{{parte.establecimiento.direccion.lat|default("0.0")}}, lng:{{parte.establecimiento.direccion.long|default("0.0")}}},
                    map: map
                });
        {% endfor %}
            }

    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgQoPE-2JRlbdjoA5nU75ASxqmEDdxi-o&callback=initMap">
    </script>

{% endblock javascripts %}