@extends('layouts.app')

@section('conteudo')

<!-- Hero -->
<div class="bg-image" style="background-image: url('');">
  <div class="bg-black-50">
    <div class="content content-full">
      <div class="d-flex justify-content-between align-items-center">
        <h1 class="flex-grow-1 fs-2 text-white my-2">
          <i class="fa fa-boxes text-white-50 me-1"></i> Turmas
        </h1>
        <!-- @can('pode_registrar_turma') -->
        <!-- <a class="btn btn-primary my-2" href="/registar_turma">
         <i class="fa fa-fw fa-plus"></i>
          <span class="d-none d-sm-inline ms-1">Registrar Turma</span>
        </a> -->
        <!-- @endcan -->
        <!-- @can('pode_visualizar_turma') -->
        <!-- <a class="btn btn-primary my-2" href="/turmas_antigas" style="margin-left: 10px;">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Turmas Antigas</span>
        </a> -->
        <!-- @endcan -->
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->


{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_turma')
<br><br>

<div class="col-3" style="display: inline-block;">
  <label class="form-label" for="funcionario_id">Filtrar por Organização</label>
  <select id="select1" class="form-select col-6">
    @foreach($options1 as $option)
    <option value="{{ $option->id }}">{{ $option->nome }}</option>
    @endforeach
  </select>
</div>

<div class="col-3" style="display: inline-block;">
  <label class="form-label" for="funcionario_id">Filtrar por Projeto</label>
  <select id="select2" class="form-select col-6">
    <option value=""></option>
    @foreach($options2 as $option)
    <option value="{{ $option->id }}">{{ $option->descricao }}</option>
    @endforeach
  </select>
</div>




<div class="content content-boxed">
  <!-- Current Jobs -->
  <h2 class="content-heading">
    <i class="fa fa-briefcase text-muted me-1"></i> Listagem de Turmas com Vagas em Aberto
  </h2>
  @foreach($turmas as $item)
  <div class="block block-rounded">
    <div class="block-content block-content-full">
      <div class="d-sm-flex">
        <div class="ms-sm-2 me-sm-4 py-2 text-center">
          <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="javascript:void(0)">
            <i class="fab fa-fw fa-cloudsmith"></i>
          </a>
          <!-- <div class="btn-group btn-group-sm">
            @can('pode_editar_turma')
            <a class="btn btn-alt-secondary" href="/editar_turma/{{$item->id}}">
              <i class="fa fa-pencil-alt text-info"></i>
            </a>
            @endcan
            @can('pode_eliminar_turma')
            <a class="btn btn-alt-secondary" href="/eliminar_turma/{{$item->id}}">
              <i class="fa fa-times text-danger"></i>
            </a>
            @endcan
          </div> -->
        </div>
        <div class="py-2">
          <a class="link-fx h4 mb-1 d-inline-block text-dark" href="/visualizar_turma/{{$item->id}}">
            {{$item->descricao}}
          </a>
          <p class="text-muted mb-2">
            {{$item->observacoes}}
          </p>
        </div>
      </div>
    </div>
  </div>
  @endforeach

  {{ $turmas->links() }}

</div>
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>

@endcan
<!-- END Page Content -->



<script>
  document.querySelector('#select1').addEventListener('change', function() {
    let value = this.value;

    // use o método fetch para enviar a requisição
    fetch('{{ route('selects.filter_projetos_por_organizacao') }}', {
          method: 'POST',
          body: JSON.stringify({
            _token: '{{ csrf_token() }}',
            value: value
          }),
          headers: {
            'Content-Type': 'application/json'
          }
        })
      .then(response => response.json())
      .then(data => {
        let select2 = document.querySelector('#select2');
        select2.innerHTML = '';


        // use o método forEach para percorrer as opções filtradas e adicioná-las ao select2
        data.forEach(function(item) {
          let option = document.createElement('option');
          option.value = item.id;
          option.text = item.descricao;
          select2.appendChild(option);
        });
      });
  });

  document.querySelector('#select2').addEventListener('change', function() {
    let value = this.value;

    // use o método fetch para enviar a requisição
    window.location.href = "/visualizar_turmas_recentes_por_projeto_selecionado/" + value;
  });
</script>




@endsection