@extends('layouts.app')

@section('conteudo')

<br><br>

<div style="color: black;">

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



    <!-- 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-3">
          <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-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-4">
          <label class="form-label" for="example-select">Turmas</label>
          <select class="form-select" id="select3" name="turma">
            <option value="" selected></option>
            @foreach($turmas as $item)
                <option value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
          </select>
        </div>
        <div class="col-1">
          <span class="input-group-text border-0 bg-body">
            <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
          </span>
        </div>
        <hr>

        <!-- deixar esses campos ocultos só trazer depois que clicar em pesquisar -->
        <!-- card com as informações para o professor ver se estar certo ao clicar aparecer em baixo para fazer a chamada -->
        <!-- <div class="block block-rounded">
          <div class="block-content block-content-full">
            <div class=" row d-sm-flex">
              <p class="text-muted col-7">
                Professor
              </p>
              <p class="text-muted col-3">
                Turma
              </p>
              <p class="text-muted col-3">
                Projeto
              </p>
              <p class="text-muted col-3">
                Período
              </p>
              <p class="text-muted col-3">
                Ano
              </p>
              <p class="col-3">
                  <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
              </p>
            </div>
          </div>
        </div> -->

        <!-- trazer preenchido o nome do professor, turma, projeto, data e a lista com os alunos matriculados -->
        <div class="col-8">
          <label class="form-label" for="example-select">Professor</label>
          <input type="text" class="form-control" id="professor" name="professor" value="">
        </div>
        <div class="col-4">
          <label class="form-label" for="example-select">Data</label>
          <input type="date" class="form-control" id="date" name="data" value="">
        </div>
        <div class="col-4">
          <label class="form-label" for="example-select">Turma</label>
          <input type="text" class="form-control" id="turma" name="turma" value="">
        </div>
        <div class="col-4">
          <label class="form-label" for="example-select">Projeto</label>
          <input type="text" class="form-control" id="projeto" name="projeto" value="">
        </div>
        <div class="col-4">
          <label class="form-label" for="example-select">Imagens da aula</label>
          <input type="file" class="form-control" id="aula" name="aula">
        </div>
        <div class="col-12">
          <label class="form-label" for="example-select" style="text-align: right;">Descrição do que foi feito em aula</label>
          <!-- <input type="text" class="form-control" id="descricao" name="descricao"> -->
          <br>
          <textarea name="descricao" id="descricao" cols="110" rows="3"></textarea>
        </div>
        
        <hr>
        @if($estudantes)
        <div class="col-12">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">RM</th>
                <th scope="col">Nome</th>
                <th scope="col">Presença</th>
                <th scope="col">Observação</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td scope="row">trazer os rm </td> <!-- trazer os rm -->
                <td scope="row">trazer os nomes</td> <!-- trazer os nomes -->
                <td scope="row"><input type="checkbox" class="form-check-input" id="chamadaCheck" name="observacoes"></td> <!-- deixar todos checados para desmarcar quem não veio -->
                <td scope="row"><input type="text" class="form-control" id="chamadaObs" name="chamadaObs"></td> <!-- deixar campo para escrever -->
              </tr>
            </tbody>
          </table>
        </div>
        @endif
        <div class="col-12">
          <label class="form-label" for="example-select">Observações</label>
          <input type="text" class="form-control" id="observacoes" name="observacoes">
        </div>
      </div>
      <hr>
      <!-- Regra caso o aluno já tenha cursado ou não ter mais a idade trazer alerta do motivo de não salvar -->
      <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1">
            <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Registrar Chamada
          </button> </a> </center>


    </form>

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

        });

    });
  </script>




    @endsection