@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>Boletim</h1>
        {{-- só quem tem permissão para visualizar esta página --}}
        @can('pode_visualizar_boletim')


        <!-- Form Inline - Alternative Style -->
        <form action="/salvar_boletim" 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-control" id="select1" name="organizacao_id" disabled>
                        @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-control" id="select2" name="projeto_id" disabled>
                        @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-control" id="select3" name="turma_id" disabled>
                        @foreach($turmas as $item)
                        @if($item->situacao == 1)
                        <option {{$item->id == $turma->id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
                        @endif
                        @endforeach
                    </select>
                </div>
                <hr>




                <div class="block-content row">
                    @foreach($estudantes as $item)
                    <div class="block block-rounded col-12 col-sm-6 " style="width: 150px; float: left; margin-left: 20px; height: 200px;">
                        <div class="block-content block-content-full">
                            <div class="d-sm-flex" style="margin-left: -8px;">
                                <div class="ms-sm-2 me-sm-4 py-2 text-center" >
                                    <!-- <a class="item  bg-body-dark text-dark fs-2 mb-2 mx-auto" href="/app_visualizar_boletim_por_aluno/{{$item->id}}"> -->
                                        <img class="img-avatar img-avatar-thumb" src="{{$item->foto}}" alt="">
                                    <!-- </a> -->
                                    <a href="/app_visualizar_boletim_por_aluno/{{$item->estudante_id}}"><p style="width: 80px; font-size: 13px">{{$item->nome}}</p></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

            </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 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{asset('assets/js/todo/todo.js')}}"></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 = "/registrar_boletim_por_turma/" + value;
    });
</script>




@endsection