@extends('layouts.app')

@section('conteudo')

<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px; margin-top: 70px;">
  <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>
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

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




<div class="content content-boxed">
  <!-- Current Jobs -->
  <h2 class="content-heading">
    <i class="fa fa-briefcase text-muted me-1"></i> Listagem de Turma Desse Dia
  </h2>
  @foreach($turmas as $item)
  @if($item->situacao == 1)
  <div class="block block-rounded">
    <div class="block-content block-content-full">
      <div class="d-sm-flex">
        <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>
  @endif
  @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