@extends('layouts.app')

@section('conteudo')

<br><br>

@if (session('erro'))
{{-- expr --}}
<div class="alert alert-danger" role="alert">
  {{session('erro')}}
</div>
@endif

<div style="color: black;">

  <div class="caso  text-center">
    <h1>Nota</h1>
    {{-- só quem tem permissão para visualizar esta página --}}
    @can('pode_visualizar_nota')


    <!-- Form Inline - Alternative Style -->
    <form action="/salvar_nota" 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-3 col-lg-3">
          <label class="form-label" for="example-select">Organização</label>
          <select class="form-select" id="select1" name="organizacao_id">
            @foreach($options1 as $item)
            <option {{$item->id == $turma->organizacao_id ? 'selected' : ''}} selected value="{{$item->id}}">{{$item->nome}}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12 col-sm-4 col-lg-4">
          <label class="form-label" for="example-select">Projeto</label>
          <select class="form-select" id="select2" name="projeto_id">
            @foreach($options2 as $item)
            <option {{$item->id == $turma->projeto_id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
          </select>
        </div>
        <!-- trazer todas as organizações -->
        <div class="col-10 col-sm-4 col-lg-4">
          <label class="form-label" for="example-select">Turmas</label>
          <select class="form-select" id="select3" name="turma_id">
            @foreach($turmas as $item)
            @if($item->situacao == 1)
            <option {{$item->id == $turma->id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
            @endif
            @endforeach
          </select>
        </div>
        <div class="col-2 col-sm-1 col-lg-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>

        <!-- trazer preenchido o nome do professor, turma, projeto, data e a lista com os alunos matriculados -->
        <div class="col-12 col-sm-12 col-lg-12">
          <select class="form-control" id="funcionario_id" name="funcionario_id" value="{{$turma->funcionario_id}}" disabled>
            <option value="{{$funcionario->id}}">{{$funcionario->nome_completo}}</option>
          </select>
        </div>

        @if($estudantes)
        <div class="col-12">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">Nome</th>
                {{-- <th scope="col">Faltas</th> --}}
                <th scope="col">1º Semetre</th>
                <th scope="col">2º Semetre</th>
                <th scope="col">Média FINAL</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($notas as $item)
              <tr>
                <td scope="col">{{$item['nome']}}</td>
                {{-- <td scope="col"><input type="number" min="0" max="20" class="form-control" id="faltas" name="faltas" disabled></td> --}}
                <td scope="col"><input type="number" min="0" max="20" class="form-control input-notas input-notas1" id="primeiro_semestre" name="primeiro_semestre[]" value="{{$item['notas'][0]['valor']}}" data-id-nota="{{$item['notas'][0]['id_nota']}}"></td>
                {{-- <td scope="col"><input type="number" min="0" max="20" class="form-control input-notas input-notas2" id="segundo_semestre" name="segundo_semestre[]" value="{{$item['notas'][1]['valor']}}" data-id-nota="{{$item['notas'][1]['id_nota']}}"></td> --}}
                <td scope="col"><input type="number" min="0" max="20" class="form-control input-notas input-notas2" id="segundo_semestre" name="segundo_semestre[]" value="{{$item['notas'][0]['valor']}}" data-id-nota="{{$item['notas'][0]['id_nota']}}"></td>
                <td scope="col"><input type="number" min="0" max="20" class="form-control" id="mediaFinal" name="mediaFinal[]" value="{{$item['media']}}" readonly></td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        @endif
      </div>

      <center> <button type="button" class="btn btn-success m-1 "  onClick="window.location.reload()" > Calcular Média
          </button> </center>
    </form>
    <hr>
  </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 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{asset('assets/js/todo/todo.js')}}"></script>


<script>
  // Seleciona todos os inputs das notas com a classe 'input-notas'
  const inputsNotas = document.querySelectorAll('.input-notas');

  // Para cada input das notas, adiciona um event listener para o evento 'change'
  inputsNotas.forEach(inputNota => {
    inputNota.addEventListener('change', function(event) {
      const idNota = this.getAttribute('data-id-nota'); // Pega o id da nota pelo atributo 'data-id-nota'
      const valorNota = this.value; // Pega o valor atual da nota pelo atributo 'value'

      $.ajax({
        url: '/actualizar_nota_especifica/' + idNota,
        type: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          valor: valorNota
        },
        success: function(data) {
          console.log('Nota atualizada com sucesso!');
          toastr.success("Nota atualizada com sucesso");
        },
        error: function(xhr, textStatus, errorThrown) {
          console.error('Ocorreu um erro ao atualizar a nota:', errorThrown);
        }
      });

      // alert(`Nota ${idNota} alterada para ${valorNota}`); // Exibe um alerta com o id e o valor da nota alterada
    });
  });
</script>
<script>
  setTimeout(() => {
  document.location.reload();
}, 3000000);
</script>

<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;
          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_nota_por_turma/" + value;
  });
</script>




@endsection