@extends('layouts.app')

@section('conteudo')



<br><br>
<center>
    @if ($errors->has('foto1'))
        <div class="alert alert-danger">
            {{ $errors->first('foto1') }}
        </div>
    @endif
    @if ($errors->has('foto2'))
        <div class="alert alert-danger">
            {{ $errors->first('foto2') }}
        </div>
    @endif
    @if ($errors->has('foto3'))
        <div class="alert alert-danger">
            {{ $errors->first('foto3') }}
        </div>
    @endif
    @if ($errors->has('foto4'))
        <div class="alert alert-danger">
            {{ $errors->first('foto4') }}
        </div>
    @endif
    </center>


<div style="color: black;">

  <div class="caso  text-center">
    <h1>Chamada</h1>

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

    <!-- Form Inline - Alternative Style -->
    <form action="#" method="POST" enctype="multipart/form-data">
      <div class="row  g-4 align-items-center">
        @csrf

        <!-- trazer todas as organizações -->
        <div class="col-12 col-sm-6 col-lg-4">
          <label class="form-label" for="example-select">Organização</label>
          <select class="form-select" id="select1" name="organizacao">
            @foreach($options1 as $item)
            <option selected value="{{$item->id}}">{{$item->nome}}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12 col-sm-6 col-lg-4">
          <label class="form-label" for="example-select">Projeto</label>
          <select class="form-select" id="select2" name="projeto_id">
            <option value="" selected></option>
            @foreach($options2 as $item)
            <option value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
          </select>
        </div>
        <!-- trazer todas as organizações -->
        <div class="col-12 col-sm-6 col-lg-4">
          <label class="form-label" for="example-select">Turmas</label>
          <select class="form-select" id="select3" name="turma">
          <option value="" ></option>
            @foreach($turmas as $item)
            <option value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
          </select>
        </div>


    </form>

  </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
</div>


<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;


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

        console.log(data);

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

    document.querySelector('#select3').addEventListener('change', function() {
      let value = this.value;
      // use o método fetch para enviar a requisição
      window.location.href = "/registar_chamada_por_turma/" + value;

    });

  });

  document.getElementById("input").addEventListener("keypress", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
  }
});


</script>




@endsection