@extends('layouts.base')

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

@section('title')
{{Lang::get('socialAction.listProject.listado de proyectos')}} - {{ $name }}
@stop
@section('description')
   {{Lang::get('socialAction.listProject.listado de los proyectos')}}
@stop

@section('content')
{!! Breadcrumbs::render('social-action-category-project', $name) !!}
<div class="container">
   <div class="titulo_categoria">
      <span>{{Lang::get('socialAction.listProject.accion social')}}</span>
      <div class="subtitulo_categoria">{{ $name }}</div>
   </div>
   <div class="row">
      <div class="titulo col-md-12">
         {{Lang::get('socialAction.listProject.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">
            {{Lang::get('socialAction.listProject.seleccion 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>
                  <a href="#" v-on:click="goto_route(pas)">
                     @{{pas.nombre}}
                  </a>
               </h3>
            </div>
            <div class="caption">
               <p v-html="pas.descripcion" class="text-justify"></p>
            </div>
         </div>
         <p v-if="!isYearsEmpty && isListaEmpty" class="text-justify"> {{Lang::get('socialAction.listProject.no proyectos año')}}</p>
      </div>
      <div v-else class="col-md-8">
         <p class="text-justify"> {{Lang::get('socialAction.listProject.no 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: { 
            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 () {
            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
                    this.listadoYears = response.data.years
                    if (this.listadoYears.length > 0) { //Selección de primer elemento
                     this.yearSelected = this.listadoYears[0]                     
                    }               
                })            
            
        },
    
        methods: {
            isYearSelected(year) {               
               return (year == this.yearSelected)
            },
            selectYear(year) {
               this.yearSelected = year
            },
            goto_route: function(pas) {

                if (pas.id !== null) {
                    route = "{{route('social-action-detail-project', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                    route = route.replace('?id?', pas.id)
                    route = route.replace('?nombre?', pas.nombre)
                    location.href = route
                } else { 
                    route = "{{route('social-action')}}"
                    location.href = route
                }
            },
        },
        

    });

           
</script>

   @stop

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