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

@section('content')
    <section class="cabecera">  
      <div class="container">
        <div class="row">
        <div class="homeleft col-xl-2 col-md-12">
          <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 col-xl-10 col-md-12">
          <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}} @if($curso->actiufrontend == 0)inactiufrontend @endif">
                  
                  @if($curso->actiufrontend == 1)
                    <a href="/cursos/{{$curso->id}}" class="cursolinkhome"><div class="cursohome-bg-image" style="background: url('/images/cursos/{{$curso->imatge}}')"><span class="actiuinactiu">Actiu</span></div></a>
                  @else
                    <!--<div class="cursohome-bg-image" style="background: url('/images/cursos/{{$curso->imatge}}')"><span class="actiuinactiu">Inactiu</span></div>-->
                    <a href="/cursos/{{$curso->id}}" class="cursolinkhome"><div class="cursohome-bg-image" style="background: url('/images/cursos/{{$curso->imatge}}')"><span class="actiuinactiu">Pendent de data d'inici</span></div></a>
                  @endif
                
                <div class="cursosbadge {{$curso->categoriasformacio}}">{{$curso->categoriasformacio}}</div>
                <div class="contentcursohome">
                  @if($curso->actiufrontend == 1)
                    <a href="/cursos/{{$curso->id}}" class="cursolinkhome"><h2>{{$curso->name}}</h2></a>
                  @else
                    <h2>{{$curso->name}}</h2>
                  @endif
                  <!--<div>{{$curso->descripciocurta}}</div>-->
                </div>
              </div>
            </div>
          @php
          $i++;
          @endphp 
          @endforeach
          <div class="clearfix"></div><br>
          {{ $cursos->onEachSide(1)->links() }}
        </div>
      </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>