@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/delegation.css')->withFullUrl() !!}
{!! HTML::style('https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css') !!}

@stop

@section('title')
Localizaciones Radio ECCA
@stop
@section('description')
Localizaciones, contactos, emails y teléfonos de los diferentes centros zonales y de orientación de Radio ECCA.
@stop

@section('content')
<div id="map-canvas">
</div>
<div class="container delegation-wrapper">
    <div class="info-center oculto">
    </div>
    <div class="verTodosMarkerWrapper">
        <button class="verTodosMarker">Ver todos</button>
    </div>
    <!--             <div class="titulo_categoria">
                    <span>Delegaciones</span>
                    <div class="subtitulo_categoria">{{ $name }}</div>
                 </div>-->
    <!--    <br>
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <img style="float: left" height="32" src="{{ asset('img/summer.jpg') }}">
                <a target="_blank" href="{{ asset('files/documents/centros_zonales_verano.pdf') }}">
                    <h2 style="font-size: 25px">&nbsp;Descargar horarios de centros para el verano 2016</h2>
                </a>
            </div>
        </div>-->
    <br>
    <div class="row">
        <div class="col-md-12">
            <div class="titulo">
                Listado de centros
            </div>
            <div class="table-responsive">
                <table class="table delegation_table" id="centersTable">
                    <thead>
                        <tr>
                            <td>
                            </td>
                            <td>
                                Centro
                            </td>
                            <td>
                                Dirección
                            </td>
                            <td>
                                Teléfono
                            </td>
                            <td>
                                Email
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($centers as $center)
                        <tr>
                            <td>
                                <button class="verMarker" id="{{ $center['id'] }}">
                                    <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                                </button>
                            </td>
                            <td>
                                {{ $center['name'] }}
                            </td>
                            <td>
                                {{ $center['address'] }}
                            </td>
                            <td>
                                {{ $center['phone'] }}
                            </td>
                            <td>
                                <a href="mailto:{{ $center['email'] }}?Subject=Contacto%20Web%20Localizacion" target="_top">
                                    {{ $center['email'] }}
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
<div class="spacer"></div>
@stop

@section('js-code-post')
{!! HTML::script('https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAqxd1Bkvx_Kn93w5rfoAJNO9hEeaqduq8') !!}
{!! HTML::script('https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js') !!}
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
<script>
   $(document).ready(function () {
       $('#centersTable').dataTable({
           "language": {
               "url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Spanish.json"
           }
       });
   });


   var myCenter = new google.maps.LatLng(centerMap.lat, centerMap.lon);
   var infowindow = new google.maps.InfoWindow();
   var markers = [];
   var map;

   function initialize()
   {
       var mapOptions = {
           zoom: 4,
           disableDefaultUI: true,
           center: myCenter
       };
       map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
       $.each(centers, function (i, data) {
           var marker = new google.maps.Marker({
               position: new google.maps.LatLng(data.lat, data.lon),
               map: map,
               title: data.name,
               icon: icon,
               id: data.id
           });
           markers.push(marker);
           var content =
                   "<div class='col-md-7 col-xs-7'>\n\
            <div class='name'>" + data.name + "</div>\n\
            <div class='address'><span class='glyphicon glyphicon-map-marker' aria-hidden='true'></span>" + data.address + "</div>\n\
            <div class='phone'><span class='glyphicon glyphicon-earphone' aria-hidden='true'></span>" + data.phone + "</div>\n\
         </div>\n\
         <div class='col-md-5 col-xs-5'>\n\
            <div class='center-img-wrapper' style='background-image: url(" + imgPath + data.image + ")'></div>\n\
         </div>";
           bindInfoWindow(marker, map, infowindow, content);
       });
   }

   function bindInfoWindow(marker, map, infowindow, description) {
       google.maps.event.addListener(marker, 'click', function () {
           $(".info-center").removeClass("oculto");
           $(".info-center").html(description);
           //clearMarkers();
           //setAllMap(map);
           cleanToggleBounce();
           toggleBounce(marker);
           var i = getPosFromId(marker.id);
           reposition(i);
           //infowindow.setContent(description);
           //infowindow.open(map, marker);
       });
   }
   ;

   function getPosFromId(id) {
       for (var i = 0; i < markers.length; i++) {
           if (markers[i].id == id) {
               return i;
           }
       }
   }

   function setMarkerByPos(i) {
       markers[i].setMap(map);
       return;
   }

   // Borra los markers pero los mantiene en el array
   function clearMarkers() {
       setAllMap(null);
   }
   ;

   // Coloca y muestra todos los markers en el mapa
   function setAllMap(map) {
       for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(map);
       }
   }

   //  Mueve el viewport hacia el marker q le indicamos
   function reposition(i) {
       map.panTo(markers[i].getPosition());
   }

   function repositionToCenter() {
       map.panTo(myCenter);
   }

   function zoomRestore() {
       map.setZoom(4);
   }

   function cleanToggleBounce() {
       for (var i = 0; i < markers.length; i++) {
           markers[i].setAnimation(null);
       }
   }

   function toggleBounce(my_marker) {
       if (my_marker.getAnimation() != null) {
           my_marker.setAnimation(null);
       } else {
           my_marker.setAnimation(google.maps.Animation.BOUNCE);
       }
   }

   google.maps.event.addDomListener(window, 'load', initialize);
</script>

@stop