@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/centersEcca.css')->withFullUrl() !!}
{!! HTML::style('https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css') !!}
{!! Minify::stylesheet('/css/dataTable.css')->withFullUrl() !!}
@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 class="modal-map" style="display: none">
   <div id="map-canvas">
   </div>
</div>
<div class="container delegation-wrapper">
   <div class="titulo_categoria" >
      <span>Centros de Radio ECCA</span>
   </div>
   <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éfonos
                  </td>
                  <td>
                     Email
                  </td>
               </tr>
            </thead>
            <tbody>
               @foreach ($centers as $center)
               @if($center['address'])
               <tr>
                  <td>
                     <button class="searchCoords" value="{{ $center['address']['street'] }} , {{ $center['address']['postal_code'] }}, Spain" >
                        <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                     </button>                     
                  </td>
                  <td>
                     {{ $center['name'] }}
                  </td>
                  <td>                        
                     {{ $center['address']['street'] }} , {{ $center['address']['postal_code'] }}
                  </td>
                  <td>
                     @if ( $center['phone']['mobile'])
                     <span title="Tlf Móvil" class="tlf-type glyphicon glyphicon-phone" aria-hidden="true">{{ str_replace(" ", "", $center['phone']['mobile']) }}</span>
                     @endif
                     @if ( $center['phone']['home'])
                     <span title="Tlf Casa" class="tlf-type glyphicon glyphicon-earphone" aria-hidden="true">{{ str_replace(" ", "", $center['phone']['home']) }}</span>
                     @endif
                     @if ( $center['phone']['office'])
                     <span title="Tlf Oficina" class="tlf-type glyphicon glyphicon-phone-alt" aria-hidden="true">{{ str_replace(" ", "", $center['phone']['office']) }}</span>
                     @endif
                  </td>
                  <td>
                     <a href="mailto:{{ $center['email'] }}?Subject=Contacto%20Web%20Localizacion" target="_top">
                        {{ $center['email'] }}
                     </a>
                  </td>
               </tr>
               @endif
               @endforeach
            </tbody>
         </table>     
      </div>

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

@section('js-code-post')
{!! HTML::script('https://maps.googleapis.com/maps/api/js?v=3') !!}
{!! HTML::script('https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js') !!}
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
<script type="text/javascript">
   var geocoder;
   var map;
   var first = 0;
   var marker =null;
   /*Inicializo el maps*/
   function initialize() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = {
         zoom: 8,
         center: latlng
      };
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      /*Genero un único marker*/
      marker = new google.maps.Marker({
         map: map,
         position: google.maps.LatLng(-34.397, 150.644)
      });
   }
   
   /*Geolocalizo  la posisión de la dirección*/
   function codeAddress(addressIn) {
      var address = addressIn;
      geocoder.geocode({'address': address}, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            /*Muevo el marker a donde me interese*/
            marker.setPosition(results[0].geometry.location);
         } else {
            alert("Geolocalización no es posible: " + status);
         }
      });
   }

   $(document).ready(function () {
      $('#centersTable').dataTable({
         "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Spanish.json"
         }
      });

      $('.searchCoords').click(function () {
         var address = $(this).val();
         $('.modal-map').toggle();
         if (first == 0) {
            initialize();
            first++;
            console.log("primero");
         }
         codeAddress(address);
      });

      $('.modal-map').on('click', function (e) {
         if (e.target !== this)
            return; //Si es el target que quiero no hace nada
         $(this).toggle();
      });

   });

</script>

@stop