@extends('layouts.app')

@section('conteudo')

<!-- Hero -->
<div class="bg-image" style="background-image: url(''); 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> Boletim
        </h1>
        @can('pode_visualizar_boletim')
        <a class="btn btn-primary my-2" href="/boletins">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Boletim</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

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

<div class="content">
  <!-- Elements -->
  <div class="block block-rounded caso">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Boletim</h3>
    </div>
    <div class="block-content">

      <div class="row">

        <div class="col-lg-12 space-y-6">

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

              <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->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>
              <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">
                <option value=""></option>
                  @foreach($turmas as $item)
                  <option>{{$item->descricao}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-2 col-sm-1 col-lg-1">
                <label class="form-label" for="example-select"></label>
                <span class="input-group-text border-0 bg-body">
                  <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
                </span>
              </div>

              <hr>
            </div>

          </form>

        </div>
      </div>
    </div>
  </div>
</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
<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 = "/registrar_boletim_por_turma/" + value;

    });

  });

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


@endsection