@extends('layouts.app')
@section('metadata')
<title>Formació i ocupació - Ajuntament de Cardedeu</title>
@endsection

@section('content')
    <section class="cabecera">  
      <div class="container">
        <div class="homeleft">
          <div class="homeleftintern">
            <ul>
              <li><a href="#" onclick="fitrarCursos('cursohome-block')" class="">Tots els cursos</a></li>
              <li><a href="#" onclick="fitrarCursos('ocupacional')" class="">Formació ocupacional</a></li>
              <li><a href="#" onclick="fitrarCursos('ocupabilitat')" >Formació d’ocupabilitat</a></li>
              <li><a href="#" onclick="fitrarCursos('competencies')" >Formació de competències</a></li>
              <li><a href="#" onclick="fitrarCursos('joves')" >Formació per joves</a></li>
            </ul>
          </div>
        </div>
        <div class="homeright">
          <h2 class="text-center">Cursos i tallers</h2>
          @php
          $i=0;
          @endphp
          @foreach($cursos as $curso)

            <div class="cursohome-block {{$curso->categoriasformacio}}" style="display: block;">
              <div class="cursohome-block-intern animate pop delay-{{$i}}">
                
                  <a href="/cursos/{{$curso->id}}" class="cursolinkhome"><div class="cursohome-bg-image" style="background: url('/images/cursos/{{$curso->imatge}}')"></div></a>
                
                <div class="cursosbadge {{$curso->categoriasformacio}}">{{$curso->categoriasformacio}}</div>
                <div class="contentcursohome">
                  <a href="/cursos/{{$curso->id}}" class="cursolinkhome"><h2>{{$curso->name}}</h2></a>
                  <!--<div>{{$curso->descripciocurta}}</div>-->
                </div>
              </div>
            </div>
          @php
          $i++;
          @endphp 
          @endforeach
          <div class="clearfix"></div><br>
          {{ $cursos->onEachSide(1)->links() }}
        </div>
      </div>
    </section>
            
      <div class="clearfix"></div>

@endsection

<script>
  function fitrarCursos(categoriacurso){
    var cursostodos = document.getElementsByClassName('cursohome-block');
    var cursos = document.getElementsByClassName(categoriacurso);
    //console.log(cursostodos);

    for (let item of cursostodos) {
        item.style.display = "none";
    }

    for (let item of cursos) {
        item.style.display = "flex";
    }

    /*for (let item of cursos) {
      if (item.style.display === "none") {
        item.style.display = "flex";
        $(this).addClass('categoriacurso');
      } else {
        item.style.display = "none";
      }
    }*/
  }
</script>