@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/socialAction.css')->withFullUrl() !!}
@stop

@section('title')
Listado de proyectos - {{ $name }}
@stop
@section('description')
Listados de los proyectos en donde colabora Radio ECCA.
@stop

@section('content')
{!! Breadcrumbs::render('social-action-category-project', $name) !!}
<div class="container">
   <div class="titulo_categoria">
      <span>Acción Social</span>
      <div class="subtitulo_categoria">{{ $name }}</div>
   </div>
   <div class="row">
      <div class="titulo col-md-12">
      Listado de proyectos - {{ $name }}
      </div>
   </div>
  
   <div id="accionSocialList" idioma={{$codIdioma}} url={{$url}} codigo={{$id}} source={{$source}} class="row">
      <div v-if="!isYearsEmpty" class="col-md-8">
         <div class="row">
           Selección de año:
         </div>
         <div class="row">
            <ul class="nav nav-pills">
               <li v-for="(year,index) in listadoYears" :key="year" role="presentation" :class="{'active': isYearSelected(year)}" @click="selectYear(year)">
                  <a class="yearSelector">@{{ year }}
                  </a>
               </li>
            </ul>
           
         </div>      
         
         <div v-for="pas in getListadoProyectos" :key="pas.id">
            <div class="image-substitute-wrapper">
               <h3 style="font-size:18px">
                  <a href="#" v-on:click="goto_route(pas)">
                     @{{pas.nombre}}
                  </a>
               </h3>
            </div>
            <div class="caption">
               <p v-html="pas.descripcion" class="text-justify small"></p>
            </div>
         </div>
         <p v-if="!isYearsEmpty && isListaEmpty" class="text-justify"> No existen proyectos en el año seleccionado.</p>
      </div>
      <div v-else class="col-md-8">
         <p class="text-justify"> 'No se han encontrado proyectos</p>
      </div>
             
      <div class="col-md-4">
         <img src="{{ asset($image) }}" class="img-responsive image-list-project">
      </div>
      </div>
      
   </div>
   <div class="spacer"></div>
   <!-- /.row -->


<!-- 
    Componente Vue para cargar los datos
-->
<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">
    new Vue({
        el: '#accionSocialList',
        props:{
            codIdioma: String
        },
        
        data: { 
            proyectosPhp: {!! json_encode($listProjects) !!},
            yearsPhp: ["2020","2019","2018","2017","2016","2015","2014"],
            listadoProyectos: [],
            listadoYears: [],
            yearSelected: null,
            codigo: null,
        },
        created: function() {},
        computed: {
            getListadoProyectos: function() {
               return this.listadoProyectos.filter(pas => {
                    return pas.years.find(((y) => y == this.yearSelected))
                })
            },
            isListaEmpty: function() {
               return (this.getListadoProyectos.length == 0)
            },
            isYearsEmpty: function() {
               return (this.listadoYears.length == 0)
            }
            
        },
        mounted () {
           //Se comenta temporalmente hasta que se actualice producción
            /*let source = this.$el.attributes.source.value
            this.codIdioma = this.$el.attributes.idioma.value
            this.codigo = this.$el.attributes.codigo.value
            if (source == "cat")
               var params = { params: { idCategoria: this.codigo, idAmbito: null, codIdioma: this.codIdioma } } 
            else if (source == "loc") {
               var params = { params: { idCategoria: null, codAmbito: this.codigo, codIdioma: this.codIdioma } } 
            }

           axios
            .get(this.$el.attributes.url.value + '/findAccionSocialWebPublica', params)
            .then(
                response => {
                    this.listadoProyectos = response.data.proyectos.concat(this.proyectosPhp)
                    this.listadoYears = response.data.years.concat(this.yearsPhp)
                    if (this.listadoYears.length > 0) { //Selección de primer elemento
                     this.yearSelected = this.listadoYears[0]                     
                    }               
                })        */    

                //Temporal (solo Eccanet)
                this.listadoProyectos = this.proyectosPhp;
                this.listadoYears = this.yearsPhp; 
                this.yearSelected = this.listadoYears[0]
        },
    
        methods: {
            isYearSelected(year) {               
               return (year == this.yearSelected)
            },
            selectYear(year) {
               this.yearSelected = year
            },
            goto_route: function(pas) {
                if (pas.id != undefined) {
                    route = "{{route('social-action-detail-project', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                    route = route.replace('?id?', pas.id)
                    var formatName = pas.nombre.replaceAll('/','_slash_')
                    route = route.replace('?nombre?', formatName)
                    location.href = route
                } else if (pas.alias != null) {
                    route = "{{route('social-action-detail-projectLocal', ['alias' => '?alias?'])}}"
                    route = route.replace('?alias?', pas.alias)                    
                    location.href = route
                }
                else { 
                    route = "{{route('social-action')}}"
                    location.href = route
                }
            },
        },
        

    });

           
</script>

@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}

@stop