@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">
        
        @if ($type == 'cursos')
          <div class="homeleft col-xl-2 col-md-12">
            <br>
            <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>
            <br>
            <div class="botoinscripcio"><a href="/docents">VULL TREBALLAR COM A DOCENT</a></div>
          </div>
        @endif


        <div class="homeright col-xl-10 col-md-12">
          <br><h2 class="text-center capitalize">{{$type}}</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)
                    @if($curso->preinscripcio == 1)
                      <a href="/cursos/{{$curso->id}}" class="cursolinkhome"><div class="cursohome-bg-image" style="background: url('/images/cursos/{{$curso->imatge}}')"><span class="actiuinactiu">Pre inscripcions</span></div></a>
                    @else
                      <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>
                    @endif
                  @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">Inactiu</span></div></a>
                  @endif
                
                @if($curso->type == 'curs')
                  <div class="cursosbadge {{$curso->categoriasformacio}}">{{$curso->categoriasformacio}}</div>
                @endif
                <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>