<?php $__env->startSection('css'); ?>
<?php echo Minify::stylesheet('/css/centersEcca.css')->withFullUrl(); ?>

<?php echo HTML::style('https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css'); ?>

<?php echo Minify::stylesheet('/css/dataTable.css')->withFullUrl(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('title'); ?>
Localizaciones Radio ECCA
<?php $__env->stopSection(); ?>
<?php $__env->startSection('description'); ?>
Localizaciones, contactos, emails y teléfonos de los diferentes centros zonales y de orientación de Radio ECCA.
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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>
               <?php foreach($centers as $center): ?>
               <?php if($center['address']): ?>
               <tr>
                  <td>
                     <button class="searchCoords" value="<?php echo e($center['address']['street']); ?> , <?php echo e($center['address']['postal_code']); ?>, Spain" >
                        <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                     </button>                     
                  </td>
                  <td>
                     <?php echo e($center['name']); ?>

                  </td>
                  <td>                        
                     <?php echo e($center['address']['street']); ?> , <?php echo e($center['address']['postal_code']); ?>

                  </td>
                  <td>
                     <?php if( $center['phone']['mobile']): ?>
                     <span title="Tlf Móvil" class="tlf-type glyphicon glyphicon-phone" aria-hidden="true"><?php echo e(str_replace(" ", "", $center['phone']['mobile'])); ?></span>
                     <?php endif; ?>
                     <?php if( $center['phone']['home']): ?>
                     <span title="Tlf Casa" class="tlf-type glyphicon glyphicon-earphone" aria-hidden="true"><?php echo e(str_replace(" ", "", $center['phone']['home'])); ?></span>
                     <?php endif; ?>
                     <?php if( $center['phone']['office']): ?>
                     <span title="Tlf Oficina" class="tlf-type glyphicon glyphicon-phone-alt" aria-hidden="true"><?php echo e(str_replace(" ", "", $center['phone']['office'])); ?></span>
                     <?php endif; ?>
                  </td>
                  <td>
                     <a href="mailto:<?php echo e($center['email']); ?>?Subject=Contacto%20Web%20Localizacion" target="_top">
                        <?php echo e($center['email']); ?>

                     </a>
                  </td>
               </tr>
               <?php endif; ?>
               <?php endforeach; ?>
            </tbody>
         </table>     
      </div>

   </div>
</div>
<div class="spacer"></div>   
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js-code-post'); ?>
<?php echo HTML::script('https://maps.googleapis.com/maps/api/js?v=3'); ?>

<?php echo HTML::script('https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'); ?>

<?php echo 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>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>