@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 id="vueCentros" codIdioma="{{$codIdioma}}" url="{{$url}}" class="table-responsive">
         <table class="table delegation_table" id="centersTable">
            <thead>
               <tr>
                  <td><b>
                     Centro
                  </b></td>
                  <td><b>
                     Dirección
                     </b></td>
                  <td><b>
                     Teléfonos
                     </b></td>
                  <td><b>
                     Emails
                  </b></td>
                  <td style="text-align: center;"><b>
                     Mapa
                  </b></td>
               </tr>
            </thead>
            <tbody>
               <tr v-if="centros.length > 0" v-for="c in centros" :key="c.id">
                  <td v-html="c.nombre">
                  </td>
                  <td>
                     @{{ getDireccion(c.direccion) }}
                  </td>
                  <td>
                     <div v-if="c.telefonos.length > 0" v-for="tel in c.telefonos">
                        <span>@{{ tel.numero }}</span>
                     </div>
                     <div v-if="c.telefonos.length === 0">
                        -
                     </div>
                  </td>
                  <td>
                     <div v-if="c.correos.length > 0" v-for="correo in c.correos">
                        <span>@{{ correo.correo }}</span>
                     </div>
                     <div v-if="c.correos.length === 0">
                        -
                     </div>
                  </td>
                  <td style="text-align: center;">
                     <a v-if="c.direccion" target="_blank" :href="getUrlMapa(c.direccion)"><i class="fa fa-map-marker"></i></a>
                  </td>
               </tr>
            </tbody>
         </table>
         <div style="text-align: center;">
            <button :disabled="!pagina > 0" type="button" class="btn btn-info btn-flat" style="color: #ffffff;background-color: #0069ad;border-color: #0069ad;" v-on:click="goAnterior()">
               Anterior
            </button>
            <button :disabled="totalElementos === 0 || ((pagina+1)*10) >= totalElementos" type="button" class="btn btn-info btn-flat" style="color: #ffffff;background-color: #0069ad;border-color: #0069ad;" v-on:click="goSiguiente()">
               Siguiente
            </button>
         </div>
      </div>

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
</script>
@stop

@section('js-code-post')
<script>
$(document).ready(function () {
   const vue = new Vue({
      el: '#vueCentros',
      data: {
         pagina: 0,
         totalElementos: 0,
         centros: [],
         codIdioma: null
      },
      mounted() {
         this.codIdioma = this.$el.attributes.codIdioma.value
         this.getCentros();
      },
      methods: {
         getCentros : function() {
            var params = { params: { pagina: this.pagina } }
            axios
               .get(this.$el.attributes.url.value + '/findCentrosPublicos', params)
               .then(
                  response => {
                     console.log(response.data.content)
                     this.centros = response.data.content;
                     this.totalElementos = response.data.totalElements;
                  });        
         },
         goSiguiente: function() {
            this.pagina++;
            this.getCentros();
         },
         goAnterior: function() {
            this.pagina--;
            this.getCentros();
         },
         getDireccion: function(direccion) {
            if (direccion) {
               return (direccion.tipoVia ? direccion.tipoVia.idiomas.filter(i => i.codIdioma === this.codIdioma)[0].texto + " " : "")
                     + direccion.nombreVia 
                     + (direccion.numero ? " " + direccion.numero : "")
                     + (direccion.municipio ? ", " + direccion.municipio.nombre : "")
                     + (direccion.textMunicipio ? ", " + direccion.textMunicipio : "")
            }
            return "";
         },
         getUrlMapa: function(direccion) {
            let urlMapa = "https://www.google.es/maps/dir//";

            if (direccion.tipoVia.id !== 99) { // Se evita el tipo de vía 'Otros'
               urlMapa = urlMapa + direccion.tipoVia.idiomas.filter(i => i.codIdioma === this.codIdioma)[0].texto;
            }

            var nombreItems = direccion.nombreVia.split(" ");
            nombreItems.forEach(item => {
               urlMapa = urlMapa + "+" + item;
            })
            urlMapa = urlMapa + ",";

            if (direccion.numero) {
               urlMapa = urlMapa + "+" + direccion.numero;
            }

            if (direccion.municipio) {
               urlMapa = urlMapa + ",";
               var municipioItems = direccion.municipio.nombre.split(" ");
               municipioItems.forEach(item => {
                  urlMapa = urlMapa + "+" + item;
               })
            } else if (direccion.textMunicipio) {
               urlMapa = urlMapa + ",";
               var municipioItems = direccion.textMunicipio.split(" ");
               municipioItems.forEach(item => {
                  urlMapa = urlMapa + "+" + item;
               })
            }

            return urlMapa;
         }
      }
   });
});
</script>
@stop