@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 class="col-md-8">
      <div class="row">
         Selección de año:
      </div>
      <div class="row">
         <ul class="nav nav-pills">
            <li role="presentation" class="active"><a class="yearSelector" data="2015">2015</a></li>
            <li role="presentation" ><a class="yearSelector" data="2014">2014</a></li>
         </ul>
      </div>
      @foreach ($listProjects as $project)
      @if( $project->getYear()== '2015' )
      <div class="lista_proyectos row" data='{{ $project->getYear() }}'>
         @else
         <div class="lista_proyectos row oculto" data='{{ $project->getYear() }}'>
            @endif
            <div class="descripcion_proyecto">
               <a href="{{ route('social-action-detail-project', [ 'id'=>$project->getAlias() ]) }}">{{ $project->getTitle() }}</a>
            </div>
         </div>
         @endforeach
      </div>
       <div class="spacer"></div>
      <div class="col-md-4">
         <img src="{{ asset($image) }}" class="img-responsive image-list-project">
      </div>
   </div>
   <div class="spacer"></div>
   <!-- /.row -->
   @stop

   @section('js-code-post')
   {!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
   <script>
      $(document).ready(function () {
         $(".yearSelector").click(function () {
            var year = $(this).attr('data');
            $(".yearSelector").parent().removeClass('active');
            $(this).parent().addClass('active');

            $(".lista_proyectos").removeClass('oculto');

            $(".lista_proyectos").each(function () {
               if (year !== $(this).attr('data'))
                  $(this).addClass('oculto');
            });

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