<?php $__env->startSection('css'); ?>
<?php echo Minify::stylesheet('/css/socialAction.css')->withFullUrl(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('title'); ?>
<?php echo e(Lang::get('socialAction.listProject.listado de proyectos')); ?> - <?php echo e($name); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('description'); ?>
   <?php echo e(Lang::get('socialAction.listProject.listado de los proyectos')); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php echo Breadcrumbs::render('social-action-category-project', $name); ?>

<div class="container">
   <div class="titulo_categoria">
      <span><?php echo e(Lang::get('socialAction.listProject.accion social')); ?></span>
      <div class="subtitulo_categoria"><?php echo e($name); ?></div>
   </div>
   <div class="row">
      <div class="titulo col-md-12">
         <?php echo e(Lang::get('socialAction.listProject.listado de proyectos')); ?> - <?php echo e($name); ?>

      </div>
   </div>
  
   <div id="accionSocialList" idioma=<?php echo e($codIdioma); ?> url=<?php echo e($url); ?> codigo=<?php echo e($id); ?> source=<?php echo e($source); ?> class="row">
      <div v-if="!isYearsEmpty" class="col-md-8">
         <div class="row">
            <?php echo e(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"> <?php echo e(Lang::get('socialAction.listProject.no proyectos año')); ?></p>
      </div>
      <div v-else class="col-md-8">
         <p class="text-justify"> <?php echo e(Lang::get('socialAction.listProject.no proyectos')); ?></p>
      </div>
             
      <div class="col-md-4">
         <img src="<?php echo e(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 = "<?php echo e(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 = "<?php echo e(route('social-action')); ?>"
                    location.href = route
                }
            },
        },
        

    });

           
</script>

   <?php $__env->stopSection(); ?>

   <?php $__env->startSection('js-code-post'); ?>
   <?php echo Minify::javascript('/js/custom.js')->withFullUrl(); ?>

 
   <?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>